Biene: dreispaltiges Layout mit css

SELF-Forum

dreispaltiges Layout mit css

Biene
−1 Informationen zu den Bewertungsregeln

Hallo,
ich habe ein dreispaliges Layout mit Css für ein Blog. Im Opera wird es auch richtig dargestellt, nur im IE bringt er alles durcheinander.
Meine CSS sieht so aus:

body{
 background-color: #E9E9E9;
      text-align: center;
 margin: 10px;
 background-image: url(images/bg.gif);
}
#container{
 width: 720px;
 text-align: left;
 margin-left: auto;
 margin-right: auto;
}
#header{
 background-image: url(images/header.gif);
 height: 160px;
 width: 740px;
 background-repeat: no-repeat;
 margin-bottom: 3px;
}
#contentleft{
 float: left;
 width: 150px;
      background-position: top left;
 background-color: transparent;
 padding: 3px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #EFEFFA;
}
#contentright{
      float: right;
 width: 150px;
  background-position: top right;
 background-color: transparent;
 padding: 3px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #EFEFFA;

}
#content{
 width: 370px;

margin-left: 170px;
      margin-right: 85px;
      background-color: #FFFFFF;
 border: 1px solid #d8c2ab;
 padding: 3px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #5e5244;
}
  * html div#content {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}
#titcon{
 background-image: url(images/contentbalken.gif);
 width: 384px;
 height: 20px;
 background-repeat: no-repeat;
 margin-bottom: 3px;
}
.entry{
 background-color: #d8c2ab;
 border-bottom: 2px solid #e5e1db;
 border-right: 2px solid #e5e1db;
 border-top: 2px solid #d8c2ab;
 border-left:  2px solid #d8c2ab;
 margin: 3px 3px 10px 3px;
 padding: 4px;
 color: #EFEFFA;
}
.boxSidebar{
 margin: 3px 3px 10px 3px;
 border:1px solid #d8c2ab;
 background-color: #FFFFFF;
}
.boxSidebarC{
 margin: 3px;
 border-bottom: 2px solid #d8c2ab;
 border-right: 2px solid #d8c2ab;
 border-top: 2px solid #77644d;
 border-left:  2px solid #77644d;
 background-color: #FFFFFF;
 color: #77644d;
 padding: 3px;
}
.divTitle,  .pagetitle{
 background-color: #d8c2ab;
 border-bottom: 2px solid #e5e1db;
 border-right: 2px solid #e5e1db;
 border-top: 2px solid #d8c2ab;
 border-left:  2px solid #d8c2ab;
 margin: 3px 3px 10px 3px;
 padding: 4px;
 color: #EFEFFA;
 text-align: center;
 text-transform: capitalize;
 letter-spacing: 1px;
 font-weight: bold;
}
blockquote{
 margin: 3px;
 border-bottom: 2px solid #d8c2ab;
 border-right: 2px solid #d8c2ab;
 border-top: 2px solid #77644d;
 border-left:  2px solid #77644d;
 background-color: #FFFFFF;
 color: #77644d;
 padding: 3px;
 font-style: italic;
}
.singolocommento{
 margin: 3px;
 border-bottom: 2px solid #d8c2ab;
 border-right: 2px solid #d8c2ab;
 border-top: 2px solid #77644d;
 border-left:  2px solid #77644d;
 background-color: #d8c2ab;
 color: #F2F3FD;
 padding: 3px;
}
.divTitle3, #postcomment, #comments,h3{
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 text-align: left;
 letter-spacing: 2px;
 font-weight: bold;
 color: #F2F3FD;
 background-color: #d8c2ab;
 border-bottom: 1px solid #d8c2ab;
 padding: 2px;
 margin-bottom: 5px;
}
.divTitle2{
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 text-align: left;
 letter-spacing: 2px;
 font-weight: bold;
 color: #d8c2ab;
 background-color: #FFFFFF;
 border-bottom: 1px solid #fffffff;
 padding: 2px;
 margin-bottom: 5px;
 text-transform: uppercase;
}
textarea{
 background-color: #d8c2ab;
 border: 1px solid outset #d8c2ab;
 padding: 2px;
 color: #F2F3FD;
 font-size: 11px;
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 width:98%;
}
input,select{
 background-color: #d8c2ab;
 border: 1px solid outset #d8c2ab;
 padding: 2px;
 color: #F2F3FD;
 font-size: 11px;
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin: 2px 2px 5px 2px;
}
#content a:link, #content a:visited{
 color: #806d55;
 text-decoration: none;
}

#content a:hover{
 color: #F5F5FD;
 text-decoration: none;
 position: relative;
 top: 1px;
 left:1px;
}
#contentleft a:link, #contentleft a:visited{
 color: #d8c2ab;
 text-decoration: none;
}

#contentleft a:hover{
 color: #806d55;
 text-decoration: none;
 position: relative;
 top: 1px;
 left:1px;
 }
#contentright a:link, #contentright a:visited{
 color: #d8c2ab;
 text-decoration: none;
}

#contentright a:hover{
 color: #806d55;
 text-decoration: none;
 position: relative;
 top: 1px;
 left:1px;
}
h2{
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
}
.pside{
 color: #F5F5FD;
 font-weight: bold;
 letter-spacing: 1px;
}
#content ul{
 list-style-image:url(images/ul.gif);
   padding-left: 12px;
  margin-left: 10px;
 line-height: 15px;
 color: #F5F5FD;
}

#contentleft ul{
 list-style-image:url(images/ul.gif);
   padding-left: 12px;
  margin-left: 10px;
 line-height: 15px;
 color: #d8c2ab;
}
#contentright ul{
 list-style-image:url(images/ul.gif);
   padding-left: 12px;
  margin-left: 10px;
 line-height: 15px;
 color: #d8c2ab;
}
.titolino{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 9px;
 color: #FFFFFF;
 text-align: right;
}
.avatar{
 background-image: url(images/avatar.gif);
 width: 50px;
 height: 50px;
 padding: 5px;
 border: 1px solid #FFFFFF;
 margin: 3px;
 float: left;
 background-repeat: no-repeat;
 background-position: center;
}
#wp-calendar{
 width: 130px;
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
 padding: 2px;
 text-align: center;
}
caption{
 color: #d8c2ab;
 border-bottom: 1px solid #d8c2ab;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 2px;
}
th{
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #d8c2ab;
}
td{
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #9e8972;
}

Im Opera befinden sich die drei Spalten neben dem Header auch nebeneinander, im IE leider nicht. Da zeigt er unter dem Header die mittlere Spalte und nach deren Ende dann links und Rechts die beiden anderen Spalten.

--
LG
Biene
Beitrag melden
−1
Informationen zu den Bewertungsregeln

  1. dreispaltiges Layout mit css

    Biene
    – Informationen zu den Bewertungsregeln

    Muß mich noch eben korrigieren. Im Opera wird es genauso angezeigt wie im IE.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. dreispaltiges Layout mit css

    Matze
    – Informationen zu den Bewertungsregeln

    Hallo!

    Bitte beschränk dich auf das wesentliche!
    Was heißt "durcheinander"? Welche Version des IE benutzt du?
    Selbst geschrieben oder per Dreamweaver o.ä. erstellt?!
    Welche HTML-Version?

    Meine CSS sieht so aus:

    body{
    background-color: #E9E9E9;
          text-align: center;
    margin: 10px;
    background-image: url(images/bg.gif);
    }

    Wieso hat body ein margin??

    Kann man sich das irgendwo online anschauen?

    Gruß, Matze

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. dreispaltiges Layout mit css

      Biene
      – Informationen zu den Bewertungsregeln

      Mit Durcheinander meinte ich, das die Spalten nicht am Platz sind. Anschauen kann man sich das hier:
      http://biene196.bi.funpic.de/wordpress/

      Das habe ich selbst verfasst oder besser gesagt geändert und zwar in der Admin meines Blogs. Dort wird mir die style.css so vorgegeben. Deshalb weiss ich auch nicht welche html Version dort benutzt wird. Ich habe in keiner php oder css etwas dazu gefunden.
      Das margin für den Background ist mir da nur rein gerutscht, hab übersehen das ich das falsch platziert hatte.
      IE hat die Version 6.
      Sorry, beschäftige mich zum ersten mal damit.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. dreispaltiges Layout mit css

        Ingo Turski Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        http://biene196.bi.funpic.de/wordpress/

        Das Problem liegt im HTML-Code, genauer in der Reihenfolge der Elemente.
        Du mußt die gefloateten Elemente lediglich vor der Inhaltsbox notieren.

        Ein weiteres Problem könnte dann später im IE auftreten, weil der durch den Kommentar vor dem DOCTYPE in den quirks mode versetzt wird.

        freundliche Grüße
        Ingo

        --
        [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. dreispaltiges Layout mit css

          Biene Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Danke dir für deine Antwort, nur da liegen sie ja. Content ist der Inhaltsteil und der kommt nach contentleft und contentright.

          Hi,

          http://biene196.bi.funpic.de/wordpress/
          Das Problem liegt im HTML-Code, genauer in der Reihenfolge der Elemente.
          Du mußt die gefloateten Elemente lediglich vor der Inhaltsbox notieren.

          Ein weiteres Problem könnte dann später im IE auftreten, weil der durch den Kommentar vor dem DOCTYPE in den quirks mode versetzt wird.

          freundliche Grüße
          Ingo

          --

          LG
          Biene
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. dreispaltiges Layout mit css

            Ingo Turski Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            Danke dir für deine Antwort, nur da liegen sie ja. Content ist der Inhaltsteil und der kommt nach contentleft und contentright.

            Nein! Schau doch bitte in Deinen Quelltext:

            <!--header.php end-->  
  
 <!-- begin content -->  
 <div id="content" class="narrowcolumn">  
...  
 <!--end content -->  
  
   <!-- begin sidebar links -->  
   <div id="contentleft">

            Jetzt hast Du es mit float für #content versucht, was jedoch problematisch ist und im IE auch prompt zu Problemen führt.

            freundliche Grüße
            Ingo

            --
            [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. dreispaltiges Layout mit css

              Biene Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hi,

              Danke dir für deine Antwort, nur da liegen sie ja. Content ist der Inhaltsteil und der kommt nach contentleft und contentright.

              Nein! Schau doch bitte in Deinen Quelltext:

              <!--header.php end-->

              <!-- begin content -->
              <div id="content" class="narrowcolumn">
              ...
              <!--end content -->

              <!-- begin sidebar links -->
                 <div id="contentleft">

              
>   
> Jetzt hast Du es mit float für #content versucht, was jedoch problematisch ist und im IE auch prompt zu Problemen führt.  
>   
> freundliche Grüße  
> Ingo

-- 
Ingo,  
ich danke dir das du das Brett vor meinem Kopf weg genommen hast. Ich hab das ja Gestern in Selfhtml gelesen das es auf die Reihenfolge an kommt und das bezog ich doch wahrhaftig auf die style.css. Wenn ich float im content nehme stellt es der Opera richtig dar aber der IE natürlich nicht. Danke dir für deine Hilfe, werde das gleich mal richten gehen.  
  
  
LG  
Biene
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. dreispaltiges Layout mit css

                Biene Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Ich habe jetzt versucht die Reihenfolge zu ändern.
                Wenn ich die Sidebars vor den Content setze dann wird der Content gar nicht angezeigt im IE und im Opera unten links außerhalb des Anzeigebereichs. Im IE finde ich Content auch gar nicht mehr im Quelltext.

                LG
                Biene

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. dreispaltiges Layout mit css

                  Ingo Turski Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  Hi,

                  validiere Dein Dokument bitte zunächt einmal. Du hast es jetzt völlig durcheinander gebracht - es sieht nun so aus:

                  <!--header.php end-->  
  
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">  
<link rel="shortcut icon" href="favicon.ico" >  
  
<!--index.php-->  
<div id="content" class="narrowcolumn">  
<div id="titcon"> </div>  
<!--loop beginnt-->  
  
  
  
   <!--Artikeltitel-->

                  Außerdem steht der content wie Du siehst immer noch zuerst im Quelltext.
                  Schau' Dir auch nicht nur Dein Template an, sondern die letztlich hieraus erstellte Seite.

                  freundliche Grüße
                  Ingo

                  --
                  [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln