SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question centering conundrum

    Hello I am a newbie at XHTML and CSS. I have just completed "Build Your Own Web Site The Right Way". The tutorial is excellent. However, in building my own, first, web site, I have run into a problem that has stumped me. Given the new very wide monitors now in use, up to date web sites have all the information centered so that it is not spread all over the screen. I am trying to get my site centered on the screen. Using the HTML command <center> is fine for all vertically in-line data. But for the life of me, I cannot get a column of text to align itself next to a picture and have both centered on the page. CSS absolute positioning seems to be in conflict with HTML centering. The reason I am doing this is to have my site pleasantly viewable on any monitor, new or old. Is there anyone who can help me with this conundrum?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi rjpabich, a hearty welcome to SitePoint! This is a very active forum, and you can be assured that all your needs will be met.

    Centering content as you describe is very easy. Just a few point, though. Use of the center element is badly out of date, so erase if from your memory. Secondly, absolute positioning is rarely a good idea for site layout—especially the main sections of a page. Only use it rarely, for special little items here and there.

    So... the first thing you should do is wrap the contents of your page in a div, say with an id of "wrapper".

    Then, in your style sheet, give that wrapper a width (be it fixed or fluid) and set left and right margins to auto. That will center the page, like so:

    Code:
    #wrapper {
      width:960px;
      margin: 0 auto;
    }
    As for aligning text next to a picture, you can best do that with floats. How exactly to do that depends on the specifics of how you want the page to be laid out.

    So, please provide us with a link to your page (if live) or the code you are using. You can post a link by removing the http bit and leaving a space for the dots, or just writing 'dot' each time.

    If you are posting your code, please wrap it in code tags (by highlighting it and clicking the code (#) button.

    If any or all of the above makes no sense whatever, don't despair. Just keep asking questions!

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rjpabich View Post
    But for the life of me, I cannot get a column of text to align itself next to a picture and have both centered on the page.
    Hi, welcome to Sitepoint

    I think I understand you, you want an image and then text floating along side it? And you want all that centered?

    Just do something like this
    <div>
    <img>
    <p>text</p>
    </div>

    Give the <div> a width and overflow:hidden; and margin:0 auto (the margin will center it)

    Then float both the <img> and the <p>, both with a respectable width .

    That should help. Though, if we get a link we could provide you with exact code
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •