„Über die allmähliche Verfertigung der Gedanken beim Posten“ von Lachgas, 31.12.2005 16:20

Codeberichtigung

Adrian 31.12.2005 15:42

Hallo!

Erstmal guten Rutsch ins neue Jahr!

Mein Problem: Ich habe den folgenden CSS Code für das darunterliegende XHTML Dokument. Er ist noch nicht vollständig, aber mich wundert es, warum in dem links gefloateten Navidiv im mitteldiv, das floaten nich mehr funktioniert? so wie ich es jetzt habe, interpretieren es internet explorer 6, opera 8.5/firefox 1.5, navigator 7.1 verschieden?
ich möchte nur den balken links haben und den "contentbereich" rechts in der ganzen box.
wenn ihr eine bessere lösung habt, bzw. (sehr wahrscheinlich) was an meinem code auszusetzen habt, dann könnt ihr auch ja auch daran auslassen, aber das obere ist erstmal das hauptproblem für mich.

CSS-Code:

  
/* Allgemeingeltende Eigenschaften */  
* {  
overflow: hidden;  
}  
body {  
  background: #666666;  
  color: #000000;  
  font-family: Arial, sans-serif;  
  font-size: 16px;  
  padding: 0px;  
  margin: 0px;  
}  
div {  
 border: none;  
 margin: 0px;  
 padding: 0px;  
}  
h1,h2,h3,h4,h5,h6 {  
 font-weight: bold;  
}  
  
/* Einschließende <div>s der Seite */  
div#pageouter {  
 width: 804px;  
 margin: 20px auto 20px;  
}  
div#pageinner {  
 border: 1px solid #666666;  
}  
  
/* Header <div> */  
div#header {  
 padding: 27px 0px 0px 567px;  
 width: 237px;  
 height: 138px;  
 overflow: auto;  
 background: #666666 url('../../pictures/gfx/header.jpg')  
             no-repeat left top;  
 font-size: 12px;  
}  
div#header h2 {  
 font-size: 15px;  
 font-decoration: none;  
 margin: 0px;  
 padding: 0px;  
}  
  
/* Mittleres Ausrichtungs <div> */  
div#middle {  
 width: 804px;  
 background: #FF0000;  
}  
  
/* Linkes Navigations <div> */  
div#leftnavi {  
 float: left;  
 width: 183px;  
 height: 100%;  
 background: #666666;  
}  
div#leftnavi div#leftbeam {  
 float: left;  
 width: 22px;  
 height: auto;  
 background: #666666 url('../../pictures/gfx/navi_left_beam.jpg')  
             repeat-y left top;  
}  
div#leftnavi div#leftcontent {  
 width: 161px;  
 height: auto;  
 /*margin-left: 22px;*/  
 background: #666666 url('../../pictures/gfx/navi_left_bg.jpg')  
             repeat-y left top;  
}  
div#leftnavi div#leftcontent div#leftheader {  
 width: 161px;  
 height: 7px;  
 background: #666666 url('../../pictures/gfx/navi_left_header.jpg')  
       no-repeat left top;  
}  
div#leftnavi div#leftcontent div#leftarea {  
 background: #666666 url('../../pictures/gfx/navi_left_area_bg.jpg') repeat-y;  
 background-position: 49px left;  
 height: auto;  
 width: 161px;  
 line-height: 21px;  
 margin-bottom: 20px;  
}  
div#leftnavi div#leftcontent div#leftarea h2 {  
 width: 143px;  
 height: 34px;  
 padding: 14px 0px 0px 18px;  
 background: #666666 url('../../pictures/gfx/navi_left_area_header.jpg')  
       no-repeat left top;  
 font-size: 13px;  
}  
div#leftnavi div#leftcontent div#leftarea p {  
 width: 146px;  
 height: 18px;  
 padding: 2px 0px 0px 15px;  
 background: #666666 url('../../pictures/gfx/navi_left_area_footer.jpg')  
       no-repeat left top;  
 font-size: 8px;  
 font-weight: bold;  
}

XHTML-Code:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "includes/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
  <head>  
  
    <title>GSG9 :: Clanpage</title>  
  
    <link rel="stylesheet" type="text/css" href="includes/gfx/layout.css" />  
  
  </head>  
  
  <body>  
  
    <div id="pageouter"><div id="pageinner"><!-- Seitenausrichtung Anfang -->  
  
      <div id="header"><!-- Header Anfang -->  
  
        <h2>Shoutbox</h2><!-- HINWEIS: fünf Zeilen passen höchstens -->  
        1. Zeile mit Inhalt | tlahnI tim elieZ .1 <br />  
        2. Zeile mit Inhalt | tlahnI tim elieZ .2 <br />  
        3. Zeile mit Inhalt | tlahnI tim elieZ .3 <br />  
        4. Zeile mit Inhalt | tlahnI tim elieZ .4 <br />  
        5. Zeile mit Inhalt | tlahnI tim elieZ .5 <br />  
  
      </div><!-- Header Ende -->  
  
      <div id="middle"><!-- Mittlere Reihe Anfang -->  
  
        <div id="leftnavi"><!-- Linke Navigation Anfang -->  
          <div id="leftbeam">&nbsp;<!-- Linker Navigationsbalken --></div>  
          <div id="leftcontent"><!-- Linker Navigationsinhalt Anfang -->  
           <div id="leftheader">&nbsp;<!-- Linker Navigations-Header --></div>  
            <div id="leftarea"><!-- Linker Navigations-Area-Bereich Bereich Anfang -->  
              <h2>Login</h2>  
              Loginscripte von PHP<br />  
              u.s.w. hier einfügen  
              <p>angemeldet?<p>  
            </div><!-- Linker Navigations-Area-Bereich Bereich Ende -->  
            <ul id="leftlinklist"><!-- Linker Navigations-Link-Liste Anfang -->  
              <li id="leftlinklistheader">Links</li>  
              <li><a href="#">Link1</a></li>  
              <li><a href="#">Link2</a></li>  
              <li><a href="#">Link3</a></li>  
              <li id="leftlinklistfooter">&nbsp;</li>  
            </ul><!-- Linker Navigations-Link-Liste Ende -->  
          </div><!-- Linker Navigationsinhalt Ende -->  
        </div><!-- Linke Navigation Ende -->  
  
        <div id="rightnavi"><!-- Rechte Navigation Anfang -->  
          <div id="rightbeam">&nbsp;<!-- Rechter Navigationsbalken --></div>  
          <div id="rightcontent"><!-- Rechter Navigationsinhalt Anfang -->  
           <div id="rightheader">&nbsp;<!-- Rechter Navigations-Header --></div>  
            <div id="rightarea"><!-- Rechter Navigations-Area-Bereich Bereich Anfang -->  
              <h2>Umfrage</h2>  
              Große Umfrage<br />  
              Jetzt neu!  
              <p>unkostenlos!<p>  
            </div><!-- Right Navigations-Area-Bereich Bereich Ende -->  
            <ul id="rightlinklist"><!-- Rechter Navigations-Link-Liste Anfang -->  
              <li id="rightlinklistheader">Links</li>  
              <li><a href="#">Link1</a></li>  
              <li><a href="#">Link2</a></li>  
              <li><a href="#">Link3</a></li>  
              <li id="rightlinklistfooter">&nbsp;</li>  
            </ul><!-- Rechter Navigations-Link-Liste Ende -->  
          </div><!-- Rechter Navigationsinhalt Ende -->  
        </div><!-- Rechte Navigation Ende -->  
  
        <div id="content"><!-- Inhalt Anfang -->  
          <h1>Ich bin der Seitentitel</h1>  
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed  
          diam voluptua. At vero eos et accusam et justo duo dolores et ea  
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem  
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur  
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et  
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam  
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea  
          takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor  
          sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor  
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita  
          kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ametur.  
        </div><!-- Inhalt Ende -->  
  
      </div><!-- Mittlere Reihe Ende -->  
  
      <div id="footer"><!-- Footer Anfang -->  
  
        <a href="disclaimer.php">Disclaimer</a>  
        | &copy; 2005 by Su-Li-Son and The XMA  
  
      </div><!-- Footer Ende -->  
  
    </div></div><!-- Seitenausrichtung Ende -->  
  
  </body>  
  
</html>

Mit freundlichen Grüßen,
Adrian

Beitrag melden

– Informationen zu den Bewertungsregeln

Codeberichtigung

Adrian 31.12.2005 15:45

– Informationen zu den Bewertungsregeln

Hallo!

div#header h2 {
font-size: 15px;
font-decoration: none;
margin: 0px;
padding: 0px;
}

Hab schon nen Fehler gefunden, hier berichtigt:
[code lang=css]
div#header h2 {
font-size: 15px;
text-decoration: none;
margin: 0px;
padding: 0px;
}

  
Mit freundlichen Grüßen,  
Adrian

Beitrag melden

– Informationen zu den Bewertungsregeln

Codeberichtigung: Bitte von hier aus ausgehen

Adrian 31.12.2005 16:07

– Informationen zu den Bewertungsregeln

Hallo!

Oh man, noch ein Fehler entdeckt:
Jeweils bei <p> noch ein </p> statt <p> hintersetzen, sodass folgender Code entsteht:

XHTML-Code:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "includes/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
  <head>  
  
    <title>GSG9 :: Clanpage</title>  
  
    <link rel="stylesheet" type="text/css" href="includes/gfx/layout.css" />  
  
  </head>  
  
  <body>  
  
    <div id="pageouter"><div id="pageinner"><!-- Seitenausrichtung Anfang -->  
  
      <div id="header"><!-- Header Anfang -->  
  
        <h2>Shoutbox</h2><!-- HINWEIS: fünf Zeilen passen höchstens -->  
        1. Zeile mit Inhalt | tlahnI tim elieZ .1 <br />  
        2. Zeile mit Inhalt | tlahnI tim elieZ .2 <br />  
        3. Zeile mit Inhalt | tlahnI tim elieZ .3 <br />  
        4. Zeile mit Inhalt | tlahnI tim elieZ .4 <br />  
        5. Zeile mit Inhalt | tlahnI tim elieZ .5 <br />  
  
      </div><!-- Header Ende -->  
  
      <div id="middle"><!-- Mittlere Reihe Anfang -->  
  
        <div id="leftnavi"><!-- Linke Navigation Anfang -->  
          <div id="leftbeam">&nbsp;<!-- Linker Navigationsbalken --></div>  
          <div id="leftcontent"><!-- Linker Navigationsinhalt Anfang -->  
           <div id="leftheader">&nbsp;<!-- Linker Navigations-Header --></div>  
            <div id="leftarea"><!-- Linker Navigations-Area-Bereich Bereich Anfang -->  
              <h2>Login</h2>  
              Loginscripte von PHP<br />  
              u.s.w. hier einfügen  
              <p>angemeldet?</p>  
            </div><!-- Linker Navigations-Area-Bereich Bereich Ende -->  
            <ul id="leftlinklist"><!-- Linker Navigations-Link-Liste Anfang -->  
              <li id="leftlinklistheader">Links</li>  
              <li><a href="#">Link1</a></li>  
              <li><a href="#">Link2</a></li>  
              <li><a href="#">Link3</a></li>  
              <li id="leftlinklistfooter">&nbsp;</li>  
            </ul><!-- Linker Navigations-Link-Liste Ende -->  
          </div><!-- Linker Navigationsinhalt Ende -->  
        </div><!-- Linke Navigation Ende -->  
  
        <div id="rightnavi"><!-- Rechte Navigation Anfang -->  
          <div id="rightbeam">&nbsp;<!-- Rechter Navigationsbalken --></div>  
          <div id="rightcontent"><!-- Rechter Navigationsinhalt Anfang -->  
           <div id="rightheader">&nbsp;<!-- Rechter Navigations-Header --></div>  
            <div id="rightarea"><!-- Rechter Navigations-Area-Bereich Bereich Anfang -->  
              <h2>Umfrage</h2>  
              Große Umfrage<br />  
              Jetzt neu!  
              <p>unkostenlos!</p>  
            </div><!-- Right Navigations-Area-Bereich Bereich Ende -->  
            <ul id="rightlinklist"><!-- Rechter Navigations-Link-Liste Anfang -->  
              <li id="rightlinklistheader">Links</li>  
              <li><a href="#">Link1</a></li>  
              <li><a href="#">Link2</a></li>  
              <li><a href="#">Link3</a></li>  
              <li id="rightlinklistfooter">&nbsp;</li>  
            </ul><!-- Rechter Navigations-Link-Liste Ende -->  
          </div><!-- Rechter Navigationsinhalt Ende -->  
        </div><!-- Rechte Navigation Ende -->  
  
        <div id="content"><!-- Inhalt Anfang -->  
          <h1>Ich bin der Seitentitel</h1>  
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed  
          diam voluptua. At vero eos et accusam et justo duo dolores et ea  
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem  
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur  
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et  
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam  
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea  
          takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor  
          sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor  
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita  
          kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ametur.  
        </div><!-- Inhalt Ende -->  
  
      </div><!-- Mittlere Reihe Ende -->  
  
      <div id="footer"><!-- Footer Anfang -->  
  
        <a href="disclaimer.php">Disclaimer</a>  
        | &copy; 2005 by Su-Li-Son and The XMA  
  
      </div><!-- Footer Ende -->  
  
    </div></div><!-- Seitenausrichtung Ende -->  
  
  </body>  
  
</html>

CSS-Code:

  
/* Allgemeingeltende Eigenschaften */  
* {  
overflow: hidden;  
}  
body {  
  background: #666666;  
  color: #000000;  
  font-family: Arial, sans-serif;  
  font-size: 16px;  
  padding: 0px;  
  margin: 0px;  
}  
div {  
 border: none;  
 margin: 0px;  
 padding: 0px;  
}  
h1,h2,h3,h4,h5,h6 {  
 font-weight: bold;  
}  
  
/* Einschließende <div>s der Seite */  
div#pageouter {  
 width: 804px;  
 margin: 20px auto 20px;  
}  
div#pageinner {  
 border: 1px solid #666666;  
}  
  
/* Header <div> */  
div#header {  
 padding: 27px 0px 0px 567px;  
 width: 237px;  
 height: 138px;  
 overflow: auto;  
 background: #666666 url('../../pictures/gfx/header.jpg')  
             no-repeat left top;  
 font-size: 12px;  
 color: #000000;  
}  
div#header h2 {  
 font-size: 15px;  
 text-decoration: none;  
 margin: 0px;  
 padding: 0px;  
}  
  
/* Mittleres Ausrichtungs <div> */  
div#middle {  
 width: 804px;  
 background: #FF0000;  
 color: #000000;  
}  
  
/* Linkes Navigations <div> */  
div#leftnavi {  
 float: left;  
 width: 183px;  
 height: 100%;  
 background: #666666;  
 color: #000000;  
}  
div#leftnavi div#leftbeam {  
 float: left;  
 width: 22px;  
 height: auto;  
 background: #666666 url('../../pictures/gfx/navi_left_beam.jpg')  
             repeat-y left top;  
 color: #000000;  
}  
div#leftnavi div#leftcontent {  
 width: 161px;  
 height: auto;  
 /*margin-left: 22px;*/  
 background: #666666 url('../../pictures/gfx/navi_left_bg.jpg')  
             repeat-y left top;  
 color: #000000;  
}  
div#leftnavi div#leftcontent div#leftheader {  
 width: 161px;  
 height: 7px;  
 background: #666666 url('../../pictures/gfx/navi_left_header.jpg')  
       no-repeat left top;  
 color: #000000;  
}  
div#leftnavi div#leftcontent div#leftarea {  
 background: #666666 url('../../pictures/gfx/navi_left_area_bg.jpg') repeat-y;  
 color: #000000;  
 background-position: 49px 0px;  
 height: auto;  
 width: 161px;  
 line-height: 21px;  
 margin-bottom: 20px;  
}  
div#leftnavi div#leftcontent div#leftarea h2 {  
 width: 143px;  
 height: 34px;  
 padding: 14px 0px 0px 18px;  
 background: #666666 url('../../pictures/gfx/navi_left_area_header.jpg')  
       no-repeat left top;  
 font-size: 13px;  
 color: #000000;  
}  
div#leftnavi div#leftcontent div#leftarea p {  
 width: 146px;  
 height: 18px;  
 padding: 2px 0px 0px 15px;  
 background: #666666 url('../../pictures/gfx/navi_left_area_footer.jpg')  
       no-repeat left top;  
 color: #000000;  
 font-size: 8px;  
 font-weight: bold;  
}

Mit freundlichen Grüßen,
Adrian

Beitrag melden

– Informationen zu den Bewertungsregeln

„Über die allmähliche Verfertigung der Gedanken beim Posten“
Lachgas 31.12.2005 16:20

meinung
+1 Informationen zu den Bewertungsregeln
Hallo Adrian!

Ich empfehle dir die Lektüre Kleists, bevor du das Forum
hier weiter zumüllst. Beschäftige dich mit dem Problem und
formuliere eine _präzise_ Fragestellung mit _relevantem_ Quelltext.

Danke.

℆, ℒacℎgas

--
Bei der intendierten Realisierung der linguistischen Simplifizierung
des regionalen Idioms resultiert die Evidenz der Opportunität extrem
apparent, den elaborierten und quantitativ opulenten Usus nicht assi-
milierter Xenologien konsequent zu eliminieren!
Beitrag melden

+1
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Adrian: Codeberichtigung

Codeberichtigung

Codeberichtigung: Bitte von hier aus ausgehen