[General] Navigation Troubles

**Mike** · 30-01-10

I have a bunch of images, and here's how I'd like them to look (in the navigation bar).

http://trasion.com/images/misc/example.png

I want to make that. So below, I have a bunch of images:

http://trasion.com/images/misc/navigation.png
http://trasion.com/images/misc/navigation_name.png
http://trasion.com/images/misc/navigation_homepage.png
http://trasion.com/images/misc/navigation_community.png
http://trasion.com/images/misc/navigation_fanclubs.png
http://trasion.com/images/misc/navigation_contact.png

Could someone help me out with making it? I want the background image to go across 100%, and then a box inside it, where the title image is aligned far left, and the others far right (box must be 900px wide).

I keep trying it, but messing up somehow..

**MentaL**

**itjx3** · 30-01-10

Try having them defined as two different things in CSS? the "trasion" picture float left, and the others are part of a class that float right?

**Mike** · 30-01-10

Thanks, but I don't really like "float".. Any other solutions?

**itjx3** · 30-01-10

put them in a table and have a really wide column between them? haha :) not sure. i'm sure that'd work though.

**s-p-n** · 30-01-10

use float! That's how it's done with DIVs..

Code:

<div id="whole_thing">
  <div id="top">
    <div id="top-left">
    </div>
    <div id="top-right" style="float:right">
    </div>
  </div>
  <div id="the-rest">
  </div>
</div>

**itjx3** · 30-01-10

Originally Posted by s-p-n

use float! That's how it's done with DIVs..

Code:

<div id="whole_thing">
  <div id="top">
    <div id="top-left">
    </div>
    <div id="top-right" style="float:right">
    </div>
  </div>
  <div id="the-rest">
  </div>
</div>

What he said.
This is what I meant. Thanks for clarifying I'm too tired to have done that

**Mike** · 30-01-10

Thanks a lot Spence!

---------- Post added at 08:21 AM ---------- Previous post was at 06:25 AM ----------

Okay Spence, I did what you said:

I just edited it a bit. But the right part is lower than the rest (it did this even before I edited the code).

CSS:

Code:

.navigation {
background: #5C7099 url(images/misc/navigation.png) repeat-x top left;
}

.navigation_images {
width:1000px;
margin-left: auto;
margin-right: auto;
}

header:

Code:

<div class="navigation">
   <div class="navigation_images">
    <div class="top-left">
<img src="images/misc/navigation_name.png">
    </div>
    <div class="top-right" style="float:right;">
<img src="images/misc/navigation_homepage.png">
<img src="images/misc/navigation_community.png">
<img src="images/misc/navigation_fanclubs.png">
<img src="images/misc/navigation_contact.png">
    </div>
  </div>
</div>

How do I align the right part on the same line?

**Brandan** · 30-01-10

create a new div with the trasion header as the background image, then put those images on it, make the margin left of the first one about 50% (that would depend on how large you make the div, but thats my guess), and then float the others left against it with some margin-left in between them.

css can be fiddly to get things to sit how you want them to.

**heartbeat** · 30-01-10

dont use separate divs for navigation bg and images
use ul and li

**s-p-n** · 30-01-10

This explains allot of misunderstandings with the CSS float property:
http://www.smashingmagazine.com/2007...u-should-know/

That's a very good article. That's what the float property is all about, and it even explains some bugs in IE browsers.

Code:

<html>
<head>
<style type="text/css">
.navigation {
	position:relative;
	background: #5C7099;
	float:left;
	left:75px;
	height:75px;
	border:black solid 1px;
}

.navigation_images {
	width:1000px;
	margin-left: 25px;
	margin-right: 50px;
}

.bigger_img {
	width:150px;
	height:75px;
	border:black solid 1px;
	background:#FFFF00;
	float:left;
}

.img {
	width:75px;
	height:75px;
	border:black solid 1px;
	background:#FFFFCC;
	float:left;
}

.top-left {
	float:none;
}

.top-right {
	float:right;
}

.clear {
	clear:both;
}
.mainBody {
	position:relative;
	left:120px;
}
.middle {
	height:500px;
	width:750px;
	background:#999;
	margin:10px;
	float:left;
	border:black solid 1px;
}

.sidebar {
	height:500px;
	width:170px;
	margin:10px;
	background:#CCC;
	float:left;
	border:black solid 1px;
}

.footer {
	position:relative;
	width:1000px;
	height:75px;
	background:#eee;
	left:100px;
	border:black solid 1px;
}
</style>
</head>
<body>

<div class="navigation">
  <div class="navigation_images">
    <div class="top-left">
		<div class="bigger_img">head</div>
    </div>
    <div class="top-right">
		<div class="img">im1</div>
		<div class="img">im2</div>
		<div class="img">im3</div>
		<div class="img">im4</div>
    </div>
  </div>
</div>

<div class="clear"></div>

<div class="mainBody">
	<div class="middle">
	</div>
	<div class="sidebar">
	</div>
</div>

<div class="clear"></div>

<div class="footer">
</div>

</body>
</html>

I got this test page to look somewhat like your example. Hope you can work with it ;)

**Mike** · 30-01-10

Wow, thanks a lot Spence, and great article!

I needed to change a few values in your code, but in general, it worked a charm!

Thanks a lot man.

---------- Post added at 11:44 AM ---------- Previous post was at 10:51 AM ----------

Aye Spence, with the two boxes below that you made, how do I make them centered? I don't want the "left=120px" crap, I want it to be completely centered.

**s-p-n** · 01-02-10

Ah, looking at it.. hold on

Code:

<html>
<head>
<style type="text/css">
.navigation {
	width:1000px;
	position:relative;
	background: #5C7099;
	margin-left:auto;
	margin-right:auto;
	height:75px;
	border:black solid 1px;
}

.navigation_images {
	margin-left: 25px;
	margin-right: 50px;
}

.bigger_img {
	width:150px;
	height:75px;
	border:black solid 1px;
	background:#FFFF00;
	float:left;
}

.img {
	width:75px;
	height:75px;
	border:black solid 1px;
	background:#FFFFCC;
	float:left;
}

.top-left {
	float:none;
}

.top-right {
	float:right;
}

.clear {
	clear:both;
	width:0px;
	height:0px;
}
.mainBody {
	width:1000px;
	height:650px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}
.middle {
	height:inherit;
	width:75%;
	background:#999;
	margin:1%;
	float:left;
	border:black solid 1px;
}

.sidebar {
	height:inherit;
	width:20%;
	margin:1%;
	background:#CCC;
	float:left;
	border:black solid 1px;
}

.footer {
	position:relative;
	width:1000px;
	height:75px;
	background:#eee;
	margin-left:auto;
	margin-right:auto;
	border:black solid 1px;
}
</style>
</head>
<body>

<div class="navigation">
  <div class="navigation_images">
	<div class="top-left">
		<div class="bigger_img">head</div>
	</div>
	<div class="top-right">
		<div class="img">im1</div>
		<div class="img">im2</div>
		<div class="img">im3</div>
		<div class="img">im4</div>
	</div>
  </div>
</div>
<div class="clear"></div>

<div class="mainBody">
	<div class="middle">
	</div>
	<div class="sidebar">
	</div>
</div>

<div class="clear"></div>

<div class="footer">
</div>
</body>
</html>

You can use "margin-left:auto; margin-right:auto;" to center DIVs, so long as you define a width. You should adjust the height on the mainbody as needed, or just take it out (the height property on mainBody) and put content in the boxes ;)

**Mike** · 06-03-10

Spence, could you help me do this exact same thing again, but the images are in seperate DIVs this time, and not image links.

**EliteGM** · 06-03-10

One small tiny off-topic hint: preload your mouse-over images. Else the first time you visit the website and mouse-over they will show as white because they aren't loaded yet.
IIRC you can use JS for this.

**s-p-n** · 06-03-10

I'm confused, but I think you can solve it by switching this pattern,

Code:

		<div class="img">im1</div>
		<div class="img">im2</div>
		<div class="img">im3</div>
		<div class="img">im4</div>

.. With this pattern,

Code:

		<div class="img im1"></div>
		<div class="img im2"></div>
		<div class="img im3"></div>
		<div class="img im4"></div>

Because you can stack classes, it's not much difference. You're saying you have the images stored as a bg property in a CSS class, right? (instead of inside the div as <img> tag?)

**Mike** · 07-03-10

Originally Posted by s-p-n

I'm confused, but I think you can solve it by switching this pattern,

Code:

        <div class="img">im1</div>
        <div class="img">im2</div>
        <div class="img">im3</div>
        <div class="img">im4</div>

.. With this pattern,

Code:

        <div class="img im1"></div>
        <div class="img im2"></div>
        <div class="img im3"></div>
        <div class="img im4"></div>

Because you can stack classes, it's not much difference. You're saying you have the images stored as a bg property in a CSS class, right? (instead of inside the div as <img> tag?)

Yes. But I don't really understand what you're saying to do?

**s-p-n** · 07-03-10

You can just make a class for each image and assign it to a div. Optionally, you can have a global "img_nav" class that's assigned to all of the nav image divs. That way if you tinker with the sizes and positioning, you can do it in the main image_nav class and they'll always be relatively the same.

For example,

Code:

<div class="img_nav image_home"></div>

Where img_nav handles the positioning and float properties, and image_home contains a background image for the "home" link. Then for the other links,

Code:

<div class="img_nav image_etc"></div>

See what I mean?

Though it's always best to use mark-up for navigation, (given not all browsers support JavaScript; cell phones, hand-helds, etc), you can use:

Code:

onclick="top.location.href='location.html'"

If you can, use the <a> tag with navigation instead for compatibility reasons.

It's kind of better to use <img> tags just so you can wrap it in a link tag. Though it's not as efficient, it always works. (unlike JavaScript)

Edit: You cannot wrap block elements with inline elements. So you can't wrap a <div> with an <a> tag, (because <a> is an inline element; meant to stylize/apply mark-up to text-like elements, and <div> is a block element, which can hold any kind of element, more/less) Since the <img> tag is an inline element (built to be placed with/around other inline elements and text), it obviously works, but that's why. So think of an inline "container" element to replace the DIV, like the span tag. Not sure how IE handles it, but technically you should be able to wrap <a> tags around the inline span tag. So if you assign those classes to a span tag instead of a DIV like I showed above, it might actually work.

For IE, it's probably safest to test it first, and if it fails, use style="display:inline". If that fails, then try it in Firefox. If that fails, I must be confused on how inline elements interact with each-other.

The goal would be to assign an <a> tag to each container which holds the classes for your navigation images, so you don't have to use slow, bulky <img> tags.

**Mike** · 07-03-10

Okay, I fixed it. I just changed the <div> tags, to <img> tags. How can I now make it so when hovering it, it changes the image URL to ad an "h" on the end? (So 'images/navigation_homepage.png' changes to 'images/navigation_homepageh.png')

**s-p-n** · 08-03-10

You'd actually want to do pre-loading first,
http://www.pageresource.com/jscript/jpreload.htm

Followed by some "Hot Hover action,"
http://www.pageresource.com/jscript/jhover.htm

[General] Navigation Troubles

Thread Tools

[General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Re: [General] Navigation Troubles

Advertisement