Nicht mehr ganz neu hier
Hallo zusammen,
ich wende mich einmal wieder an Euch in der Hoffnung, dass mir jemand weiterhelfen kann.
Ich bin noch mitten dabei, CSS richtig zu erlernen....bitte daher um Nachsicht....
Ich habe mir einiges an Büchern vorgenommen, die ich durcharbeite, um alles verstehen zu lernen. Ich bin nun beim 2. Band von Little Boxes und stolpere über ein Problem in Kapitel 7. Hier soll eine horizontale Navigation mit 2 Ebenen erstellt werden.
Ich sollte die Beispiele bisher eigentlich richtig nachvollzogen haben, aber die Beispielseite wird leider nicht so dargestellt wie im Buch vorgegeben. (auch wenn ich die Beispieldateien direkt von der CD zum Buch öffne funktioniert es leider nicht).
Kann mir jemand sagen (vielleicht auch aus eigener Erfahrung mit dem Buch) was hier des Rätsels Lösung ist???
Hier mal eine der html-Seiten und die CSS....
Ich will noch einen kurzen Satz hinzufügen......zu oben genanntem HTML und CSS gibt es in dem Buch ein Bild wie das Menü zu diesem Zeitpunkt aussehen soll, und das funktioniert nicht. (Die Untermenüs sollen eigentlich unterhalb des Kopfbereiches mit farbigem Hintergrund erscheinen und somit unter der 1. Navi-Ebene. Wenn ich die Datei aufrufe erscheinen nach dem Link zu Seite 2 alle Links unter der 1. Ebene - leider auch die weiteren Links der 1. Ebene, und leider sind sie allesamt innerhalb des farbigen Kopfbereichs)
Die Datei von der Buch-CD nach Abschluss der gesamten Übung wird aber wieder korrekt dargestellt.
Ich werde mir diese Dateien auch noch vornehmen und schauen was daran noch verändert wurde.
Mit meiner Frage hier hoffe ich dann zu verstehen was den Unterschied macht und auf was insbesondere zu achten ist.
Kann natürlich sein, dass das ganz was blödes ist............hoffe ich mach Euch damit keine zu großen Umstände.....
ich wende mich einmal wieder an Euch in der Hoffnung, dass mir jemand weiterhelfen kann.
Ich bin noch mitten dabei, CSS richtig zu erlernen....bitte daher um Nachsicht....
Ich habe mir einiges an Büchern vorgenommen, die ich durcharbeite, um alles verstehen zu lernen. Ich bin nun beim 2. Band von Little Boxes und stolpere über ein Problem in Kapitel 7. Hier soll eine horizontale Navigation mit 2 Ebenen erstellt werden.
Ich sollte die Beispiele bisher eigentlich richtig nachvollzogen haben, aber die Beispielseite wird leider nicht so dargestellt wie im Buch vorgegeben. (auch wenn ich die Beispieldateien direkt von der CD zum Buch öffne funktioniert es leider nicht).
Kann mir jemand sagen (vielleicht auch aus eigener Erfahrung mit dem Buch) was hier des Rätsels Lösung ist???
Hier mal eine der html-Seiten und die CSS....
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Beispielseiten für "Little Boxes 2" -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Little Boxes - Seite 02</title>
<meta name="robots" content="index, follow" />
<meta name="description" content="xxxxxx!!" />
<meta name="author" content="xxxxx" />
<link href="favicon.ico" rel="shortcut icon" />
<link href="zentrale.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 6]>
<style type="text/css"> @import url(ie5x.css); </style>
<![endif]-->
</head>
<body id="seite02">
<div id="wrapper">
<div id="kopfbereich">
<div class="versteckmich">
<ul>
<li><a class="tabmich" href="#navibereich">Zur Navigation springen</a></li>
<li><a class="tabmich" href="#textbereich">Zum Inhalt springen</a></li>
</ul>
</div><!-- Ende .versteckmich -->
<h1><img src="logo.gif" id="logo" alt="Little Boxes" width="222" height="32" /></h1>
<p>Webseiten gestalten mit CSS. <span>Grundlagen</span></p>
</div> <!-- Ende kopfbereich -->
<div id="navibereich">
<h2 class="versteckmich">Navigation</h2>
<ul>
<li id="navi01"><a href="index.html">Startseite </a></li>
<li id="navi02" title="Infos zu Seite 02"><strong>Seite 02 </strong></li>
<ul>
<li id="navi0201"><a href="seite0201.html">Seite 0201</a></li>
<li id="navi0202"><a href="#">Seite 0202</a></li>
<li id="navi0203"><a href="#">Seite 0203</a></li>
<li id="navi0204"><a href="#">Seite 0204</a></li>
</u>
<li id="navi03" title="Infos zu Seite 03"><a href="seite03.html">Seite 03 </a></li>
<li id="navi04" title="Schicken Sie uns eine Nachricht"><a href="kontakt.html">Kontakt </a></li>
</ul>
</div> <!-- Ende navibereich -->
<div id="textbereich">
<h2><span class="versteckmich">Inhaltsbereich: </span>Seite 02</h2>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.</p>
<p>Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>
</div> <!-- Ende textbereich -->
<div id="fussbereich">
<h2 class="versteckmich">Informationen über diese Website</h2>
<address>
Little Boxes · Kästchenweg 12 · 01234 Boxberg
<br />
Tel: 01234 567890 · Fax: 01234 567891
</address>
<ul>
<li>© xxxxx, 2011</li>
<li><a href="impressum.html" title="Gesetzliche Angaben">Impressum</a></li>
</ul>
</div> <!-- Ende fussbereich -->
</div> <!-- Ende wrapper -->
</body>
</html>
Code:
/* ===================================================================
Stylesheet für die horizontale Navigation mit 2 Ebenen
Datei: navi_zwei_ebenen.css
Datum: 12.09.2011
Autor: xxxxx
====================================================================== */
@media screen {
#navibereich {overflow: hidden;
color: black;
background: #f3c600 url(border-bottom.gif) repeat-x left bottom;
padding: 5px 10px 0px 10px;
margin: 0;}
#navibereich ul {float: right;
width: auto; /* "schrumpft" die Liste - Liste floatet innerhalb vom div nach rechts */
margin-bottom: 0;}
#navibereich li {float: left;
width: auto;
list-style-type: none;
margin: 0;
margin-right: 0.4em;}
#navibereich a,
#navibereich strong {display: block; /* hierdurch werden die Links wieder zu Blockelementen nach dem Floaten */
background-color: #ffeda0;
color: black;
font-weight: normal;
padding: 4px 8px;
border: 1px solid #8c8c8c;}
/* Ebene 1 - Hovern, Focus und aktuellen Tab hervorheben */
#navibereich a:focus,
#navibereich a:hover,
#startseite #navi01 strong,
#seite02 #navi02 strong,
#seite03 #navi03 strong,
#kontaktseite #navi04 strong {background-color: white;
color: black;
font-weight: normal;
border-bottom: 1px solid white;}
#navibereich a:active {color: black;
background-color: white;}
/* ===================================================================
01 Zweite Ebene positionieren
====================================================================== */
div#wrapper {position: relative;}
#seite02 li#navi02 ul,
#seite0201 li#navi02 ul,
#seite03 li#navi03 ul,
#seite0302 li#navi03 ul {position: absolute;
right: 10px; /* 10px vom rechten Rand von #wrapper */
top: auto;
display: block;
width: auto;
height: auto;
font-size: 90%;
padding: 0.5em 0 0 0;
margin: 0;}
/* ===================================================================
02 Zweite Ebene: a und strong gestalten
====================================================================== */
#seite02 li#navi02 li a,
#seite0201 li#navi02 li strong,
#seite0201 li#navi02 li a,
#seite03 li#navi03 li a,
#seite0302 li#navi03 li strong,
#seite0302 li#navi03 li a {background: transparent;
border: none;}
/* ===================================================================
Zweite Ebene: Links hovern */
#seite02 li#navi02 li a:hover,
#seite0201 li#navi02 li a:hover,
#seite03 li#navi03 a:hover,
#seite0302 li#navi03 a:hover {background: transparent;
color: #d90000;}
} /* ENDE @media - NICHT löschen!!! */
/* ===================================================================
E N D E navi_zwei_ebenen.css
====================================================================== */Die Datei von der Buch-CD nach Abschluss der gesamten Übung wird aber wieder korrekt dargestellt.
Ich werde mir diese Dateien auch noch vornehmen und schauen was daran noch verändert wurde.
Mit meiner Frage hier hoffe ich dann zu verstehen was den Unterschied macht und auf was insbesondere zu achten ist.
Kann natürlich sein, dass das ganz was blödes ist............hoffe ich mach Euch damit keine zu großen Umstände.....
Zuletzt bearbeitet von einem Moderator:
