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 4 of 4

Thread: Page alignments

  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Page alignments

    Ok, so here's what I need done. I have a little bit of text on the left side, and I want a picture on the right. So, in essence, I want:

    ........Header..........
    Text...........PICTURE
    Text.......... PICTURE
    Text...........PICTURE
    Text...........PICTURE

    the "PICTURE"s are all one big picture. the text will be different lines of text. I have my text left aligned, and my picture right aligned. problem is, right now it looks like:
    ......Header............
    ..............PICTURE
    ..............PICTURE
    ..............PICTURE
    ..............PICTURE
    Text
    Text
    Text
    Text

    I don't know how to fix it... I have my menu on the left side, along with my CSS buttons and what not.

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floats

    Sounds like you need to apply the float property to one or both of your divs.

    Can you post the code so we can take a closer look please?

    Gary

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Main Page:

    <html>
    <title> Marcon Precast Inc.</title>
    <LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet">
    <body>
    <div id="left">
    <br>
    <br>
    <img src="pictures/marconLogo.gif">
    <div id="navlist">
    <ul id="navlist">
    <li><a href="index.html" title="home">Home</a></li>
    <li><a href="projects.html" title="prior">Previous Projects</a></li>
    <li><a href="staff.html" title="staff">Staff</a></li>
    <li><a href="concrete.html" title="ITD">Products</a></li>
    <li><a href="contact.html" title="contact">Contact Us</a></li>
    </ul>
    </div>
    </div>
    <div id ="content">
    <br><br>
    <br><br>
    <br><br>
    <br><br><br>
    <center>
    <img src="Pictures/good.gif">
    <h2> Good Grade</h2>
    <br></center>
    <ul>
    <li>Few significant cracks or chips on either side</li>
    <li>Appropriate for:</li>
    <ul>
    <li>traffic control</li>
    <li>limiting access</li>
    </ul>
    </ul>
    </div>
    </div>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    CSS:

    body {
    background: #E8E8E8;
    font: 14px Verdana, sans-serif;
    }
    #left {
    width: 159px;
    height: 900;
    background: url(../Pictures/crackback.gif);
    float: left;
    margin-right: 20px;
    }
    #right {
    width: #75%;
    float: right;
    }
    a:link {color: #104E8B;
    text-decoration: none;
    background-color: transparent }
    a:visited { color: #4169E1;
    text-decoration: none;
    background-color: transparent }
    a:hover { color: #00066;
    text-decoration: underline;
    background-color: transparent }
    a:active { color: #A9ACB6;
    text-decoration: underline;
    background-color: transparent }
    .title { text-align: center}
    #navlist
    {
    padding: 0 1px 1px;
    font: bold 12px Verdana, sans-serif;
    background: gray;
    width: 13em;
    }
    #navlist li
    {
    list-style: none;
    margin: 0;
    border-top: 1px solid gray;
    text-align: left;
    }
    #navlist li a
    {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.8em;
    border-left: 1em solid #AAB;
    background: #CCD;
    text-decoration: none;
    }
    #navlist li a:link { color: #448; }
    #navlist li a:visited { color: #667; }
    #navlist li a:hover
    {
    border-color: #000066;
    color: #FFF;
    background: #4169e1;
    }
    #content {
    width: auto;
    top: 0;
    right: 10px;
    padding 10px;
    z-index: 1;
    position: relative;
    margin: 0 10px 0px 120;
    }


  •  

    Posting Permissions

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