...

View Full Version : html tables positioning help!



notyourstar
05-06-2007, 02:12 AM
hi everyone!
I need some help positioning my tables! I made this layout, and I would like the pink table to go in the middle. however, I am not sure how to do that. I need it so that -all- browsers will see it in the same position, I don't want it to be able to move around, like hspace and vspace in iframes.

can you guys please help me?


http://www.heartless-ink.com/layout.html

koyama
05-06-2007, 02:55 AM
Here is what you need to do.

(1)
Add a doctype declaration at the top of your document. Otherwise your page is rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html), and you won't be able to center block-level elemets using correct CSS in IE. For now, you can use this one:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

(2)
Try this to get started.


#wrap {
width: 1000px;
margin: 0 auto;
background-image: url(layout22.jpg);
background-repeat: no-repeat;
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>...</head>
<body>
<div id="wrap">
[your page content]
</div>
</body>
</html>


(3)
Use the validator (http://validator.w3.org/) to check if there are errors in your code.

notyourstar
05-06-2007, 04:05 AM
hi! thanks, it's just that I am not sure where to place the #wrap tag. it doesn't work where ever I try to stick it. where does it belong?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><title>oops, oh my</title></head>
<body>

#wrap {
width: 1000px;
margin: 0 auto;
background-image: url(layout22.jpg);
background-repeat: no-repeat;
}
<div id="wrap">
wahhhhhhhhh
</div>
</body>
</html>

koyama
05-06-2007, 04:12 AM
it's just that I am not sure where to place the #wrap tag. it doesn't work where ever I try to stick it. where does it belong?
Either like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><title>oops, oh my</title>
<style type="text/css">
#wrap {
width: 1000px;
margin: 0 auto;
background-image: url(layout22.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="wrap">
wahhhhhhhhh
</div>
</body>
</html>
or better... in a separate file named e.g. styles.css


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><title>oops, oh my</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="wrap">
wahhhhhhhhh
</div>
</body>
</html>

notyourstar
05-06-2007, 04:22 AM
hmmmm.


http://www.heartless-ink.com/test.html ?

koyama
05-06-2007, 04:33 AM
hmmmm.
(1)
You should crop your background image. You have some 200px excessive white space on the left side and some 100px excessive white space on the right side of your image.
(2)
After doing that adjust the width of your #wrap so that it fits the width of your background image.
(3)
Apply some padding to #wrap so you get your text to start the right place. Example:


#wrap {
width: 700px;
margin: 0 auto;
padding-top: 50px;
padding-left: 100px;
background-image: url(layout22.jpg);
background-repeat: no-repeat;
}

notyourstar
05-06-2007, 05:19 AM
oh, thanks!
I am going to leave the insane white space because without it my layout affixes itself to the left and there's massive white space on the right. and I can't make her bigger cause then you can't see her boots

felgall
05-06-2007, 05:35 AM
You should be able to set appropriate margins and get rid of the whitespace out of the image that is making the image file WWWWAAAAAAAAAAAAAAAAAAYYYYYY bigger than it needs to be.

tsguitar2004
05-07-2007, 09:05 AM
BlueRobot (http://bluerobot.com/web/css/center1.html) to the rescue again, I think. Do you have a graphic that looks like how you want the layout of your site to be? I'm not sure what you're trying to accomplish here. I think that going with CSS instead of tables is a good idea and should make things easier for you later.

Get back to me and let me know how you want things to look.
-ts



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum