CSS - Howto: Auto-width Backgrounds?

hello everyone,
i am using css based menu . requirement is that, menu should adjust its width automatically based on the text length.

Here is my css : =
css Code:
Original - css Code li ul li { background: #000; color: #fff; padding-top: 4px; border-bottom: 1px solid #fff; letter-spacing:1px; text-transform: capitalize; text-shadow: 2px 2px 2px #22222; width: 250px; margin:0px auto; height: 18px; font-size: 11px; font-weight: normal; text-align:left; filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; }

  

  


 li ul li {


             background: #000;


             color: #fff;


             padding-top: 4px;


             border-bottom: 1px solid #fff;


             letter-spacing:1px;


             text-transform: capitalize;


             text-shadow: 2px 2px 2px #22222;


             width: 250px;


             margin:0px auto;


             height: 18px;


             font-size: 11px;


             font-weight: normal;


             text-align:left;


             filter: alpha(opacity=80);


             opacity: 0.8;


             -moz-opacity: 0.8;


         } 

you just see the attachment, you would realise that , the text is cropping & not displayed.


Also , can any one suggest , what can I do to make this CSS to cause make it attractive.?

It always amazes me how Microsoft can mess something up that was working before. Take the following example, a table cell set to a specific width, containing a div, width set to 100% of its containing block element (the table cell). Overflow:auto is applied to the div and content is placed in the cell that cannot be wrapped. See the code that follows:

html4strict Code:
Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 100%; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>

  

  


 <table width="200px" cellpadding="0" cellspacing="0" border="0">


   <tr>


     <td style="width: 200px;">


       <div style="width: 100%; overflow: auto;">


         <p style="white-space: nowrap;">Content that should not be wrapped.</p>


       </div>


     </td>


   </tr>


 </table> 

One would expect to have the table cell display with a width of 200 pixels and scrollbars will be displayed for the un-wrappable content.

IE7 does not do that. It widens the cells width to accommodate the content. FF follows this perfectly. To fix this, one has to set the div to the same width as the table cell, like so:

html4strict Code:
Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 200px; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>

  

  


 <table width="200px" cellpadding="0" cellspacing="0" border="0">


   <tr>


     <td style="width: 200px;">


       <div style="width: 200px; overflow: auto;">


         <p style="white-space: nowrap;">Content that should not be wrapped.</p>


       </div>


     </td>


   </tr>


 </table> 

Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths.

Currently on my site I have articles with images, and the images have a quote underthem... unforutunatly, i have to manually set the width of these boxes to the width of the image that accompanies them.... here is a sample...

CSS:
Code:

.imageinsert {
margin:5px;
}
        #image01 {width:225px}
	.imagequote {
	color:#FFF;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:center;
	}

XHTML:
Code:

<div class="imageinsert" id="image01">
	<img src="/pic/feud093.jpg" alt="" />
	<div class="imagequote">In yet another unfair battle, Maki must defend herself against Guy and Guile!</div>
</div>

I would love to have just one code for the imageinsert tag that would just autoresize based on how wide the image was.

Hi to all, and thanks a million in advance for help.

I have developed a simple online cms and everything is setup correctly but i am stuck at one place.

I am unable to make width to 100% when b div is empty

i mean

a div = 50% width,
b div = 50% width,

how set it up that when a div is empty then b div goes to 100%width and when b div is empty then a div is 100% width.

i hope got my question.

because currently i have set in this way.

wrapper div = 980px width,
a div = 50% width,
b div = 50% width,
wrapper div end

so when a div is empty then b div is still present and that area is empty it destroy the whole look.

thanks arsslan

Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections.

I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though.

I can't explain much better than that, so without further ado:

CSS:
Code:

.columns-float{
    float : left;
    width : 80%;
}
.column-one
    {
    width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
          inquiring about. The above problem assumes this attribute
          is set to "auto". */
    float : right;
    }
.column-two
    {
    width : 25%;
    float : left;
    }
.column-three{
	width : 20%;
	float : right;
}
.box-footer{
	clear : both;
}
.column-one-content{
	margin-left: 1px;
	margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
     p\osition: relative;
}

(Above was borrowed from here, albeit with modifications.)

HTML: Code:

...

<div class="columns-float">

<div class="column-one">
<div class="column-one-content">
<h2>column 1</h2>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="column-two">
<div class="column-two-content">
<h2>column 2</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear">&nbsp;</div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it  -->

</div><!-- close boxbody -->
<div class="column-three">
<div class="column-three-content">
<h2>column 3</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear">&nbsp;</div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it  -->

<div class="box-footer">Footer
</div>

Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me.

Any help would be appreciated, and I thank you very much for your time. This is driving me batty.

I'm working on a site layout using CSS. I want the content body and the top menu to expand the width of the browser. For some reason, in Safari, the content body works, but the top menu does not. Any suggestions?

HTML:

<div id="mainmenu">
<div id="mainmenutext">Menu will come here.</div>
<div id="mainmenuspace">&nbsp;</div>
</div>

CSS:

#mainmenu {
height: 27px;
width: auto;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #000000;
background-color: #FDDAE4;
clear:both;
position: absolute;
left: 0px;
top: 150px;
}

#mainmenutext {
margin-left: 4px;
color: #000000;
height: auto;
width: auto;
}

#mainmenuspace {
float: right;
height: auto;
width: auto;
}

www.mrossana.com/siteidea/

www.mrossana.com/siteidea/style.css

Thanks!

Code:

	
	#pics {
		margin:0;
		padding:0;
		background:#fff;
	}
	#pics ul{
		margin:0;
		padding:0;
		list-style:none;
	}
	#pics ul img{
		 margin:0;
		 padding:0;
         border-style: solid;
		 border-color: #27076A;
		 border-width: thin;
	}	
	#pics li{
		display:inline;
		margin:0;
		padding:0;
	}

  <div id="pics"> 
    <ul>
      <li><img src="images/1.jpg"></li>
      <li><img src="images/2.jpg"></li>
      <li><img src="images/3.jpg"></li>
      <li><img src="images/4.jpg"></li>
      <li><img src="images/5.jpg"></li>
      <li><img src="images/6.jpg"></li>
    </ul>
	</div>

The code above puts pics next to each other but width spaces inbetween them. I got margin and padding set to 0 and cant see why there spaces inbetween them. Am I missing something?

I would like to have the background-color of a complete table row changed when I move the mouse over it.

Any ideas how to realize this within a CSS file (not with javascript)

Thanks in advance

Hello,

I Have an div of an sertain width.
And there is some text like.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Which is wider then the div itself.
Now the tekst overlaps the div borders.

How can i fix this without getting a scrollbar.

Thx in advance.

I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear.

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>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
	function initPage()
	{
	
	}
-->
</script>
<style type="text/css">
<!--
body	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
}

input	{
	width: 200px;
	background: #f4f4f4;
	border: 1px solid #999;
	font-size: .9em;
	/*
	*/
}

.clearfix {
    display: inline-block;
}

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}




.cAutoCompleteCtl	{
	position: relative;
	/*
	border: 3px solid red;
	*/
}

.cAutoCompleteCtl input	{
	margin: 0 5px 0 0;
	display: block;
	float: left;
}


.cAutoCompleteCtl a.dwnarrow	{
	width: 15px;
	height: 15px;
	border: 1px solid #999;
	background: url(images/downarrow.gif)
				no-repeat;
	background-position: center center;
	background-color: #efefef;
	float: left;
	display: block;
	font-size: 1px;
	text-decoration: none;
}

.cAutoCompleteCtl .acCtlDropdwn	{
	position: absolute;
	top: 20px;
	left: 0px;
	z-index: 100;
	visibility: visible;
	min-width: 300px;
	max-width: 600px;
	height: auto;
	max-height: 200px;
	background: #fff;
	padding: 5px;
	border: 1px solid #999;
	overflow: auto;
	
	/*
	width: 400px;
	*/
}

* html .cAutoCompleteCtl .acCtlDropdwn	{
	width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
	height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}

.cAutoCompleteCtl .acCtlDropdwn a	{
	white-space: nowrap;
	display: block;
	text-decoration: none;
	padding: 2px 5px;
	color: #000; 
	border: 1px solid #fff;
}

.cAutoCompleteCtl .acCtlDropdwn a.lastOption	{

}

.cAutoCompleteCtl .acCtlDropdwn a:hover	{
	background: #f5f5f5;
	border: 1px solid #b3b3b3;
}
-->
</style>
</head>

<body onload="initPage();">

<div class="cAutoCompleteCtl clearfix">
	<input type="text" /><a href="" class="dwnarrow">&nbsp;</a>
	<div class="acCtlDropdwn">
		<!--<a href="#">options here	options here	options here	options here	options here	options here	options here	options here	options here	options here	options here</a>-->
		<a href="#">options here</a>
		<a href="">Boulder Logic</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>
		<a href="">A Rference With A Different Name</a>		
	</div>
</div>

</body>
</html>

I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected.

The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour.

Can anyone see where I'm going wrong?

Hi There -

Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about.

Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section.

Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later.

Then there's the next section. Rounded corners. Contains the entire page.

On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section.

Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links.

----------

First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back.

Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section.

If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug.

So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu.

---------

It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners.

Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow.

Code:

<div id="top part"
logo and searchbox
</div>

<div>
that pesky space that disappears in IE when roll over primary links
</div>

<div id=navcontainer>
dropdown and tabbed menu
</div>

<div id="navigation" class="menu> <!-- couldn't find the menu class in the css -->
<div id="primary" class="clear-block">
contains barmenu - very fussy
</div>
</div>

Here's the relevant CSS:

Code:

div#navigation {
  background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}


#primary {
  line-height: 30px;
}

#primary ul {
  padding:0;
  margin:0;
  list-style:none;
}

#primary li {
  display:inline;
}

#primary a {
  font-weight:bold;
  display:block;
  float:left;
  padding:0px 14px 0px 14px;
  margin: 0px 1px 0px 0px;
  font-size: 95%;
}

#primary a {
  background-position:0% 0px;
}

#primary a:hover {
  text-decoration: none;
  background-position:0% -42px;
}

#primary a.active {
  background-position: 0% -84px;
}

#primary a {
  background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
  color:#666666;
  font-size: 120%;
  font-family:Arial,Helvetica,sans-serif;
}

#primary a:hover {
  color: 666666;
  background: #B8B8B8;
}

#primary a.active {
  color: 666666;
  background: #B8B8B8;
}

i am trying to create a website and i know you can create backgrounds by going to photoshop and doing like a gradient with the image width of 1px and then place that into the css and it will repeat. i was wondering how can i make like an image as my background like 'http://fortysevenmedia.com/about/'

i dont want it to be a background you create in photoshop and use background image and then it looks really weird repeating.

i guess im wondering what other ways are there of making backgrounds for websites?

This might be simple, and might not be. Ok, I'm a sort of CSS noob, so bear with me if this is simple

I have 3 images that I created, and I plan to make a fluid layout with them. As you would expect, one is the top, one is the filler that expands, and one is the footer image. Now this would be raher simple to do, but there is one hard point: At the end of the whole layout, there is a gradient. This makes it look really cool in like login boxes(the image sizes are optimized for those), but that means that there is a large chunk of the footer where I want text to overlap from the content area. Is this possible? I will attach images if someone doesn't get my rambling

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

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