CSS - Menu Tabs Expanding To Fill Page Width

if you didnt understand the subject i'll try and explain it a bit better here!

This is my problem in IE my page looks like this
http://www.readyflowers.com.au/div-fill.gif

But what i want is when there is no content for those divs not to appear so it would look like this (In firefox it works!)
http://www.readyflowers.com.au/div-fill-firefox.gif

Hi guys,

I'm trying to sort out the top level menu. It's supposed to allow a hover effect, where a sub menu then appears.
This secondary nav then spans across in an inline fashion.

The link to the site is: http://yoursitetest.co.uk/index2.php

However it seems to have some kind of 'width' set on the parent which the sub menu cannot expand past.

This is some of the code i think is relevant: (Rest of nav cut due to repeating nature)
Code:

<ul id="navigation">

			        <li class="main" style="position:absolute; font-size:11px; z-index:90; left:0px;"><a href="#" class="co">Home</a>

        	<ul style="display:none; z-index:100; height:28px;">

            	<li style="background-image:url(images/sm-l.png); background-repeat:no-repeat; width:15px; height:30px;"></li>

                    <li><a href="#" style="background-color:#EEE;">asa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                <li style="background-image:url(images/sm-r.png); background-repeat:no-repeat; width:15px; height:30px;"></li>

            </ul>

        </li>
</ul>

CSS:
Code:

ul#navigation li.main {
	display:inline-block;
	list-style:none;
	position:relative;
	background-image:url(../images/tab_off.png);
	background-repeat:none;
	width:109px;
	height:8px;
	padding:10px;
}

ul#navigation li.main a {
	color:#FFF;
}

ul#navigation li.main:hover {
	background-image:url(../images/tab_on.png);
	background-repeat:none;
}

ul#navigation li ul {
	position:absolute;
	left:-50px;
	top:20px;
}

ul#navigation li ul li {
	display:inline-block;
	list-style:none;
}

Hope someone can help,
Regards,
Joe.

I have set my table cell #3 to 246px and have placed an image (called keyboard.jpg) with a width of 246px in it as a background image (the only cell in the table with an image), yet the table cell has expanded beyond that 246px width.

I need to set the cellpadding to 5px because for legibility for all the other cells (with just text) in the table. Can I turn off the cellpadding for just this one cell #3 that has an image in it? Why does a background image in a table cell react to the table's cellpadding? Should I remove the keyboard.jpg as a background image and make it an in-table image?

<em>Whatever the case, how can I make the image fit nicely without any extra space in the cell?</em>


Here's my code and my stylesheet:

<div id="table">
<table width="725" border="0" cellpadding="5" cellspacing="0" class="table">
<tr>
<td width="1">&nbsp;</td>
<td class="cell1" width="130"><p><strong>Yada</strong></p>
<p>Bla bla bla</p>
<p>Bla bla bla</p></td>
<td class="cell2" width="124"><p><strong>Yada</strong></p>
<p>Bla bla bla</p>
</td>
<td class="cell3" width="246"></td>
<td class="cell4" width="174"><p><strong>Yada</strong></p>
<p>Bla bla bla<br />
<br />
Bla bla bla</p></td>
</tr>
<tr>
<td class="tdblue">&nbsp;</td>
<td class="cell5"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
<td class="cell6"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
<td class="cell7"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p></td>
<td class="cell8"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="cell9"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla</p></td>
<td class="cell10"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla.</p></td>
<td class="cell11"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p></td>
<td class="cell12" width="174"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla </p></td>
</tr>
</table>

Here's my stylesheet:

table {
width: 760px;
margin: auto;
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 150%;
text-align: left;
text-decoration: none;
letter-spacing: .5px;
}

table td {
vertical-align: top;
}

td.cell1 {
background: white;
padding: 5;
width: 130px;
}

td.cell2 {
background: #F7F4EE;
padding: 5;
width: 124px;
}

td.cell3 {
background: #ffffff;
background-image: url(../images/keyboard.jpg);
background-repeat: no-repeat;
spacing: 0;
padding: 0;
width: 246px;
}

td.cell4 {
background: #F7F4EE;
padding: 5;
width: 174px;
}

td.cell5 {
background: #DFE5F0;
padding: 5;
width: 130px;
}

td.cell6 {
background: white;
padding: 5;
width: 124px;
}

td.cell7 {
background: #DFE5F0;
padding: 5;
width: 246px;
}

td.cell8 {
background: white;
padding: 5;
width: 174px;
}

td.cell9 {
background: white;
padding: 5;
width: 130px;
}

td.cell10 {
background: #F7F4EE;
padding: 5;
width: 124px;
}

td.cell11 {
background: white;
padding: 5;
width: 246px;
}

td.cell12 {
background: #F7F4EE;
padding: 5;
width: 174px;
}

.tdblue {
background: #DFE5F0;
}

.tdtan {
background: #F7F4EE;
}

Well, this would be the first time I actually am starting to use full DIVs to code a website, usually use tables. Anyways, I have most bugs fixed out since I do somewhat know how to code in DIVs - the question is though, on one of the "right" side content area things I have, the content part extending right over the DIV, and even the container. I also gave both with fixed widths, no idea why this is happening. Anyone have any ideas?

http://www.futuregamers.net
http://www.futuregamers.net/style.css

I have a page whose outer-most container has a fixed width. On some pages, there is a table whose width I cannot set to be fixed because its contents (more specifically the number of <td>s) are dynamic.

My problem is that when the table has so many <td>s that its width is forced to be greater than its parent <div>'s fixed width, the other page elements are not rendered as desired.

Here is a simple illiustration of what I'm talking about. The text on the page explAins my issues (although it should be evident from loooking at it in a browser).

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">

	body	{
		font-family: Arial, Helvetica, sans-serif;
	}
	
	#outer	{
		width: 950px;
		min-width: 950px;
		background-color: #fc0;
	}
	
	#hdr	{
		background-color: #66c;
		height: 50px;
		padding: 10px;
		color: #fff;
		margin-bottom: 25px;
	}
	
	table#data1	{
		background-color: #eee;
		margin: 10px;
	}
	
	table#data1 td	{
		font-weight: bold;
	}
	
</style>
</head>

<body>
	<div id="outer">
		<div id="hdr">
			This box should span the entire width of its orange container box even if the orange box's width exceeedes the width of the browser window due to the content it contains.
		</div>
		<table id="data1" border="1">
			<tr>
				<td colspan="24"><p>This table has a lot of TDs which causes its width to go beyond both the 900px assigned to its containg DIV as well as the width of my browser window. My desired behaviours a </p>
				<ol>
					<li>the containing element would expand to the width of the table (meaning that the orange background will be displayed behind the content of the grey table)</li>
					<li>the DIV with the blue background at the top would also expand to the width of its parent container (the DIV with the orange background)</li>
				</ol>
				<p>Neither of these are happening in Mozilla and only #1 is happening in IE.</p>
				<p>I'm sure that Mozilla is displaying properly per the CSS spec, but there must be a way to acheive what I'm trying to do.</p></td>

			</tr>
			<tr>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
			</tr>
		</table>
	</div>
</body>
</html>

I'm not saying my code is correct and that the browsers are not displaying it properly. I know I'm doing something wrong, I just can't figure out what.

Any suggestions?

Dear all,

IE problems trying to get a large amount of content to sit in a smaller div with overflow set to auto. In FF it works perfectly, but in IE the outer div ignores the width value I have set and instead expands to the width of the content.

My code:
Code:

<div id="calendarWrapper" style="width:800px;height:600px;overflow:scroll;">
<div style="width:4000px;height:1000px;overflow:auto;background-image:url(img/calendarBackground.gif);position:relative">
<div style="background-color:#FFFFCC;position:absolute;top:76px;left:150px;width:1000px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:151px;left:300px;width:750px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:1px;left:75px;width:100px;height:74px;">Test</div>
</div>
</div>

I found a couple more threads similar to this but none with a solution.

any help most appreciated. Mark

Hi,

I'm attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean:



So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards.

The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it.

There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions?

Your help is appreciated. Thanks in advance!

I working on a CSS to display a round-shouldered-tab menu. My result is acceptable:
http://rickduley.webs.com/roundShoulderTabMenu.jpg
except for the fact that the tabs are set below the menuBar on which the are supposed to display.

I have run out of ideas. Would someone please set me on the right path?
Thanks.

P.S.: the code is at
http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
you have to delete the 'dot key gee bee' suffix.

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

I'm trying to create an expanding menu using CSS and no Javascript. So far, it works only sometimes in IE, and only works in FF with the mouse button is pressed down (If I let go of the mouse button, it disappears).

Can anyone suggest any fixes on what I should do to get it working properly. Thanks.

So far what I have is this:

Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<link rel=stylesheet href="dd.css" type="text/css">
<title>Page title</title>
</head>
<body>
<div id="links">
<a href="#">Links<span><br>
Sublink 1<br>
Sublink 2<br>
</span></a>
</div>
<div id="links2">
<a href="#">Links 2<span><br>
Sublink 3<br>
Sublink 4<br>
</span></a>
</div>



</body>
</html>


Quote:
My CSS looks like this:
div#links a span {display:none;}

div#links a:active span {display:block;
font:10px Verdana, sans-serif;
}

div#links2 a span {display:none;}

div#links2 a:active span {display:block;
font:10px Verdana, sans-serif;
}

Having read some of the posts in this forum, plus some other websites. With the over-lay capability of divisions could they be used for an expanding menu to show more links?
how about positioning, would it be relative to the menu it just came from?
would each menu be there but turned off by using: visability:hidden; ?

would this menu be possible?

Normal View:- home area 1 area 2 area 3 area 51 When Hover over area 51:- home area area2 area 3 area 51 vessel technology morgue artifacts

Is there a cleaner way to achieve what I'm doing below? I read a bit about pseudo-selectors, not sure if they can be applied to this.

Code:

<style>
.class1 {float:left;width:100px;background:first_tab.jpg }
.class2 {float:left;width:100px;background:tab.jpg }
.class3 {float:left;width:100px;background:last_tab.jpg }
</style>

<div class="clearfix">
  <div class="class1">
    Home
  </div>
  <div class="class2">
    About Us
  </div>
  <div class="class3">
    Privacy
  </div>
</div>

Pretty Common issue.... I think...

I need my div's background to go all the way down the page.... even on small pages!!

Here is an example...

Sign Up Page

I have made a style sheet and an html homepage. I want everything to expand with the browser and I want the <div> tags .


1) How can you center the css style sheet. Like I have the background, then I have <div> tags that display the header, content areas and footer. I want the header content areas and footer centered in the browser and also to expand with the browser if it is made smaller or larger.

If you need the code let me know.