SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: css sizing help

Hybrid View

  1. #1
    SitePoint Enthusiast paddysteed's Avatar
    Join Date
    May 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css sizing help

    i have a website but all the sizing is messed up, i dont know what units to use could someone please fix it and send me a copy at paddysteed@gmail.com my website is at comevisitstlucia.freehostia.com the css is
    Code CSS:
    #main-header {
    font-size : 4em;
    color : red;
    background-image : url(images/top_banner_background_image.jpg);
    height : 1.1em;
    margin : 0.3em;
    padding : 0.7em;
    margin-bottom : 1em;
    font-family : "Kristen ITC", Verdana, sans-serif;
    }
    body {
    background-image : url(images/background.gif);
    color : red;
    font-family : "comic Sans MS";
    }
    #navagation {
    background-image : url(images/navagation_background_image.jpg);
    height : 600px;
    width : 206px;
    font-size : 16pt;
    color : red;
    list-style-image : url("images/palm_tree.gif");
    position : absolute;
    top: 11em;
    padding:1em;
    padding-left: 1.5em;
    padding-right: 0em;
    }
    #navagation a:link, #navagation a:visited {
    color : red;
    }
    #navagation a:hover {
    color : red;
    background-color : blue;
    }
     
    #main_body_content {
    position : absolute;
    left: 20em;
    top: 21em;
     
    background-color : white;
    width : 850px;
    background-color : #90fefb;
    padding : 40px;
    color : black;
    }
    .photo_gallery {
    border-style : solid;
    border-color : white;
    border-width : 50px;
    border-bottom-width : 150px;
    display : block;
    margin-left : auto;
    margin-right : auto;
    margin-top : 150px;
    margin-bottom : 20px;
    }
    .float {
    float : left;
    margin : 20px;
    border : none;
    }
    and the html for the homepage is
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3c.org/1999/xhtml1">
      <head>
                   <title>Come Visit St.Lucia</title>
                 <link href="style1.css" rel="stylesheet" type="text/css" />
              </head>
                  <body>
           <h1 id="main-header">Come Visit St.Lucia</h1>
               <ul id="navagation"><li><a href="About_the_Island.html">About the Island</a></li><li><a href="photo_gallery.html">photo gallery<a></li></ul>
            <div id="main_body_content"><h1>Welcome</h1><p>Congratulations you've made your first step to visiting St.Lucia. Hopefully the memories will last a 
    lifetime. I have been going for 5 years now and still remember, as if it were yesterday, the first moment I stepped off the plane and was greeted by the most wonderful air I had ever breathed in.
                      </p><h3>The St.Lucia Flag</h3><img src="images/flag.jpg" alt="St.lucia flag" width="200" height="100" /><div id="blog"><iframe src="/wordpress/index.php" height="400" width="900" /></div></div>
     
          </body>
              </html>

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    argh my eyes

    Using em's for the units is fine, you shouldn't use px or pt so wherever you have those you should change it.

    I'd also suggest not using a font like Kristen ITC, use something more generic as my PC (and I'm guessing most users) doesn't have that font so won't see it.

    If you could be a bit more specific about what kind of layout your after or provide an image of what you'd like the page to look like then we'll be able to help you out.

  3. #3
    SitePoint Enthusiast paddysteed's Avatar
    Join Date
    May 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pictures of what it looks like on my computer

    i changed the css
    Code CSS:
    #main-header {
    font-size : 4em;
    color : red;
    background-image : url(images/top_banner_background_image.jpg);
    height : 1.1em;
    margin : 0.3em;
    padding : 0.7em;
    margin-bottom : 1em;
    font-family : "Kristen ITC", Verdana, sans-serif;
    }
    body {
    background-image : url(images/background.gif);
    color : red;
    font-family : "comic Sans MS";
    }
    #navagation {
    background-image : url(images/navagation_background_image.jpg);
    height : 20em;
    font-size : 16pt;
    color : red;
    list-style-image : url("images/palm_tree.gif");
    position : absolute;
    top: 11.35em;
    padding:1em;
    padding-left: 3em;
    padding-right: 1em;
    }
    #navagation a:link, #navagation a:visited {
    color : red;
    }
    #navagation a:hover {
    color : red;
    background-color : blue;
    }
     
    #main_body_content {
    position : absolute;
    left: 20em;
    top: 15em;
     
    background-color : white;
    width : 850px;
    background-color : #90fefb;
    padding : 40px;
    color : black;
    }
    .photo_gallery {
    border-style : solid;
    border-color : white;
    border-width : 50px;
    border-bottom-width : 150px;
    display : block;
    margin-left : auto;
    margin-right : auto;
    margin-top : 150px;
    margin-bottom : 20px;
    }
    .float {
    float : left;
    margin : 20px;
    border : none;
    }
    it looks diffrent on every computer
    Attached Images Attached Images

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally I find that using percent is easier to judge - I put font-size: 100&#37; on the body element and then font-size:76% on the main container div. Then I either go up or down on individual items as necessary.

    There's nothing wrong with using ems though - I just personally prefer percent! You should avoid using PTs for sizing on web pages though.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tailslide, just wondering why you don't just apply 76&#37; to the body? I also use % for font sizing and there's a useful table here which helps to convert from pixels to percentage

    http://developer.yahoo.com/yui/fonts/

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now you'll have to excuse me Dave because I end up doing stuff for a good reason... but I forget why!!

    I think, if I remember rightly that the reason for doing the 100&#37; on the body and then the lower figure (either % or ems) on the container div was for IE which dealt better with it that way round.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, yeah there's a few things like that which I've got into the habit of doing but then forget why.

    But surely setting the body to 100&#37; doesn't actually do anything and it's only the % on the container that's actually doing anything in which case you could just move it to the body.

    I may be wrong but try it on a completed project if you have one where you've done it like this and just switch the font-size over and see if it has any effect? I'd be surprised if you don't get the same sizing.

    Nothing wrong with the way you're doing it though, I was just curious if there was something I was missing


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
  •