[General] Navigation Troubles
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..
Re: [General] Navigation Troubles
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?
Re: [General] Navigation Troubles
Thanks, but I don't really like "float".. Any other solutions?
Re: [General] Navigation Troubles
put them in a table and have a really wide column between them? haha :) not sure. i'm sure that'd work though.
Re: [General] Navigation Troubles
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>
Re: [General] Navigation Troubles
Quote:
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 :thumbup:
Re: [General] Navigation Troubles
Thanks a lot Spence!
---------- Post added at 08:21 AM ---------- Previous post was at 06:25 AM ----------
Okay Spence, I did what you said:
http://img692.imageshack.us/img692/8445/expla.jpg
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?
Re: [General] Navigation Troubles
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.
Re: [General] Navigation Troubles
dont use separate divs for navigation bg and images
use ul and li
Re: [General] Navigation Troubles
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 ;)
Re: [General] Navigation Troubles
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.
Re: [General] Navigation Troubles
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 ;)
Re: [General] Navigation Troubles
Spence, could you help me do this exact same thing again, but the images are in seperate DIVs this time, and not image links.
Re: [General] Navigation Troubles
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.
Re: [General] Navigation Troubles
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?)
