Jump to content

Another navigation problem


gffects

Recommended Posts

Hey people no idea what it is with me and navigations but the hate me lol.

 

Ok heres the thing I am going to competing in the worldskills uk on june the 1st and I plan on winning with this design, the site consists of 3 parts pc screen,ipad screen and phone screen using the @media code now i have managed everything so far except when the page is set to phone size the nav bar has got a margin from the left so its not fitting the entire screen as I want it. Im sure theres an easy mistake somewhere as usual but your help would be awesome can't work it out.

 

heres the css:

 

@charset "utf-8";

/* CSS Document */

li{display:inline;list-style:none;}

body{width:auto;padding:10px;}

#wrapper{position:relative;max-width:1000px; margin:0px auto;background:#252525;}

#header{position:relative;height:175px;background:#009;}

#logo{width:180px;height:105px;position:absolute;top:45px; left:45px;background:#0F3;display:block}

#content{padding:20px;background:#333;overflow:hidden;}

#content_container_left{width:70%;float:left;background:#930;}

#content_container_right{width:30%;float:left;background:#9C0;}

#advert{background:#099;height:175px;}

#caption{background:#666;}

#navigation{ position: absolute; top: 77px; right: 20px; text-align: right;background:#F66;}

#navigation a{padding: 7px 20px 7px 20px;text-decoration: none;}

#footer{height:75px;background:#966;}

@media screen and (min-width: 150px) and (max-width: 500px)

{

#header{height:50px;}

#logo{top:3px;left:25px;height:38px;width:127px;}

#content_container_left{width:inherit;float:none;}

#content_container_right{width:inherit;float:none;}

#navigation{position:inherit;width:100%;display:block;padding: 15px 0px 1px 0px;text-align: left;}

#navigation a{padding: 7px 10px 7px 10px;display: block;margin: 10px auto;;background:#CCC;}

#advert{height:100px;}}

@media screen and (min-width: 501px) and (max-width: 800px) {

#header{height:90px;}

#logo{top:20px;left:25px;width:90px;height:55px;}

#navigation{top:30px;}

#advert{height:150px}

}

 

and a screenie of the problem:

post-42777-024180900 1337700549_thumb.jpg

Edited by gffects
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...