[General] Navigation Troubles

Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. 30-01-10 #1
    Mike
    Canadian Mike is offline
    MemberRank
    Dec 2007 Join Date
    Toronto, ONLocation
    2,747Posts

    [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..
    Reply With Quote Reply With Quote
  2. Check out our sponsor
    [General] Navigation Troubles
  3. 30-01-10 #2
    itjx3
    Valued Member itjx3 is offline
    MemberRank
    Jun 2009 Join Date
    USLocation
    125Posts

    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?
    Reply With Quote Reply With Quote
  4. 30-01-10 #3
    Mike
    Canadian Mike is offline
    MemberRank
    Dec 2007 Join Date
    Toronto, ONLocation
    2,747Posts

    Re: [General] Navigation Troubles

    Thanks, but I don't really like "float".. Any other solutions?
    Reply With Quote Reply With Quote
  5. 30-01-10 #4
    itjx3
    Valued Member itjx3 is offline
    MemberRank
    Jun 2009 Join Date
    USLocation
    125Posts

    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.
    Reply With Quote Reply With Quote
  6. 30-01-10 #5
    s-p-n
    :-) s-p-n is offline
    DeveloperRank
    Jun 2007 Join Date
    Next DoorLocation
    2,098Posts

    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>
    Last edited by s-p-n; 30-01-10 at 05:04 AM.
    Reply With Quote Reply With Quote
  7. 30-01-10 #6
    itjx3
    Valued Member itjx3 is offline
    MemberRank
    Jun 2009 Join Date
    USLocation
    125Posts

    Re: [General] Navigation Troubles

    Quote Originally Posted by s-p-n View Post
    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
    Reply With Quote Reply With Quote
  8. 30-01-10 #7
    Mike
    Canadian Mike is offline
    MemberRank
    Dec 2007 Join Date
    Toronto, ONLocation
    2,747Posts

    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:



    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?
    Reply With Quote Reply With Quote
  9. 30-01-10 #8
    Brandan
    Enthusiast Brandan is offline
    MemberRank
    Mar 2009 Join Date
    40Posts

    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.
    Reply With Quote Reply With Quote
  10. 30-01-10 #9
    heartbeat
    Pika? PIKA?!?! heartbeat is offline
    MemberRank
    Sep 2009 Join Date
    United KingdomLocation
    309Posts

    Re: [General] Navigation Troubles

    dont use separate divs for navigation bg and images
    use ul and li
    Reply With Quote Reply With Quote
  11. 30-01-10 #10
    s-p-n
    :-) s-p-n is offline
    DeveloperRank
    Jun 2007 Join Date
    Next DoorLocation
    2,098Posts

    Showoff 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 ;)
    Reply With Quote Reply With Quote
  12. 30-01-10 #11
    Mike
    Canadian Mike is offline
    MemberRank
    Dec 2007 Join Date
    Toronto, ONLocation
    2,747Posts

    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.
    Reply With Quote Reply With Quote
  13. 01-02-10 #12
    s-p-n
    :-) s-p-n is offline
    DeveloperRank
    Jun 2007 Join Date
    Next DoorLocation
    2,098Posts

    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 ;)
    Last edited by s-p-n; 01-02-10 at 05:39 AM.
    Reply With Quote Reply With Quote
  14. 06-03-10 #13
    Mike
    Canadian Mike is offline
    MemberRank
    Dec 2007 Join Date
    Toronto, ONLocation
    2,747Posts

    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.
    Reply With Quote Reply With Quote
  15. 06-03-10 #14
    EliteGM
    The Gamma..? EliteGM is offline
    MemberRank
    Jul 2006 Join Date
    NandolandLocation
    4,078Posts

    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.
    Reply With Quote Reply With Quote
  16. 06-03-10 #15
    s-p-n
    :-) s-p-n is offline
    DeveloperRank
    Jun 2007 Join Date
    Next DoorLocation
    2,098Posts

    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?)
    Reply With Quote Reply With Quote


Page 1 of 2 12 LastLast
« Previous Thread | Next Thread »

Advertisement