CSS wird im teilweise ignoriert

marvin · 30. März 2011

Mein Problem ist folgendes ich bin gerade zum ersten mal dabei eine Homepage auch wirklich fertig zu machen, weil ich endlich einen Grund gefunden hab

Auf jeden Fall habe ich die fertige Seite (noch ohne Inhalt, aber Geüst) und CSS in einer ausgelagerten Datei.
Wenn ich die Vorschaufunktion von Scriptly nutzte, dann sieht auch alles aus wie ich es haben will,
aber wenn ich in ie oder firefox die Seite aufrufe dann wird sie nicht richtig dargestellt.
Einige der CSS Anweisungen werden einfach ignoriert.

Ich hab auch HTML-Seminar noch mehrmals überflogen und durchgesucht.
Aber ich find meinen Fehler einfach nicht.
Ich auch das Gefühl das ich einfach nach dem Falschen such,
enn meiner Meinung nach ist der Code Korrekt (auch wenn ich meiner Meinung nicht trau - bei HTML/CSS).

Mfg
Marvin

PS.: Ich hab bewusst noch keinen code hinzugefügt, vielleicht könnt ihr mir so schon tipps geben

Sarkkan · 30. März 2011

Also ohne Code kann ich dir leider wirklich nichts richtiges sagen..
Aber folgende Tipps solltest du beachten:

Auf die Scriptlyvorschau kannst du dich niemals verlassen! Sie ist meistens komplett falsch
Hast du Vererbung in deine Denkweise mit einbezogen? Also z.B. das ein <li> die Farbe übernimmt,
wenn für <ul> eine angegeben wird, aber nicht für das <li>
Code
```
ul {
    color: red;
}




li {
    background: yellow;
    /*Wird aber auch wie das ul eine Rote Schriftfarbe haben*/
}
```
Alles anzeigen
Achtet darauf nur gültige Zeichen für Klassen und ID's zu verwenden
Jeder Browser hat Standard einstellungen, werden diese nicht von dir überschrieben,
wird z.B. ein Link in fast allen Browsern standard Blau sein

Wie gesagt.. sry, dass das nur so wischi-waschi is.. aber kann dir nichts konkretes sagen

marvin · 30. März 2011

na dann pack ich eben noch die codes dazu

Code

body {
    text-align:center;
}




h1 {
    text-align:left;
    background-color:#D4FFFF;
    width:980px;
    margin-top:0px;
    margin-bottom:0px;
    padding:10px;
}




#navi {
    background-color:#AA2B00;
    width:1000px;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}




#navi ul {
    margin:0px;
    list-style:none;
}




#navi li {
    float:left;




    text-align:center;
    font-size:20pt;
    letter-spacing:5pt;




    background-color:#55D4FF;




    width:200px;
    margin-left:20px;
    margin-right:20px;
    padding:5px;
}




#inhalt {
    text-align:right;
    background-color:#D4FFFF;
    width:980px;
    margin-top:0px;
    margin-bottom:0px;
    padding:10px;
}




#info {
    background-color:#AA2B00;
    width:1000px;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}




#info ul {
    margin:0px;
    list-style:none;
}




#info li {
    float:left;




    text-align:center;
    font-size:10pt;
    letter-spacing:2pt;




    background-color:#55D4FF;




    width:200px;
    margin-left:145px;
    margin-right:145px;
    padding:5px;
}

Alles anzeigen

Code

body {
    text-align:center;
}




h1 {
    text-align:left;
    background-color:#D4FFFF;
    width:980px;
    margin-top:0px;
    margin-bottom:0px;
    padding:10px;
}




#navi {
    background-color:#AA2B00;
    width:1000px;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}




#navi ul {
    margin:0px;
    list-style:none;
}




#navi li {
    float:left;




    text-align:center;
    font-size:20pt;
    letter-spacing:5pt;




    background-color:#55D4FF;




    width:200px;
    margin-left:20px;
    margin-right:20px;
    padding:5px;
}




#inhalt {
    text-align:right;
    background-color:#D4FFFF;
    width:980px;
    margin-top:0px;
    margin-bottom:0px;
    padding:10px;
}




#info {
    background-color:#AA2B00;
    width:1000px;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}




#info ul {
    margin:0px;
    list-style:none;
}




#info li {
    float:left;




    text-align:center;
    font-size:10pt;
    letter-spacing:2pt;




    background-color:#55D4FF;




    width:200px;
    margin-left:145px;
    margin-right:145px;
    padding:5px;
}

Alles anzeigen

marvin · 30. März 2011

sorry zweimal css

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




<html>




<head>
    <title>Jugendraum Friedberg</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>




<body>




    <h1>Jungendraum Friedberg</h1>




    <div id="navi">
        <ul>
            <li><a href="index.htm">Startseite</a></li>
            <li><a href="filmnacht.htm">Filmnacht</a></li>
            <li><a href="ausfluege.htm">Ausfl&uuml;ge</a></a></li>
            <li><a href="termine.htm">Termine</a></li>
        </ul>
    </div>




    <div id="inhalt">




    </div>




    <div id="info">
        <ul>
            <li><a href="kontakt.htm">Kontakt</a></li>
            <li><a href="impressum.htm">Impressum</a></li>
        </ul>
    </div>




</body>
</html>

Alles anzeigen

Sarkkan · 30. März 2011

Also, was fällt mir direkt mal auf?

Ein <li> ist Standardgemäß ein list-item-Element und verhält sich so, ähnlich wie ein inline-Element. Und ein inline-Element kann man nicht floaten, wenn musst du das <li> in ein block-Element verwandeln (mit display: block;)
Ich denke du willst mit html {text-align: center;} die Seite zentrieren, dass wird so aber nichts. Wenn dann musst du dem body eine Breite geben und im anschließen ein margin: 0 auto; geben. So wird dem body automatisch ein unsichtbarer Außenabstand gegeben, der ihn in die Mitte setzt.
Gib bitte niemals etwas in pt, Mac-User werden es dir danken :wink:

Mehr kann ich dir nicht sagen.. schließlich weiß ich nicht, wie es aussehen sollte^^
Denn ich habe 2 Informationen:
-> Nicht der Gewünschte Effekt
-> Mein Code

Möchtest du genaueres bräuchte ich bitte mehr Informationen von dir

marvin · 30. März 2011

also da fällt mir in punkt eins gleich was auf
die idee <li> zu floaten kommt direkt von html seminarhttp://www.html-seminar.de/steuerung_per_css.htm
hier einfach ganz unten die letzte box mit code

hmm ich bin mal kreativ
so solls aussehen

______________________________________________________________________
hier steht die überschrift
______________________________________________________________________
ist die navigation
______________________________________________________________________

hier ist der inhalt

______________________________________________________________________
hier ist impressum und kontakt
______________________________________________________________________

Sarkkan · 30. März 2011

Dann könnte es sein, dass der dort verwendete Standard z.B. veraltet ist?^^
Oder der Autor hat evtl. einen Fehler gemacht?^^

Außerdem solltest du die Inhaltbox ein clear: left; geben^^
Dann setzt sich die Box auf jeden Fall unter die Navigation.

marvin · 30. März 2011

ich sag erst mal danke und arbeite deine liste von tipps ab und quäl google

CSS wird im teilweise ignoriert

Jetzt mitmachen!

Teilen