CSS - Background Image, Centered But With Set Margins Possible?

I figured out how to put the text on top of my background Div tag image from a previous post, but this has now shown me another problem. I now need the text to be on top of the white shape only, and not spill onto the gray area. If I remember correctly (I don't have the .ai file any more) the white area is about 500px in width. But whenever I adjust the margins to reflect this, the right side just will not comply. I'll post the two div classes' code below and maybe someone can lend me a hand.

Code:

#mainContent {
background-color:transparent;
background-image:url((URL address blocked: See forum rules));
background-repeat:no-repeat;
background-attachment:scroll;
background-position:0% 0%;
height:610px;
margin: 10px;
margin-right: 1cm;
overflow:auto;
padding-top: 1cm;
padding-left: .6cm;
width:550px;
}

#mainContentWrapper {

float:left;
margin-right:11px;
min-height:100%;
width:550px;
}

I'm using the following method for replacing the h1's with images. The problem is that in IE7 the margins above and below the header image seems to be ignored. It works fine in Firefox and Safari. I can't figure this one out. Any ideas? Thank you so much for your help!

CSS:

Code:

.titleHome   {
background-image: url("../images/home_title.gif");
background-repeat: no-repeat;
text-indent: -9999px;
margin-top: 16px;
margin-bottom: 20px;
width: 429px;
height: 42px }

HTML:

Code:

<h1 class="titleHome">Title Here</h1>

Hi!

Could some experienced CSS developer please confirm this:

All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px).

However, bottom & top margins never combine.

Is all this true?

I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>.

Code:

html, body {
	margin:0px;
	padding:0px;
	background-image:url(images/interface/background.png);
}


#body_image {
	width:935;
	margin:0 auto;
	padding:0px;
	background-image:url(images/interface/body.png);
	background-repeat:no-repeat;
	background-position:center;
}

#container {
	width:904px;
	height:750px;
	margin:15px;
}



#slug {
	height:15px;
}

Code:

<div id="body_image">

<div id="container">
	<div id="header">Header</div>
	<div id="nav">Nav</div>
	<div id="sidebar">Sidebar</div>
	<div id="content">Content</div>
	<div id="footer">Footer</div>
	


</div>
</div>

The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background.

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work.

You can clearly see the problem here, a gap at the bottom:

http://www.groundedgroup.com/clients/NWR/

Here's the relevant css:
http://www.groundedgroup.com/client...WR-GG/style.css

I've googled and subsequently tried out some solutions, but no luck. Got any ideas?

Thanks in advance.

PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed.

Hi All,

This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently.

Take a look at this:
http://zeroonedesign.com/beta/newsite/index.html

CSS he
http://zeroonedesign.com/beta/newsite/style.css

Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code

Code:

#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}

#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}

#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}

#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}

#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}

Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything.

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Hi
I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash?

I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas?

http://www.rhizaowns.com/holly/index.php

I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09


I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move.


Here is one of the examples:
Code:

#homepage-bar h2.construction {
	position:fixed;
	top:225px;
	left:505px;
}

I tried changing to position: absolute; I also tried to use percentages on the left:


I know this is easy, but I can't find the fix after googling for 30 minutes. Help!

Code:

div.top {
border: 10px solid #CCCCCC;
border-bottom-width: 0px;
padding: 0px;
background-image: url(menutile.jpg);
}

The code above yields this .

It is uneven with the normal image, though both are the same size. I simply want to tile the bg image to the border even with the normal menu images. What am I doing wrong?