7 replies to this topic

[lethalwire]

I'm currently trying to develop a website to heighten my html/css/js/php/etc. skills.

I keep running into a problem though. It seems as if every element I want to add to my page ends up being hardcoded using

position: absolute;

...

left: variable px;

top: variable px;

etc

When I try to set position to relative or leave it the default of static, then tables, images, etc. seem to fall out of place.

What I have right now is:
Lethal-Tom.com

I simply tried adding a paragraph below the last div and the content showed up near the top left of the page.
I then tried to insert the new content into another div and it ended up overwriting the Lorem Ipsum content.

I can't see what I'm doing wrong yet and would like some insight as to how I could get a simple page with well-flowing elements without using absolute positioning.

[tate]

Have you looked into how the css "float" works? I am just learning too and have had good luck with using "float" and "clear" to get elements where I want them without touching "position" at all. I do a lot of float: left in my stuff to start placing items next to each other and then combine float: left; with clear: both; to drop the element down below the previous element. Then of course automatic margins help with centering but you look like you have that part down already :)

[CommittedC0der]

As tate said float and margins are your friend! Also when you use "Position:relative;" you can still use things like "top: 5px;" ect... to shift stuff. I use that quite a bit.(Not sure if that's encouraged or not) Secondly make sure your content divs size according to the content, a set width is ok, but your height should re-size. I think you have that under control though.

You may also find this example/article interesting. It a little different that what your wanting to do, but might help.
Liquid/fixed layout example | Max Design

Good luck.

[lethalwire]

tate said:

Have you looked into how the css "float" works? I am just learning too and have had good luck with using "float" and "clear" to get elements where I want them without touching "position" at all. I do a lot of float: left in my stuff to start placing items next to each other and then combine float: left; with clear: both; to drop the element down below the previous element. Then of course automatic margins help with centering but you look like you have that part down already :)

I tried using float but I haven't tried using "clear." I'll have to look this one up because I didn't even know it existed.

---------- Post added at 05:35 PM ---------- Previous post was at 05:34 PM ----------

CommittedC0der said:

As tate said float and margins are your friend! Also when you use "Position:relative;" you can still use things like "top: 5px;" ect... to shift stuff. I use that quite a bit.(Not sure if that's encouraged or not) Secondly make sure your content divs size according to the content, a set width is ok, but your height should re-size. I think you have that under control though.

You may also find this example/article interesting. It a little different that what your wanting to do, but might help.
Liquid/fixed layout example | Max Design

Good luck.

Thanks for the link, I'll surely check this one out. =)

[fread]

I like you color scheme. Its Rich! I'm working on a pretty huge website myself.

[lethalwire]

fread said:

I like you color scheme. Its Rich! I'm working on a pretty huge website myself.

Thank you. Maybe one day I'll create a huge popular website ;)

[fread]

You and I both. :)

[lethalwire]

tate said:

Have you looked into how the css "float" works? I am just learning too and have had good luck with using "float" and "clear" to get elements where I want them without touching "position" at all. I do a lot of float: left in my stuff to start placing items next to each other and then combine float: left; with clear: both; to drop the element down below the previous element. Then of course automatic margins help with centering but you look like you have that part down already :)

I tweaked the div's above my copyright div and "float" did the trick. Thanks :)