|
CSS - Horizontal Menu Fit Screen 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. Similar TutorialsHi 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. 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 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. I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help hi, i m trying to design a page with a logo at the top.just like this site. http://richgirlstore.com/xcart/home.php but i want the logo to be displayed in a way that it covers the entire width of the browser window when a user opens the page.the screen sizes are different depending on the type of monitor used by people.so how can i fix this problem.thanks... 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 I've been working on a CSS style for a web site, and I've got a small issue with the right hand column not staying within the bounds of the screen. When using a tool to see where the div's borders the right is about 200 px going off the right of the screen, making the screen horizontally scrolling. I am not a CSS expert. I know enough to get around, but this I don't understand. (I might have posted too much, but I figured if someone needed something more, it's already all there.) Thanks for any assistance that can be provided. HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Experience Inc. - Warren and Forest Counties Office of Aging</title>
<link href="css/grey_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<span style="float:left;">
<img src="images/logo.gif" />
</span>
<span style="float:right;">
<div style="text-align:center">
<div id="outerFirst"><a href="index.php"><span>Home</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Services</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Senior Centers</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Trips / Events</span></a></div>
<div id="outerFirst"><a href="index.php"><span>About / Contact</span></a></div>
</div>
</span>
</div>
<div class="CellBackGround">
<table width="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="pictureContainer">
<div id="largeHomeText">
Warren and Forest Counties Area Agency on Aging
</div>
<div class="together">
<img src="images/home_image_bar/image1.jpg" />
<img src="images/home_image_bar/image2.jpg" />
<img src="images/home_image_bar/image1.jpg" />
</div>
</div>
<div class="CellBackGround">
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="navigation">
<p>
</p>
</div>
<div id="extra">
</div>
<div id="footer">
<p>This is the footer area. </p>
</div>
</body>
</html>
CSS Code:
body {
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
font-style: normal;
font-weight: normal;
color:#FFFFFF;
background-color:#666666;
margin-left:0;
margin-top:0;
margin-right:0;
}
#header {
width: 100%;
background-color: #666666;
overflow:auto;
vertical-align:top;
height:auto;
}
#menu {
height: 54px;
margin: 3em 0;
padding:0 1em;
border-bottom: 0px solid black;
overflow:inherit;
}
#outerFirst {
float: left;
width: 90px;
height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
#outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:90px;
height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
#outerFirst span {
height: 54px;
display: block;
margin:0;
padding: 25px 0px 0px 0px;
}
#outerFirst a:hover {
width:90px;
height:54px;
background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
color: yellow;
}
#outerFirst a:active {
background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
}
.CellBackGround {
height:2px;
background: url('../images/redPixel.gif') center center;
}
.CellBack2 {
background: url('../images/redPixel.gif') center center;
}
#pictureContainer {
width:100%;
background-color:#666666;
overflow:auto;
height:95px;
}
#largeHomeText {
color:#999999;
font-size:13pt;
float:left;
padding-top:74px;
padding-left:3px;
}
.together img {
padding: 0;
margin: 0;
border: 0;
display: inline;
float: right;
overflow:hidden;
}
#mainTextContaner {
color:#660000;
margin-left:-5px;
}
#footer {
color:#666666;
}
/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 45%;}
.br {background: url(../images/br.gif) 100% 100% no-repeat}
.tl {background: url(../images/tl.gif) 0 0 no-repeat}
.tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl2 {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 35%;}
.br2 {background: url(../images/br.gif) 100% 100% no-repeat}
.tl2 {background: url(../images/tl.gif) 0 0 no-repeat}
.tr2 {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
a:link {
font-size: 14pt;
color:#999999;
}
a:hover {
font-size: 14pt;
color:#660000;
}
a:visited {
font-size: 14pt;
color:#999999;
}
#news {
background: url(../images/news.jpg) 100% 0 no-repeat;
width:370px;
height:600;
}
div#wrapper{
float:right;
margin-right:-30%;
width:99%;
}
div#content{
margin-right:30%;
border-left:2px solid #FFFFFF;
border-left-color:#660000;
padding-left:10px;
padding-right:10px;
height:400px;
padding-top:10px;
}
div#navigation{
float:left;
width:32.9%;
padding-top:10px;
}
div#extra{
float:left;
clear:left;
width:32.9%;
padding-top:10px;
}
p{
margin:0 10px 10px
}
div#footer{
clear:both;
border-top:2px solid;
border-top-color:#660000;
border-bottom:2px solid;
border-bottom-color:#660000;
text-align:left;
color:#FFFFFF;
}
div#footer p{
margin:0;
padding:5px 10px;
width:10%;
}
Hang on to this post, I have found a couple of answers, so will post again when i get stuck! Charlie 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 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 all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Hi - I'm a bit of a noob when it comes to CSS etc. but have been asked to modify some code for someone. Basically it's a simple site that has the main content centered on the screen (about 960px wide). However there is a large banner image that is about 2000px wide that is supposed to stretch as wide as say a large 27" mac. I am not sure if this is the correct way to do it but I guess they couldn't use a smaller image and repeat it because there is a unique design/pattern throughout the whole width. Anyway, on smaller browsers everything looks good except the horizontal scroll bar allows the user to scroll all the way to to the right. Is there anyway to clip the image on the top to prevent the scroll bar from showing based on screen width? Hope that makes sense. 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> 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 Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? |
|||||||