[General] Navigation Troubles

Results 1 to 19 of 19
  1. #1
    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..


  2. #2
    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?

  3. #3
    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?

  4. #4
    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.

  5. #5
    :-) 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.

  6. #6
    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

  7. #7
    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?

  8. #8
    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.

  9. #9
    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

  10. #10
    :-) 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 ;)

  11. #11
    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.

  12. #12
    :-) 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.

  13. #13
    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.

  14. #14
    The Gamma..? EliteGM is offline
    MemberRank
    Jul 2006 Join Date
    NandolandLocation
    4,077Posts

    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.

  15. #15
    :-) 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?)

  16. #16
    Canadian Mike is offline
    MemberRank
    Dec 2007 Join Date
    Toronto, ONLocation
    2,747Posts

    Re: [General] Navigation Troubles

    Quote Originally Posted by s-p-n View Post
    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?

  17. #17
    :-) s-p-n is offline
    DeveloperRank
    Jun 2007 Join Date
    Next DoorLocation
    2,098Posts

    Re: [General] Navigation Troubles

    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.
    Last edited by s-p-n; 07-03-10 at 08:58 PM.

  18. #18
    Canadian Mike is offline
    MemberRank
    Dec 2007 Join Date
    Toronto, ONLocation
    2,747Posts

    Re: [General] Navigation Troubles

    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')

  19. #19
    :-) s-p-n is offline
    DeveloperRank
    Jun 2007 Join Date
    Next DoorLocation
    2,098Posts

    Re: [General] Navigation Troubles

    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



Advertisement