Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-28-2007, 09:09 AM   PM User | #1
t-buck
New Coder

 
Join Date: Sep 2007
Posts: 59
Thanks: 7
Thanked 0 Times in 0 Posts
t-buck is an unknown quantity at this point
Toolbar messed up in Opera And Padding Issues...

I have this site I'm working on:

http://www.nebrad.org

I just did the menu, and I want the orange color to connect with the main text box when you hover over it. I messed with the padding, until it reached the content box, but when I open the site in opera, it doesn't connect? And I'm assuming it isn't connected in IE either? Firefox and Safari display it fine. Any help?

My other question, has to do with padding. The words "Welcome" I wanted to add padding to the style of the words in the CSS. But every time I do that, it makes the box expand weirdly, even though, obviously a 10px padding, shouldn't push the right side of the box out? What am I doing wrong?
t-buck is offline   Reply With Quote
Old 10-28-2007, 10:48 AM   PM User | #2
Fang
Regular Coder

 
Join Date: Jun 2004
Posts: 495
Thanks: 0
Thanked 82 Times in 80 Posts
Fang is on a distinguished road
The html seems wrong. This would be more logical:
Code:
<div id="maincontent">
<p class="maincontentheader">Welcome</p>
</div>
Then add padding to .maincontentheader
Fang is offline   Reply With Quote
Users who have thanked Fang for this post:
t-buck (10-28-2007)
Old 10-28-2007, 08:45 PM   PM User | #3
t-buck
New Coder

 
Join Date: Sep 2007
Posts: 59
Thanks: 7
Thanked 0 Times in 0 Posts
t-buck is an unknown quantity at this point
That change in code fixed my one problem. Does anybody know why the toolbar won't connect to the orange box below it in Opera, but it will in safari and firefox?
t-buck is offline   Reply With Quote
Old 10-28-2007, 09:47 PM   PM User | #4
jlhaslip
Regular Coder

 
Join Date: Feb 2007
Location: Canada
Posts: 924
Thanks: 10
Thanked 56 Times in 55 Posts
jlhaslip is on a distinguished road
doesn't seem to connect for me using FF2, either, but Opera has a wider gap.
can't quite figure it either...

you might try eliminating all padding and margin from the page by inserting the following css rule:
Code:
* { margin: 0; padding:0; }
to see what happens.
jlhaslip is offline   Reply With Quote
Old 10-28-2007, 09:59 PM   PM User | #5
jlhaslip
Regular Coder

 
Join Date: Feb 2007
Location: Canada
Posts: 924
Thanks: 10
Thanked 56 Times in 55 Posts
jlhaslip is on a distinguished road
Code:
#maincontent{
position:absolute; left:137px; top:245px;width:609px; height:437px;z-index:1; visibility:visible; background-color:#f7f5e7;
}
and 
* { margin:0; padding:0; }
Mostly just the absolute positioning of the maincontent area needed to come up towards the menu.
Appears good in my Local copy. ff2.0.0.8, safari(win), IE7 and opera9.24
The horiz nav is a little different in several of them. Might need to tweak it a little.
jlhaslip is offline   Reply With Quote
Old 10-28-2007, 10:22 PM   PM User | #6
t-buck
New Coder

 
Join Date: Sep 2007
Posts: 59
Thanks: 7
Thanked 0 Times in 0 Posts
t-buck is an unknown quantity at this point
I changed that size on the top, but now in Opera it's completely messed up? I have no idea what happened now?
t-buck is offline   Reply With Quote
Old 10-28-2007, 10:55 PM   PM User | #7
jlhaslip
Regular Coder

 
Join Date: Feb 2007
Location: Canada
Posts: 924
Thanks: 10
Thanked 56 Times in 55 Posts
jlhaslip is on a distinguished road
Fortunately, i still have a copy of the file I was using. Try it.

Code:
body{
margin: 0px 0px;
color: #FFFFFF;
text-align:center;
background-color: #E7EBF1;
}

#container {
margin: 0px auto;
padding:0;
text-align:left;
width:1062px;
height:900px;
position:relative;


}

#headergraphic {position:absolute; left:0px; top:0px;width:1062px; height:215px;z-index:1; visibility:visible;}
#headerleft {position:absolute; left:0px; top:215px;width:137px; height:49px;z-index:2; visibility:visible;}
#headerright {position:absolute; left:746px; top:215px;width:316px; height:49px;z-index:4; visibility:visible;}

#maincontent{ 
position:absolute; left:137px; top:245px;width:609px; height:437px;z-index:1; visibility:visible; background-color:#f7f5e7;
}

.maincontentheader {
font-family:georgia;
font-size:24px;
color:#b6a623;
padding-left:40px;
padding-top:20px;


}

.maincontenttext {
font-family:arial;
font-size:12px;
color:#000000;
padding-left:40px;
padding-top:5px;
}

#menu {
position:absolute; left:137px; top:215px;width:609px; height:49px;z-index:1; visibility:visible; background-color:#FFFFFF;
}

#advertise {position:absolute; left:762px; top:280px;width:175px; height:176px;z-index:5; visibility:visible;
font-family:arial;
font-size:10px;
color:#254a7c;
background-color:#e7ebf1;
text-align:center;
padding-top:10px;
}
.ad {padding-bottom:20px;}

#infobox {position:absolute; left:762px; top:472px;width:175px; height:221px;z-index:1; visibility:visible;
background-color:#e7ebf1; text-align:center;}
.styleinfoboxheader{
font-family:arial;
font-size:18px;
color:#254a7c;
z-index:1;


}
.styleinfoboxtext{
font-family:arial;
font-size:12px;
color:#777777;

}

#contentbackground {
    position:absolute;
    left:87px;
    top:264px;
    width:900px;
    height:636px;
    
    background-color:#FFFFFF;
    
}


ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 13px; }

#navlist a:link, #navlist a:visited
{
color: #abaaaa;
background-color: #FFFFFF;
text-decoration: none;
font-family:arial;
font-size:12px;
font-weight:600;
}

#navlist a:hover
{
color: #b6a623;
background-color: #f7f5e7;
text-decoration: none;
padding-bottom:18px;
}
jlhaslip is offline   Reply With Quote
Old 10-29-2007, 01:19 AM   PM User | #8
t-buck
New Coder

 
Join Date: Sep 2007
Posts: 59
Thanks: 7
Thanked 0 Times in 0 Posts
t-buck is an unknown quantity at this point
Ok I got it to look correct in opera again. I changed the position of the maincontentbox, but then in firefox it makes the menu too close to the content box. I mean, it looks ok, you can see everything, but I wanted the items to be higher up from the content area? Any other idea on how to get this to look correct?
t-buck is offline   Reply With Quote
Old 10-29-2007, 01:33 AM   PM User | #9
jlhaslip
Regular Coder

 
Join Date: Feb 2007
Location: Canada
Posts: 924
Thanks: 10
Thanked 56 Times in 55 Posts
jlhaslip is on a distinguished road
That's too high.

FF2 has space under the links.

Also, the index page is missing the "Home" tab, which should show as class=current when you arrive at the Index page, to avoid the Navbar moving when you click a navbar item. Display all of them, all the time for a consistent look to the page.

Last edited by jlhaslip; 10-29-2007 at 01:40 AM..
jlhaslip is offline   Reply With Quote
Old 10-29-2007, 01:59 AM   PM User | #10
t-buck
New Coder

 
Join Date: Sep 2007
Posts: 59
Thanks: 7
Thanked 0 Times in 0 Posts
t-buck is an unknown quantity at this point
I fixed the Home button issue. Thanks for catching that.

But as far as the menu not reaching the content box. When I change the style sheet to what you recommended it makes the menu touch the content box, but it makes the buttons on my mac in firefox and safari very small. I wanted them to be bigger. Is there any way i can fix this, and still have them touch the content area?
t-buck is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:08 AM.


Advertisement
Log in to turn off these ads.