CSS - Background Problem

Hey Guys,

as you see I'm new here and it would be quite cool if someone here can help me. i need this problem to be solved.. finally^^

So here's the problem:
I'm on starting a new website and the guy for the graphics sent me his design. Looks quite cool but there's one problem: There's a background which needs to be separated into three parts. To make my problem clear i made a short sketch, see he


As you see, Part I is always in the top left corner, ok that shouldn't be the problem. But here is where it gets tricky: No matter which screen resolution there is, Part II should show up in the top right corner. And the next Problem is: Part III should always be on the bottom, and these two things are a problem^^

Anyone got an idea? Would be quite yool if someone knows what to do..

Lukas

I'm redesigning my website comdots.com. I'm puzzled by my body background line. If I delete the repeat-x; statement I get no background, just a white background. What I was expecting was that the background would repeat itself down both sides and across the bottom, which is what want. If I include the repeat-x; statement I get what you would expect and as shown on my website. So what should I change in my style.css file in order to get my background on the top, bottom, left, and right.

my code is below

Code:

<style>
.myclass{ 
color:white;
background: black
url(http://img-cdn.mediaplex.com/ads/3976/22164/408x27_uom.gif) 
no-repeat fixed 
top left;
height:100%;
}
</style>

<table height=100% width=100%>
<tr><td class=myclass>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

</table>

result of IE
http://img103.echo.cx/img103/7196/ie7ab.png


and Moz
http://img103.echo.cx/img103/9229/moz0jq.png

this code works with IE without being any problem
in IE, if scroll is bottom, background image doesnt come to bottom.

but Moz, it does

please help me..

Code and page displayed

Ive been working on it for a few days...making it look like a page. But now im so close i just cant get the top and the top right and top left corners to appear correctly as you can see from the link above. Any ideas why?

I realise using just div's isn't the best way w3 style but there are reasons why im not making use of other elements.

So I'm trying to setup a column on the right side of my content for advertisements.

I've gotten the two columns lined up next to each other, but the problem is that the background doesn't flow down to compensate for the length of the advertisement. It only seems to pay attention to the content in the content column on the left. Does anyone know how to get that background to extend down to compensate for the length of the advertisement, depending up on whether or not it's displayed?

If anyone's better with CSS than I am, and could help, I'm open to suggestions and fixes for how to accomplish this.

Test Page:
cvoproweb.com/testpage.html
Test CSS:
cvoproweb.com/teststyle.css

Thanks for the help, hopefully the problem isn't too complicated.
-Chris

Edit: This problem seems to be occurring in Firefox and Opera, (it works in IE7) does anyone know how to fix this in Firefox and Opera?

Hi Guys,

I hope you can help me, I have spent all day trying to figure this out. Basically I am trying to learn CSS and an explanation as to how this works (and what code to look for where) would be helpful.

The template page I am looking at to learn from is a web site CSS template included with dreamweaver. The code I am looking at is this:

<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global
link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global
link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global
link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global
link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global
link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global
link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global
link</a>
</div>
<!--end globalLinks-->
<form id="search" action="">
<input name="searchFor" type="text" size="10">
<a href="">search</a>
</form>
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
link</a> | <a href="#">subglobal1 link</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="....

... and it goes on.

Also the CSS that I think is relavent is:
#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url("glbnav_background.gif");
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


What I want to know is:
- behind the global nav links there is a long image in the background that is BEHIND the links. The links themselves appear over top and there is a CSS rollover image that appears above the background image.

I can't figure out how this background image got there. (I wish I could include a screen shot to point it out)

Can anyone see what Im talking about? The site is basically a replica of macromedia.com (and the top menu is what I am talking about)

Thanks for any help!
Thinklogos

I have a problem with my CSS in IE6 (surprise, surprise).

If you look at www.bluehatmedia.co.uk

you will notice that the left hand menu is for some reason on the far right (needing to scroll).
But if you look in FireFox, Netscape, Opera, Safari they all work fine.

But if you mouse over a link then the menu goes back to the left had side where it should be.

and when i remove the following from my CSS:

background-image:url(images/picture.gif);
background-repeat: repeat-y;
background-position: right top;

the background image doesnt display (obviously) and then menu goes back to the left.

Any ideas much appreciated

Tom

I'm trying to tile the background of my menu infinitely so the design stretches to the very edge at the bottom of the viewport. Unfortunately, for some strange reason, it just decides to stop in the middle of the page. I've tried height:100% in various places with no luck. Help would be immensely appreciated!

To see what I'm talking about, go here .

My page code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Z Studios ::</title>
	
	<style type="text/css" title="currentStyle" media="screen">
		@import "zstudios.css";
	</style>

</head>
<body>

<div id="pageHeader">
	<h1><span>Z-Studios</span></h1>
</div>

<div id="mainnav">
	<ul>
		<li id="navLife"><a href="#life">Life</a></li>
		<li id="navMovies"><a href="#movies">Movies</a></li>
		<li id="navArt"><a href="#art">Art</a></li>
		<li id="navBusiness"><a href="#business">Business</a></li>
	</ul>
</div>

<div id="page">

	<div id="mainleft">
		<div id="mainleftTop">
			
		</div>
	</div>

	<div id="maincenter">
		<div id="content">
			kjfdlsj (repeated over and over to test background stretching)
		</div>
	</div>

	<div id="mainright">
		<div id="mainrightTop"></div>
	</div>

</div>


</body>
</html>

... and my stylesheet:

Code:

/* Header/Logo - using an image to replace text in an h1. */
#pageHeader h1 { 
	background: transparent url('images/header.jpg') no-repeat top left; 
	width: 774px; 
	height: 148px; 
	float: none;
	margin: 0;
	}

#pageHeader h1 span {
	display:none
	}

/* Main menu bar */
#mainnav	{
	width: 774px;
	height: 38px;
	border: 0;
	padding: 0;
	margin: 0;
	top: 78px;
	left: 0px;
	}
	
#mainnav ul	{
	width: 774px;
	height: 38px;
	background: url(images/menu.gif) no-repeat;
	margin: 0;
	padding: 0;
	position: relative;
	left: 0px;
	}
	
#mainnav ul li	{
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
	
#mainnav ul li, #mainnav a	{
	height: 38px;
	display: block;
	}

#mainnav ul li a	{
	text-indent: -9999px; 
	text-decoration: none;
	}

/* Mouseover buttons */
#navLife {
	left: 100px;
	width: 60px;
}
#navMovies {left: 250px; width: 85px;}
#navArt {left: 430px; width: 60px;}
#navBusiness {left: 565px; width: 100px;}

#navLife a:hover {background: transparent url(images/menu.gif) no-repeat -100px -38px;}
#navMovies a:hover {background: transparent url(images/menu.gif) -250px -38px no-repeat;}
#navArt a:hover {background: transparent url(images/menu.gif) -430px -38px no-repeat;}
#navBusiness a:hover {background: transparent url(images/menu.gif) -565px -38px no-repeat;}
	
	html, body {
		margin:0px 0px 0px 0px;
		padding:0px;
		background-image: url("images/bg.jpg");
		height: 100%;
		}

	#page {
		height: 100%;
		}
	
	#maincenter {
		background-image:url("images/content_border_top.gif");
		background-repeat: no-repeat;
		width:529px;
		float:left;
		padding-top:36px;
		height: 100%;
		}

	#content {
		background-image:url("images/content_bg.jpg");
		background-repeat: repeat-y;
		text-align: left;
		padding-left: 30px;
		padding-right: 30px;
		}
	
	#mainleft {
		width:190px;
		float:left;
		background-image:url("images/menu_left.gif");
		background-position: 0px 67px; 
		padding-bottom: 36px;
		height: 100%;
		}

	#mainright {
		width:55px;
		height: 100%;
		float:left;
		background-image:url("images/right_border.gif");
		background-repeat: repeat-y;
		background-position: 0px 67px; 
		padding-bottom: 36px;
		}

	#mainleftTop {
		padding-left: 55px;
		padding-top: 67px;
		text-align: center;
		background-image:url("images/top_left.gif");
		background-repeat: no-repeat;
		}

	#mainrightTop {
		width:55px;
		float:left;
		background-image:url("images/top_right.gif");
		background-repeat: no-repeat;
		padding-bottom:0;
		}

Thanks again!

~Zach

Hello,
I'm currently developing a new website for a clan but Internet Explorer isn't displaying the background image of the content area correctly.

It pushes the content area ~4px to the right from where it should be. I've tried reducing the size of the navigation element but that didn't work and in fact had the opposite effect of what I was looking for.

For some reason I can't link to an image, nor to the site itself to show you the error.

This is the code applicable to the content area.
Code:

#content
{
	width:770px;
	background-image:url(images/backgrounds/conbg.png);
	background-repeat:repeat-y;
	font-size:11px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 70px;
	margin-left: 130px;
	margin-right: 0px;
	vertical-align:top;
}

#contentlimit
{
	width:690px;
}

#condiv
{
	width:770px;
	margin-left: 130px;
	margin-right: 0px;
}

And this the Navigation element:
Code:

#nav
{
	width:130px;
	display:block;
	float:left;
	vertical-align:top;
	margin: 0px 0px 0px 0px;
}

.mlink a
{
	display: block;
	color: #666666;
	background-image:url(images/backgrounds/link.jpg);
	width: 130px;
	padding: .0px .0px;
	height:15px;
	text-decoration: none;
	text-indent: 10px;
}

.mlink a:hover
{
	color: #333333;
	text-decoration: none;
	background-image:url(images/backgrounds/linkhov.jpg);
}

At last check, with this current style sheet, the code was valid.

Any help appreciated,
Cold

I don't know if this has been adressed or not but I am having a problem using the background:url(images/stuff.jpg); and the background-image: .... I been trying to set an elements background but I get nothing for the background it will not apper even if I do a simple code like this

this is just an example :
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS Code:

 div#top p {

 background:url('image/logo.gif');
 }
 

I would do something like this and it will not show the bg image I mean this is just a simple code I have done it in the past but I don't know why I am not able to see the bg image is there a rule I missed somewhere if so which one


well hope you can help me

I have a horizontal ul:

Code:

<ul>
<li>blah</li>
<li>loooooooooooooooooooooong blah blah blah</li>
</ul>

If I set the background color:
Code:

li { background-color: yellow; }

It works fine, but If the long line gets wrapped, the height of the background of that li is higher, and it looks very funny. I want the background to be equally height, independent on the other li:s height.

Is that possible? I don't want to have a fixed value for the height

This only causes a problem in IE6, not Firefox or Opera.

The page in question is: http://www.kbs.com.au/index2.asp

CSS is at: http://www.kbs.com.au/kbs2.css

The problem is that the 'Business Services' rollover is appearing further down the problem where it shouldn't. If I take the links (<a> tags) from the two <p> tags further down the page, the images disappear, so it's somehow linked to the classes assigned to links, but I can't figure out how or why or how to fix it.
I tried adding a class just for the offending <p> tags which sets background: none, but that didn't work either.

Anyone got any ideas what's going wrong?

Hi,

The page in question can be found he http://serve5.net/xcage/. Basically, if you view it in Firefox/Mozilla, the background png for the element that contains the date is transparent with a tint to it. However, if you view the page in Internet Explorer, it is gray rather than transparent. Could someone take a look and tell me what's wrong?

The CSS can be found he http://serve5.net/xcage/css/standard.css.

Thanks,

Rob.

Hey everyone, I have a site I'm working on for a charity hosted he
apoctrack . com/craftsforacause

I'm using Dreamweaver and the included Spry framework to render the tabs, and everything seems to be working fine in Firefox, but the background won't render correctly in Safari.

Help!?

The stylesheet is he url above with /index.css

An older version of the site worked fine in both Safari and Firefox, and I've compared the code but found nothing...
The old site is he url above /index_classic.html and /index_classic.css

Any help would be appreciated! Thx in advance...

Well... sorry about the poorly formatted url but the anti-spam rules seem to mean I must post 5 useless posts in order to post anything of substance (with a url). So yeah.

I did a diff on the stylesheets but that's hard to post here, so I can try if it'd be useful. Prolly easier to run it urself it it'd be helpful. Nothing useful came up when I tried it. Same for the html pages themselves.

I am trying to assign a background to footer div, it appears fine with internet explorer, but it does not appear at all with firefox.

http://www.refinethetaste.com/html/