nicht angemeldet
Frage zum Wiki-Artikel „CSS“
marctrix
Rolf BBrauche mal Eure Hilfe, arbeite gerade die CD "Moderne Webseiten erstellen"durch und bekomme einfach nicht im subheader das Bild rein obwohl der Code und die Bildquelle stimmt.
Suche schon seit Stunden und finde nicht den Fehler.
"Moderne Webseiten erstellen" Windows 7 Kurz ISBN: 2681
Bitte um Hilfe.
LG Ivica Sacer
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fluidsounds</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/images/favicon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="custom.css">
<script src="js/modernizr.js"></script>
</head>
<body>
<header class="fs-header">
<div class="container row">
<div class="col col-5 fs-logo">
</div>
<div class="col col-7">
</div>
</div>
</header>
<section class="fs-subheader">
<div class="behind">
<div class="left">
</div>
<div class="right">
</div>
<div class="before">
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/default.js"></script>
</body>
</html>
body {
background-color: #1C5052;
}
header {
height: 111px;
background: #262e30; /* Old browsers */
background: -moz-linear-gradient(top, #262e30 0%, #0a0c0d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#262e30), color-stop(100%,#0a0c0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #262e30 0%,#0a0c0d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #262e30 0%,#0a0c0d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #262e30 0%,#0a0c0d 100%); /* IE10+ */
background: linear-gradient(to bottom, #262e30 0%,#0a0c0d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262e30', endColorstr='#0a0c0d',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 10;
}
.fs-subheader {
overflow: hidden;
height: 107px;
background: #203B3B;
}
.fs-subheader .behind {
position: absolute;
width: 100%;
height: 107px;
}
.fs-subheader .behind .left,
.fs-subheader .behind .right {
display: inline-block;
height: 107px;
width: 50%;
}
.fs-subheader .behind .right {
background: #5B6E6E;
}
.fs-subheader .before {
position: relative;
z-index: 1;
background: url('images/bg-subheader.png');
height: 107px;
width: 1280px;
margin-left: auto;
margin-right: auto;
}
-
Hej Ivica,
Brauche mal Eure Hilfe,
Dann brauchen wir ein online-Beispiel. Sonst fehlen uns viele Möglichkeiten zur Fehlersuche.
arbeite gerade die CD "Moderne Webseiten erstellen"durch und bekomme einfach nicht im subheader das Bild rein obwohl der Code und die Bildquelle stimmt.
Da bin ich skeptisch. Wenn der Code stimmt, sollte er auch funktionieren.
Suche schon seit Stunden und finde nicht den Fehler.
"Moderne Webseiten erstellen" Windows 7 Kurz ISBN: 2681
Hoffst du, dass sich jemand jetzt die CD kauft und anschaut? 😀
Bitte um Hilfe.
Wie gesagt ist es schwierig mit dem Code dem Problem auf die Schliche zu kommen…
Ein paar Anmerkungen zu der „modernen Webseite“.
- es gibt viele verschiedene html-Elemente. Header war schon eine gute Idee. Für viele der divs fällt dir sicher auch noch was passenderes ein
- Klassennamen wie „Right“ oder „left“ sind seit Jahren unmodern. In responsiven Seiten machen diese Namen keinen Sinn, weil Links und rechts sicher bei den meisten Leuten oben und unten erscheinen dürfte (mal abgesehen davon, dass presentational markup, also HTML, das sich auf die Gestaltung von Elementen bezieht, mehr Probleme schafft, als es löst — jedenfalls ist das meine Erfahrung. Ich habe Webseiten schon redesigns, an deren Inhalten sich seit einem Dutzend Jahre (fast) nichts geändert hat. An den HTML-Dokumenten musste ich kaum was anpassen. Ging fast komplett über css.
Das war mir nach den ersten Besuchen im CSS-Zen-Garden klar. Es gibt wenige Entscheidungen in meinem beruflichen Leben, die besser gewesen waren, als von Anfang die Trennung von Design, Semantik und Funktion als Unverrückbares Grundprinzip hinzunehmen, mit dem ich irgendwie klar kommen muss.
Nichts anderes hat sich für mich und vor allem meine Kunden im Laufe der Jahre besser bezahlt gemacht!
Daher lassen sich auch für „behind“ und „before“ sicher bessere Namen finden.
.subheader .before { position: relative; z-index: 1; background: url('images/bg-subheader.png'); height: 107px; width: 1280px; margin-left: auto; margin-right: auto; }Um dieses Bild geht es wohl? Ist der „images“-Ordner wirklich im CSS-Verzeichnis? — Das wäre schon ungewöhnlich…
Marc
-
Hallo Ivica,
der erste Fehler ist mal, dass die div-Schachtelung nicht stimmt. Das div.behind wird nicht geschlossen. Dadurch werden .left, .right und .before zu Kind-Elementen des .behind, das wird vermutlich nicht geplant sein. Guck mal im Buch oder auf der CD, wo du ein </div> vergessen hast, und wenn das in der Quelle genauso falsch ist wie im Posting oben, dann such nach Errata für deine Lektüre.
Eine Merkwürdigkeit ist, dass das .behind div absolut positioniert wird. Dafür braucht es ein position:relative Element in seiner Vorfahrenkette, auf das es sich bezieht. Das gibt's hier aber nicht; die vorhandenen position:relative Elemente sind Geschwister von .behind. Konsequenz: .behind wird relativ zum Body positioniert und rutscht aus dem Subheader hinaus.
Der ganze Rest - mit Herstellerpräfixen die seit Jahren nicht mehr nötig sind, dem Einsatz von filter: für die komplett obsoleten IE6-9 und die merkwürdigen CSS-Akrobatik für left/right/before - klingt so, als wäre dieses Buch nicht gerade aktuell. Ich finde es nicht einmal, wenn ich danach google. Windows 7 ist von 2009, das Buch vermutlich auch. Gerade in den letzten 8 Jahren hat das Web sich derart stürmisch entwickelt, dass viele Probleme, die in dem Buch adressiert werden, heute gar keine mehr sind. Guck auch mal im Netz nach HTML5/CSS Tutorials, es gibt auch eins im SelfHTML Wiki.
Rolf
--
sumpsi - posui - clusi