kostenloser Webspace werbefrei: lima-city


Problem mit CSS LAyout

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    n********r

    Hi,

    ich bin gerade dabei ein CSS LAyout zu erstellen. Leider habe ich ein paar Fehler drinne und wei? nciht wo.
    Also, es wir im IE richtig angezeigt aber in Firefox nicht. Beim Firefox steht das Men? so weit rechts, das man nicht mal die Listenpunkte sieht.
    Au?erdem ist das Men? im Textinhalt drinne. Was muss ich ?ndern, das es nicht mehr so ist?

    Zweite Sache:
    Wie kann ich das Komplette Layout von rechts in die mitte hohlen, ohne das die Schrft dann auch zentriert ist?
    Und wie mache ich es, dass das Men? dierekt am content dran ist ohne abstand?

    hier mein code:

    <!doctype html public "-//W3C//DTD HTML 4.0//EN">
    <html>
    <head>
      <title>Test Layout</title>
      <style type="text/css">
             #menue
             {
              width:100px;
              color:red;
              border:1px ridge #cecece;
              float:left;
             }
             #content
             {
              width:600px;
              color:blue;
              border:1px ridge #dedede;
              float:center;
             }
      </style>
    </head>
    <body>
    <div width="700px" style="margin:0px;">
         <div id="menue">
              <li><a href="#">Hallo</a></li>
              <li><a href="#">Hallo</a></li>
              <li><a href="#">Hallo</a></li>
              <li><a href="#">Hallo</a></li>
              <li><a href="#">Hallo</a></li>
         </div>
         <div id="content">
              <h3>Hallo</h3><br><br><br>
              shdjksdfjhdsjkfhkjsdfhjkh<br>
              sehjksdfhjksdhfkjhsdjkfhsdjk<br>
              sdahkjdshfjkhdskfjhsdkjfkjsdf<br>
         </div>
    </div>
    </body>
    </html>
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. wickedthunder

    wickedthunder hat kostenlosen Webspace.

    Also, wegen zentrieren:
    Du kannst den Html-tag <center>...</center> benutzen, allerdings ist dieser nicht html4-gerecht.
    Ich benutze zum zentrieren Javascript, also, wenn man von 1024px breite ausgeht:
    document.getElementById("...").style.marginLeft = (document.width-1024)/2;
    1024 ist die breite deines Elements, das kannste ab?ndern.
  4. Autor dieses Themas

    n********r

    das ist sch?n, aber ich will es nicht zentrieren, weil wenn ich es so wie du mache, ist die schrift auf links und nur der content in der mitte, aber immer noch nicht alles, so wie ich es will
  5. padding-left:20px;

    #menue
    {
    width:100px;
    color:red;
    border:1px ridge #cecece;
    float:left;
    padding-left:20px;
    }


    http://css4you.de/ kennst du bestimmt schon.
  6. Autor dieses Themas

    n********r

    ok, jetzt kann ich alles lesen, aber das men? ist immer noch im textflu
  7. http://css4you.de/wslayout1/index.html
    guck dir mal die beispiele unten an. da ist bestimmt was f?r dich dabei.
  8. Zentriert wird ein Block (beispielsweise <div> oder <p>) mit "margin: auto;".

    Dann kannst du den Text im Blockelement immer noch so ausrichten, wie du m?chtest ( mit "text-align").

    Teste deine Layouts immer zuerst mit dem Firefox, und erst wenn es dort hinhaut, kuckst du, was der IE dazu sagt. Umgekehrt geht das nicht, weil der IE viel mehr interpretiert (er versucht zu erraten, was du darstellen wolltest) als der Firefox. Verhaut der Firefox dein Layout, dann ist mit ziemlich gro?er Wahrscheinlichkeit dein Code daran schuld.

    Au?erdem hilft es, XHTML statt HTML zu schreiben. Dazu ben?tigt deine HTML-Datei einen speziellen Header in der ersten Zeile:

    <!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">
    <head>
    ... <!-- usw. -->

    Das zwingt den IE, von seiner "Raterei" abzulassen und den Quellcode so zu interpretieren, wie es auch der Firefox macht (meistens).

    Verlinke mal bitte deine Seite, damit wir schauen k?nnen, wie du das Layout haben m?chtest (also so, wie es der MSIE anzeigt).

    MfG
    alopex

    *nachtr?glich_einf?g*

    So m?sste es gehen:

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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">
    <head>
    
    <title>Test Layout</title>
    
    <style type="text/css">
    
    div#main {
      margin-left: auto;
      margin-right: auto;
      width: 720px;
      heigt: 100%;
      border: 1px green dashed;
    }
    
    div#menue
    {
    position: relative;
    width:100px;
    color:red;
    border:1px ridge #cecece;
    float:left;
    clear: right;
    }
    
    div#content
    {
    position: relative;
    width:600px;
    color:blue;
    border:1px ridge #dedede;
    float:right;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="main">
    
      <div id="menue">
      <li><a href="#">Hallo</a></li>
      <li><a href="#">Hallo</a></li>
      <li><a href="#">Hallo</a></li>
      <li><a href="#">Hallo</a></li>
      <li><a href="#">Hallo</a></li>
      </div>
    
      <div id="content">
      <h3>Hallo</h3><br><br><br>
      shdjksdfjhdsjkfhkjsdfhjkh<br>
      sehjksdfhjksdhfkjhsdjkfhsdjk<br>
      sdahkjdshfjkhdskfjhsdkjfkjsdf<br>
      </div>
    
    </div>
    </body>
    </html>



    Beitrag ge?ndert am 14.10.2005 18:43 von alopex
  9. Falsche Anzeige in Internet Explorer wegen box-modell-bug. Internet Explorer 6 kann es richtig anzeigen (d.h. so wie Firefox), wenn in der Dokumenttypangabe verlinkt ist.
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!