Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Learning to position elements.

align element

  • Please log in to reply
2 replies to this topic

#1 rasmush

rasmush

    CC Lurker

  • New Member
  • Pip
  • 6 posts

Posted 18 March 2012 - 09:36 AM

Hey guys, i'm trying to learn the basic web-dev stuff like XHTML, CSS and Javascript. But when i'm working with my layouts i always fail since i don't really know how the positioning works, i've read a book called "HTML, CSS and Javascript, all-in-one" by Julie C. Meloni, but i still can't get the hold of how positioning works.

So if anyone just could help me go through when to use:
  • Position:absolute
  • position:relative
  • float
  • margin
  • padding

I understand that the margin is controlling the space outside of the element and the padding is controlling the space inside of the element. But the float and position:relative/absolute is pretty hard for me.

I have a small thing i'm trying to do just to learn the positioning and stuff here it comes:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Positioning - Testing</title>
<link rel="stylesheet" type="text/css" href="positioning.css">
</head>

<body>
<div id="parent">
<div class="child">
Hej det här är ettan
</div>
<div class="child">
Hej det här är tvåan
</div>
<div class="child">
Hej det här är trean
</div>
<div class="child">
Hej det här är fyran
</div>
</div>

</body>
</html>


body
{
background-color:#ffffff;
text-align:center;
margin:0px;
padding:0px;
}

#parent
{
background-color:#000000;
width:100%;
height:125px;

}
.child
{
background-color:red;
height:125px;
width:250px;
margin:10px;
float:left;
}

Problem is i can't get it centered (the .child classes) i've tried using the margin-left:auto, margin-right:auto; in the parent element but it doesn't work. Any tutorials on CSS layouts and stuff is welcome thanks.

//Rasmush
  • 0

#2 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 20 March 2012 - 04:18 PM

Hej Rasmush!

As you float: left, it will stack up from left. You need to center a div surrounding (by margin auto...) the four childs and then put them floating inside that container.
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#3 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 20 March 2012 - 05:44 PM

I find it best to use JavaScript when working with position:absolute, because that way it is possible to be dynamic and position the element in the center of the document, for example, or to calculate some other relative position in an absolute way :D .

Basically, 'relative' means that the current element is positioned relative to - and counted towards the contents of - the parent element. 'absolute' means it's not really counted towards anything (as in, how much space it takes up and how it affects other elements' positions), and the 'left' and 'top' style properties determine where the element is positioned.


You probably know these already, but 'margin' is by how many pixels the element "repels" the outside variables. You can also use margin-left, margin-top, etc. (referenced from JavaScript as marginLeft, marginTop, etc.). 'padding' is how much the element forces its contents to be smaller; for example, if padding is 2, then the actual content of the element will be 2 pixels smaller for each end. One can think of this as how wide the pillows are, if there are pillows covering each wall in a room. The wider the pillows, the smaller the space there is for things to be in the room. :D

I don't have much experience with 'float' , so I can't say much about that.
  • 0
Regards,
RR





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