Basic Positioning! Need help asap!

[Crispy]

Hey guys!. Basicly I really need to know how to go about positioning with css!

I've made one website but all I did was

position:absolute;

and then moved them around with the mouse in design view (Dreamweaver)!
Is there a alternative you guys could show me? Need to know before tommorow :(

Would be much appreciated. It's just for positioning images and text

I presume that I do

<div id="logo">
<img src="link">
</div>

then in the CSS

#logo {
position:something?;
}

Thanks!

[jcdevelopment]

Well you could always use floats, paddings, and margins. Only use positioning when necassary, especially absolute. Not exactly sure where you want a certain object though. Could you show a layout or more code and where you want it by any chance?

[Crispy]

Basicly just a generic layout, im not doing it as yet.. will be tommorow and I just need to figure another way to position other than using that position:absolute;

I was trying to use right, top, left, bottom for everything? Is that an easy option?

[Crispy]

I need to learn how to create a kind of text box to hold text in, like this box you type your message in here.. then how to position it

:( I'm really new to coding

[jcdevelopment]

well, my suggestion would be this, lets say you want to center something in the page, then you would use something like this

#logo {
margin:0 auto;
}

or you could just have it to the left if you arent centering it and use padding to move it like

#logo {
padding-left:20px;
padding-top:10px;
}

or

#logo {
margin-left:20px;
margin-top:10px;
}

it just depends on what you need, but using padding and margins works well enough.

[Doctor_Varney]

I believe what you're looking for is:

#div
{ position:absolute; top:25px; left:20px; }


And you can also use: {position:relative;} to place things relatively to other things (as it's name suggests).

Though a more elegant way is to use margins...
Like so:

#div
{ margin-top:25px margin-left:20px; }

Which will give you the same effect.

Now, furthermore, you can simplify all directions into one margin rule; thats: bottom and right, as well as top and left... That's even more elegant and nice.
Like so:

#div
{ margin: 25px 0 0 20px; }

Just remember the order of things... It's: 0 0 0 0 ; which, from left to right, always read as: top, right, bottom, left.

Experiment with this in a simple document, with a single element and you'll find it very easy to pick up.

Happy positioning!

Regards,

Doctor V

[Crispy]

That helps alot, any suggestions on the text box thing?

[Crispy]

I know how to write text like this, but not without writting it like this

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ullamcorper tellus eget <br/>felis. Phasellus fermentum vehicula pede. Vestibulum malesuada auctor pede.<br/> Proin et ante.<br/> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel arcu eget lectus feugiat fringilla. <br/>Vestibulum placerat neque quis nibh.<br/> Vestibulum ligula pede, mattis nec, vestibulum eu, vestibulum non, lorem.<br/> Suspendisse gravida sapien in sapien.

:(

[Doctor_Varney]

Then, add to this with Jcdevelopment's suggestions of using padding and the centre margin rule when you need them and you'll have a complete positioning system at your fingertips.

[Doctor_Varney]

I know how to write text like this, but not without writting it like this

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ullamcorper tellus eget <br/>felis. Phasellus fermentum vehicula pede. Vestibulum malesuada auctor pede.<br/> Proin et ante.<br/> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel arcu eget lectus feugiat fringilla. <br/>Vestibulum placerat neque quis nibh.<br/> Vestibulum ligula pede, mattis nec, vestibulum eu, vestibulum non, lorem.<br/> Suspendisse gravida sapien in sapien.

:(

Thinking... What, you mean you want a coloured or bordered box around your text?

[jcdevelopment]

I know how to write text like this, but not without writting it like this

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ullamcorper tellus eget <br/>felis. Phasellus fermentum vehicula pede. Vestibulum malesuada auctor pede.<br/> Proin et ante.<br/> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel arcu eget lectus feugiat fringilla. <br/>Vestibulum placerat neque quis nibh.<br/> Vestibulum ligula pede, mattis nec, vestibulum eu, vestibulum non, lorem.<br/> Suspendisse gravida sapien in sapien.

:(


i think what he is looking for is something like this


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ullamcorper tellus eget </p>
<p>felis. Phasellus fermentum vehicula pede. Vestibulum malesuada auctor pede. Proin et ante.</p>
<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel arcu eget lectus feugiat fringilla. <br/>Vestibulum placerat neque quis nibh.</p>
<p> Vestibulum ligula pede, mattis nec, vestibulum eu, vestibulum non, lorem.</p>
<p> Suspendisse gravida sapien in sapien.</p>




to where you style the p's like

p {
padding-top:7px;
line-height:15px;
font:........etc;
}

that way it spaces it.. sorry if thats not what u were looking for.

[Crispy]

don't really want any sort of colour, just like.. erm. I want my text to fit inside a box, so they all come to like the same legnths? like setting the size of the container? :)

[effpeetee]

There are lots of useful sites in my Sources program.

Sources program here and below. (http://www.exitfegs.co.uk/Sources.html)

One of the more important here. (http://www.alistapart.com/stories/doctype/)

Frank

[Crispy]

Frank, on the first link change the typography, really hurts your eyes

[Doctor_Varney]

Seems someone beat me to it. :)