|
CSS - Such Thing As 100% Width Horizontal Navbar With Only Css?
new to the world of css and now working on a shell for a website I'm doing.
here is the css PHP Code: html, body{ margin:0; padding:0; } h1, h2, h3, h4, h5, h6 { color: #bf9060; } img { padding-bottom: 2px; } #pagewidth{ width:100%; min-width: 500px; } #header{ height:88px; width:100%; background:#ccae8f; background-image: url("/images/pillowback3.jpg"); background-repeat: repeat-x; } #navcontainer { margin: 0; padding: 0; height: 25px; width: 100%; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #ffffff; width: 125px; height: 18px; border: 1px solid #ccae8f; padding: 0; margin: 0; color: #000000; text-decoration: none; display: block; text-align: center; font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #ffffff; background: #806c59; } #navcontainer a:active { background: #806c59; color: #ffffff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } and the list PHP Code: <div id="navcontainer"> <ul id="navlist"> <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li> <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li> <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li> <li><a href="/products/index.php" title="See our full line of Products">Products</a></li> <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li> <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li> </ul> </div> as you can see i'm using px to style the size of the elements, but that isn't very liquid Similar Tutorialswww. cooperworkskilns.com The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it. This isn't working in IE. Lol, its created a rather interesting stairstep effect. Is there a way to make it span evenly across the page without adjusting the width of each <li>? Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line. #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { margin: 0 0 0 0; } #navbar a { float:left; display: block; text-align:center; color: #000; background-color: #FFF; width: 9em; padding: .2em .8em; text-decoration: none; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } #navbar a:hover { background-color: #003366; color: #FFF; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } I'm currently trying to convert my javascript rollover buttons (based out of generic DW code, ewww!) to CSS/Unordered List based nav. Here's the original site design template: http://www.ipfwcommunicator.org/story.php?id=16 If you look at the top, you can see that there is are a series of bitmaps that get switched with alternates on rollover. That is what I'm trying to reproduce he http://www.ipfwcommunicator.org/story_dnav.php?id=16 In this second template, the same page (essentially) is drawn via CSS and an unordered list. The inspiration for this comes from a list apart. Here are the things I'm struggling with: 1. MSIE5 (Mac) and possibly windows versions, are drawing each "button" list-item as the full width of the screen. They should be the width of the text + the 14px padding on right/left. 2. Vertical centering. I know this is a touchy issue with CSS... not really possible, I've heard from some. Regardless, if anyone has any ideas, I would like the text to appear vertically centered in the navbar area. The full CSS is viewable he http://www.ipfwcommunicator.org/css/style.css The area of interest is #navbar (the div that blocks out a 23px tall bar across the entire viewport) and #menu and it's subitems (the IDs that describe the function of the list) Note this list is intended to be dynamic. Once the PHP is written, these line items will appear dynamically depending on whether each issue has the given section (some issues may not have a "features" link, and thus it will not appear). However, for design continuity, I would like the nav bar to extend across the entire width of the viewport regardless. Any help would be greatly appreciated. This project was essentially done and then the client changed the whitepaper last minute. Thanks! Arg, I want a simple, yet clean and cool looking navbar. I am using a modified style from oswd.org and it has something like this: (solid line) ------------|Linkone|----|Linktwo|----|Linkthree|---------- like that with boxes around the links. I like it but if I add to many links and then view it with a very small resolution it doesn't look so good. It all splits up onto different lines and there is still only one solid line. I know a good bit about CSS so what do you think I should try? Tabs? Just a plain old simple line of lines that have color and stuff? Hi guys I'm having trouble trying to convert a CSS navbar, which renders vertically, into an horizontal navbar. Look, here is the HTML Code, and following, the CSS code Code: <div id="menutoolbar">
<ul>
<li><a href="link1.html">Opcion1</a></li>
<li><a href="link2.html">Opcion2</a></li>
<li><a href="link3.html">Opcion3</a></li>
</ul>
</div>
The CSS Code Code: div#menutoolbar {
height: auto;
width: auto;
}
div#menutoolbar li {
height: 21px;
width: 32px;
margin: 0px;
font-family: Tahoma;
font-size: small;
text-align: center;
line-height: 65px;
list-style-type: none;
background-image: url(http://alf.openu.ac.il/www_eng/icon/button.gif);
background-position: center top;
background-repeat: no-repeat;
}
div#menutoolbar li a {
font-weight: bold;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
div#menutoolbar li a:link {
color: blue:
}
div#menutoolbar li a:visited {
color: #900;
}
div#menutoolbar li a:hover {
font-weight: bold;
color: red;
}
div#menutoolbar li a:active {
color: black;
}
Does any1 know which code I have to modify to transform this vertical toolbar into horizontal ? Or maybe to point me to an easy example for doing an horizontal set of css buttons like this example... Thanks... Ok I guess this is a pretty tough for someone who knows layout using tables very well, but is pretty much clueless doing layout with css. I have a graphic header that needs to have a width of 100% and a height 90px.. It is made from an image that is split into 3 sections. The left slice is the logo fixed width 204px. The middle slice is really just background: #10301B and the right side is 185px. So far I have this and it seems to work ok... CSS: #headcontainer { position:absolute; width: 100%; height: 90px; background-color: #10301B; margin: 0; padding: 0; top: 0px; } #headleft { float: left; position:absolute; width: 204px; left: 0px; } #headright { position:absolute; width: 185px; right: 0px; float: right; margin: 0; } HTML <div id="headcontainer"> <div id="headleft"><img src="header_left.jpg"> </div> <div id="headright"><img src="header_right.jpg"> </div> </div> The problem for me now is that I want a horizontal navbar that resizes like the header above it and I dont know how to do this lol.... lets call the source image navbar.jpg and it is 29px in height. Where do I go from here?? If I call what I have (the resizable header) row 1... then the navbar is row 2... and I dont know how to start row 2 . Ive attached a jpeg of what the layout needs to look like. thanks in advance....any help is greatly aprreciated !! Hi all, I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7. The li tag css is Code:
li{
background:url('../images/li_bg.gif') repeat-x #ff0000;
display:inline;
padding:0 5px 0 5px;
margin:0 2px 0 0;
}
List html is: Code: <ul> <li><a href="member.php">Home</a></li> <li><a href="profile.php">Profile</a></li> <li><a href="help.php">Help</a></li> <li><a href="logout.php">Logout</a></li> </ul> I reset margin and padding for all other tags in a general css file. The image is a 1px width gradient. Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin. Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space. Have seen plenty of navbar tutorials but not with margin between list elements. Any help is much appreciated... I'm having trouble getting my dropdown navbar to stretch the width of the parent container. I can get it almost the right width but I have to make the width 107.16px which seems really stupid and wrong to me. But if I change it to 100% the list becomes vertical and all jacked up. Any clues on how to get it to stretch the entire width of the container? link Thanks! edit: I added the follow css to get rid of the white border at the end of the navbar. It looks good in FF but in IE there's a small gap now between the navbar & the side of the container. I'm hoping that there's a better way to do this. Code: #contact_nav a {border:none;} /*Removes right border on end of navbar*/
Hi Is there a way to create a 100% width (liquid layout without table) Horizontal menu using <UL><LI>. I searched Google, but i found only the menus aligned either towards left or middle. Not extending to full width. When i give "width: auto" for LI then all the links get aligned towards the left. Or if i specify some particular width say 12.5% for each Li then when i make it to 800x600 screen its wrapping to second line. how can i make list items that are in a horizontal list all the same width. I try adding the width attribute to it but it has no effect Hi there, Is it possible to set a border's width? when I say width I mean it's horizontal width not height. Many thanks Is there any way to have horizontal list items automatically fill any given width? for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left. the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width? Hi, is there anyway to make the horizontal menu on the top of the webpage fit the entire width of the screen along with the titlebar? I mean, irrespective of the number of menu items, the menu should be exactly as wide as the screen. Thanks. I am trying to get a page that has 3 boxes in a row (horizontally) with the first two having a fixed width, and my problem is getting the third one to take up the rest of width - so I don't have to specifiy a width for the third one. I have tried the auto width which works great and shows up perfectly in Firefox but just leaves a not very wide box in IE. There is probably an easier or cleaner way to do this but this is what I have so far: CSS: #box1 { width:70px; height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:0px; } #box2 { width:70px; height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:97px; } #box3 { width:auto; /*WIDTH IN QUESTION*/ height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:194px; right:0px; } HTML: <body> <div id="box1">TEST</div> <div id="box2">TEST</div> <div id="box3">TEST</div> </body> I found this code online and I'm trying to alter it slightly for what I need. Code: <html>
<head>
<style type="text/css">
body,html {
padding: 0;
margin: 10;
}
#navcontainer ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #acf;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Estate</a></li>
</ul>
</div>
</body>
It gives a nice center-aligned horizontal CSS menu. What I'm wondering is: How do I make it so that the width of each of the blue boxes the links are in are the same width? Say I want them all width: 180px; Where do I put that style so that it applies to all the links? [On a related issue, the style sheet has 4 things related to #navcontainer. How does one know which one of these to put additional styles in?] Thanks Much. j 9 Gday CSS PPL, Im still yet to test on other browers, but im using IE 6.0 while the explorer is full screen the width of my div is 100% But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins, div.banner { background-image: url(../images/banner_repeat.gif); width:100%; height:163px; text-align:center; } and yeah, the background image 'banner_repeat' stops repeating at that point. any help would be great, Thx in advance, James Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. and that thing is of course to cause trouble becasue it can't stay compliant, now as much as I would love to just dismiss IE entirly and focus on happier browsers like Firefox and Opera, It seems that the normal human world loves their IE 6 and even IE 5 so I have this Here now you'll note that if you are looking through both browsers that a php script tacks on an additional stylesheet according to the browser (assuming the script is working) but they both use the same base layout, now with the exception of mabye.. two lines the css is right now basically identical... So I am left to ask. What is it in the base css (layout.css) that is causing all the rucus, I know that IE can't read the display: hidden; but I figured it could atleast read some of the other stuff, any help on the debug? thanks fullphaser Say my page has this layout <div class="newsheader"><a class="white" href="...">devshed.com</a></div> and my sheet looks like this, div.newsheader { font-family: Verdana; color: white; background-color: #EFBE56; } a:link {color: #C6930A;} a.white: link { font-family:Verdana; color: white; } Couldn't the same be accomplished by div.newsheader a {color: white} and <div class="newsheader"><a href="...">Devshed.com</a></div> Notice I don't have to declare a class for the anchor tag. If I have a lot of these to change it could be a big time saver. But, which is better for CSS compatability, code readability, and possible future changes. Maybe its all about my personal preferences. Thanks Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... |
|||||||