|
| |
|
|
Reflect
Posts: 4767
From: USA
Status: offline
 |
Positioning - 3/28/2007 12:54:31
Hi,
I understand the basic concept of position. However what I don't get is how do you figure out how many pixels over/down/etc to use  .
How do you estimate/predicate/tool that you use to figure that out? Also isn't a pixel less space when viewing in, say, 1024X768 Vs. 800X600?
Take care,
Brian
_____________________________
|
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Positioning - 3/28/2007 13:22:37
This is an excellent Tutorial if you haven't already found it: http://www.cssbasics.com/
In answer to your question - yep pretty much trial and error! After using CSS for positioning for a while you'll get a better eye for approximate values and then you can fine tune it after that.
It just occurred to me while I was... well I won't say what I was doing but it occurred that these days you can get higher def screens where people can up the dpi of screens. This might well cause us all issues in future...
Just... be careful with AP!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: Positioning - 3/28/2007 14:02:03
In my mind, if you work your way down with the divs all should fall into places and positioning is not required. Within divs you can use the floating left or right, or center it and it will be positioned.
| |
|
|
|
rubyaim
Posts: 757
Joined: 6/22/2005
Status: offline
|
RE: Positioning - 3/28/2007 17:02:07
I sometimes use the Measureit add-on for FireFox to help a little with AP. Have found it handy for things like using a H1 image replacement and wanting to set a bottom margin or similar.
_____________________________
Sally
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Positioning - 3/29/2007 2:01:32
quote:
ORIGINAL: jaybee
I see work has eased off a bit then.
Sort of. One site has gone quiet while the client ponders over the fact that if they want me to change everything around AFTER the site has been launched it's going to cost them money.
The other one will kick off again later today probably.
But it's certainly calmer which is a good thing seeing as I've got a chap coming today to strip the floorboards in the room next to where I'm sitting. Don't think I'm going to get a lot done today!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Reflect
Posts: 4767
From: USA
Status: offline
|
RE: Positioning - 3/29/2007 6:44:45
OK, noted. I'll use the natural fall of <div>s while utilizing float: left/right., to an extent.
However here is the reason why I ask.
In the old days, read tables, when making my layout I would want the main body of content as close to the <body> for SEO reasons. I found a great work around using certain layouts and empty cells.
So how would you make a <div> appear right after the <body> in the code but make it appear where it should be in the layout end result. I was thinking AP. Is there another approach I could take in lieu of that?
Thank you,
Brian
_____________________________
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Positioning - 3/29/2007 7:10:59
One of the really nice things about using clean, semantic CSS layouts is that there ain't much between the body tag and your main content anyway. You don't have all those table tags crammed full of presentational stuff taking up valuable room.
This is taken from one of my client sites (names changed to protect the innocent!)
<body id="home">
<ul id="access">
<li><a href="#nav">Skip to Navigation</a></li>
<li><a href="/accessibility/">Accessibility</a></li>
</ul>
<div id="container">
<h1 class="replace" id="myh1" title="The client's Homepage"><a href="index.html"><em></em>Client's Name</a></h1>
<div id="text">
<h2>Welcome to Client's Site</h2>
<p>Blah blah blah etc etc etc...</p>
In this example I've got my skip links and a H1 tag (with image replacement technique providing a banner image) between the body and the content.
You can keep the navigation until after the content if you prefer, but if you use CSS lists for navigation then even that doesn't add a lot of extra stuff in between the body tag and your content. With this example the navigation is after the content - floated up next to it and a link provided to it in the skip links right at the top to aid accessibility.
With reference to your question - You could give your content div a top margin equal to the height of the header div which you then AP to the top of the page.
Personally - I wouldn't bother. As long as you're keeping all the presentational stuff out of it then the markup is light enough that the addition of a header div (typically) with a banner image and even navigation isn't going to clutter it up enough to make a difference.
< Message edited by Tailslide -- 3/29/2007 7:17:20 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Reflect
Posts: 4767
From: USA
Status: offline
|
RE: Positioning - 3/29/2007 14:00:23
Thank you both.
Take care,
Brian
_____________________________
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
