Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Junior Member
    Join Date
    Jul 2011
    Posts
    14
    Member #
    28499
    I'm just getting back into web design so my knowledge is very novice, but there's an issue I'm hoping to get some help with.

    I've finally got a page layout put together.

    My goal is to have one short navigation at the top spanning across the entire width of the page, with links such as Home.

    Then below it I've got my left nav, my middle body of the page and a right nav.

    I set up 4 divs, 'top', 'left', 'middle', and 'right'

    The top one is placed find as I set it to 100%width.

    I've got my left, middle and right navs all set to float left with left at 20%, middle at 60%, right at 20% width.

    The funny thing is, I got it to work ( semi) how I wanted it to by messing up. I left the ' ; ' symbol off the middle "width: 60%" command and it managed to rig the divs to line up how I want it to, but only when the browser settings are zoomed how I have it.

    Basically I'm just struggling with the coding on how to actually arrange my divs, to specifically set WHERE I want them. I've finally learned the basics on how to make divs but I'm not quite getting how to align them perfectly where I want them. My issue is my far right navigation sometimes ends up a line below, rather than on the same line as the left and middle ones.

    Anyone have advice, and/or tutorials to help me with this issue? Most tutorials I've been through such as W3 go through specific aspects of setting up divs, but don't guide you through the cohesiveness of putting it ALL together.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Upload the code and give us the link.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Float the right one to the right. To position your divs the way you want, the quick and dirty way would be with relative positioning. But you should only use that for slight mis-positioning.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  5. #4
    Junior Member
    Join Date
    Jul 2011
    Posts
    14
    Member #
    28499
    I appreciate you guys taking the time to help me out. Bear in mind I'm new to the forum so I don't know the many features it has, so I apologize for not posting the code originally. Anyways here it is, I have a style sheet page and a main page

    heres the main page code:
    Code:
    <html>
    <body>
    <title>New Homepage</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    <!Remember this may or may not be the H1 section(around the picture)!>
    
    <img src="http://img.photobucket.com/albums/v485/randomguyandall/banner-1.png" height="30%" width="100%"></img>
    
    <div id="top">This will be the heading text.</div>
    
    <div id="left">
    <p><a href="C:\Users\Marcus\Documents\Test\link.html">Link 1</a><br />
    <a href="C:\Users\Marcus\Documents\Test\link.html">Link 2</a><br />
    <a href="C:\Users\Marcus\Documents\Test\link.html">Link 3</a><br />
    <a href="C:\Users\Marcus\Documents\Test\link.html">Link 4</a><br />
    <a href="C:\Users\Marcus\Documents\Test\link.html">Link 5</a></p>
    </div>
    
    <div id="middle">
    <p>
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    </p>
    </div>
    
    <div id ="right">
    <p>Need advertising space? Call us and we'll discuss rates to advertise here.</p>
    </div>
    
    </body>
    </html>
    This is the style sheet code:
    Code:
    body
    {
    background-color: #FFFFFF;
    }
     
    h1
    {
    color: #000000;
    background-color: #FFFFFF;
    border-width: thick;
    border-style: ridge;
    border-color: brown;
    }
    
    #top {
    float: none;
    width: 100%;
    color: #FFFFFF;
    background-color: #330000;
    border-width: thin;
    border-style: solid;
    border-color: black;
    padding: 10px 10px 10px 10px;
    }
     
    #left {
    float: left;
    width: 20%;
    color: #FFFFFF;
    background-color: DarkGreen;
    border-width: thin;
    border-style: solid;
    border-color: black;
    padding: 20px 20px 20px 20px;
    }
    
    #middle {
    float: left;
    width: 60%
    color: #000000;
    background-color: Silver;
    border-width: thin;
    border-style: solid;
    border-color: black;
    padding: 20px 20px 20px 20px;
    }
     
    #right {
    float: left;
    width: 20%;
    color: #000000;
    background-color: DarkGreen;
    border-width: thin;
    border-style: solid;
    border-color: black;
    padding: 20px 20px 20px 20px;
    }
    ^note that on the middle div, I have the ";" left off after 60%...for whatever reason, this works.

    THAT CODING, those 2 pages, gives me the attached file "homepic.png"

    but if I press control + and zoom in, it becomes the attached file "homepic2.png"
    Attached Images Attached Images

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    The borders and padding are what's doing it. Both borders and padding add to the outside of your divs, not the inside. So effectively, your left div is 20% + 20pixels padding + 1pixel border wide.

    If you want borders and padding, what you should do is allow space for those in your layout. So make your left div say 19% and add your borders and padding in (this isn't the best way to do it, but it'll give you the rough idea.)

    What i usually do is specify padding in the same measure as I do width. So if my width is a percentage, my padding is also a percentage. Doesn't work with borders as well, but it's a start.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I would suggest declaring a doc type....

    [COLOR=rgb(7, 6, 6)]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"[/COLOR][COLOR=rgb(7, 6, 6)] "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/COLOR]

    if you don't declare a doc type... the browser is likely rendering in Quirk Mode... which means the CSS it follows is HIT or MISS...
    [COLOR=rgb(7, 6, 6)]
    [/COLOR]

    Also... when you using a lot of floats... to get the most control over the positioning... you should add margins:0; padding:0 to the body tag... IE is bad about adding an extra 3px if you don't don't declare them...

    Perhaps the middle div displaying where you think it's suppose to without the semi colon... is an effect of the browser in Quirk Mode... Perhaps Not...

    See if the page looks the same in different browsers ... IE and Firefox, Chrome Or some other standards browser... bet they don't...

    Also, without declaring a doc type... your code will not validate ...

    a trick I learned a long time ago... when starting out... was to add a border:1px solid #000; or any color of you choice... this can help you visualize the positioning of the divs when you view it... just remember... if you're using fixed width and height attributes... subtract 2 px from each before adding the border attribute...

  8. #7
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    AlphaMare likes this.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Webzarus, post: 213974
    a trick I learned a long time ago... when starting out... was to add a border:1px solid #000; or any color of you choice... this can help you visualize the positioning of the divs when you view it... just remember... if you're using fixed width and height attributes... subtract 2 px from each before adding the border attribute...
    If you don't mind: I'd suggest going with outline instead, since it doesn't affect the size of the element.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Junior Member
    Join Date
    Jul 2011
    Posts
    14
    Member #
    28499
    I really appreciate everyones help, this is as good as reading up on tutorials.

    Quote Originally Posted by Ronald Roe
    If you don't mind: I'd suggest going with outline instead, since it doesn't affect the size of the element
    Not sure what you mean by this. Is there an "outline" function that serves as an alternative to a border? If so, what's the code for it?

    Also, webzaurus...
    That doctype, should I copy and paste that just as you gave it to me, even with w3's url address?

  11. #10
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Diligent, post: 214034
    I really appreciate everyones help, this is as good as reading up on tutorials.



    Not sure what you mean by this. Is there an "outline" function that serves as an alternative to a border? If so, what's the code for it?

    Also, webzaurus...
    That doctype, should I copy and paste that just as you gave it to me, even with w3's url address?
    Outlines - read more here:
    http://www.w3schools.com/css/css_outline.asp
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:22 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com