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 12
  1. #1
    Senior Member peezybro's Avatar
    Join Date
    Aug 2011
    Location
    El Cajon, California
    Posts
    229
    Member #
    28822
    Liked
    6 times
    I am having troble with my website I am making, I know the basic of html,css, javascript but im still learning as i go.

    on the right side of my website there is a white space.

    here is the link http://peezy.comule.com/testsite/index.htm

    the link is SAFE....

    How can i get rid of the white to the right? center the site? or try and span the head, body, footer the whole width?

    Im using the 960grid for the width. but cant figure out this problem.

    any ideas?
    "ON TIME, ON TARGET, NEVER QUIT"


  2.  

  3. #2
    Senior Member MrTeapot's Avatar
    Join Date
    Nov 2011
    Posts
    127
    Member #
    30029
    Liked
    15 times
    Code:
    body
    {
    background-color: #COLOR
    }
    Add that to the css. Add your color to #COLOR

    You can find the color in photoshop, print screen and paste the site to a photoshop image. Then pick the color of the site by clicking on the color with color selection.

    Was this to any help?

    /Teapot
    Swedish Web Agency
    I hate that all you Americans are asleep when I'm awake...

  4. #3
    Senior Member peezybro's Avatar
    Join Date
    Aug 2011
    Location
    El Cajon, California
    Posts
    229
    Member #
    28822
    Liked
    6 times
    If i do that, it will make the white turn to the bg color. But that wont help me, due to my website bg is a gradient. Also then my header and footer wont span the full width of screen. Or am i wrong?
    "ON TIME, ON TARGET, NEVER QUIT"


  5. #4
    Senior Member MrTeapot's Avatar
    Join Date
    Nov 2011
    Posts
    127
    Member #
    30029
    Liked
    15 times
    A simple and effective soloution: Attachment 2462
    Make that picture the background! (Press the little thing and save image)
    Attached Images Attached Images
    Swedish Web Agency
    I hate that all you Americans are asleep when I'm awake...

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    try this in your CSS line 6 (my changes are in red):

    body {background: url(../images/Background.jpg) center no-repeat;
    height: 900px;
    width: 960px;
    margin: auto;
    }
    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!

  7. #6
    Senior Member peezybro's Avatar
    Join Date
    Aug 2011
    Location
    El Cajon, California
    Posts
    229
    Member #
    28822
    Liked
    6 times
    I will give it a try in the morning, Thanks AlphaMare and MrTeapot.

    I also have another question, Im trying to line up columns with divs. I want 5 divs right next to each other, the second and fourth div i want to be a space with a divider picture.

    i put in the dividers but how can i set those three divs to a specific width and keep them that width even if there is nothing in the div?

    im done trying to figure it out tonight, so maybe someone can help me out before i get at it again tomorrow.

    Thanks everyone and one more thing before i forget

    Merry Christmas!!!!!!!!!or holiday but its really Christmas
    "ON TIME, ON TARGET, NEVER QUIT"


  8. #7
    Senior Member MrTeapot's Avatar
    Join Date
    Nov 2011
    Posts
    127
    Member #
    30029
    Liked
    15 times
    Code:
    #funktion div  {
        width: 158px;
        height: 250px;
        margin: 0px 3px 3px 0;
        float:left;
        border-style:solid;
        border-color: #E0E0E0;
        border-width:2px;
    }
    Try that one, it should add div-elements until it can't fit on one row, then it will continue on a second row.
    Swedish Web Agency
    I hate that all you Americans are asleep when I'm awake...

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    There's an easier way to do what you're wanting with the divs, and you'll only need 3 of them. Set the width and height of the divs and float them left like Teapot said (or float right, whichever works for you). Add the divider image as a background to the divs and just set it to the right, much like Mare set the background in the center above. Then, add a second class to the last div and set the background to none. It'll look like this:
    HTML Code:
    <div class="content-box">
    CONTENT HERE
    </div>
    <div class="content-box">
    CONTENT HERE
    </div>
    <div class="content-box no-bg">
    CONTENT HERE
    </div>
    ...and the CSS:
    Code:
    .content-box{
    background:url('images/content-divider.png') right no-repeat;
    height:200px;
    width:200px;
    float:left;}
    
    .no-bg{
    background-image:none;
    }
    
    /*Now, a clearfix in case you don't have one. Works IE6+*/
    .no-bg:after{
    content: " ";
    clear:both;
    height:0;
    width:100%;
    visibility:hidden;
    }
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Senior Member peezybro's Avatar
    Join Date
    Aug 2011
    Location
    El Cajon, California
    Posts
    229
    Member #
    28822
    Liked
    6 times
    Ok I will give them a try, what does the clearfix do?
    "ON TIME, ON TARGET, NEVER QUIT"


  11. #10
    Senior Member peezybro's Avatar
    Join Date
    Aug 2011
    Location
    El Cajon, California
    Posts
    229
    Member #
    28822
    Liked
    6 times
    Quote Originally Posted by AlphaMare, post: 227568
    try this in your CSS line 6 (my changes are in red):

    body {background: url(../images/Background.jpg) center no-repeat;
    height: 900px;
    width: 960px;
    margin: auto;
    }
    I did what you stated above, It works fine except it only centers the page. it still leaves the white space and now it leaves another white space on the other side. As of right now i just added another dark color too the background and it looks good, But for just learning, if i wanted it to span the whole screen on for most of the viewers how would i go and do this?

    Quote Originally Posted by Ronald Roe, post: 227577
    There's an easier way to do what you're wanting with the divs, and you'll only need 3 of them. Set the width and height of the divs and float them left like Teapot said (or float right, whichever works for you). Add the divider image as a background to the divs and just set it to the right, much like Mare set the background in the center above. Then, add a second class to the last div and set the background to none. It'll look like this:
    HTML Code:
    <div class="content-box">
    CONTENT HERE
    </div>
    <div class="content-box">
    CONTENT HERE
    </div>
    <div class="content-box no-bg">
    CONTENT HERE
    </div>
    ...and the CSS:
    Code:
    .content-box{
    background:url('images/content-divider.png') right no-repeat;
    height:200px;
    width:200px;
    float:left;}
    
    .no-bg{
    background-image:none;
    }
    
    /*Now, a clearfix in case you don't have one. Works IE6+*/
    .no-bg:after{
    content: " ";
    clear:both;
    height:0;
    width:100%;
    visibility:hidden;
    }
    Thank you so much, It did work, and its working just like i want it to. But what exactly does the clearfix do? for the div with no background picture?
    "ON TIME, ON TARGET, NEVER QUIT"



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 12:10 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com