Unicris Posted April 8, 2013 Share Posted April 8, 2013 Hey, So I have started styling some of my website I am working on. I am working on the navigation currently and managed to get the horizontal menu centered. Unfortunately, I need it to also drop to a new line when on a small window such as a smart phone. Currently the first couple of links show up while the rest disappear. Any ideas? ThanksI have the menu inserted with php include inside a div id="mainNav" the menu is <ul class="menu"> <li><a href="/index.php" target="_self"><span>Home</span></a></li> <li><a href="/career/index.php"><span>Career</span></a></li> <li><a href="/portfolio/index.php"><span>Portfolio</span></a></li> <li><a href="/fun/index.php"><span>Just For Fun</span></a></li> <li><a href="/contact/index.php"><span>Contact</span></a></li></ul> #mainNav {text-align: center;width: 100%;position: relative;overflow: hidden;background: url('/images/topMenuImages.png') repeat-x; .menu {margin: 0;padding: 0;height: 30px;background: url('/images/topMenuImages.png') repeat-x;left: 50%;clear: left;float: left;position: relative;}.menu li {padding: 0;margin: 0;list-style: none;display: block;float: left;position: relative;right: 50%;}.menu li a {float: left;padding-left: 15px;display: block;color: rgb(255,255,255);text-decoration: none;font: 12px Verdana, Arial, Helvetica, sans-serif;cursor: pointer;background: url('/images/topMenuImages.png') 0px -30px no-repeat;}.menu li a span {line-height: 30px;float: left;display: block;padding-right: 15px;background: url('/images/topMenuImages.png') 100% -30px no-repeat;}.menu li a:hover {background-position: 0px -60px;color: rgb(255,255,255);}.menu li a:hover span {background-position: 100% -60px;}.menu li a.active, .menu li a.active:hover {line-height: 30px;font: 12px Verdana, Arial, Helvetica, sans-serif;background: url('/images/topMenuImages.png') 0px -90px no-repeat;color: rgb(255,255,255);}.menu li a.active span, .menu li a.active:hover span {background: url('/images/topMenuImages.png') 100% -90px no-repeat;} in addition, in my header section I tried creating a background with a dark blue which I did fine, but when I then attempted to change the text to a white color, for some reason it is not allowing me to do so. I made a #Header h1 h2 { color:FFF;} yet nothing changed. I tried putting this style inside the include file for the header, and inside the external CSS, neither worked. The only thing that worked was when i did a style for the specific page. But since this needs to go through the entire site, this wont work. Any ideas what is preventing the style from showing up? Link to comment Share on other sites More sharing options...
newseed Posted April 8, 2013 Share Posted April 8, 2013 I have not time to really test your menu code but I am not sure why left: 50% and right: 50% are being used. Since you want the menu to drop down to the next line for smaller devices or screen size then the best result is less css than what you have now. I would change the display: block to use display: inline for starters. I will try to take a look at it later. As for h1 and h2 tags for the header you said: #Header h1 h2 { color:FFF;} which is incorrect. You css is basically saying "if h2 is contained with h1 and h1 is contained with #Header then give it a color of white". The correct css to give h1 and h2 the color of white is this: #Header h1, #Header h2 {color: #fff;} Now if you have not applied any color defaults to either the h1 or h2 tags then you can do it like this: #Header {color: #fff;} That will tell it to make all text contained within the #Header to be white. Now for the proper use of h1. You should never use an h1 tag for your header. Ideally it should be the title of the content you are presenting. h1 for describing you home page, then a h1 to describe your About Us page, and so on. Many times people will use h1 tags for their logo using a business name instead which really will not help you with SEO. Link to comment Share on other sites More sharing options...
Unicris Posted April 8, 2013 Author Share Posted April 8, 2013 Thanks, as far as the left/ right 50%, I'm not sure the logic behind it, but that is what I have seen several times in order to center the navigation bar. I changed all the display blocks to display inline, and that did not fix the issue.and thanks for clarifying the css syntax, I was never sure the correct way to do that. Though for some reason, even if I just do a #Header h1 adjustment, it is still not displaying correctly in dreamweaver. I haven't attempted to upload it to a server yet. But you'd think it would still display correctly considering everything else does.Either way, I suppose I need to design a header for the site. I'll add that to my to do list.Regarding the menu, I know there is code for an active state as well. right now I took the active class off the menu because it wasnt switching. What do I need to do to have the correct page displayed as active? Thanks Link to comment Share on other sites More sharing options...
newseed Posted April 8, 2013 Share Posted April 8, 2013 I would suggest you upload what you have on a server so we can take a look at it. Sometimes you could have a typo in your syntax or whatever. Also, if you like you can run it thru a validator to to verify your HTML and CSS. Link to comment Share on other sites More sharing options...
Unicris Posted April 9, 2013 Author Share Posted April 9, 2013 I have it on two temporary domains at the moment. the one with styling is the one I'm having trouble editing correctly. That is at this location http://christconnect.net76.net/ (I know the domain doesn't make sense, it was just an old project I was working on that I no longer have, and I needed a place to test my files. )My other version is at http://jonsonlineportfolio.site40.net Currently its navigation bar is set in a verticle alignment despite the fact it shows up horizontal in dreamweaver.Thanks.Also, while I am at it, what do i have to do to get notified when someone replys to this thread. I tried turning on some notifications but I'm not getting any. Perhaps I'm turning on the wrong ones. Link to comment Share on other sites More sharing options...
Unicris Posted April 9, 2013 Author Share Posted April 9, 2013 nevermind on the notification thing, i just found the button to follow the thread. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 9, 2013 Share Posted April 9, 2013 http://christconnect.net76.net/ remove overflow: hidden, and height restrictions #mainNav { background: url("/images/topMenuImages.png") repeat-x scroll 0 0 transparent; /*overflow: hidden; removed by dsonesuk */ position: relative; text-align: center; width: 100%;} .menu { background: url("/images/topMenuImages.png") repeat-x scroll 0 0 transparent; clear: left; float: left; /* height: 30px; removed by dsonesuk */ left: 50%; margin: 0; padding: 0; position: relative;} http://jonsonlineportfolio.site40.net/ has a extra closing bracket causing the next styling targetting the li and maybe others below it, not to be read correctly #mainNav ul{ clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center;}/* } removed by dsonesuk */#mainNav li{ display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } Link to comment Share on other sites More sharing options...
newseed Posted April 9, 2013 Share Posted April 9, 2013 dsonesuk beat me to the punch. He is correct on both counts. Link to comment Share on other sites More sharing options...
Unicris Posted April 9, 2013 Author Share Posted April 9, 2013 Thanks guys, that did the trick. I'll have to do some styling later, but this will work for now. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now