CSS 101 help ... its not working! :P

[pares101]

this is the layout i want to have can someone guide me or explain to me how to do this??

http://miamiblockparty.com/designhelp.jpg

im really having trouble with column 1 and 2...

[nobody]

http://www.bluerobot.com/web/layouts/

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

http://www.maxdesign.com.au/presentation/page_layouts/

CSS 2 Column Layout

[fasterthanlight™]

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

[simplistik]

if column 1 and 2 are the only things you're worried about then you just need to float them.

[pares101]

here s what i got for now ... how do make it that the whole thing is set in the middle?? and when the user has a different broswer width it adjusts to that??

http://miamiblockparty.com/indexer.htm

[thebloodpoolkid]

If you are going to position the columns using absolute you should put them in a container or wrap <div>. They are postioned based on the parent element, in this case that would be the body. You can do something like



<div id="wrapper">

* All your other markup *

</div><!--END WRAPPER DIV-->



and have CSS



#wrapper {
width: 770px; /* or whatever you want width to be*/
margin:0 auto;
}


You can also float the two columns.

[pares101]

well should i position them using absolute??? :)


<div id="wrapper">
<div id="content"> Magna sed nisl. In in urna sit amet orci tincidunt tempus.
Phasellus sagittis libero ut diam. Donec rutrum euismod libero. Pellentesque
placerat cursus dui. Aliquam vitae tellus. Cras eget metus at dolor gravida
pellentesque. Nullam nec risus id arcu luctus feugiat. Morbi faucibus lacus
eu orci. Curabitur placerat mi vitae tortor. Praesent turpis. Proin mattis consectetuer
erat. Nunc feugiat, augue iaculis tempus pulvinar, leo elit scelerisque mauris,
quis volutpat enim diam vel mauris. Fusce a mauris non leo consectetuer condimentum.
Sed elementum ornare nulla. Morbi facilisis placerat ligula. Vivamus ut ligula.
Praesent pharetra nunc non sem. Sed eu mauris. Ut ac lacus. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec
aliquam enim eu diam. Nullam nulla. Donec euismod, nisl a feugiat suscipit,
est quam ultricies nunc, sed auctor nisl eros in nisi. Etiam id elit vel magna
lacinia varius. In tristique posuere dolor. In lacus nisi, sollicitudin sed,
eleifend vehicula, fringilla id, leo. Mauris et tortor. Donec viverra nibh volutpat
augue. Cras ut metus. Maecenas hendrerit vestibulum tellus. Nam sapien. Vivamus
est. Sed sit amet diam. Phasellus leo ipsum, placerat in, rutrum in, tempor
eget, mi. </div>
<div id="leftnav">
<p><img src="images/left1.jpg" align="center"></p>
</div>
</div><!--END WRAPPER DIV-->

[thebloodpoolkid]

It is a matter of preference. There are pros/cons to each.

[pares101]

i cant get #content to move everything else moves but #content stays the same

i added text-align: center; to the body... and look what happened

http://miamiblockparty.com/indexer.htm

should i add everything into the wrapper?

[thebloodpoolkid]

Right wrap everything inside the "wrapper". There was an error in what I said or I left something out I should say. Absolute elements are positioned based on a positioned containing element. So you have to set a position for the wrapper such as.



#wrapper {
position: relative;
width: 770px; /* or whatever you want width to be*/
margin:0 auto;
}

[pares101]

and i takeout the absolute positiong???

[thebloodpoolkid]

No. I took a look at your CSS and it needs some cleaning (-:

but try this
http://www.maxdesign.com.au/presentation/process/

You will also find many more example in the links posted above. Most develop there own "style" on how to do layouts. There are many ways to accomplish the layout you want just have to find the one your most comfortable with.

[fasterthanlight™]

honestly i'd ditch all your CSS code and start again using one of the box models i posted

[thebloodpoolkid]

honestly i'd ditch all your CSS code and start again using one of the box models i posted

Agreed.

[pares101]

http://www.maxdesign.com.au/presentation/process/ THAT SITE HAS HELPED ME SO MUCH

thank you for posting that site , i understand what i am trying to do , with containers and floating.... thank ye very much!!! (-: (-: (-: (-: (-: (-: (-:


like that site pretty much taught me what i was trying to figure out.... AWESOME SITE ++++++++++

[pares101]

ok now here is another problem i encountered! :(

here is the website

http://superpress.com/pid/

css is here http://superpress.com/pid/css/pid.css

im trying to put the text in #quicklinks in a certain position like bottom right.... but a few pixels up from the border... how would i do this??

[thebloodpoolkid]

but a few pixels up from the border.
Sorry, I do not know which border you are refering to.

You can set the position of the #quicklinks div to absolute and the position it where you want such as the bottom right.


#quicklinks {
position: absolute;
bottom:0;
right:0;
}


You could put the quicklinks div at the bottom of your markup and align the text to the right.

If you float the quiclinks div, like you did, it will sit on top of the other content until you clear the float and you cannot float the div to the bottom right.

[pares101]

actually im playing around with it and its working :P

[thebloodpoolkid]

I see in IE but in FireFox it is far right.

[pares101]

fixed that too...! :) Now here is the question of questions for me :) ive beent trying like crazy to make the menu on the left like this one

http://miamiblockparty.com/help2.jpg

how in the world would i do that???

i have the left on the background already but i want to add the text and the dotted lines and the text beneath it!

http://miamiblockparty.com/pid
http://miamiblockparty.com/pid/css/pid.css