Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member abiosis's Avatar
    Join Date
    Jul 2012
    Posts
    3
    Member #
    32271

    I want to create this navigation bar. The home button is the sort of hover/rollover state I want to achieve with additional transition effects however I am struggling to find a way to achieve this. I'm also struggling with positioning my icons the way I want them to because what I've done is that I've split them up into two sections. How will I place my image there? Should I place it as a list item or just by itself as an image then positioning it using a singular div?

    At the moment it looks like this:



    Could I get some suggestions on how I should approach this?

    Here's the HTML code:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>My Portfolio Website</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/home.css" />
    </head>
    <body>
    <div id="container">
    <nav>
    <ul id="nav_left">
    <li><a href="#"><img src="images/home_icon.png" alt="home" />home</a></li>
    <li><a href="#"><img src="images/about_icon.png" alt="about" />about me</a></li>
    </ul>
    
    <ul id="nav_right">
    <li><a href="#"><img src="images/portfolio_icon.png" alt="portfolio" />portfolio</a></li>
    <li><a href="#"><img src="images/contact_icon.png" alt="contact" />contact</a></li>
    </ul>
    </nav>
    
    <article>
    <section>Hi my name is</section>
    <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam velit ac urna luctus non tincidunt felis rutrum. Morbi tempor elementum ante, quis suscipit massa venenatis a. Nulla facilisi. Aliquam erat volutpat. Aliquam luctus tempor risus eu elementum. </section>
    <div id="divider"></div>
    <section></section>
    </article>
    <footer><p>&#169; All Rights Reserved</p></footer>
    </div>
    </body>
    </html>
    The CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    }
    
    body {
    background: url(../images/body_bg.jpg);
    background-repeat: repeat;
    
    }
    
    #container {
    min-height: 100%;
    position:relative;
    }
    
    nav {
    position:relative;
    width: 100%;
    float:left;
    margin: 0 auto;
    padding: 0;
    background-color: #363636;
    }
    
    nav ul {
    list-style:none;
    display:inline;
    }
    
    nav li {
    display:inline;
    float:left;
    color:white;
    padding: 1% 1% 1% 1%;
    margin: 10px 0px 0px 40px;
    font-size: 1.5em;
    font-variant: small-caps;
    font-family:Verdana, Geneva, sans-serif;
    }
    
    nav li a {
    display:block;
    text-decoration: none;
    color: white;
    text-align:center;
    }
    
    nav li a:hover {
    color:#5c747b;
    
    }
    
    nav li img {
    display: block;
    
    }
    
    nav li a:hover img {
    background-image: url(../images/hover_icon.png);
    background-position: center;
    background-repeat: no-repeat;
    }
    
    nav ul#nav_left {
    margin-left: 1%;
    }
    
    nav ul#nav_right {
    margin-left: 60%;
    }
    
    footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #363636;
    }
    
    footer p {
    color: white;
    }

  2.  

  3. #2
    Junior Member
    Join Date
    Jul 2012
    Posts
    6
    Member #
    32272
    you dont want your nav_left to float:left - that makes the container float left as your see. its the list items or <li> that should be float:left so they sit beside each other. Or you could use display: inline but i believe old IE has issues with that.

    Or you could position the nav as relative and position the buttons using absolute positioning

  4. #3
    Junior Member abiosis's Avatar
    Join Date
    Jul 2012
    Posts
    3
    Member #
    32271
    Quote Originally Posted by BillyG, post: 239022
    you dont want your nav_left to float:left - that makes the container float left as your see. its the list items or <li> that should be float:left so they sit beside each other. Or you could use display: inline but i believe old IE has issues with that.

    Or you could position the nav as relative and position the buttons using absolute positioning
    Thanks for the clarification!
    However the issue with absolute positioning for me is that when I view my website in different resolutions the button and the text (home,about etc.) adjusts which messes up the alignment

  5. #4
    Junior Member
    Join Date
    Jul 2012
    Posts
    6
    Member #
    32272
    float the list items left style then individual elements inside of it to suit

    <li><a href="#"><img src="images/home_button.png"><p>home</p></a></li>

    you can style <li> <a> <img> and <p> individually to get the best fit to suit your design

  6. #5
    Member
    Join Date
    Jun 2012
    Location
    Posts
    33
    Member #
    31990
    Liked
    3 times
    Do not put <p> tags inside your <li>!!!

  7. #6
    Junior Member
    Join Date
    Jul 2012
    Posts
    6
    Member #
    32272
    no? bad semantics? I used it for a tricky wee display on my site and it worked well


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com