Positioning (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Reflect -> 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



jaybee -> RE: Positioning (3/28/2007 12:59:03)

Whilst furiously trying not to mention missionaries and failing miserably...... what? Not with you. Are you talking absolute and relative?



Tailslide -> RE: Positioning (3/28/2007 13:07:48)

Blimey you're all questions tonight aren't you!! [:D]

When you say Position are you talking about Absolute Positioning or floats?

I'll ramble on assuming you're talking about AP... for no reason other than I feel like it.

With AP, say you have 2 divs - #outer and #inner (or maybe outie and innie?) and you want to AP #inner. What you do is add position:relative to #outer and then you can use AP to fix the position of #inner in relation to it's containing div (#outer). If you don't give #outer position:relative then #inner will be positioned with reference to the whole viewport (top left of the screen).

Now I've re-read your post and realised you probably already know this but I can't be bothered to delete the last paragraph so let's call it a re-cap ok?

Pixels (far as I know) are literally that - the teeny dots on the screen per square inch. Pixel size shouldn't (I don't think) vary much at larger screen widths - 1px is still pretty much 1px - there's just 800 of them across the screen rather than 1024. (think I've covered myself enough in case I'm talking rubbish again?)

If you're using a fluid layout then there's nothing to stop you using % instead of px.

Generally my opinion (woo hoo) is that AP is more trouble than it's worth. I use it for small areas (maybe a search box for instance) rather than big chunks of a site. Reason being that it can, if used incorrectly make your site very brittle and prone to breaking if people change their browser setups.

Using AP is kind of like nailing a bit of the page to a wall with a big nail gun - feels kind of cool, but sort of goes against the whole fluidy, elastiky, hippy nature of websites which need a certain amount of flexibility or they start crying. I pretty much only use floats for positioning big bits of the page.



Reflect -> RE: Positioning (3/28/2007 13:18:15)

Tail, yes you guessed correctly. I was referring to AP.

However how do you know that the menu should be left: 0 px and down: 50 px? That is what I am failing to grasp. Do you just go by looks/trial and error?

Yup, many questions. I have used CSS for links, ULs, font formatting but never for postioning. I have always used tables.

I have a new site I want to start once work dies down on the day job. I am on what I thought was an ended project but now has had more scope creep so the long hours are still being churned out here (Normal day job work week is 40. I have been logging 65...plus family duties). I am starting to read up on CSS tutorials so I can hit the ground running once I am back to 40 on the day job.

Life is too hectic some weeks [:@].

Thank you,

Brian



Tailslide -> 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!



jurgen -> 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.



Tailslide -> RE: Positioning (3/28/2007 14:10:59)

That's my view too jurgen - sort of like a sack full of footballs.



jaybee -> RE: Positioning (3/28/2007 16:27:28)

quote:

I'll ramble on assuming you're talking about AP... for no reason other than I feel like it.
I see work has eased off a bit then. [:D]

I have one site where I've used absolute positioning. Seemed like a good idea at the time, I can assure you it's not. As Helena says, use for little bits only when you can't get it to play ball any other way, otherwise let the page chill and do it's own thing man. [image]http://forum.pcastuces.com/images/smile_peaceandlove.gif[/image]



rubyaim -> 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.



Tailslide -> 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!



Reflect -> 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



womble -> RE: Positioning (3/29/2007 6:54:00)

Depending on your layout, possibly floats, or if it's not just something you want to shuffle off to the left or right or wherever, relatively positioned, but of course then you've got to work out where it's relatively positioned from, whether that's the <body> or some other div, so without knowing more about your page structure, difficult to say really.

I'm probably rambling too though (loads of Real World stuff - I've only come here to escape into relative sanity for a few minutes), so probably safer to ignore me.



Tailslide -> 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.



jaybee -> RE: Positioning (3/29/2007 9:45:49)

That's why I did the AP site but Helena is right, there's very little difference if you plan the layout right, certainly not enough to put Google and co off. It's really only when you get people sticking in enormous javascript menus with loads of javascript and flash <object><embed> stuff in the header that you get problems.



Reflect -> RE: Positioning (3/29/2007 14:00:23)

Thank you both.

Take care,

Brian



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125