www.webdeveloper.com
Results 1 to 9 of 9

Thread: Positioning borders

  1. #1
    Join Date
    May 2007
    Posts
    8

    Positioning borders

    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?

  2. #2
    Join Date
    Oct 2006
    Location
    Cardiff, Wales, UK
    Posts
    48
    Not sure what you mean - can you show us an example of the page you're having problems with maybe?
    Tim Denton

    Graphic Designer for web, multimedia and interactive in Cardiff, Wales, UK.

    http://www.timdenton.co.uk

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  4. #4
    Join Date
    May 2007
    Posts
    8
    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?

  5. #5
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  6. #6
    Join Date
    May 2007
    Posts
    8
    Thank you very much. Much appreciated.

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    You're not 'positioning borders' so much a positioning an element with borders (a DIV, etc.)?
    I build for: Firefox and tweak for IE

  8. #8
    Join Date
    May 2007
    Posts
    8
    Quote 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.

  9. #9
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote 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>
    Last edited by WebJoel; 06-08-2007 at 07:58 AM.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles