Meine Website sieht aus wie Kraut und Rüben

AxelFoley · 24 Juni 2012

Hi zusammen,

meine Website schaut irgendwie nur aufm 27" Monitor gescheit aus, auf anderen PC und Laptops wird alles verschoben. Was habe ich falsch gemacht, dass es nicht einheitlich ist?

Danke Euch für euer Feedback.

Hier die Codes:

HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <title>Testseite</title>
    <meta name="robots" content="INDEX,FOLLOW"/>
    <meta name="revisit" content="After 7 days"/>
    <meta name="language" content="Deutsch"/>
    <link href="style.css" type="text/css" rel="stylesheet" />
    
</head>
<body>
<div id="body">
<div id="kopfbereich">
<p>Testseite</p>
<p>2te Zeile</p>
</div>

<div id="steuerung">
<ul>
    <li><a href="ueberuns.htm">Über uns</a></li>
    <li><a href="planungsleistungen.htm">Planungsleistungen</a></li>
    <li><a href="zeichenarbeiten.htm">Zeichenarbeiten</a></li>
    <li><a href="referenzen.htm">Referenzen</a></li>
    <li><a href="thermografie.htm">Thermografie</a></li>
    <li><a href="kontakt.htm">Kontakt</a></li>
    <li><a href="http://www.beispiel.de">Partner</a></li>
    <li><a href="impressum.htm">Impressum</a></li>
</ul>    
</div>

<br/>
<br/>
<br/>
<br/>

<div id="fach">
<p>Unsere Fachgebiete:</p>
</div>

<div id="table1">
<table border="0">
<thead>
    <tr>
        <th>Sanitär</th>
        <th>Heizung</th>
        <th>Lüftung</th>
        <th>Klima</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <td align="center" valign="middle"><img src="Bilder/Sanitaer.jpg" width="400" height="267" alt="Sanit&auml;r" /></td>
        <td align="center" valign="middle"><img src="Bilder/heizung.jpg" width="400" height="267" alt="Heizung" /></td>
        <td align="center" valign="middle"><img src="Bilder/lueftung.jpg" width="400" height="267" alt="L&uuml;ftung" /></td>
        <td align="center" valign="middle"><img src="Bilder/klima.jpg" width="400" height="267" alt="Klim" /></td>
    </tr>
</tfoot>
</table> 
</div>

<div id="dienst">
<p>Unsere Dienstleistungen:</p>
</div>

<div id="table2">
<table border="0">
<thead>
    <tr>
        <th>Kostenschätzung</th>
        <th>Planung</th>
        <th>Ausschreibung</th>
        <th>Bauüberwachung</th>
        <th>Abnahme/Übergabe</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <td><img src="Bilder/kalkulation.jpg" width="400" height="267" alt="Kostensch&auml;tzung" /></td>
        <td><img src="Bilder/planer.jpg" width="400" height="267" alt="Planung" /></td>
        <td><img src="Bilder/ausschreibung.jpg" width="400" height="267" alt="Ausschreibung" /></td>
        <td><img src="Bilder/ueberwachung.jpg" width="400" height="267" alt="Bau&uuml;berwachnung" /></td>
        <td><img src="Bilder/handshake.jpg" width="400" height="267" alt="Abnahme" /></td>
    </tr>
 </tfoot>
 </table>
 </div>
</div>
  </body>
</html>

CSS:

Code:

#kopfbereich {
        background-color:#069;
                   height:160px;
        }
    
        #kopfbereich p    {
        color:white;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        letter-spacing:5px;
        font-size:3em;
        padding:0.4em 0.4em 0 0;
        }
    
    *    {
        margin:0;
        padding:0;
        }
        
    #steuerung    {
        text-align:left;        /* Textausrichtung */
        font-family:Arial, Helvetica, sans-serif;
        font-size:20px;
        margin-top:10px;        /* Außenabstand oben */
        margin-bottom:10px;        /* Außenabstand unten */
        margin-left:20px;        /* Außenabstand links */
        margin-right:15px;        /* Außenabstand rechts */
    }
    
    #steuerung ul    {
        list-style:none;        /* keine Aufzählungspunkte */
    }
    
    #steuerung li    {
        float:left;                /* Anordnung links */
        margin-left:15px;        /* Außenabstand oben */
        width:170px;                /* Breite des Links */
        
        background-color:#069;        /* Hintergrundfarbe */
        border-top:1px black solid;        /* Rahmenfarbe Auflistungspunkt oben */
        border-left:25px #000078 solid;    /* Rahmenfarbe Auflistungspunkt links */
        border-bottom:1px red solid;    /* Rahmenfarbe unten */
        border-right:2px blue solid;    /* Rahmenfarbe rechts */
        margin-top:10px;                /* Außenabstand oben */
        padding-top:8px;                /* Innenabstand oben */
        padding-bottom:8px;                /* Innenabstand unten */
        padding-left:8px;                /* Innenabstand links*/
        padding-right:8px;                /* Innenabstand rechts */
    }    
    
    #steuerung a:link        { color:#c2c2c2;    text-decoration:none; }
    #steuerung a:visited     { color:#c2c2c2;    text-decoration:none; }
    #steuerung a:focus        { color:#c2c2c2;    text-decoration:none; }
    #steuerung a:hover      { color:#800080;    text-decoration:none; }
    #steuerung a:active        { color:#8d8d00;      text-decoration:none; }
            
    #schatten    {
        background:url(bilder/schatten.png) repeat-x;
        height:10px;
        }
        
    #fach    {
        margin-top:40px;
        color:#000072;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        letter-spacing:5px;
        font-size:2em;
    }
    
    #dienst
            {
        margin-top:140px;
        color:#000072;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        letter-spacing:5px;
        font-size:2em;
            }
        
    #body    {
        background:#d3d3d3;
    }
        
    
    #table1    {
        float:middle;
        margin-top:55px;
        font-size:20px;
        font-family:Arial, Helvetica, sans-serif;
        letter-spacing:4px;
        color:#000072;
    }
    
    #table2    {
        margin-top:80px;
        margin-bottom:12x;
        font-size:20px;
        font-family:Arial, Helvetica, sans-serif;
        letter-spacing:4px;
        color:#000072;
    }

threadi · 24 Juni 2012

Sowohl dein HTML- wie auch dein CSS-Code sind fehlerhaft.

Im HTML-Code sind z.B. Tabellen enthalten die zwar tbody und tfoot enthalten, aber keinen tbody.
Im CSS-Code finde ich die nicht existierende Eigenschaft "float: middle;". Außerdem setzt Du alle Abstände zurück ("* {}") nachdem Du bereits Abstände festgelegt hast.

Korrigiere das erstmal.

Ansonsten wäre es besser, wenn Du einen Link zur Seite zeigen könntest.

lascaux · 26 Juni 2012

Hallo,

wenn du schon sagst, dass deine Website nur auf einem 27" Monitor noch was aussieht, hast du die Lösung des Problems schon genannt. Nicht jeder Internet-User hat einen so großen Monitor zuhause rumstehen. Bei 27" fällt mir nur eins ein: sehr große Auflösung. Angenommen es ist 1900x1200. Alles schön und gut. aber dann gibt es User die noch einen 15" Monitor haben und somit nur eine 1024x768 Auflösung. Dadurch wird die Website auf deren Monitor verschoben und sieht dann aus wie Kraut und Rüben.

Du solltest die Website für eine kleine Auflösung (wie zB 1024x768) gestalten, dann wird sie auch bei großen Monitoren richtig angezeigt. Zwar hast du dann links und rechts sehr viel Platz, aber sie wird dennoch richtig angezeigt. Wenn du es dir zutraust mit %-Angaben zu arbeiten (das kann leicht schief gehen), kannst du deine Website so gestalten, dass sie egal bei welcher Auflösung stets gut aussieht und viel Platz einnimmt.

lascaux

Meine Website sieht aus wie Kraut und Rüben

AxelFoley

Neues Mitglied

threadi

Moderator

lascaux

Mitglied

Neueste Beiträge