How to fix this Navigation?

HTML & CSS
1

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


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


<!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

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:


			.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

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 :slight_smile:

4

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.