CSS - Div Drop At Window Resize

When I resize the browser window on this page, the text "onclick" and the Cart and Search text stay in one place while the other text and background move. Why is this happening, I need everything to move together.

This only seems to be happening IE, FF and Chrome seem fine.



http://makethemoviehappen.com/darix.html

I have just moved to working with layers as opposed tables/cells.
Previously i had a table with three cells, at 86%, 4%, and 16% widths so it spanned the screen. The first cell's content only partly fills the cell, so when the browser is resized (made smaller), each cell stays on the same line and the table happily resize to the point where it can no longer get smaller before it wraps text I have tried to replicate this using 3 div's of the same width as the cells, with float left, however, the browser can hardly be resized at all from full screen without the third div moving onto the next line. If i make the 2nd and third divs larger it works slightly better, however the content does not look right in the layers Therefore can anyone point out how i might be able to achieve better DIV resize when the browser resizes please. Thanks very much

Ed

Hi all,

I am trying to replace the frames with CSS on my tree menu page. Was just wondering if it is possible to bring the resize funcationality to the menu as I had in frames (i.e, user could menually resize the frame if required) OR mayb some auto fit- content solution i.e the pane would automatically grow if possible.


Thanks,

Sameer.

hi all, i'm doing a content management system front end form that worked perfectly until i tried the last bit of debugging and found that when resizing the browser it distorted the page... is there a way around this? im fairly new to CSS and have been using relative positioning for my divs.

I want to have a web page with a list on it that dynamically resizes to fit the browser viewport with a minimum distance between list items. Here's an example I faked in TextPad:

Normal view:



User enlarges browser:



User shrinks browser:



How would I accomplish this in HTML/CSS?

Thanks!

i thought it was easy but i cant seem to get a div fit the space it has on my page

like.....the size of my page depend on 1 table...the div has to grow till the bottom of that table

if i put 100% in the div and things it grows too big

maybe im forgetting something

Hi
I am rather novice at CSS and what it can do but thought I would see if anyone can offer any feedback. I have been asked to resize the following website:
http://www.Ihaveone.org


Currently it takes up a third of the window and it is requested to take up the whole window. Is there an easy way to do this? I have downloaded all the files to Adobe GoLive, but am unclear if or how this can be done without redesigning the entire site.
Please, any help is greatly appreciated!
bufhal

I have the following situation: I have a scrolling table, split in two divs. One div contains the header table with column headers, and the data div contains the actual data table.

Both divs are fixed in height, but what I would like to do is have the data div resize depending on the number of rows in the data table.

I have tried playing with divs' min-height and max-height and these seem to work fine for IE7, FF2 and Safari, but not for IE6 and Opera.
Is there any workaround that would be compatible with all mentioned browsers?

Thanks!

Hello all,

I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site

Hey guys ,
I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" .
The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated ,

Code:

ul#css3menu,ul#css3menu ul{
	margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
	display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;}
ul#css3menu ul ul{
	position:absolute;left:98%;top:-2px;}
ul#css3menu{
	padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0 0 0 6px;}
ul#css3menu ul>li{
	margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
	float:none;margin:0;}
ul#css3menu ul a{
	text-align:left;}
ul#css3menu li:hover>a{
	background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g  radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
	border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
	width:16px;height:16px;}
ul#css3menu img.over{
	display:none;}
ul#css3menu li:hover > a img.def{
	display:none;}
ul#css3menu li:hover > a img.over{
	display:inline;}
ul#css3menu ul span{
	background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
	background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
	background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end  Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
	border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;} 
ul#css3menu li.sublast>a{
	border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}

And here is the html
Code:

<ul id="css3menu">
	<li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a>
	<ul>
		<li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 1"><span>Item 0 1</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 2"><span>Item 0 2</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 3"><span>Item 0 3</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 4"><span>Item 0 4</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 5"><span>Item 0 5</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 6"><span>Item 0 6</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 7"><span>Item 0 7</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 8"><span>Item 0 8</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 9"><span>Item 0 9</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 10"><span>Item 0 10</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 11"><span>Item 0 11</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 12"><span>Item 0 12</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li>
		</ul>

		</li>
		<li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li>
		</ul>

		</li>
	</ul>

	</li>
</ul>

This is probably a tall order any advice is appreciated , TYVM

I ran across a source code and was playing with it to see how it works. The code from what I can tell is mainly for background images. My questoin is, how can I apply a code that will resize the image within the same css coding.


I thought it was pretty cool that you can include a large image as the background and it resizes with the window.

Not sure this can even be done so that's why I'm asking. Can it be written to resize any or all the images you place on the page?

I've included the coding

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> </title>

<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
#content {padding:5px 300px 20px 200px;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
</style>
</head>
<body>
<div>
<img id="background" src="bg.gif" alt="" title="" /> 
</div>
<div id="fixed">
</div>
<div id="scroller">
<div id="content">
<center>
<H1>Header Text Here <br>
<img src="header_img.png"><br><br>
Text here<br><br>
Text Text</h1><br>
<img src="Just an image here">
</center>
</div>
</div>
</body>
</html>

Hello, so basically I've got these side bar graphic things I want to put on the edges of my main content table to make it look nice. The problem is I can't seem to figure out how to make them resize their height automatically depending on the length of the main content table, which is slightly different on every page.

Since URLs are blocked I guess I have no choice but to just include the code here, ugh.

Code:

...
<div id="page-container">

<div id="headerer">
</div>

	
	<div id="header">
		
	</div>

    <div id="navpanel">
		
		<img src="images/interface/gorglogowidth.jpg" width="270" height="269" border="0" /><br />
        <div id="tvbg">
        <div id="main-nav">
		<dt id="news"><a href="index.php">news</a></dt>
		<dt id="episodes"><a href="episodes.html">episodes</a></dt>
		<dt id="universialinfo"><a href="universialinfo.html">universialinfo</a></dt>

		<dt id="music"><a href="music.html">music</a></dt>
		<dt id="contact"><a href="contact.html">contact</a></dt>
	</div></div></div>
	
	<div id="sidebar-b">
		<img src="images/interface/panelright.jpg" width="17" border="0" />
        <img src="images/interface/bottomrightcorner.jpg" />		
</div>
	
    
	
	
<div id="sidebar-a">

      	<img src="images/interface/panelleft.jpg" />
        <img src="images/interface/bottomleftcorner.jpg" width="28"/>		
</div>
<div id="content">




	  <span class="titletext">Episode 1: The Greatest Planet in Existence</span><br />
		<a href="episodes/episode1high.html" target="_blank">High Quality (595MB)</a>
		
		<br />

		<a href="episodes/episode1low.html" target="_blank">Low Quality (85MB)</a>
		
		<br /><br />
		<span class="titletext">Episode 2: Savory Dark Truffle</span><br />
		<a href="episodes/episode2high.html" target="_blank">High Quality (597MB)</a>
		<br />
		<a href="episodes/episode2medium.html" target="_blank">Medium Quality (264MB)</a>
		<br />

		<br />
		<span class="titletext">Episode 3: Spoon the Pretty Bad</span><br />
		<a href="episodes/episode3medium.html" target="_blank">Medium Quality (146MB)</a>
		<br />
		<a href="episodes/episode3flashhigh.html" target="_blank">High Quality FLASH FORMAT(Recomended)</a>
        
        </div>
     <div id="panelbottom">

        <img src="images/interface/bottommiddle.jpg" width="300" height="28" />    </div>
        

Anyway, the two images, "panel left", and "panel right" (contained in the DIVs "sidebar-a" and "sidebar-b", respectively) go wayyy down, as their native resolution is very large and I was initially hoping to simply be able to scale them down to to match the height of the main content page

The CSS file is as follows:

Code:

...

#page-container {
	width: 800px;
	margin: auto;
	text-align: left;
}

/* Main Navigation */

#tvbg {
background:url(../images/interface/navtvlonger.jpg)
}
#main-nav { 
	padding-top: 50px;
	margin-left: 32px;
	height: 356px;
	width: 150px;
	
}


#header {
	height: 188px;
	background: #696969
		url(../images/interface/episodesheader.jpg);
		width: 530px;
		float: right;
}



#sidebar-a {
	float: left;
	width: 28px;
}


#sidebar-b {
	float: right;
	margin-left: 155px;
	width: 17px;
}


#navpanel {
	float: left;
}
#content {
	
	margin-right: 17px;
	margin-left: 268px;
	line-height: 18px;
	background: #696969;
}

#content .padding {
	padding: 25px;
}

Thanks!

Found lots of similar threads, but not exactly the same problem... Any ideas how I can get the main content to stay centered along with the background on my site:

http://gumbald.co.uk

It works fine in FF, but not in IE, so I'm guessing it's a CSS issue

My CSS:

Code:

/*Default CSS file*/

/*Formats <html> tag*/

html {
	height: 100%;
	overflow: -moz-scrollbars-vertical;
	background-color: #BBF;
}

* html #wrap {
	height: 100%;
}

/*Formats links to set colors, actions*/

#wrap a:link {
	color: #0054A6;
	text-decoration: none;
}     
#wrap  a:visited {
	color: #0054A6;
	text-decoration: none;
}  
#wrap  a:hover {
	color: #828282;
	text-decoration: none;
}   
#wrap  a:active {
	color: #000000;
	text-decoration: none;
}   

/*Formats <body> tag*/

body {
	font: 65% 'trebuchet ms', arial, helvetica, sans-serif;
	min-height: 100%;
	width: 640px;
	margin: auto;
	padding: 0;
	background-color: #FFFFFF;
	border: 0px solid red;
}

/*Formats <h1> tag*/

h1 {
	font: 300% 'trebuchet ms', Arial, Helvetica, sans-serif;
	color: #00f;
	padding-top: 0px;
	margin: 0;
}

h2 {
	font: 130% 'trebuchet ms', Arial, Helvetica, sans-serif;
	padding-top: 6px;
}
/*Formats images, is class so can be reused on same page*/

.imgLeft {
	float: left;
	padding-right: 10px;
	padding-bottom: 0px;
	margin-top: 0px;
}
.imgRight {
	float: right;
	padding-left: 10px;
	padding-bottom: 0px;
	margin-top: 0px;
}

/*Wraps all Divs Up*/

#wrap {
	position: relative;
	min-height: 100%;
	width: 640px;
	margin: auto;
	background: top left repeat-y;
}

/*Deals with head navigation bar*/

#headwrap {
}

#logo {
  padding-left: 0px;
  text-indent: 10px;
	width: 100%;
	height: 42px;
	background: #BBF repeat center;
	text-align: left;
}

#navbar {
  text-indent: 10px;
  padding-left: 0px;
  width: 100%;
	font: 110% 'trebuchet ms', Arial, Helvetica, sans-serif;
	margin: auto;
	height: 16px;
	padding-top: 2px;
	padding-right: 0px;
	color: #000;	
	text-align: left;
	background: #DCDCDC repeat-x;
	border-bottom: 1px solid #ccc;
}

#navbar li {
	display: inline;
	padding-right: 10px;
	margin: 0;
}

#navbar ul {
	padding: 0;
	margin: 0;
}

/*Deals with side navigation bar*/

#sidenavbar {
	float: left;
	width: 100px;
	margin-top: 0px;
	text-align: center;
	background: #DCDCDC;
}

/*Deals with main page content*/

#mainwrap {
	padding-bottom: 0px;
}

#mainwrap:after {
	display: block;
	clear: both;
}

#content {
	position: relative;
	margin-left: 6px;
	margin-right: 6px;
	padding: 0 10px;
	text-align: justify;
}

/*Deals with the footer*/

#footwrap {
	clear: both;
	height: 68px;
}

#footer {
	position: absolute;
	bottom: 0;
	height: 40px;
	background: #0054A6 repeat center;
	width: 100%;
	color: #FFF;
	text-align: center;
	margin: 0 auto;
}

#footnavbar {
	position: absolute;
	bottom: 40px;
	font: .95em 'trebuchet ms', Arial, Helvetica, sans-serif;
	width: 100%;
	height: 28px;
	padding-top: 8px;
	color: #000;	
	text-align: center;
	background: #DCDCDC repeat-x;
	border-top: 1px solid #ccc;
}

#footnavbar li {
	display: inline;
	padding-right: 10px;
	margin: 0;
}

#footnavbar ul {
	padding: 0;
	margin: 0;
}

Hello

I need to display an image as a background for a table cell
I am using the style background-image and it is working fine

Here is my problem
My table cell has a specific width of 100 pixels
The image that I need to display may have a width greater than 100.
Is there a way to tell the browser to resize the image to width of 100 pixels and then to display it as a background image?

Currently, it just displays the first 100 pixels of the image inside the cell and the rest of the pixels are cut off

I must use a background image (background-image) and not an image tag (img)

regards

Hey guys

I'm creating a website as a favor for my boss and I've been trying to do the speed crunch on it and already, one day in I hit a big road block... I can't seem to get the content container and background div to resize with content inside the "content" div. And also, I can't get the footer image for the content container (bottom of the color w/ rounded edges) to float to the bottom of the container.

Here is the page in question: http://srh.com/taxgirl/

There are 3 style sheets used so far (as this is a complex website and I want some parts to show on all pages and others to only show on certain pages.

Here are the CSS links:
http://www.srh.com/taxgirl/srh2008.css
http://www.srh.com/taxgirl/css/mainsrh.css
http://www.srh.com/taxgirl/css/srh_index.css

Code:

#contentcontainer {
	position: absolute;
	z-index: 3;
	width: 740px;
	left: 11px;
	top: 505px;
	right: 11px;
	height: auto;
	margin-bottom: 70px;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: left;
}

Code:

#contentbg {
	background-image: url(../images2/required/layout/contentbg.png);
	background-repeat: repeat-y;
	background-position: center top;
	overflow: visible;
	position: relative;
	width: 760px;
	top: 55px;
	height: 900px;
	left: 1px;
	right: 0px;
	bottom: 65px;
	z-index: 2;
	margin-bottom: 63;
}
#contentcontainterfooter {
	height: 15px;
	width: 760px;
	position: relative;
	left: 1px;
	right: 0px;
	z-index:3;
}

Here is the HTML:
Code:

 <div class="contentbg" id="contentbg">    <div class="contentcontainer" id="contentcontainer">CONTENTS THAT NEEDS The Content bg to be relative to.</div></div>
<div class="contentcontainterfooter" id="contentcontainterfooter"><img src="images2/required/layout/content_bottom.png" width="760" height="15"></div>

The text I threw in the DIV is just sample text so please disregard any unlisted or unused class tags, etc. This text will be removed after the issue is solved.

If anyone could help I would be forever greatful

Please take a look and let me know if you have any advice.

Thanks you so--o much!
~beth.

ps. This is a side concern, but if anyone knows how to make a png background compatable with IE, please do tell. This isn't too big of a concern for me because if I need to I can just use a gif, but if you know, the knowledge would be welcome and thanked for

To all that read: Have a fantastic day and thank you for your time.