SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Keeping Text Aligned on Different Screens

    I am a novice, and put together a website for my wife. It consists of a lot of photos, and at the bottom of each page have next, back, home, etc.. How do I keep this text in one line when viewed on other PC's, monitors, etc..

    I put the site together using a 22 inch wide screen, and it looks great, but on others...not so great.

    You were all a help in the past with this project, and hope you can help with this question. Happy Thanksgiving.

    www.theinquisitiveeye.com

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Below is a pretty simple example of what you are trying to do. Essentially I am floating the different text elements left and right, and placing a left and right margin on the left-most and right-most elements. Notice that when you float elements right, it is the first element that you float which appears in the right-most position (not sure if I made any sense....). Here you go:
    <div id="footer" style="position:absolute; bottom:0px; left:0px; width:100&#37;;">
    <span style="position:relative; top:0px; left:0px; margin-left:20px; margin-right:20px; float:left;">Home</span>
    <span style="position:relative; top:0px; left:0px; float:left;">Back</span>

    <span style="position:relative; top:0px; left:0px; margin-left:20px; margin-right:20px; float:right;">End</span>
    <span style="position:relative; top:0px; left:0px; float:right;">Next</span>
    </div>

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML is a markup language. It indicates what things are, but says nothing about how it looks.

    What you need to control the layout is CSS, so you should post this question in the CSS forum.
    Birnam wood is come to Dunsinane

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Barnum, it's not possible (to put it simply), you cannot guarantee (nor should you want to) that a website will look the same across every browser and set of circumstances, for example there is no way that you would be able to line up all the images on a handheld device (which will only have a very small screen of a few inches) - with exception of devices like the iPhone that support "panel zooming". Based on the URL you posted it's about as good as you are going to get in terms of scaling resolutions on a single line rather than trying to force everything to appear in a row which would force horizontal scrolling to occur.

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your help and suggestions. It's apparent I need to take some classes. Any one book you can suggest for a novice?

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    This one is very good. Also, the Head First HTML/CSS primer, and its companions, are very good, though the breezy, somewhat ADD style of presentation can be either off-putting or engaging, depending on what you prefer.

  7. #7
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    On top of the ones Max has suggested it might also be worth checking out a book like Designing with Web Standards (Jeffrey Zeldman) or the Zen of CSS Design (Dave Shea), both tackle the subject of design as well as simply learning how to code, which will be very useful in any future projects you undertake.


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
  •