CSS - Content Slider Showing Content Underneath Without Background... Help

is there a way to have a different background image in the .content area on different pages?

this is the site:
http://bradleyrose.net/WaterStreetRestaurant/pages/catering&parties.html

cobble-stone-road-4.jpg is used on all pages, is there a way to use a different image on some pages?

I have a layer 'main' that contains two columns - one on the left called 'left', one on the right called 'right'. Both columns are layers themselves.

'main' has a background colour

'left' and 'right' have a fixed size background image which does not repeat.

JavaScript determines the size of the window and then sets the height of these three layers exactly. This is supposed to be a minimum height to ensure the page is filled initially, however I have used the following code (explained later):

Code:

if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    myHeight = document.documentElement.clientHeight;
  } 
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    myHeight = document.body.clientHeight;
  }

  
   // main height
   var pageHeight = myHeight;
   document.getElementById("main").style.height = pageHeight+"px";
   
   // content height
   var leftHeight = pageHeight - 233;
   document.getElementById("left").style.height = leftHeight+"px";
   document.getElementById("right").style.height = leftHeight+"px";

Content on 'right' may extend beyond the height of the page and therefore makes the page scroll.

When the content in 'right' expands - it is hoped that the size of 'main' expands so that the background colour of this layer fills the space where the content overflows.

Using the above JavaScript and this HTML - that works as desired in IE7.

Code:

<div id="main" style="position: relative; margin: 0 auto; width: 680px; background: #E1E6EA; text-align: left; padding: 0; z-index: 2">

<div id="left" style="float: left; text-align: center; margin: 0; padding: 0; width: 198px; background: #E1E6EA; background-image: url('images/left.jpg'); background-repeat: no-repeat; z-index: 3">

blah

</div>

<div id="right" style="float: right; text-align: center; margin: 0; padding: 0; width: 482px; background: #E1E6EA; background-image: url('images/right.jpg'); background-repeat: repeat-x; z-index: 3; overflow: inherit">

badly coded extra bit to extend the layer
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy

</div>

</div>

As the content of 'right' expands so does the background behind everything.

HOWEVER - this only works in IE and not the other two test browsers: Safari and Firefox.

To remedy this - I tried minHeight instead of height.
The outcome of that - the background behind 'right' extends (because the background colour continues past the minHeight) but the background behind 'left' is just not shown and the background of 'main' does not extent. Therefore it has a background on the left hand side until the minHeight of 'main' then the left hand side has no background after that point. That's in Firefox and Safari.
With this "solution" in IE - it goes a bit weird but since it doesn't even work right in the other two I ignore that for now.

So - it either works in IE or not at all. Hence why I am currently using the code that at least works in a browser.

Any suggestions to get it working in all?

I update the website of a local gaming center and I recently redesigned it. I am not a CSS expert and now that I have integrated it into to site, the background will not fill the screen on larger monitor sizes. When you scroll down to the bottom of the page it turns leaves a large white space at the bottom of the screen. There is also an odd white border around the site. The css can be found in the source code. The site is nextlevelchardon.com

I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour.

I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas?

This is the technique I've been using:

Code:

<div id="header-fluid">
<div id="header-fixed">

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

</div><!-- head-fixed -->
</div><!-- head-fluid -->

Code:

<div id="content-fluid">
<div id="content-fixed">

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

</div><!-- content-fixed -->
</div><!-- content-fluid -->

Code:

<div id="footer1-fluid">
<div id="footer1-fixed">

<div id="sponsors"></div>

</div><!-- footer1-fixed -->
</div><!-- footer1-fluid -->

Code:

<div id="footer2-fluid">
<div id="footer2-fixed">

<div id="copyright"></div>

</div><!-- footer2-fixed -->
</div><!-- footer2-fluid -->

Thanks for your time on this!!
Hanek

Hello,

I just joined the forum, I'm new to web design although I have some experience in video post production.

I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column.
The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to.

It's probably a novice mistake but I can't get to find it. Your help would be much appreciated.
The HTML:

Code:

<body>

<div id="nonFooter">
		<div id="wrapShadow">
		<div id="header">
				<div id="linksHead"></div>
		<div id="mainMenu"></div>
		</div>		
			
		
		<div id="content">
<div id="bannerSlider">  (SWF file)
</div>
			<div id="contentBuscador">
			</div>
			<div id="contentTours">
			</div>
			<div id="contentElite">
			</div>
			<div id="contentTestimonios">
			</div>
			<div id="contentPromos">
			</div>
		</div>
	</div>
</div>
	<div id="footer">
		<div id="wrapShadowFooter">
		</div>
		</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
	</script>
</body>

The CSS:
Code:

html,body {
	padding: 0;
	margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-color: #3399cc;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

* html #nonFooter
{
	height: 100%;
}

#content
{
	padding-bottom: 7em;
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	clear: both;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #336;
}
#header {
	width: 900px;
	height: 100px;
	position: relative;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#footer
{
	position: relative;
	margin-top: -6em;
	height: auto;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
} 
#wrapShadow {
	width: 920px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#wrapShadowFooter {
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding: 0px;
	background-image: url(_images/footerCruiseship.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 100px;
}

All #content(area) Divs in content have the same code as this:
#contentBuscador {
	float: left;
	height: 100px;
	width: 880px;
	padding: 0px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}

Thank you,
pixelMason.

Edit: Problem Solved thanks to f_nietzsche

Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so:

Code:

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel.

Does anyone know of a way to control the inter-div spacing when "clear" is defined?

Thanks

Ken


---------------------------------------------------------------
Original post
---------------------------------------------------------------
I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems.

The first row renders perfectly but the text of subsequent rows overlaps the text of first row.

Here's the html:
Code:

<div id="contentBlock" class="bodyText">
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">New</div>
	</div>
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">Open</div>
	</div>
</div>

And here's the CSS:
Code:

#contentBlock {
	position: absolute;
	top: 130px;
	left: 200px;
	height: 101%;   /* Hack to force vertical scroll bars */
	right: 280px;
	min-width: 400px;
	visibility: visible;
	display: block;
	}

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

.disclosureCollapsed {
	background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
	display: block;
	text-align: right;
	/*position: absolute;*/
	float: left;
	top: 0px;
	left: 0px;
	width: 18px;
	height: 20px;
	}

.disclosureCollapsed:hover {
	cursor: pointer;
	}

How would I make the text in each subsequent row (statusDiv) line up?

Thanks for any help

Ken

http://www.hybridillusions.com/wordpress/?m=200712

Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like...

http://www.hybridillusions.com/wordpress/

For CSS reference, here is where the css file is located:
http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css

Thanks in advance!

When the page loads initially, the bottom portion of the div/ul is cut-off. However, once I start sliding through the different sections, the entire element is visible. Odd thing is, it works just fine 10% of the time...all browsers (ie, ff, chrome) seem to be impacted similarly.

Webpage: hxxp://jennifer.e-carleton.com

I am using loopedSlider for my base slider code (hxxp://nathansearles.com/loopedslider/)

Not sure if this is a JS or CSS issue, but my gut says CSS...thanks for your help,
JC

Hi,

my css is probably a mess as I've been hacking things together for a few days.

my site:jasondaydesign.com

I have a div where my content divs are contained.
In firefox & chrome, the background for the div shows fine. In IE, the background does not show.

I'm not sure where the css issue is that's causing this.

Could someone point me in the right direction for solving this?

Thanks!

Hi:

I have the following in my CSS file:
PHP Code:
#body {
    background: url('images/columns.gif') repeat-y;
    text-align: left;
} 





The problem is that the background image is not showing up un MS Internet Explorer. It works fine in Firefox. Is this a bug? Do I need a hack?

Hello,

I have been trying to figure this out, but have been unsuccessful. I am using a modalPopupExtender, but when the popup comes up, my background is still active. I suspect it has to be something in my css file, but would appreciate some help on this. I suspect it is the css that is causing this, but cannot figure out what. TIA!

Here is the code for the MPE:

<cc1:ModalPopupExtender ID="MPE1" runat="server"
TargetControlID="btnShowModalPop"
PopupControlID="divPop"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="panelDragHandle"
DropShadow="true"/>


Here is the code in my css file:

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPop {
background-color:Gray;
border-width:3px;
border-style:solid;
border-color:Black;
padding:0;
width:250px;
color:White;



}

.drag
{
background-color:#ff0000;
cursor: move;
border: solid 2px white;



}










I found the issue by referencing a blank css file and slowly adding statements in. It was a combination of the following which prevented the backgroundcssclass to not be shown propertly:

#body div div { background: url(images/body_tr.gif) top right no-repeat; }

#body div div div { background: url(images/body_bl.gif) bottom left no-repeat; }
#body div div div div{ background: url(images/body_br.gif) bottom right no-repeat; }


#body div div div { background: url(images/body_bg.gif) bottom left no-repeat; }
#body div div div div { background: url(images/body_bg.gif) bottom right no-repeat; }


#body .inner div { background: none; }

I ended up add these bg imgs in my master page div tags directly and is working fine.....for now :P
Edit/Delete Message

Hi everyone,

I have a design I am working on a design, which has a image for a background, well the image does not show, I am not sure why, it just shows white text. Anyway here is my code.
Code:

#logo{
	background-image: url('logo.png');
	background-repeat: no-repeat;
}
#logo .text{
	letter-spacing: -0.1em;
	font-weight: bold;
	font-size: 21px;
	text-align: left;
	color: #FFFFFF;
}

That does not work, however, this does.
Code:

<img src="logo.png" alt="Logo" />

Any suggestions?

This puzzles me for this is the first time EVER that it is not working. I have "background-image" coding and NONE of those images are even showing up, yet when i add them on the index file as a normal image all is well...

Any ideas?

For some reason no matter how I structure the code, I cannot get a background image to show up and I'm not sure why. Here is my current code: Code:

background: #cccccc url(/dir/bg.png) repeat-y;

I've checked multiple sites just to verify that my code is correct, and it is. I've also tried the code another way: Code:

background-color: #cccccc;
background-image: url(/dir/bg.png);
background-repeat: repeat-y;

The image is uploaded to the correct directory as well. Any ideas?