SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Positioning

    Hello Sitepoint fellows,

    I am trying to position and image on the left side of the page, and have written work beside it, on the right. I tried using overflow:hidden, along with setting the two divs(one for the image, one for the written work). Any suggestions? Thank you!

    Code:
    <!DOCTYPE HTML>
    <html lang = "en">
      <head>
      <meta charset = "utf-8"/>
      <title>Values<title>
      <link href = "style1.css" rel = "stylesheet" type = "text/css"/>
      </head>
    <body>
    <div id = "header">
      <div id = "title">
        <h1>Value</h1>
      </div> <!-- end of title -->
      <div id = "login">
        <h1>Login</h1>
        <p>User name : XXXXXX</p>
        <p>Password : XXXXX</p>
      </div> <!-- end of login -->
    </div> <!-- end of header -->
    </hr>
    <div id = "mid">
    <div id = "navigation">
      <ul>
      <li><a href = "main.html">Main</a></li>
      <li><a href = "about.html">About</a></li>
      </ul>
    </div> <!-- end of navigation -->
    
    
    
      <div id = "paragraph">
        <h1>Value</h1>
        <ul>
        <li><p>Value</p></li>
        <li><p>Vaue</p></li>
        <li><p>Value</p></li>
        </ul>
        <h1>Value</h1>
        <ul>
        <li><p>Value</li></p>
        <li><p>Value</li></p>
        </ul>
          <div id = "image">
        <img src = "bobby.jpg" width = "160" height = "320" alt = "This is Bobby's face!"/>
      </div> <!-- end of image -->
      </div> <!-- end of paragraph -->
    </div> <!-- end of mid -->
    Code:
    /* CSS for folder "Bobby" */
    
    body {
      background-color: blue; 
      }
      
    #header { overflow: hidden; }
    
    #title {
      font-size: 130%; 
      float: left; }
    
    #login {
      float: right; }
    
    #mid { overflow: hidden; }
    
    #image { float: left;
    }
    
    #paragraph { float: right; }

  2. #2
    SitePoint Member
    Join Date
    Mar 2012
    Location
    North Carolina, USA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just create one div

    remove #image from your css

    instead

    create in your css

    #paragraph img {
    float:left;
    }

    <div id="paragraph">
    some text you want
    <img src = "bobby.jpg" width = "160" height = "320" alt = "This is Bobby's face!"/>
    </div>

    or just do the following, either way you still want to remove #image from your css



    <div id="paragraph">
    some text you want
    <img style="float:left" src = "bobby.jpg" width = "160" height = "320" alt = "This is Bobby's face!"/>
    </div>

    I would also suggest using classes instead of id's this way you can use the styling across mutlple pages easier....

    /snip
    Last edited by Black Max; Mar 11, 2012 at 19:38. Reason: fake signature removed

  3. #3
    SitePoint Enthusiast Lil_Kins0's Avatar
    Join Date
    Mar 2012
    Location
    Nigeria
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Plz i gat a question?
    How do i place some text beside an image? Whenever i try it, the text goes to the lower part of the image.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,168
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Do you mean you want the text aligned at the top of the image, rather than the bottom? Or do you want the text aligned vertically to the middle of the image?

    Show us the HTML and CSS you're using, and we'll have a better idea of what you're trying to achieve and how to help.

  5. #5
    SitePoint Enthusiast Lil_Kins0's Avatar
    Join Date
    Mar 2012
    Location
    Nigeria
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was able to place the image and the text side-by-side by using the method you (TechnoBear) gave me when i needed help for tables. What i want to know now is how to align the image to the center and let the text be below the image in another line.
    I can't drop the html and css now, cos am on mobile. TIA.

  6. #6
    SitePoint Member
    Join Date
    Mar 2012
    Location
    North Carolina, USA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Black Max

    Why did you edit my post.. I have no signature, haven't created one. Are you saying what I end every post with is a fake sig?

    Please respond.....

    Never mind I re-read the rules and I understand why you think it's a fake. Sorry, but it's just what I normally add to my post. I will withhold posting it in the future..

    But for the record, It was never intended to be a signature.... I even told Sarah in the greeting email I use it on every post and nothing was said about it. Does that make a difference.....

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,168
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Lil_Kins0 View Post
    What i want to know now is how to align the image to the center and let the text be below the image in another line.
    Well, without the code I'm still guessing at what you're trying to achieve. If it's something like an image with a caption, so you want the caption centred, too, you could use:
    Code:
    <div id="whatever">
    <img src="foo" width="x" height="y" alt="description">
    <p>Your text goes here</p>
    </div>
    and
    Code CSS:
    #whatever {text-align: center;}

  8. #8
    SitePoint Enthusiast Lil_Kins0's Avatar
    Join Date
    Mar 2012
    Location
    Nigeria
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okies, Thanks. I'll try it and get back to you.


Tags for this Thread

Bookmarks

Posting Permissions

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