Positioning borders

**Skadi** · 06-06-2007 06:38 AM

Hi. I wonder if somebody could help me and give me some information on positioning borders?

I know how to position text and how to create borders. I just cant seem to figure out how to position borders.

I have some idea. I was going to use something like the postion:absolute properties to do this. Any ideas?

**timdenty** · 06-06-2007 07:01 AM

Not sure what you mean - can you show us an example of the page you're having problems with maybe?

**KDLA** · 06-06-2007 08:06 AM

You can "position" borders by using padding. This increases the distance between the content and the container's edge (and border). Besides that, I'm as confused as timdenty as to what you're referring to.

**Skadi** · 06-06-2007 09:43 AM

Ok lets put it this way. Lets say im using CSS and I want to put a box/square on a certain position on my page, how do I do this?

Does this make things clearer?

**KDLA** · 06-06-2007 11:36 AM

There are several ways in which you can do this: absolute, relative, or float. Take a look at this tutorial; it should help you: http://www.brainjar.com/css/positioning/

References: http://www.w3schools.com/css/css_positioning.asp

**Skadi** · 06-07-2007 07:08 AM

Thank you very much. Much appreciated.

**WebJoel** · 06-07-2007 09:33 AM

You're not 'positioning borders' so much a positioning an element with borders (a DIV, etc.)?

**Skadi** · 06-08-2007 04:44 AM

Originally Posted by WebJoel

You're not 'positioning borders' so much a positioning an element with borders (a DIV, etc.)?

Well I dont know how to do a screendump on this thing, but just imagine if you have a box and you have some text in it and you want to position this box on a certain place on your page.

I've just started using CSS so I dont know if its a DIV....thingy.

**WebJoel** · 06-08-2007 07:55 AM

Originally Posted by Skadi

Well I dont know how to do a screendump on this thing, but just imagine if you have a box and you have some text in it and you want to position this box on a certain place on your page.

I've just started using CSS so I dont know if its a DIV....thingy.

Correct, -you are not 'positioning borders', but 'positioning an object that has visible borders'. The "borders" are only visual, -they have nothing to do with the "positioning".

You CAN use "position:relative;", but the actual position of the object is still 'there', even though it visually, is moved. This causes content to reside in undesireable positions.
"Position:absolute;" is based upon position "0,0" of your viewscreen (top-left corner). If the 'absolute-positioned object' is nested inside of a relative-positioned container, -you can much greater control over it, and being absolute ("out of the document flow"), it affects nothing on the page. -You can even 'overlap' containers like a deck of cards!

A talented postee offered the below code some weeks ago (I saved it in my 'toolbox'). -This demonstrates something kewl.

I tweaked it a bit

, and, if so desired, a single-used 'position:absolute;" IMAGE could be installed to 'center-center' ontop of the cards! Each 'top' card would 'partially hide' the image below of course, and only the top-most card would reveal the whole image!

-How cool is that?!

<html>
<head>
<style type="text/css">
#container {position:relative; width: 500px; height:395px; border:1px solid #000; background:#000; }
.card1, .card2, .card3, .card4, .card5 {position: absolute; background:#454545; border:1px solid #fff; width:150px; padding:3px; height:250px; color:#fff;}
.card1 {margin:120px 0 0 20px;}
.card2 {margin:95px 85px;}
.card3 {margin:70px 170px;}
.card4 {margin:45px 245px;}
.card5 {margin:20px 330px;}
</style>
</head>
<body>

<div id="container">
<h2 style="position:absolute; left:20px; top:10px; color:white;">Container Box</h2>
<h2 style="position:absolute; right:20px; bottom:10px; color:white;">Container Box</h2>
<div class="card1">
first card </div>
<div class="card2">
second card </div>
<div class="card3">
third card </div>
<div class="card4">
fourth card </div>
<div class="card5">
fifth card </div>
</div>

</body>
</html>

Thread: Positioning borders

Thread Tools

Display

Positioning borders

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions