CSS - Stretching Div With Repeating Image?

Here is what I have as a test


my CSS page has

Code:

body {
	margin: 4px 0px;
	padding: 0px;
	background-color: #000000;
}

.header		{
		background-image: url(images/back.gif);
		background-repeat: repeat-x;
		height:197px
		width:100%;
		margin-top :0px;
		}

and my header page that I want to include in all of my pages looks like this for now

Code:

<div class="header">
      <img src="images/logos.gif" width="750" height="197">
</div>

I want the logos.gif image to sit in the upper left and the back.gif image to repeat behind it so it looks seamless. I thought this would be a super easy task but right now, with the above code all I get is the logos.gif and no back.gif image. My path to image is correct.

I even commented out the logos.gif just so I had a blank canvas and nothing.

Thanks for any help on this.

Ok.. I couldn't find anything on this so figured i'd see if ya knew if either of these were possible using CSS (or any other mean):

a) Can you set a background image to repeat a certain number of times?

or

b) Can you set a background image to repeat only if it will fit the entire image in the space that remains...

(for example, I have a small image that I would like to just repeat 4 or 5 times, but dont want it to be cut off if it can only fit like 4 and a half of the images)

Thanks.

I am having trouble with placing an image on my page and having that image repeat itself all the way down the page.

Code:

<div id=left> ........ content ...</div>

<div id="image">this is where i want the image</div>

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

Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code

Code:

#left {
	position: absolute;
	left: 0px;
	width: 215px;
	background-color: #efefef;
	border: 1px dotted #ccc;
	}
#image1 {
    background-image: url("http://mydomain.com/image.jpg") 
    background-repeat: repeat-y;
    width: 15px;
    margin-left: 215px;
}
#center {
	
	margin-left: 260px;
             margin-right: 0px;
	overflow: hidden;
	}

The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page

Cheers

I've got a problem with a site I'm developing.

I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here?

Code:

html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}

a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}

a:hover, a:active{text-decoration:underline;}

p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}

#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}

ajarnforumDOTnet/erwinsample/

Thanks for any help you can give me.

Hello all - I am currently having a problem with a background image not being repeated properly.

There are two images that need to be repeated, div#topbg and div#leftbg. Topbg is being repeated-x correctly, but I am having problem with Leftbg being repeated-y.

The Leftbg will repeat vertically but stops repeating until it reaches the end of the background image of div#wrapper.

Could someone provide a solution to this? I need it to repeat all the way down the page! Here is the code for those that know of a simple solution. For those that need to look a bit more into it I have included a zip file as attachment to show just exactly what is wrong.. Please help!

The CSS code:
Code:

html, body
{

	height: 100%;

}

body
{
	margin: 0px;
	padding: 0px;
	font : 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: left;

}

div#topbg
{
	width: 100%;
	height: 145px;
	background : url(../images/top-bg.gif) repeat-x top left;
}

div#leftbg
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	background : url(../images/left-bg.gif) repeat-y;
}

div#wrapper
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 758px;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background: url(../images/bg.jpg) no-repeat top left;
}

div#container
{
	
	padding: 145px 0px 0px 125px;
	
}

div#content

{
	width: 100%;
	margin: 0px;
	padding: 0px;
	float: left;
}

The HTML code:
Code:

<body>
<div id="topbg"></div>
<div id="leftbg"></div>
<div id="wrapper">

	<div id="container">

		<div id="text">content</div>
	</div>
</div>

Hi there,

I'm trying to position a background image (starting 756 pixels from the left) which is repeating horizontally - but of course am running into problems because as soon as you repeat-x an image repeats the whole screen, not taking into account background positions.

Does anyone have any ideas how I can possibly avoid this?!

The only thing I can think of is to create a huge image to factor in for all screen solutions, and just not repeat it at all. I'd prefer not to do it this way as firstly it's not very clean, and secondly it will result in a large file size.

Here is a link to the background image to show you what I'm talking about:
http://joshsphotos.com/images/bg.jpg

I've also put in the CSS that would show what I'm trying to achieve.

Code:

body {
background-image: url(../images/bg_repeat.jpg);
background-position: 756px 0px;
background-repeat: repeat-x;
}

Any help would be most appreciated.

I have a page setup like this....

<table height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td>
<td valign="top"></td>
<td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td>
</tr>
</table>

and:

.lt_bar {
width: 27px;
background-image: url("images/lt_shd.jpg");
background-repeat: repeat-y;
float: left
}
.rt_bar {
width: 27px;
background-image: url("images/rt_shd.jpg");
background-repeat: repeat-y;
float: right;
}

In IE all is fine, in FireFox the right side shows, the left side does not. any clues...

I've got a problem with a site I'm developing.

I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here?

Code:

html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}

a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}

a:hover, a:active{text-decoration:underline;}

p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}

#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}

(URL address blocked: See forum rules)/erwinsample/

Thanks for any help you can give me.

Hi

I have created a webpage using CSS image pop-outs. The three different images are hosted on imageshack. However, the three text links I have for the three different images only direct to the first image - the other two will load the incorrect image, a copy of the first. Here's the website:

westside dot org/give

Here's the code:

<img src="(url)">
<img src="(url)">


















<style type="text/css">
<!--
.fontz {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
.a {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
.a {
font-size: 14px;
}
.a strong {
font-size: 16px;
}
-->
</style>

<span class="a"><strong><font size="5"><br>
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Why We Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL um rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></font></strong></div>
</div>
<span class="a"><strong><br>
<br>




<font size="5">
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">How to Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div>
</div>
<span class="a"><strong><br>
<br>



<font size="5">
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Other Ways to Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(m rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div>
</div>
<span class="a"><strong><br>
</strong></span><br>


















</font></font></font></font><p></p></font></font>




Thanks!

I'm trying to get a background image/color to repeat down the left hand column of a site, he http:// www. lisaannschleipfer .com, but can't seem to get it working in either FF or IE. You'll notice that in the left hand column, the tannish color does not repeat all the way down the column.

I'm fairly certain I've narrowed it down to the bit of CSS code he

Code:

div#wrapper {
        margin: auto;
	width:800px;
	background: #d1c8ab url(../images/wrapper_bg.jpg);
        background-repeat: repeat-y;
}

I've tried looking around the forum for some solutions, and have found a few possibilities (height: auto, overflow: auto, etc), but nothing that I have tried to insert into the stylesheet has seemed to work.

Does anyone have any suggestions or solutions? I'd appreciate it!

Here's the entire stylesheet, for reference:

Code:

html {
  height: 100%;
  margin-bottom: 0px;
}

form {
  margin: 0;
  padding: 0;
}

img,table {
	border:none;
}

table td {
	vertical-align:top;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #666666;
	background: #0d789c url(../images/bg.jpg) top center repeat-x;
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #0d789c;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
	color: #0d789c;
}

input.button {
 cursor: pointer;
 vertical-align: bottom;
 border: 0px;
 background:none;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
  text-align:justify;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/

#header {
	margin:0 auto;
	width:940px;
}

.left_bg {
	background: transparent url(../images/left_bg.jpg) top right no-repeat;
	width:70px;
}

.middle_bg {
	background: transparent url(../images/.jpg) top right no-repeat;
	width:800px;
}

.right_bg {
	background: transparent url(../images/right_bg.jpg) top left no-repeat;
	width:70px;
}

.top_bg {
	background: transparent url(../images/top_bg.jpg) top center no-repeat;
	width:800px;
	height:45px;
}

.rightside {
	background: transparent url(../images/rightside_bg.jpg) top center no-repeat;
	width:185px;
	height:173px;
}

.header_bg {
	background: transparent url(../images/header_bg.jpg) top center no-repeat;
	width:615px;
	height:173px;
}



#page_bg {
	padding: 0;
	margin:0px auto;
}

#top {
	width:800px;
	margin:0 auto;
	padding:0;
}

div.center {
  padding:0;
}

div#wrapper {
        margin: auto;
	width:800px;
	background: #d1c8ab url(../images/wrapper_bg.jpg);
        background-repeat: repeat-y;
}

#logo {
	padding:47px 50px 0 50px;
	height:100px;
	text-align:left;
	margin:0 auto;
} 

#logo a, #logo a:link, #logo a:hover {
	font-weight: normal;
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 36px;
	padding:0px;
	margin:0;
	line-height:1.4em;
	letter-spacing:2px;
	color:#fefefe;
	text-decoration:none;
}

div.newsflash {
	height:150px;
	padding:10px;
	overflow: hidden;
	color:#fff;
	text-align:left;
}

div#tabarea {
	margin: 0;
	width:615px;
	height:26px;
	text-align:left;
}

#footer {
	width:800px;
	margin:0 auto;
}

.validation {
	float:right;
	padding:8px 20px 0 0;
}

#footer .footer {
	background: transparent url(../images/footer.jpg) top center no-repeat;
	height:28px;
	width:800px;
}

#pathway {
	padding: 0px 10px 8px;
	width: auto;
	margin-right: 250px;
	text-align: left;
}

#search {
	float: right;
	width:320px;
	margin-top: -20px;
	margin-right: 20px;
	height: 40px;
	overflow: hidden;
	text-align:right;
}

#area {
	padding: 0;
	width:100%;
/* color:#d1c8ab; */
}

#whitebox {
	margin: 0;
	width: auto;
}

#whitebox div {
	text-align: left;
}



#whitebox_br {
	height: 13px;
	background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
.pill {
  margin:0px 0 0 1px;
  text-align:left;
}

td.pill_m {
  padding: 0;
  margin: 0 10px;
  width: auto;
  text-align:center;
}

#pillmenu {
  white-space: nowrap;
  height: 26px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;

  list-style:none;
}

#pillmenu li {
	float: left;
	margin: 0px 1px 0 0;
	padding: 0;
	background: transparent;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
	float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 2px 10px 0 10px;
  color: #fff;
  text-decoration: none;
  background: transparent;
}


#pillmenu a:hover {
  text-decoration: underline;
}

#pillmenu a#active_menu-nav {
	color: #fff;
	background: url(../images/active_arrow.gif) top center no-repeat;
}

#pillmenu a#active_menu-nav:hover {
	color: #fff;
}

#leftcolumn {
	margin: 0;
	text-align:left;
	width: 221px;
	float:left;
	background: #d1c8ab url(../images/leftcol_bg.jpg) top left no-repeat;

}


div#maincolumnfull {
	padding:2px 10px;




	float:left;
	width: 760px;

}









div#maincolumn {
padding:20px 10px;
float:left;
width: 559px;
background: #ffffff url(../images/maincol_bg.jpg) top left no-repeat;
}

div.nopad {
	padding: 0;
	text-align:left;
}

td.middle_pad {
	width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}

span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}

/* headers */
div.componentheading {
  padding-left: 0px;
}

h1 {
	padding: 0;
	font-family:Helvetica ,Arial,sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	vertical-align: bottom;
	color: #666;
	text-align: left;
	width: 100%;
}

h2, .contentheading {
	padding: 0;
	font-family: Tahoma, Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	vertical-align: bottom;
	color: #8cb6cf;
	text-align: left;
	width: 100%;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Tahoma,Helvetica,Arial,sans-serif;
  color:#71a7c8;
  font-size: 1.4em;
  padding-left: 0px;
	margin-bottom: 10px;
	text-align: left;
}


/* small text */
.small {
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.modifydate {
  height: 20px;
  vertical-align: bottom;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.createdate {
	height: 20px;
	vertical-align: top;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px;

}

a.readon {
	margin-top: 10px;
	display: block;
	float: left;
	background: url(../images/mw_readon.png) top right no-repeat;
	padding-right: 20px;
	line-height: 14px;
	height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
	background-color: #f6f6f6;
}

.ol-background {
	background-color: #666;
}

.ol-textfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.ol-captionfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}
.ol-captionfont a {
	color: #0B55C4;
	text-decoration: none;
	font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}

.article_column {
	padding-right: 5px;
}

.column_separator {
	border-left: 1px dashed #e0e0e0;
	padding-left: 10px;
}

td.buttonheading {

}

.clr {
	clear: both;
}


div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}

table.blog span.article_separator {
	display: block;
	height: 20px;
}

/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  background:transparent url(../images/sectiontableheader_bg.gif) top left repeat-x;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 6px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}


tr.sectiontableentry1 {
	background:#f3f3f3;
}
tr.sectiontableentry2 {
	background:#fefefe;
}

/* content styles */
table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
}

table.contentpaneopen li {
	margin-bottom: 5px;
}

table.contentpaneopen fieldset {
	border: 0;
	border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

table.contentpaneopen h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

.highlight {
	background-color: #fffebb;
}


/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}

div.moduletable {
  margin-bottom: 25px;
}

div.module_menu, div.module {
	margin: 0 0 0 2px;
	padding: 0;
	margin-bottom: 15px;
}


div.module_menu div div div div ,div.module div div div div {
	background: none;
	padding: 0;
}

div.module_menu div, div.module div {
	
}

div.module_menu div div, div.module div div {
	padding:0 0 10px 0;
	
}

div.module_menu div div div, div.module div div div {
	padding: 0px;
	width: auto;	
}

div.module_menu ul li a:link, div.module_menu ul li a:visited,
div.module ul li a:link, div.module ul li a:visited {
	font-weight: normal;
	background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
	line-height:24px;
	
}

#leftcolumn div.module table ,#rightcolumn div.module table {
	width: auto;
}

#leftcolumn h3, #rightcolumn h3 {
	height:36px;
	color:#fff;
	font-weight: bold;
	font-family: Tahoma, Helvetica,Arial,sans-serif;
	font-size: 12px;
	line-height:26px;
	margin: -2px 0 0 ;
	position:absolude;
	padding:0px 0 2px 22px;
	text-align: left;
	width:198px;
	background:transparent url(../images/h3_bg.gif) top left no-repeat;
}


#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c {
	margin:0 0 20px 0;
	padding: 0px;
	text-align:left;
}

#leftcolumn ul.menu, #rightcolumn ul.menu {
	margin:0;
	padding:0px 0 0 10px;
	list-style:none;
	margin: 0px 0;
	width:194px;	
}


#leftcolumn ul.menu li, #rightcolumn ul.menu li {
	margin:0;
	padding:0;
}

#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
	display:block;
	line-height:20px;
	border-bottom:1px dotted #c3b586;
	padding:2px 0px 0 12px;
	height:20px;
	text-decoration:none;
	text-align:left;
	color:#666666;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
	color:#0d789c;
}

/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
	display:block;
	line-height:20px;
	border-bottom:1px dotted #0d789c;
	padding:2px 0px 0 12px;
	text-decoration:none;
	color:#0d789c;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
	color:#666666;
}

/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
	margin:0;
	padding:0 0 0 0px;
	list-style:none;
	
}

#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
	background: transparent url(../images/menu_sub_link_bg.gif) left no-repeat;
	text-decoration:none;
	color:#666666;
	padding:2px 25px;
}

#leftcolumn ul.menu li.active ul li#current a, #leftcolumn ul.menu li.active ul li#current a a:link {
	background: transparent url(../images/current_link.jpg) left no-repeat;
	text-decoration:none;
	color:#666666;
	padding:2px 25px;
}

#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
	s/menu_sub_link_bg.gif) left no-repeat;
	color:#666666;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
	margin:6px 0;
	padding:0;
	list-style:none;
}


#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
	margin:0;
	padding:0 2px;
}

table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

div.search input {
	width: 69px;
        vertical-align:bottom;
        background-color: #ffffff;
	margin: 15px 0 10px 0;
}

form#form-login fieldset {
	margin:0px 20px 0 20px;
	padding:20px 0 0 0;
	border:none;
	text-align:left;
}
form#form-login ul { 
	text-align:left;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;	
}
form#form-login ul li{ 
	text-align:left;
	margin:0;
	padding:0 0 0 20px;
}

#leftcolumn div.module h3 {
	top:-500px;
	left:-500px;
	padding-left:0;
	position:absolute;
}



/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }






div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }












/* Parameter Table */

table.paramlist {
	margin-top: 5px;
}

table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size : 14px;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
	padding: 4px;
	font-size: 11px;
}

.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	background-color: #F7F7F7;
	text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
	text-align: left;
}

/* Frontend Editing*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 0 15px;
}

legend {
	margin: 0;
	padding: 0 10px;
}

td.key {
	border-bottom:1px solid #eee;
	color: #666;
}

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}

/* System Standard Messages */
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}



/* ****************************************************************************** */
/* blue */
input,button {
	background:transparent;
        vertical-align:bottom;
}

input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none;
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
	color			: #fff;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sgfooter:hover {
	color: #fff;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:left;
color: #fff;
padding:4px 0 0 10px ;
font-family: Arial,sans-serif;
width:500px;
float:left;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #666;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #666666;
text-align:left;
}

a.sglink:link, a.sglink:visited {
	color			: #666666;
	font-size		: 11px;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sglink:hover {
	color			: #666666;
	font-family: Arial,sans-serif;
	text-decoration:none;
}

I have two divs floated inside another div, but the outside div isn't stretching to accommodate the inner divs. Why not?

The TMPL tags are used by the HTML::Template perl module.

html Code:
Original - html Code <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div>

  
    <div class='photo-navigate'>
        <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'>
            <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF>
        </div>
        <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'>
            <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF>
        </div>
    </div>

css Code:
Original - css Code div.photo-navigate { border: 1px solid black; background-color: #eeeeee; }

  

 div.photo-navigate {


     border: 1px solid black;


     background-color: #eeeeee;


 } 

I read a thread on div streching but I didn't totally understand what was going on in that particular case so I thought I create a new thread and throw my code up as well.

I'm trying to have a minimum height with a footer anchored at the bottom of the div (contained within it for the bg image to carry through behind the footer). But I can't seem to get all the pieces to work together. The problem I'm dealing with now is that the div won't stretch and the footer will be pushed down way too far.

Here is what's happening.

So how do I get the div to keep a minimum height of 706px or like 80% and then how do I get it to auotmatically stretch with the content and keep the footer anchored at the bottom of the stretched div?

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(binkwaffle.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY>


<div id="main">
<div id="header"></div>
<div id="topnav">
	<a href="index.php" class="topnav">home</a>
	<a href="cards.php" class="topnav"> cards</a>
	<a href="faq.php" class="topnav"> faq</a>
	<a href="about.php" class="topnav"> about</a>
	<a href="contact.php" class="topnav"> contact</a>
</div>

<!-- START EDITABLE AREA-->
<div id="content" class="binkwaffle">
	<div>
	<p>Hello</p>
	<p>&nbsp;</p>
	<p>This</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>is</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>a</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>test</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>to</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>seee</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>if </p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>this</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>is</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>working.</p>
	<p>&nbsp;</p>
	<p>thank you.</p>
	<p>&nbsp;</p>
	<p>&nbsp; </p>


	</div>
	
	<div id="footline">

</div>
<div id="footer" class="copyright">copyright 2006 binkwaffle
<div id="bottomnav">
	<a href="index.php">home</a>
	<a href="cards.php"> cards</a>
	<a href="faq.php"> faq</a>
	<a href="about.php"> about</a>
	<a href="contact.php"> contact</a>
</div>
</div>

</div>
<!-- END EDITABLE AREA-->



</BODY>
</HTML>

I know I've seen lots of questions on div sizing and positioning, but I apparently haven't been able to follow them. So I wrote out some very basic containers, and am looking for some very basic answers, even if they're only "no, it won't work."

So let's say I have a layout like this:
PHP Code:
<div style="height: 100%;
            width: 100%;
            border: 2px red dashed;
            text-align: center;">
<!-- outside div -->

  <div style="height: 200px;
              width: 300px;
              border: 2px blue solid;
              text-align: left;
              margin-left: auto;
              margin-right: auto; ">
  <!-- centered div -->

    <div style="height: 100px;
                width: 100px;
                border: 2px green dashed;
                text-align: left;
                float: left;">
    <!-- floated div 1 -->

hello world 1

    <!-- /floated div 1 -->
    </div>

    <div style="height: 100px;
                width: auto;
                border: 2px orange dashed;
                text-align: left;
                float: left;">
    <!-- floated div 2 -->

hello world 2

    <!-- /floated div 2 -->
    </div>

    <div style="font-size: 0px;
                height: 0px;
                width: 0px;
                clear: both;">
    <!-- clear div / -->
    </div>

  <!-- /centered div -->
  </div>

<!-- /outside div -->
</div> 





What I want to happen is for the orange div (floated div 2) to fill the rest of the width of the surrounding blue div (centered div). I know with this simple example I can simply set the pixel width, but I want to eventually make it more dynamic, allowing for variable sizes, like if I set the blue div to be a percentage instead of a fixed width.

Any ideas? (Even links to appropriate threads are appreciated!) Thanks!

(edit: had to update "centered div" to be firefox compatible)

Hi guys,

Test site at http://www.bartlett-family.net/BBCON/

The vertical BG image on the left is not repeating vertically. I can't for the life of me figure out why not. Anyone, please?

CSS is at http://www.bartlett-family.net/BBCON/main.css.

TIA!

Chris

Hello people,

Before I start, I know nothing much about CSS, and have a site that has upto for levels of nested tables. Though it looks nice, the site of the html file is massive, and I wanted to try and make a smarter file using css's.

I have been looking at this all weekend, and need some help, as I seem to keep repeating the same statements in the css file just to change the colour.

Quote:
categorylinks1{
list-style-type: none;
padding: 0; margin-left:18px; margin-right:auto; margin-top:5px; margin-bottom:10px
}

.categorylinks1 li{
padding-bottom: 1px;
}

.categorylinks1 li a{
margin-left: -3px;
padding: 0px 1px;
font-size: 10px;
display: block;
color: #2175bc;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #ececec;
}

.categorylinks1 a:visited{color: #449805; }
.categorylinks1 a:hover { color: #000000; background: #95C5EC; text-decoration: none; }


#leftbar1 .headers{
color: white;
font: bold 110% Arial;
background-color: #2175bc;
padding: 2px;
text-align: center;
}

#leftbar1 .menuitems li a{
text-decoration: none;
font-weight: bold;
}

#leftbar1{
width: 165px;
/*background-color: white;*/
}


and my html is

Quote:
<table id="maintable" border="0" width="163" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td id="leftbar1" valign="top" width="149">
<div class="headers">Malia 2007</div>
<ul class="categorylinks1">
<li id="c7"><a href="/" >Welcome to Malia</a></li>
<li id="c6"><a href="/">Pictures of Malia</a></li>
<li id="c3"><a href="/">Weather</a></li>
<li id="c17"><a href="/">Maps</a></li>
<li id="c16"><a href="/">Distances</a></li>
<li id="c12"><a href="/">Phone Numbers</a></li>
<li id="c4"><a href="/">Speak Greek</a></li>
<li id="c5"><a href="/">Bank & Post Office</a></li>
</ul>
<tr>
<td id="leftbar2" valign="top" width="149">
<div class="headers">Malia Sights</div>
<ul class="categorylinks2">
<li id="c7"><a href="/" >Welcome to Malia</a></li>
<li id="c6"><a href="/">Pictures of Malia</a></li>
<li id="c3"><a href="/">Weather</a></li>
<li id="c17"><a href="/">Maps</a></li>
<li id="c16"><a href="/">Distances</a></li>
<li id="c12"><a href="/">Phone Numbers</a></li>
<li id="c4"><a href="/">Speak Greek</a></li>
<li id="c5"><a href="/">Bank & Post Office</a></li>
</ul>


</td>
</tr>
</table>


Is there anyway I can do this, without using the same CSS code as above, and creating - .leftbar2, categorylinks2 and all the components in the CSS file, just to change the colours. In the CSS file above I have made bold the codes I have to change to make a new version in different colours.

The way I am doing it at the moment, it means for me to have 10 sections, I would need to create the CSS above 10 times, meaning it will be a massive CSS file for something that seems fairly straight forward.

Any help would be greatly received, I am sure there is another way, but as i said right at the top, all I know about CSS's I have read this weekend.

Kind Regards

Graham