Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Centered Container, Trouble with Absolutely Positioned Elements 2

Status
Not open for further replies.
jollydonkey

jollydonkey

Technical User
Sep 5, 2008
23
CA
Hello,

I'm hoping someone can help me here.

I'm trying to use a tableless layout, using only css for positioning. I'd like to have a centered layout, with elements absolutely positioned within a centered container.

See
If you look at the css source code, can someone tell me why I'm forced to use minus -8px from the top edge for the tab image? I think it should be 0 px, however, if I do that, the contact tab is not flush with the top edge of the browser.

Also, how do I get the top tab flush with the browser edge using IE explorer 6.0+? Is there something I should be considering in my CSS code? Have I missed something?

Also, should I be using a bunch of <div> tags for each element image in my HTML code? If not, what's the best way?

Any help would be greatly appreciated.

Best,
JD.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #191919;
	text-align: center;
}

div#container
{
	margin-left: auto;
	margin-right: auto;
	width: 780px;
	text-align: left;
	position:relative
}


#logo
{
position: absolute;
left: 7px;
top: 20px;
}

#anchor
{
position: absolute;
left: 0px;
top: 82px;
}

[COLOR=red]
#tab
{
position: absolute;
vertical-align:top; 
right: 0px;
top: -8px;
}
[/color]

#navigation
{
position: absolute;
vertical-align:top;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
right: 59px;
top: 18px;
}

-->
</style></head>

<body>
<div id="container">
  <div id="logo"><img src="img/jd_logo.gif" width="176" height="41" /></div>
  <div id="anchor"><img src="img/taxis.jpg" width="780" height="585" /></div>
  <div id="tab"><img src="img/tab.gif" width="165" height="60" /></div>
  <div id="navigation">Contact</div>
</div>
</body>
</html>
 
Sort by date Sort by votes
It's because (each) browser has different default margins and padding defined. You need to overwrite those defaults. Search for 'css reset' (Eric Meyer's is pretty good) or just set your margin and padding to zero:
Code: 
body {
	[COLOR=red]margin: 0;
	padding: 0;[/color]
    	background-color: #191919;
    	text-align: center;
}

...

#tab
{
position: absolute;
vertical-align:top; 
right: 0px;
top: 0px;
}

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
(And that doesn't even touch on why absolute positioning is usually not needed.) [smile]

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Is there a reason why you need to use Absolute positioning?

Your layout seems simple enough to not really need it.

As far as the images go, divs are containers basically, unless your images need to be inside a DIV for some particular reason, you can simply use img tags to place your images. This has the benefit of being able to control how they appear within text.

Its like wanting to store books. do you store each book in its own box, or put them all inside one box. Unless there's a reason you need each book in its own box, usually you would store them all in the same box.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks so much guys - great insight and feedback! My site is now looking just the way I want it to using various browsers.

Best,
JD.
 
Upvote 0 Downvote
Looks good. I realize you have your issue fixed, but something you might consider is turning those tabs into background images.

It's best if HTML is used only to define the structure of a webpage and the styling is left up to the CSS. Since those images are part of the design of the site rather than actual pieces of content (like photographs or charts being presented to users), it would be beneficial to let the CSS handle this. Besides the separation of responsibility, an example of how this could be a benefit is when users do CTRL+A to select content on your page, those images wouldn't be selected (since they'd be background images).

Even if those are designed to be links (I noticed they were named contact and portfolio), what you would end up with is absolutely positioned links (actual things users can interact with). The styling (which isn't actual content) could remain a background image.

Again, looks good -- this was only meant as a suggestion if you really wanted to go the extra mile.

Richard Morgan, Dallas Web Developer
RISTMO Designs: Rockwall Web Design
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
790
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
399
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
412
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
328
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
361
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top