CSS - Need Help Covering Css Horizontal Menu To The Entire Width Of Table...

I'm using this html:

Code:

<div id="titlebox">
      <div id="title">
        <img src="images/title.png" alt="Garden Pub & Grille" />.
      </div>
</div>

with this css:
Code:

html, body {
  font-family: Century Gothic;
  text-align: center;
  background-color: #DEF9FA;
  height: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
  top: 0px;
  position: relative;
}

body > #container {
  height: auto;
  min-height: 100%;
  min-width: 100%;
}

#titlebox div  {
  background-color: black;
  position: absolute;
  min-width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  left: 0px;
  top: 0px;
  height: 64px;
  z-index: 1000;
}

#title div {
  width: 1000px;
  background-color: black;
}

Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks.

URL
Image doesn't seem to be showing up, link:
http://img15.imageshack.us/img15/5697/29946518.png

Hello, I have a header which extends to 100% the width of the browser. I am trying to get the footer to do the same but it's only about 90% the browser's width.
Here's my CSS for the footer: Code:

#footer { 
	width:100%;  /* this will create a container 80% of the browser width */
	background: #327ec1;
	margin: 0 0 0 -38; /* the auto margins (in conjunction with a width) center the page */
	border: 0px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:120px;
} 

#footer_container { 
	width:950px;  /* this will create a container 80% of the browser width */
	background: #327ec1;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0 px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:120px;
}

the site ishere

any ideas?
thanks

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

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

Howcome:

html, body {
color: #06F;
background-color: #000;
font-size: 16px;
text-align: center;
width: 768px;
}

Doesn't center the page in the browser? How can I center it?

Output example on my website here.

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!

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 */ 

Ok. Here's the problem:

I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div?

Css code:
Code:

/* left bar: */
#navBar{
	width: 185px;
	float: left;
}

/* right bar: */
#rightModulesContainer {
	width: 130px;
	margin: 0;
	padding: 0px 0px 0px 10px;
	float: right;
}

/* center content: */
#content{
	padding: 0px 5px 0px 0px;
	margin-top:0;
	margin-bottom:0;
	margin-left:4px;
	margin-right:0px;
	float: left;
	text-align:left;
	/*display: inline;*/
}

/* contained in #container: */

#dataGridContainer{
	margin: 0;
	padding-bottom: 10px;
	min-width:360px;
}

.categoryGridStyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
        width:100%;
}

and here is the layout of the divs:
Code:

<div id="navBar">left navigation bar here (tree view)</div>

<div id="rightModulesContainer">right side bar here</div>

<div id="content"><div id="dataGridContainer">datagrid here</div></div>

Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of...

Hello,

(please also see attached/uploaded style sheet)

I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH.

How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)?

Code:

<link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css">

TEST #1
<table class="menu" border=1 CELLPADDING=2>
<tr>
<td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td>
<td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td>
</tr>
</table>

<P>

TEST #2
<table class="menu" border=1 CELLPADDING=2>
<tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr>
<tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr>
</table>

I don't think I've quite grasped the idea of CSS yet?!?!

Any help/pointers would be appreciated.

Thanks,
Andy