Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Hardcoding CSS Elements

CSS element

  • Please log in to reply
7 replies to this topic

#1 lethalwire

lethalwire

    while(false){ ... }

  • Senior Member
  • PipPipPipPipPipPip
  • 766 posts
  • Programming Language:C, Java, PHP, JavaScript
  • Learning:PHP

Posted 10 January 2012 - 07:41 PM

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.
  • 0

#2 tate

tate

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 88 posts

Posted 11 January 2012 - 05:20 PM

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 :)
  • 1
twas brillig

#3 CommittedC0der

CommittedC0der

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1065 posts
  • Programming Language:C#
  • Learning:C#, JavaScript, PL/SQL

Posted 11 January 2012 - 09:56 PM

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.
  • 0
There IS a war going on for your mind.
Nothing of eternal significance happens besides prayer.

#4 lethalwire

lethalwire

    while(false){ ... }

  • Senior Member
  • PipPipPipPipPipPip
  • 766 posts
  • Programming Language:C, Java, PHP, JavaScript
  • Learning:PHP

Posted 12 January 2012 - 03:35 PM

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 ----------

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. =)
  • 0

#5 fread

fread

    Programming God

  • Senior Member
  • PipPipPipPipPipPip
  • 897 posts
  • Location:Trinidad and Tobago
  • Learning:C, Java, C++, C#, PHP, Python, PL/SQL

Posted 12 January 2012 - 05:53 PM

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

#6 lethalwire

lethalwire

    while(false){ ... }

  • Senior Member
  • PipPipPipPipPipPip
  • 766 posts
  • Programming Language:C, Java, PHP, JavaScript
  • Learning:PHP

Posted 13 January 2012 - 06:44 PM

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 ;)
  • 0

#7 fread

fread

    Programming God

  • Senior Member
  • PipPipPipPipPipPip
  • 897 posts
  • Location:Trinidad and Tobago
  • Learning:C, Java, C++, C#, PHP, Python, PL/SQL

Posted 13 January 2012 - 06:51 PM

You and I both. :)
  • 0

#8 lethalwire

lethalwire

    while(false){ ... }

  • Senior Member
  • PipPipPipPipPipPip
  • 766 posts
  • Programming Language:C, Java, PHP, JavaScript
  • Learning:PHP

Posted 13 January 2012 - 07:14 PM

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 :)
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download