Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A Potition Question Involving CSS.

    Ok I found an example that has helped me understand how to use div a bit better.

    Code:
    #content {
    width: 900px;
    margin-left: auto;
    martin-right: auto;
    border: 2px solid #000000;
    background-color: #FFFFFF;
    padding: 20px 20px 20px 20px;
    text-align: left;
    }
    and in the html part it would be placed like so...

    Code:
    <div id="content">
    <p>This box is 900 pixels wide and centered in the document.</p>
    Ok, I assume that the box would expand as text is placed in, but here is my question. I want to put it in certain places in the page, like top: 200px left: 100px, or something along that lines... what can I do about this?

    Thanks for your help.

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by wicked_ryoko View Post
    and in the html part it would be placed like so...

    Code:
    <div id="content">
    <p>This box is 900 pixels wide and centered in the document.</p>
    actually, it should have the closing div tag like this:
    Code:
    <div id="content">
    <p>This box is 900 pixels wide and centered in the document.</p>
    </div>
    but I expect you left that off accidentally.


    Ok, I assume that the box would expand as text is placed in, but here is my question. I want to put it in certain places in the page, like top: 200px left: 100px, or something along that lines... what can I do about this?

    Thanks for your help.
    You can place divs (or any content for that matter), 'absolutely'. This means that it will stay in that part of the window pretty much, irrespective of other content.

    I would suggest that instead of using 'position:absolute, (which breaks that item out of normal flow), that you leave out positioning or use 'position: relative'. let's see a link to your page because if using position:relative in your CSS, we would need to see the other content before giving a definitive answer.


    check out the folloing link as it will explain positioning much better than I can. Indeed, read through all the CSS teachings so you'll get the hang of it sooner. I found it a wonderful resource and I am not the 'sharpest tool in the box' by any stretch of the imagination.

    http://w3schools.com/css/css_positioning.asp
    bazz
    Last edited by bazz; 06-02-2007 at 10:35 PM. Reason: added a link to w3schools.com

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm practicing with an editor. but let me see if I can make an example.

    Ok, this is the whole page....
    -----------------------------------------------------
    I I
    I I
    I I
    I I
    I I
    -----------------------------------------------------
    I'm wanting to be able to position the contents (header, navigation, main content, and footer) where I need it in this box.
    Last edited by wicked_ryoko; 06-02-2007 at 10:43 PM. Reason: fixing something

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the box won't let it do right.... hopefully you can figure out what I mean.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    OK I guess you want to have
    1. a full width header
    2. a left nav menu section
    3. a right hand, main-content section
    4 the full width footer.

    if so, then you could assign no width to your header (by default it'lll go 100%), float your nav section left (in your CSS use the term, float : left), for your main section it should them come up 'itself' to be beside the nav section. the make your footer 'clear : both;' so that it will be 100% (like the header) and be below both the nav and the main cintent section.

    bazz


  •  

    Posting Permissions

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