Positioning Elements

[Jdubtrey]

I am new to html and css. I am creating a mock website to work on both these languages. I am a little stuck with css positioning. Heres the link to the website. http://mixtapedesigns.com/jameswells.org/index.html I have one image that is repeated as the background. I have one main container that is positioned in the center of the page. I then have other divs incasing different elements. I have been positioing pictures in div’s and using relative and using padding to adjust them to the desired locations inside of the divs. I am also floating elements. Im think im okay with positioning images but how do you position text.

I dont like to position elements absolutly because i want design to stay consistent with different browsers. Im not sure i understand floating elements completly..im assuming “normal flow” is “left to right..top to bottom”

Could someone explain positioning in a dumbed down way. Thanks in advance.

[cybershot]

https://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
https://css-tricks.com/the-css-overflow-property/

you can also try searching through all the posts on this forum which is what I did to come up with the three posts above which I do believe are very relevant to your needs. You will learn a lot

[Jdubtrey]

Thanks that was a big help. I actually positioned the elements perfectly and had full control..then i tested the design in safari..and it was all over the place. I had programmed it in internet explorer. Lol back to the drawing board.

[soap]

From Smashing Magazine:

Following is a list of exact behaviours of floated elements according to CSS2 Specifications:

* A left-floated box will shift to the left until its leftmost margin edge (or border edge if margins are absent) touches either the edge of the containing block, or the edge of another floated box

* If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down

* Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of document flow

* Margins of floated boxes do not collapse with margins of adjacent boxes

* The root element () cannot be floated

* An inline element that is floated is converted to a block-level element

Actually, just read this.

[Jdubtrey]

Thanks!

I almost have it down now. Check out the website and let me know what you think. Also can someone check it in firefox? I have checked it in internet explorer and safari but havent downloaded firefox yet. If there is any advice or positioning issues let me know. Thanks!

My first website!

http://mixtapedesigns.com/jameswells.org/index.html

(side note) light box2 on the portfolio website (the black box doesnt extended the width of the screen) and if i erase the doctype at the top it works…but if i center it using body{ margin: 0; padding: 0; } like the website says it all shifts to the left.

[Author]

Posts