...

View Full Version : Big gap on menu due to side divs



NeoPuma
12-30-2007, 08:32 PM
Hey,
I've placed two divs in and placed them by the the main logo and the content div using relative positioning. This works fine in IE, but in FF, it seems to create a big gap at the start of the menu. I was wondering if someone could help me please, cause I really don't know how to solve this.

http://gamespecies.co.uk/new/

Thanks

Excavator
12-30-2007, 09:37 PM
Hello NeoPuma,
Valid CSS and markup!! Yay:thumbsup:
That doesn't mean it works though...
I thought sure it was your onMouse stuff that was scooting it over but when I do this:

<div id="nav_bar">
<a href>
<img src="images/nav_buttons/home_1.jpg" /></a>

<a href><img src="images/nav_buttons/cheats_1.jpg" /></a>

<a href><img src="images/nav_buttons/reviews_1.jpg" /></a>

<a href><img src="images/nav_buttons/releases_1.jpg" /></a>

<a href><img src="images/nav_buttons/downloads_1.jpg" /></a>
</div>

No change in FF...



But, when you pull out your relative postioned header images it centers.
Delete these for a bit and try it:

#left_banner {
width: 150px;
position: relative;
left: -150px;
top: -180px;
text-align: left;
float: left;
height: 280px;
}
#right_banner {
width: 150px;
position: relative;
left: 700px;
top: -180px;
text-align: left;
float: left;
height: 280px;
}

So try this instead:
#left_banner {
width: 150px;
margin: -180px 0 0 -150px;
text-align: left;
float: left;
height: 280px;
}
#right_banner {
width: 150px;
margin: -180px 0 0 850px;
text-align: left;
float: left;
height: 280px;
}

#header {
height: 180px;
width: 850px;
}
#nav_bar {
height: 20px;
width: 850px;
margin: -1px 0 0 0;
background-image: url(images/nav_bar.jpg);
text-align: center;
}


And, of course, a better way to do it all.

Put the 3 header images back together and center it as the body background

Then, use CSS for your rollovers (http://nopeople.com/CSS/2state%20CSS%20navbar/) instead of onMouse. (look at the images that do that)That would have the added benefit of taking out the pause when you hover over a button - while it's downloading the hovered image.


Another CSS rollover example (http://nopeople.com/CSS/CSS_rollover/)

NeoPuma
12-30-2007, 09:49 PM
Mate, you're a star!

Thank-you very much! :)

Excavator
12-30-2007, 09:56 PM
Notice the top border is gone on #nav_bar when your page is viewed with FF now.
koyama is the bug hunter and I'm sure he would know what bug is causing this... I would guess uncolapsing margins (google that) but I'm not sure. Take out the -1px and you can see the menu drops much more than 1px.

I still say my last solution is the best.

NeoPuma
12-31-2007, 12:33 AM
Thanks, all sorted now. Although, with those images:

Then, use CSS for your rollovers instead of onMouse. (look at the images that do that)That would have the added benefit of taking out the pause when you hover over a button - while it's downloading the hovered image.
I've had a look at the links you've sent me, tried to potch around a bit, and haven't really got very far. Was wondering if you could point me in the right direction please?

Thanks in advance

Excavator
12-31-2007, 01:25 AM
Hello NeoPuma,
Hope this helps, I'm running out of time today.
It looks? like you're on the right track with

#nav_1 a {
background-image: url(images/01home.jpg);
background-position: top;
}
#nav_1 a:hover {
background-image: url(images/01home.jpg);
background-position: bottom;
}

but you need to make your button images like this: http://nopeople.com/webfiles/home.jpg so there is a top and a bottom to show.

NeoPuma
12-31-2007, 01:41 AM
Mate, I'm grateful for your help, regardless how long you take to answer.
I now have:


#nav_1 {
background: url(images/nav_buttons/home.jpg) top;
height: 20px;
width: 90px;
}
#nav_1 a {
background-image: url(images/nav_buttons/home.jpg);
background-position: top;
}
#nav_1 a:hover {
background-image: url(images/nav_buttons/home.jpg);
background-position: bottom;
}

And the following HTML to go with it - as based on the examples you gave me:

<div id="nav_1">
<a href="?p=home"></a>
</div>

The problem I'm having now is the images don't change on roll-over, and there's no link to go with them (you can't click them).
[edit]: They're not center either. Is there a way of doing it without using the <center> tag? text-align: center; doesn't seem to be working here.

Also done as you said:
http://gamespecies.co.uk/new/images/nav_buttons/home.jpg

Really appreciate this. Thanks

Apostropartheid
12-31-2007, 01:59 AM
That's an interesting way of doing it. Now why didn't I think of that?

If you were an optimization zombie you would make it all into one big image and using background-position to do the same thing =P

Unfortunately he missed something. Let's try again :D

#nav_1 {
height: 20px;
width: 90px;
}
#nav_1 a {
display: block;
height: 20px;
width: 90px;
background: #000 url(images/nav_buttons/home.jpg) bottom left;
}
#nav_1 a:hover {
background-position: bottom;
}

And the markup

<div id="nav_1">
<a href="?p=home" title="Home">Home</a>
</div>

I'm sure you'll find a way to make it accessible.

Excavator
12-31-2007, 05:09 AM
CyanLight has it.
If you follow my example you end up with

/* Navigation Buttons */
#nav_1 {
background: url(images/nav_buttons/home.jpg) top;
margin: 0 0 0 150px; /*adjust as needed*/
height: 20px;
width: 90px;
float: left;
}
#nav_1 a:hover {
background: url(images/nav_buttons/home.jpg) bottom;
display: block;
height: 20px;
width: 90px;
}
#nav_1 a {
background: url(images/nav_buttons/home.jpg);
display: block;
height: 20px;
width: 90px;
}

but CyanLight has trimmed that down nicely.
I did throw in some margin to move the buttons over a bit.

p.s. <center> tag is deprecated now. A stricter DocType would not allow it. Better you wrap your site in a container div and center that with margin: 0 auto;

NeoPuma
12-31-2007, 02:00 PM
Thank-you so much! You do learn something new everyday :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum