Positioning with css

[Hub]

I am OK at understanding a lot of what CSS is about and I can appreciate the advantages it offers if the need for change arises. The thing I can't get to grips with is how I start positioning the top of my page so that I have images on the left and right with text in the middle.

And from there how to I position my menu on the left with my main body on the right.

What also seems confusing is that a lot of the information I am finding was written some time ago which surely means some of the problems that existed with different browsers have now disappeared.

Can anyone give me a kick start on this positioning thing?

[benbramz]

is this an actual question...if so ill split the post for you n send it to css...

[Hub]

Originally Posted by benbramz

is this an actual question...if so ill split the post for you n send it to css...

Yes

[benbramz]

done

[Hub]

So all I need now is an answer!

[Pheonix]

Okay for the menu/body its

HTML: Select all

 <div style="float: left; width: 200px;">
 Link<br />
 Link<br />
 Link<br />
 Link<br />
</div>
<div style="float: left; width: 550px;">
<p>This is my wonderful content, its very contentish.</p>
</div>
<br style="clear: left;" />

As for the Images with the text in the middle, I'm not realy sure what you mean...

[Hub]

Originally Posted by Pheonix

As for the Images with the text in the middle, I'm not really sure what you mean...

I have an image in the top left (actually split into three at the moment), an image in the top right of the screen (again split into three at the moment) and then a bar that runs right across the screen but expands or contracts according to screen size.

Above the bar in the centre at the top is a strapline which is text (for search engines to pick up).

In case you did not see it this is the draft page:

http://www.hub-uk.com/hub2/

[Hub]

Originally Posted by Pheonix

Okay for the menu/body its

HTML: Select all

 <div style="float: left; width: 200px;">
 Link<br />
 Link<br />
 Link<br />
 Link<br />
</div>
<div style="float: left; width: 550px;">
<p>This is my wonderful content, its very contentish.</p>
</div>
<br style="clear: left;" />

I tried this code out. I want my main body of text to be able to flow right across the page to the right of the screen. If I change the width to 98% or 800px or more I have a problem - the main body of text appears below the menu.

[Pheonix]

Remove the width then ;-) lol

[Hub]

Originally Posted by Pheonix

Remove the width then ;-) lol

It was that simple!

[Pheonix]

For your images, postion one at left 0px, top 0px. The other at right 0px, top 0px.
Then for your text use postion left 0px +width of left picture (so if your image had a width of 100px your text would be postion left 100px), top 0px then set the right margin to the width of the picture on the right.

There are lots of ways you could do it.

[Hub]

For your images, position one at left 0px, top 0px. The other at right 0px, top 0px.
Then for your text use position left 0px +width of left picture (so if your image had a width of 100px your text would be position left 100px), top 0px

I have actually split the images into three sections. Presumably I would just position them with the top position for the second image being the same as the height of the first image. Then I would position the text with the top measurement being how far down amongst the images I want it to come.

How do I cope with the bar that goes across the page. In tables I have just used a small section of it and given it a measurement of 100%. If I was to give an images such a measurement in CSS wouldn’t it just throw the images to the right of the screen out of position?

then set the right margin to the width of the picture on the right.

I am not quite sure what you are saying here. If the pages is to expand from 800 x 600 screens to the bigger screens I don’t actually know where the right margin will be or am I on the wrong tack?

[Pheonix]

HTML: Select all

<div style="width: 100px; height: 100px; position: absolute; top: 0px; left: 0px;">This is your left images</div>
<div style="height: 100px; position: absolute; top: 0px; left: 100px; right: 100px;">This is your header.</div>
<div style="width: 100px; height: 100px; position: absolute; top: 0px; right: 0px;">This is your right images</div>

There...
However the problem with this one is that when you make the screen narrow, the right images will float over/under the header, you could tweek this effect by useing z-index. Or by useing min-width which I don't think works in IE which sucks