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.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Member #
    30316
    Hi guys and gals.

    So i've been asked by a friend to make a website for him, designed it no problem,just having some alignment issues with certain objects on the site.

    here is the link to the page. http://jordie.eliminatepk.com/

    and heres the CSS and HTML
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Eliminate Home</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="slogan">
    </div>
    
    <div id="header">
    
    </div>
    <div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Play</a></li>
    
    </ul>
    
    </div>
    
    <div id="picture_box">
       
    </div>
    
    <div id="left_content1">
    
    </div>
      
    </div>
    
    <div id="left_content2">
    
    </div>
    
    <div id="left_content3">
    
    </div>
         
    </body>
    </html>
    Code:
    @charset "utf-8";
    /* CSS Document */
    body {
        background:url(images/body_bg.jpg) repeat-x;
        font-family:Arial, Helvetica, sans-serif;
        }
    
    #slogan {
        background:url(images/header_slogan.jpg) no-repeat;
        height:28px;
        width:414px;
        margin:34px 0 0 175px;
        }
    
    #header{
        background:url(images/logo.jpg) no-repeat;
        width:850px;
        height:217px;
        margin:14px 0 0 175px;
    
        }
    
    #navigation {
        background:url(images/navbar.jpg) no-repeat;
        width:850px;
        height:56px;
        margin:15px 0 0 175px;
     
        }
    
    #navigation ul {
    
        margin:21px 0 0 175px;
        list-style:none;
        }
    
    #navigation ul li{
        margin:21px 0 0 0;
        padding:0 30px 0 0;
        display:inline;
        }
    
    #navigation ul li a{
        text-decoration:none;
        color:#606d80;
        font-size:18px;
        font-family:Arial;
        }
    
    #navigation ul li a:hover{
        color:#020c1e;
        }
    
    #picture_box {
        background:url(images/picture_box.jpg) no-repeat;
        width:494px;
        height:160px;
        margin:12px 0 0 531px;
      
        }
    
    #left_content1{
        background:url(images/content_left1.jpg) no-repeat;
        width:336px;
        height:198px;
        margin:12px 0 0 175px;
    
        }
    
    #left_content2{
        background:url(images/left_content2.jpg) no-repeat;
        width:336px;
        height:198px;
        margin:9px 0 0 175px;
    
        }
    
    #left_content3{
        background:url(images/left_content3.jpg) no-repeat;
        width:336px;
        height:198px;
        margin:9px 0 0 175px;
    
        }
    If anyone could help me with this rather annoying (and probabbly really simple solution) I will be eternally gratefull.

    Thanks so much in advance (will let you know if i manage to solve it.)

    Jordie

  2.  

  3. #2
    Junior Member
    Join Date
    Dec 2011
    Posts
    6
    Member #
    30309
    Liked
    2 times
    hi,
    i think you should use table for alignment rather than specifying margins.I have manipulated roughly check out if it works for you.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Eliminate Home</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <center>
    <table border="0">
    <tr><td>
    <div id="header">
    
    </div></td></tr>
    
    <tr><td>
    <div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Play</a></li>
    
    </ul>
    
    </div>
    </td></tr>
    <tr><td>
    <div id="picture_box">
    
    </div>
    </td></tr></table>
    
    <div id="left_content1">
    </div>
    
    <div id="left_content2">
    
    </div>
    
    <div id="left_content3">
    
    </div>
    
    </body>
    </html>
    Code:
    @charset "utf-8";
    /* CSS Document */
    body {
        background:url(images/body_bg.jpg) repeat-x;
        font-family:Arial, Helvetica, sans-serif;
    
        }
    
    }
    
    #slogan {
        background:url(images/header_slogan.jpg) no-repeat;
        height:28px;
        width:414px;
    
        }
    
    #header{
        background:url(images/logo.jpg) no-repeat;
        width:850px;
        height:217px;
    
        }
    
    #navigation {
        background:url(images/navbar.jpg) no-repeat;
    
        width:850px;
        height:56px;
    text-align:center;
    
        }
    
    #navigation ul {
    
        list-style:none;
        }
    
    #navigation ul li{
    
        padding:0 30px 0 0;
        display:inline;
        }
    
    #navigation ul li a{
        text-decoration:none;
        color:#606d80;
        font-size:18px;
        font-family:Arial;
        }
    
    #navigation ul li a:hover{
        color:#020c1e;
        }
    
    #picture_box {
        background:url(images/picture_box.jpg) no-repeat;
        width:494px;
        height:160px;
    
        }
    
    #left_content1{
        background:url(images/content_left1.jpg) no-repeat;
        width:336px;
        height:198px;
    
        }
    
    #left_content2{
        background:url(images/left_content2.jpg) no-repeat;
        width:336px;
        height:198px;
    
        }
    
    #left_content3{
        background:url(images/left_content3.jpg) no-repeat;
        width:336px;
        height:198px;
    
        }
    Jordie likes this.

  4. #3
    Junior Member
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Member #
    30316
    Thank you so much... Didnt think about using tables >.<

    Just give this a fiddle around with and im sure it will work

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Aakashdoshi, post: 227374
    hi,
    i think you should use table for alignment rather than specifying margins.I have manipulated roughly check out if it works for you.
    Tables are very outdated for layout - they should only be used for tabular data. Read this about why they are no longer recommended: http://webdesign.about.com/od/layout/a/aa111102a.htm

    If you can tell us what exactly you are trying to do, I'm pretty sure we can help you to do it better than with tables.
    Aakashdoshi and Ronald Roe like this.
    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!

  6. #5
    Junior Member
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Member #
    30316
    right, basically I am trying to get the layout looking like the template posted in the link below, i know im being very vague but i havnt slept as i've been trying to get this problem solved.

    http://jordie.eliminatepk.com/images/template.png

    Wish i could be more descriptive, but lack of sleep means brain isnt working 100%

    *edit: After further trial and error tales didnt quite work.. Thanks for the help though Aakashdoshi

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I see what your problem is - the left margin on your picturebox div seems to be shoving everything in the leftcontent boxes down. You're going to have to float some of your divs and make a container div and a few other things - I can help you fix this but not tonight, my eyes are going wonky - it's after 2:30 Am here...I'll be back tomorrow and give it a go.

    For now - take out the extra closing </div> you have between left_conten1 and left_content2, and try this for your basic structure(Hint -if you comment all your div closings you won't forget or put extras. In fact it's a good idea to comment all your code.):

    HTML Code:
    <body>
    <div id="container">
    <div id="slogan">
    </div><!-- close slogan -->
    
    <div id="header">
    
    </div><!-- close header -->
    <div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
      <li><a href="#">Forums</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Donate</a></li>
      <li><a href="#">Play</a></li>
    </ul>
    
    </div><!-- close navigation -->
    
    <div id="picture_box">
    
    </div><!-- close picturebox -->
    
    <div id="leftSidebar">
    <div id="left_content1">
    
    </div><!-- close left_content1-->
    
    <div id="left_content2">
    
    </div><!-- close left_content2 -->
    
    <div id="left_content3">
    
    </div><!-- close left_content3 -->
    
    </div><!-- close leftSidebar -->
    
    </div><!-- close container -->
    Give your container a width of whatever you want, then give the sidebar a width of the container minus the width of the picturebox.
    try that for now and see where it gets you - I'll be back later today.
    Jordie likes this.
    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!

  8. #7
    Junior Member
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Member #
    30316
    Your a diamond

    I'll let you know if i solve it before you wake up, if not i'll still be sitting patiently

    Thanks again

    Jordie

    Edit: I will give it a go now thanks for helping in your tired state

  9. #8
    Junior Member
    Join Date
    Dec 2011
    Posts
    6
    Member #
    30309
    Liked
    2 times
    Quote Originally Posted by AlphaMare, post: 227379
    Tables are very outdated for layout - they should only be used for tabular data. Read this about why they are no longer recommended: http://webdesign.about.com/od/layout/a/aa111102a.htm

    If you can tell us what exactly you are trying to do, I'm pretty sure we can help you to do it better than with tables.
    thanks !!

  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Quote Originally Posted by AlphaMare, post: 227379
    Tables are very outdated for layout - they should only be used for tabular data. Read this about why they are no longer recommended: http://webdesign.about.com/od/layout/a/aa111102a.htm

    If you can tell us what exactly you are trying to do, I'm pretty sure we can help you to do it better than with tables.

    Pointing another wayward soul in the right direction...

    Tables were created for "tabular data", they were never intended for layout purposes.


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