✔ Website wird unterschiedlich angezeigt!

P

peter0728

Hallo,

ich habe einen CSS-Code erstellt und möchte, dass der überall gleich wirkt. Zur Zeit habe ich das Problem, dass ich auf meinem Notebook die Seite richtig angezeigt bekomme und auf meinem Netbook falsch. Hier der Code:

Code: 
body {
background-color: #cc0000;
overflow: auto;
}

#content {
background-color: #ffcc33;
position: relative;
margin-top: 20px;
margin-left: 200px;
margin-right: 200px;
width: auto;
height: 97%;
         }

#logo_mit_adresse {
position: relative;
top: -8px;
background-image: url(../images/hintergrund-head.gif);
border-bottom: 1px dashed;
height: 150px;
text-align: center;
                  }

#lauftext {
position: relative;
top: -8px;
border-bottom: 0px dashed;
height: 100px;
             }
         
ul.navigation_linke_seite {
overflow: auto;
height: 53%;
position: relative;
top: 100px;
border-right: 1px dashed;
border-top: 1px dashed;
width: 130px;
list-style-type: none;
                          }

ul.navigation_linke_seite li {
background: transparent;
color: #FFFFFF;
padding: 0.3em;
border-left: 1em solid #ff6600;}

ul.navigation_linke_seite li:hover {

color: #FFFFFF;
padding: 0.3em;
border-left: 1em solid blue;}

ul.navigation_linke_seite a {
color: #000000;
text-decoration: none;
}

#home_texte {
position: absolute;
background-color: transparent;
top: 267px;
margin-left: 172px;
border-top: 1px dashed;
width: 80%;
height: 53%;
overflow: auto;
            }


#admin_texte {
position: absolute;
background-color: transparent;
top: 267px;
margin-left: 172px;
border-top: 1px dashed;
width: 80%;
height: 50%;
overflow: auto;
            }

und meine HTML Datei:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
            <head>
                          <title>DEMO: Markus Koch</title>
                          <link rel="stylesheet" type="text/css" href="css/default.css">
            </head>
            
            <body>

                          <div id="content">
                                    <div id="logo_mit_adresse"></div>
                                    <ul class="navigation_linke_seite"><br />
                                    <li><a href="index.php?id=1">Startseite</a></li><li><a href="index.php?id=2">Begleitung</a></li><li><a href="index.php?id=3">Lerngruppen</a></li><li><a href="index.php?id=44">Eltern</a></li><li><a href="kontakt.php">Kontakt</a></li><li><a href="index.php?id=6">Impressum</a></li><li><a href="administration/index.php">Anmelden</a></li>                                    </ul>
                                    <div id="home_texte">

                                    <h1>Herzlich Willkommen</h1><p>auf meiner Internetseite</p>                                    </div></div>
            </body>
</html>

könnt Ihr mir da Tipps geben?

Gruß peter
 
peter0728 hat gesagt.:
Zur Zeit habe ich das Problem, dass ich auf meinem Notebook die Seite richtig angezeigt bekomme und auf meinem Netbook falsch. Hier der Code:

[...]

könnt Ihr mir da Tipps geben?
Zum Vergrößern anklicken....
Jo, kann ich :)

Richte für #content eine Mindestbreite ein, damit sich der Container beim Verkleinern der Browserfensterbreite nicht vollends zustammenstauchen lässt, was ab einem gewissen Punkt zum Umbruch der Inhalte führt.

CSS: 
#content {
background-color: #ffcc33;
position: relative;
margin-top: 20px;
margin-left: 200px;
margin-right: 200px;
width: auto;
height: 97%;
min-width: 800px; /* der Wert ist von mir frei nach Augenmaß gewählt, und bedarf sicher einer Anpassung */
         }

Unterschreitet die Breite des Viewports (Anzeigebereich im Browser) dieses festgelegte Maß, wird dem Nutzer die horizontale Scrolllaufleiste zur Verfügung gestellt.

mfg Maik
 
Damit es im IE7 und IE8 gleichermaßen funktioniert, muß für das HTML-Dokument ein anderer Doctype gewählt werden, damit die Browser nicht in den "Quirksmode" schalten, denn in diesem proprietären Darstellungsmodus verhalten sich diese beide IE-Versionen, wie ihr Vorgänger, der die min-width-Eigenschaft nicht interpretiert.


Und für den IE6 gibt's glücklicherweise http://code.google.com/p/ie7-js/ :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück