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 14 of 14
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need Help Aligning Text and Pictures

    Ok, I am having some issues getting my pictures to be aligned with my text. I want the text in the left column, and then a picture in the right column. I am using a div-based CSS menubar and what not.

    Any help would be appreciated.
    Thanks!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    <sarcasm>okay my eyes are closed its dark i am on the first floor of my house, i will try to make it to my room which is upstairs</sarcasm>

    its kinda hard for us to help you when we dont have any code you have done or a link to the page in question

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Could you post some code for us to have a look at. It's a tad difficult to see the problem without code or a screenshot (although the code says a lot more than an image )

    You beat me to it _Aerospace_Eng_
    Last edited by Badman3k; 01-31-2005 at 10:11 PM. Reason: _Aerospace_Eng_ beat me to it
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

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

    THis help?

    <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>
    <float>
    <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>

    That's the actual page code. If u want the CSS also, let me know.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Yeah post the CSS too as it'll probably be the CSS we'll be changing lol
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #6
    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;
    }

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    what are the sizes of the images marconLogo.gif and good.gif

  • #8
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    good = 592x483

    Marcon Logo = 466x90

    Note: Marconlogo is the logo that is already placed at the top left corner. I have all of my text spaced to start below it
    I'm trying to get good to align on the right side of a small list of text.

  • #9
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Please read the FAQ on vBCode. More specifically the code tag.

  • #10
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, sorry. I forgot about that

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    okay change your content div to this
    Code:
    <div id ="right">
    <br><br>
    <div id="good"><img src="Pictures/good.gif" width="592" height="483">
    <h2> Good Grade</h2>
    <br></div>
    <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>
    and use this for your css
    Code:
    body {
    background: #E8E8E8;
    font: 14px Verdana, sans-serif;
    }
    #left {
    width: 159px;
    height: 900px;
    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;
    }
    #good {
    text-align:center;
    }
    i took out the content part of the css because it was trying to position your good image elsewhere on the page, kinda what happens when u use relative positioning

  • #12
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, well that definetely improved my code's efficiency, however it doesn't solve my problem. I think I didn't quite explain this like I should have.
    I need it to look like:

    text text text text
    Text.... Picture
    Text.....Picture
    Text.....Picture
    Text text text text

    did that clarify anything?

  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    There is no such thing as <float>. Although I have to admit it looks cool.

    img {
    float: right;
    }

    Play around with margins and padding to get the effect you need.
    If you assign "float" to a class or ID, remember to assign it where you need it, i.e.:

    .floaty {
    float: right;
    }

    <img class="floaty" src="etc.gif"... />

  • #14
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot! That did the trick for me.


  •  

    Posting Permissions

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