Jump to content
Unicris

horizontal navigation wrap

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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%;    } 

Share this post


Link to post
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.

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