• Locked
6 replies [Last post]
Thu, 2010-08-05 13:34
sinkingsun73
sinkingsun73's picture
User offline. Last seen 1 year 9 weeks ago. Offline
newbie
Timezone: GMT-6
Joined: 2010-08-05
Posts: 9
Points: 12

I have all of my main content centered with margin: 0 auto;

I have an image on top of that content using Z-index and position: absolute;

The problem: when i resize the browser the z-index images stays put (because of the absolute positioning) and the centered content moves.
how can i get the z-index image to move WITH the centered content?

thanks!

Top
Tags:
Thu, 2010-08-05 13:42
#1
CupidsToejam
CupidsToejam's picture
User offline. Last seen 2 weeks 1 day ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

It's container should be set

It's container should be set to position: relative;


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
Thu, 2010-08-05 13:47
#2
sinkingsun73
sinkingsun73's picture
User offline. Last seen 1 year 9 weeks ago. Offline
newbie
Timezone: GMT-6
Joined: 2010-08-05
Posts: 9
Points: 12

Thanks @CupidsToejam! Ill try

Thanks @CupidsToejam! Ill try that.

Top
Wed, 2010-08-11 00:51
#3
sinkingsun73
sinkingsun73's picture
User offline. Last seen 1 year 9 weeks ago. Offline
newbie
Timezone: GMT-6
Joined: 2010-08-05
Posts: 9
Points: 12

still isnt working...

I am not sure what I am doing wrong.

I am still having the same problem.
I have all of my main content centered with margin: 0 auto;
I have an image (coffee) on top of that content using Z-index and position: absolute;

The problem: when i resize the browser the z-index images stays put (because of the absolute positioning) and the centered content moves.
how can i get the z-index image to move WITH the centered content?

WHAT AM I MISSING? Please help me out :]

Here is my code

HTML:**************************************

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Align Design</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
</head>
 
 
<body>
 
 
 
<div id="wrapper">
 
<!--<div id="coffee">
 
</div>-->
 
	<div id="header">
 
    	<div id="logo">
        <a href="index.html">
        <img src="art/header_bg.jpg" />
        </div><!-- logo -->
 
        <div id="nav">
        	<ul>
            <li>about us</li>
            <li>portfolio</li>
            <li>contact</li>
        </div><!-- nav -->
 
    </div><!--header -->
 
    <div id="bodytext">
    <p>
 
    </div><!--bodytext -->
 
    <div id="footer">
 
    </div><!--footer -->
 
 
 
 
</div><!-- wrapper -->
 
 
</body>
</html>

CSS************************

@charset "UTF-8";
/* CSS Document */
 
body {
	background:url(../art/bg.png) repeat-x #434343;
	}
 
#wrapper {
	position:relative;
	margin:auto 0;
	z-index:0;
	}
 
#coffee{
	background:url(../art/coffee.png) no-repeat;
	height:869px;
	width:387px;
	margin-left:300px;
	margin: auto 0;
	position:absolute;
	z-index:1;
	}
 
#header {
	margin:0 auto;
	height:269px;
	width:1023px;
	clear:both;
	}
 
#logo {
	margin: 0 50px 0 0;
	height: 269px;
	width: 323px;
	float:left;
	}
 
#nav {
	background:url(../art/nav_bg.png) no-repeat;
	height:269px;
	width:650px;
	float:left;
	}
 
ul {
	float:left;
	width:300px;
	margin:240px 0 0;
 
	}
 
li {
	display:inline;
	list-style-type:none;
	}
 
li a {
	font-family: Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-size:12px;
	color:#000000;
	padding:5px;
	}
 
li a:hover {
color:#999999;
	padding:5px;
	}
 
#bodytext {
	background:url(../art/body_bg.png) no-repeat;
	margin: 0 auto;
	height: 580px;
	width: 1023px;
 
	}
 
#footer {
	background:url(../art/footer_bg.png) no-repeat;
	margin: 0 auto;
	width:1023px;
	height:728px;
	}

Top
Wed, 2010-08-11 18:33
#4
Debayan Gupta
Debayan Gupta's picture
User offline. Last seen 1 year 18 weeks ago. Offline
rank Regular
Regular
Timezone: GMT-4
Joined: 2010-08-10
Posts: 45
Points: 51

Umm.. html..

-> wrapper (and others) have "auto 0" - shouldn't it be "0px auto" or "0 auto" for centering ?

"coffee" _should_ move (you're using margins to move it around) - try posting a link.

Note: Your html is invalid (eg. the "a" tag in div "logo" has not been closed. Its the same with the next "ul" tag, and the "p" tag after that).

Top
Sat, 2010-08-14 00:38
#5
sinkingsun73
sinkingsun73's picture
User offline. Last seen 1 year 9 weeks ago. Offline
newbie
Timezone: GMT-6
Joined: 2010-08-05
Posts: 9
Points: 12

Here is a link to the files

http://www.shawnbast.com/ad/

I still can not figure out what is going on. But, I did try to fix my html tags . Wink

thanks,
S

Top
Sat, 2010-08-14 10:31
#6
Debayan Gupta
Debayan Gupta's picture
User offline. Last seen 1 year 18 weeks ago. Offline
rank Regular
Regular
Timezone: GMT-4
Joined: 2010-08-10
Posts: 45
Points: 51

Hmm..

Your coffee cup is moving around.

This is because you put the div in the wrong place in the html.

Where should it be ?
After header and nav.

Just move the div there (in the html) :
(I've put all the images in the current directory - you'll need to set the locations)

<div id="wrapper"> 
 
	<div id="header"> 
 
		<div id="logo"> 
			<a href="index.html"><img alt="" src="header_bg.jpg" /></a>
		</div>
 
	<div id="nav"> 
		<ul> 
			<li>about us</li> 
			<li>portfolio</li> 
			<li>contact</li> 
		</ul> 
	</div>
 
	<div id="coffee"></div> 
</div>

Note: This won't affect the coffee thing, but I've moved the "header_bg.jpg" img-tag inside the a-tag which href's to "index.html".

As for the css, in global.css, do this :

#wrapper {margin:0 auto}
#coffee {
	background:url(coffee.png) no-repeat;
	height:869px;
	width:387px;
	margin:30px 0 0 650px;
	position:absolute;
	z-index:1;
}

There's a lot of unnecessary code in the CSS (and divs in the html). Try removing them.

It seems that you're using the "Photoshop Theory of Web Design"..
Why are you using so many images ? body, header, content and footer are all images !

A little bit more, and you wouldn't need any markup at all !

Top
  • Locked