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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 44
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with alignment on project

    Here is my page so far: http://users.ettc.net/mait119/final/

    I'm very new to CSS so this will be quite challenging. I am trying to move away from tables and do alignment with divs and CSS.

    Here is my CSS code. I have removed the two tables and put each section in a separate div.

    .navmenu {
    position: absolute;
    margin:0px auto;
    text-align:left;
    }

    .body {
    text-align:center;
    }

    .pagelayout {
    width: 760px;
    left: auto;
    right: auto;
    text-align:center;
    }

    Right now as you can see the divs are overlapping. I want the content to be centered and the menu to the left of it but not flush with the side of the page. I will be using the menu on several of the pages, so I want it to appear in the same spot on each page.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Drop the absolute positions and apply float to one of your column. Have a look at http://bonrouge.com/2c-hf-fluid(r).php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    CSS:

    Code:
    .navmenu {
            padding-left: 0px;
            width: 250px;
    	text-align:left;
            height:100%;
            float:left;
            padding: 0 auto -4em;
    }
    
    .pagelayout {
    	position: relative;
    	width: auto;
    	text-align:center;
            margin: 0;
            height: 100%;
    }
    I think this should work... It did on my machine at least.

    Edit:
    Edited to remove some IE hacks that were legacy from the particular application I pulled my reference from...
    Last edited by Rowsdower!; 11-21-2008 at 04:44 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Nov 2008
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So should I delete the body portion? I thought that was needed to get IE to align properly?

    Edit: I used your code and it did move the page content better but I need the page content to be more or less centered under the logo graphic. How can I do that?
    Last edited by Stryker412; 11-21-2008 at 05:56 PM.

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Hey man, I'm gonna try to explain this to you as simple as I can

    create a

    .wrapper - Set the width you want your website to fill, like the main section say 750px;

    Place the following inside the wrapper tag <div id="wrapper">
    <div id="sidebar">Content</div>
    <div id="mainContent">Content</div>
    </div


    .sidebar - Set width i.e 100px and set this to float:left;

    .mainContent - Set width for this i.e 650px; and float:left; this also (maybe try float:right) if that does work, that should give you the basic layout i think you're after.

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Crispy View Post
    Hey man, I'm gonna try to explain this to you as simple as I can

    create a

    .wrapper - Set the width you want your website to fill, like the main section say 750px;

    Place the following inside the wrapper tag <div id="wrapper">
    <div id="sidebar">Content</div>
    <div id="mainContent">Content</div>
    </div


    .sidebar - Set width i.e 100px and set this to float:left;

    .mainContent - Set width for this i.e 650px; and float:left; this also (maybe try float:right) if that does work, that should give you the basic layout i think you're after.
    If I set them both to div id instead of div class, both are in the center of the page stacked on top of each other.

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Stryker412 View Post
    If I set them both to div id instead of div class, both are in the center of the page stacked on top of each other.
    umm, the wrapper will be a "." and the others will be "#" (inside).

    they are just tagged as <div id="x"> in the html =)

  • #8
    New Coder
    Join Date
    Nov 2008
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Crispy View Post
    umm, the wrapper will be a "." and the others will be "#" (inside).

    they are just tagged as <div id="x"> in the html =)
    My page (http://users.ettc.net/mait119/final/) still does not look right with the divs set to id (instead of class) and with this CSS.

    /* Global Styles */
    #navmenu {
    padding-left: 0px;
    width: 250px;
    height:100%;
    text-align: left;
    }

    .body {
    text-align:center;
    width: 750px;
    }
    #pagelayout {
    position: relative;
    width: 750px;
    text-align: center;
    margin: 0;
    height: 100%;
    }

  • #9
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    .wrapper(or container)
    width: 750px;
    margin: 0 auto;

    .body {
    text-align:center;
    (only put stuff like text formatting here)

    #sidebar {
    width: 250px;
    text-align: left;
    float:left;
    margin: 0; <-- zero out margins, good practice
    }

    }
    #mainContent {
    width: 500px; <---- change from 750px, or nothing else will fit next to it
    float:right;(may be necissary)
    margin: 0;
    }

  • #10
    New Coder
    Join Date
    Nov 2008
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still no luck. I have tried both float right and left. I've also tried to set left: 0 and right: 0 in hopes of getting the pagelayout div centered under the header graphic.

    Also, what does zeroing out the margins do?

  • #11
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    You need
    (1) a black background
    (2) a content "wrapper" of about 750px centred on the page
    (3) a left column with the links
    (4) a right column with the text.

    Try this:
    CSS code:
    Code:
    body {margin: 0px; border: 0px; background-color: #000000;}
    div#wrapper {width: 750px; height: 600px; margin-left: auto; margin-right: auto; background-color: #bae6e9b; border: 1px solid #FFFFFF;}
    div#header {float: left; width: 748px; height: 150px; background-color: #9e9e9e; border: 1px solid #FFFFFF; text-align: center;}
    div#leftpane {float: left; clear: right; width: 150px; height: 450px;background-color: #d0d0d0;}
    div#rightpane {float: left; width: 580px; background-color: #777777; padding: 10px;}
    .title {font-family: times, verdana, garamond, sans-serif; color: #FFFFFF; font-size: 2em;}
    html code:
    Code:
    <div id="wrapper">
    
    <div id="header">
    Here is where your header comes - image is centred<br>
    <img src="images/myimage.jpg" width="150px" height="140px">
    </div>
    <div id="leftpane">
    Here is where your links come
    </div>
    <div id="rightpane">
    <div class="title">The next meeting is on ...</div>
    </div>
    
    </div>
    Adjust accordingly. I have put colours and borders in to show each div. Taking out the colours and borders will give you a plain black background.

    See if it works for you.

    Cheers!

  • #12
    New Coder
    Join Date
    Nov 2008
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What exactly does the wrapper do? Isn't it performing the same function as the body would?

  • #13
    New Coder
    Join Date
    Nov 2008
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Avril View Post
    You need
    (1) a black background
    (2) a content "wrapper" of about 750px centred on the page
    (3) a left column with the links
    (4) a right column with the text.

    Try this:
    CSS code:
    Code:
    body {margin: 0px; border: 0px; background-color: #000000;}
    div#wrapper {width: 750px; height: 600px; margin-left: auto; margin-right: auto; background-color: #bae6e9b; border: 1px solid #FFFFFF;}
    div#header {float: left; width: 748px; height: 150px; background-color: #9e9e9e; border: 1px solid #FFFFFF; text-align: center;}
    div#leftpane {float: left; clear: right; width: 150px; height: 450px;background-color: #d0d0d0;}
    div#rightpane {float: left; width: 580px; background-color: #777777; padding: 10px;}
    .title {font-family: times, verdana, garamond, sans-serif; color: #FFFFFF; font-size: 2em;}
    html code:
    Code:
    <div id="wrapper">
    
    <div id="header">
    Here is where your header comes - image is centred<br>
    <img src="images/myimage.jpg" width="150px" height="140px">
    </div>
    <div id="leftpane">
    Here is where your links come
    </div>
    <div id="rightpane">
    <div class="title">The next meeting is on ...</div>
    </div>
    
    </div>
    Adjust accordingly. I have put colours and borders in to show each div. Taking out the colours and borders will give you a plain black background.

    See if it works for you.

    Cheers!
    I used your code but the header and content pane are not centered.

    http://users.ettc.net/mait119/final/

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    To center your wrapper, apply a width to it(less than the body width), and then apply the left and right margins like
    Code:
    #wrapper{
    width:900px; /* or in % like 95%*/
    margin:0 auto;
    }
    PS: validate and fix all errors. see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    New Coder
    Join Date
    Nov 2008
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    To center your wrapper, apply a width to it(less than the body width), and then apply the left and right margins like
    Code:
    #wrapper{
    width:900px; /* or in % like 95%*/
    margin:0 auto;
    }
    PS: validate and fix all errors. see http://validator.w3.org/check?uri=ht...Inline&group=0
    If I take out the body div id, then the background goes white. Also I made the changes to my css but now the menu is on the right side.
    Last edited by Stryker412; 11-24-2008 at 02:55 PM.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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