CSS ei tottele

Discussion in 'Vapaata keskustelua' started by Bixxel, Sep 3, 2011.

  1. Bixxel

    Bixxel Member

    Joined:
    Jul 15, 2007
    Messages:
    51
    Likes Received:
    0
    Trophy Points:
    16
    Miksi seuraava simppeli text-align: left; koodi ei lähde toimaamaan #Header osiossa, jonka color ja size koodit kuitenkin muuttavat tekstiä??!!
    Sivun koodi:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Green Glass | Home</title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>

    <div id="wrapper">
    <div id="top">
    </div>
    <div id="header">
    <b>
    Your Logo Here
    </b>
    </div>
    <div id="contentwrapper">
    <div id="menu">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Linker</a></li>
    <li><a href="#">Linked</a></li>
    <li><a href="#">Linky</a></li>
    <li><a href="#">Linkin Log</a></li>
    </ul>
    </div>
    <div id="content">
    I <i>have</i> tested this design in IE6/7 and in Firefox. So it should do just fine for you.
    <br /><br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
    wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
    eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
    blandit praesent luptatum zzril delenit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
    wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
    eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
    blandit praesent luptatum zzril delenit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
    wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
    eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
    blandit praesent luptatum zzril delenit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
    wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
    eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
    blandit praesent luptatum zzril delenit.

    </div>
    </div>
    <div id="bottom">
    Copyright 2007 <a href="">Yourcompany</a>, Design by <a href="http://lormal.freehostia.com">Rex Jones</a>
    </div>
    </div>
    </body>
    </html>

    /* THE BODY AND THE WRAPPER */
    body {
    font-size: 12px;
    background: #002200;
    margin: 0;
    padding: 10px;
    }

    #wrapper {
    width: 800px;
    margin: 0 auto;
    }

    /* TOP BAR AND THE HEADER */

    #top {
    background: #2F2000 url(images/topbar.png) top center no-repeat;
    width: 800px;
    height: 50px;
    }

    #header {
    background: url(images/panoraama.jpg) top center no-repeat;
    width: 550px;
    height: 100px;
    padding: 50px 0px 0px 250px;
    color: white ;
    font-size: 32px ;
    text-align: left;
    }

    /* THE INSIDE WRAPPER, THE MENU, AND THE CONTENT */

    #contentwrapper {
    background: url(images/bgmiddle.png) top center repeat-y;
    width: 790px;
    margin: 0 auto;
    text-align: center;
    padding: 5px 5px 100px 5px;
    }

    #menu {
    width: 200px;
    height: 20px;
    margin: 0px;
    float: left;
    }

    #menu li a {
    height: 35px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 27px;
    text-decoration: none;
    font-weight: bold;
    }

    #menu li a:link, #menu li a:visited {
    color: lime;
    display: block;
    background: url(images/off.png);
    padding: 8px 0 0 10px;
    height: 27px;
    }

    #menu li a:hover {
    color: #0A2441;
    background: url(images/on.png);
    padding: 8px 0 0 10px;
    height: 27px;
    }

    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #content {
    width: 550px;
    height: 100%;
    text-align: left;
    margin: 3px 10px 10px 210px;
    color: white;
    }

    img {
    border: none;
    }

    p {
    background: url(images/paragraph.png) top left repeat-y;
    padding-left: 20px;
    }

    /* THE FOOTER */

    #bottom {
    background: #2F2000 url(images/bottom.png) bottom center no-repeat;
    width: 700px;
    height: 35px;
    padding: 15px 0px 0px 100px;
    color: lime;
    }

    #bottom a:link, #bottom a:visited {
    color: #FFF;
    }

    #bottom a:hover {
    color: LIME;
    }


    Kiitos etukäteen avusta!
     
    Bixxel, Sep 3, 2011
    #1
  2. Tiger25

    Tiger25 Active member

    Joined:
    May 13, 2011
    Messages:
    1,574
    Likes Received:
    72
    Trophy Points:
    78
    Kyllä tuon minun mielestä pitäisi toimia ihan oikein, en ainakaan huomaa tuossa mitään erikoista(siis muuta erikoista kuin ylimääräiset välilyönnit edellisissä määreissä ennen puolipisteitä), olethan muistanut tallentaa muutokset tyylitiedostoon. Millä selaimilla olet tuota testannut, vai näkyykö tuo kaikissa selaimissa.

    Screenshot tuosta virheestä voisi vähän selventää asiaa, jos viitsit sellaisen ottaa.
     
    Tiger25, Sep 3, 2011
    #2
  3. Hmmmh

    Hmmmh Regular member

    Joined:
    Aug 16, 2004
    Messages:
    983
    Likes Received:
    0
    Trophy Points:
    26
    Ei siinä tarvii explisiittisesti kertoa padding:left; , koska se on niin jo defaulttina. Sulla on vaan 250px paddingiä vasemmalla.

    padding: 50px 0px 0px 250px;
     
    Hmmmh, Sep 5, 2011
    #3

Share This Page