SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to fix this Navigation?

    Hi I'm creating a simple portfolio mobile template. The template only for educational purpose and to help increase my ideal knowledge in CSS and HTML5. I would love to provide a picture but since I'm always on the go I'm currently writing this through my iPad and they're is no way to provide one. Anyways I have this <HTML> element and inside I have the CSS all together. (Just in case yes I know about style sheet but for this specific project I want it all to be together but don't worry I'll separate it for you.)

    What I'm trying to achieve is a navigation of 3 sections. I want them to look better. I have created the base if what it should look like. How can I perfect them? Or is there something I did wrong or should fix? Also if your insisting on animation I'd love to hear your though however I stayed away from animation for this nav.

    Here the CSS

    Code:
    body{
    				margin:0;
    			}
    			#wrapper{
    			    width:314px;
                                height:600px;
                                border:5px solid black;
    			}
    			.nav{
    			    border:5px solid purple;
                                height:50px;
    			}
    			.nav ul{
                                height:40px;
                                border:5px solid green;
                                margin:0;
    			}
    			.nav li{
    			    display:inline;
                                border-left:1px solid red;
                                border-right:1px solid red;
                                border-bottom:1px solid red;
                                border-bottom-left-radius:10px;
                                border-bottom-right-radius:5px;
                                padding:0px 7px 10px 7px;
    			}
    			.nav li a{
    			    text-decoration:none;
                                color:blue;
    			}
    Here the HTMl code just in case
    Code:
    <!DOCTYPE html>
    <html>	
    	<head>
                  <meta charset="utf-8">
                  <title></title>
                  <link type="text/css" rel="stylesheet">
            </head>
        <body>
            <div id="wrapper">
                <nav class="nav">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">Portfolio</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </nav>
    		</div>	
    	</body>
    </html>

    My main concern is the CSS not the actual markup. Any help is appreciated, thanks.
    -Jonathan V.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You probably set the height o the container for illustration purposed but, just in case , I will say that its a bad idea to set heights on elements that you pan to contain text content. I wouldn't set a width either, remember your site will NOT only be viewed on iphones, and if this is part of a @media query you still dont want to end up painting yourself into a corner.

    As an AD, I often find that w/o know the specific of the project, client and target audience it is risk business to suggest aesthetics. But technically speaking you could employ CSS gradients and , some typography and text shadows to make yourself some simple, reusable and nice looking buttons to suit your taste.

    Examine this code:
    Code:
    			.nav li{
    			    display:inline-block;
                                border-bottom-left-radius:10px;
                                border-bottom-right-radius:5px;
                                padding:5px 7px 10px 7px;
                                -webkit-box-shadow:0 2px 1px -1px#000;
                                background:#7db9e8;
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
                                 
                                
                                
                                  			}
    			.nav li a{
    			    text-decoration:none;
                                color:#fff;
                                font-family:helvetica;
                                text-transform: uppercase  ;
                                font-size: 80%;
                                letter-spacing: 1px;
                                text-shadow:0 1px 0 #000;
    			}
    again this is just 'randomly' embellishing what you currently have, but I hope that helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    You probably set the height o the container for illustration purposed but, just in case , I will say that its a bad idea to set heights on elements that you pan to contain text content. I wouldn't set a width either, remember your site will NOT only be viewed on iphones, and if this is part of a @media query you still dont want to end up painting yourself into a corner.

    As an AD, I often find that w/o know the specific of the project, client and target audience it is risk business to suggest aesthetics. But technically speaking you could employ CSS gradients and , some typography and text shadows to make yourself some simple, reusable and nice looking buttons to suit your taste.

    Examine this code:
    Code:
    			.nav li{
    			    display:inline-block;
                                border-bottom-left-radius:10px;
                                border-bottom-right-radius:5px;
                                padding:5px 7px 10px 7px;
                                -webkit-box-shadow:0 2px 1px -1px#000;
                                background:#7db9e8;
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
                                 
                                
                                
                                  			}
    			.nav li a{
    			    text-decoration:none;
                                color:#fff;
                                font-family:helvetica;
                                text-transform: uppercase  ;
                                font-size: 80%;
                                letter-spacing: 1px;
                                text-shadow:0 1px 0 #000;
    			}
    again this is just 'randomly' embellishing what you currently have, but I hope that helps.

    Thank you for the explanation and great example, however I know bits here and there and I want to create a simple mobile web page about myself. I wanted to be a fixed width so that it fits precisely an iPhone 4 width screen. Intentionally I wanted the height to be 100% but if I'm right I changed it to be a fixed high only for this situation. Actually quick question is it possible to animate the navigation bar to we're you hover over them and they fall down let's say a few pixels per sec and then bounces back right up when clicker leaves the it. I'm asking more like a bouncy effect.

    Thank you for your time

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    fits precisely an iPhone 4 width screen
    Why? What would happen to users who visit your page but dont have an iPhone4?? ALSO what if you content doesn't fit in one screen of an iPhone ? You cant count on 'counting words' a peopel zoom and change preferences.

    Actually quick question is it possible to animate the navigation bar to we're you hover over them and they fall down let's say a few pixels per sec and then bounces back right up when clicker leaves the it. I'm asking more like a bouncy effect.
    yes. you can use .js for max support, but since you seem to be going for the latest-and greatest I would consider using: CSS3 transitions.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •