Placement of content in source code
Is there a way to get the first div in the code to appear below the second div in the code when the page is rendered, without using absolute positioning?
<div id="i-want-this-below-the-other-div">This div is on the top in the source code, but I want it displayed below the following div</div>
<div id="i-want-this-on-top-of-the-other-div">This div is on the bottom of the source code, but I want it displayed above the other div</div>
webwiz posted this at 17:25 — 31st May 2007.
He has: 629 posts
Joined: May 2007
Well, I suppose you could give the first DIV a large negative bottom margin to pull the second DIV up an appropriate amount, and make room with a positive top margin. But why would you want to do this?
If you could give us a use case, or post an example, we may be able to be more helpful.
Cordially, David
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
teammatt3 posted this at 19:07 — 31st May 2007.
He has: 2,102 posts
Joined: Sep 2003
Yes! Thanks webwiz, the margin will do it. 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
width:778px;
}
#top {
background-color:#000000;
margin-top:500px;
}
#bottom {
width:777px;
background-color:#898989;
margin-top:-250px;
}
</style>
</head>
<body>
<div id="top">
<p>please be on the bottom: this div is on the top in the source code</p>
</div>
<div id="bottom">
<p>this div is on the bottom in the source code</p>
</div>
</body>
</html>
The reason I want to try this is to experiment with placing the main body content first in the code, the navigation code, and then the header, and footer to see if that has any noticeable affect on search engine rankings. Sometimes Google will display the header part of the content (stuff like the site title and slogan) for the description in the SERPs. If the main page content was first in the source code, then at least Google would grab some interesting stuff. I just want to play around with that idea.
Megan posted this at 20:36 — 31st May 2007.
She has: 11,421 posts
Joined: Jun 1999
I've heard differing opinons from SE experts about whether source code matters. Some say yes, some no (that text towards the top is given more importance and links crawled better etc.). I think it often makes more sense when the page is viewed without a stylesheet, which happens in old browsers, mobiles, and for alternate devices sometimes.
This is an interesting idea for doing it without absolute positioning (I'm a little fuzzy on why people have such a problem with absolute positioning, not that I think it's super-great or anything, just unaware of rationale against it, haven't had a chance to read the info about that... )
Megan
Connect with us on Facebook!
webwiz posted this at 02:05 — 1st June 2007.
He has: 629 posts
Joined: May 2007
Megan said:
It's not people that have problems with absolute positioning, it's browsers.
example: http://www.positioniseverything.net/posbugs.html
FWIW - absolute positioning takes an element and "lifts" it off the page, as it were. The rest of the content knows nothing about it. If the element is large, changes to content, text size, window size etc. can easily "break" the page as the absolutely positioned element may then cover other parts of the page.
OTOH - it's great for things like positioning corner images in - well - the corner.
Cordially, David
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
demonhale posted this at 04:02 — 1st June 2007.
He has: 3,278 posts
Joined: May 2005
Yep, absolute positioning is very popular on themeing sites so they can put their banners in the top left or top right of your browser window... I usually stick with negative margins for positioning elements the way I want it to, I tried the same experiment you're planning teammatt, my results we're inconclusive, but using appropriate header tags seems to do the trick, and putting excerpts of contents on top... Please post your results of this experiment...
Megan posted this at 14:13 — 1st June 2007.
She has: 11,421 posts
Joined: Jun 1999
I've never had a problem with absolute positioning - always works well for me but I'll check out that link. To me positioning makes a lot more sense than negative margins...
Megan
Connect with us on Facebook!
teammatt3 posted this at 17:43 — 1st June 2007.
He has: 2,102 posts
Joined: Sep 2003
Yeah using absolute positioning is making more sense to me to. Setting up those margins is proving to be a pain in the butt. I was hoping there was a way to do it with floats but it doesn't look like there is. CSS should have a "sink" to go along with "float".
demonhale posted this at 02:41 — 2nd June 2007.
He has: 3,278 posts
Joined: May 2005
Never had problems with absolute positioning either, just prefer the negative margins if all else fails...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.