nicht angemeldet
Boxen werden einfach nicht nebeneinander angezeigt.
Hey miteinander!
Erstens: Ich bin blutiger Anfänger und das hier wird mein erstes CSS-Layout. Also Gnade bitte! ;)
Das Problem: Die beiden Divs .navigation und .content werden einfach nicht nebeneinander angezeigt, sondern, hässlicherweise, untereinander und ich komm einfach nicht drauf, was ich falsch mache. *seufz*
hier der html-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>a nightmare before art</title>
<meta http-equiv="language" content="de">
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<meta name="title" content="~ nightmare before art ~">
<meta name="author" content="Carmen Kratzer">
<meta name="page-topic" content="Private Homepage">
<meta name="robots" content="index,nofollow">
<link rel=stylesheet type="text/css" href="ansmeer.css">
</head>
<body>
<a name="top"></a>
<div class="box">
<div class="content">
<h1>Prolog</h1>
Die Unvollendete.
Denn ich liebe die Kunst. Ich liebe zu Leben. Endlich.
Viel Vergnügen und/oder ausgiebigen Brechreiz wünscht
C.
</div>
<div class="navigation"><img src="images/navi.jpg"></div>
</div>
<div class="footer">© cagedfreedom 2005-2007</div>
</body>
</html>
Und hier das dazugehörige CSS-Sheet:
div, td {
color: #808080;
font: 8pt/1.5em Tahoma, Verdana, sans-serif;
}
/* Body-Style */
body {
background: #333;
margin-top: 10px;
text-align: center;
}
/* Spezielle Div- und Span-Styles */
.box {
visibility: visible;
background: #262626;
margin: auto;
width: 600px;
}
.content {
padding: 20px 50px 20px 50px;
margin-right: 160px;
text-align: justify;
}
.footer {
margin-top: 5px;
text-align: center;
letter-spacing: 0.2em;
}
.navigation {
background-image: images/bg.jpg;
padding: 0px;
margin: 0px 0px 0px 440px;
}
h1 {
color: #808080;
font: bold 10pt Tahoma, Verdana, sans-serif;
letter-spacing: 0.2em;
margin: 15px 0 10px 25px;
padding: 0;
text-align: left;
}
Und zuguterletzt, das mich zum Wahnsinn treibende Resultat: http://www.cagedfreedom.com/test/
Jemand da, der helfen kann? *liebschau*
Vielen Dank im Voraus ;)
Carmen.
-
Hallo,
.navigation {
background-image: images/bg.jpg;
padding: 0px;
margin: 0px 0px 0px 440px;
}je nach Ausrichtungswunsch fehlt hier ein "float:left" oder "float:right" . Beim Hintergrundbild fehlt das "url".
Zur Verkürzung kannst du die Einheiten bei "0"-Werten weglassen. Es ist zu vernachlässigen, ob 0em, 0px oder 0Eierkuchen.
Gruß
Gast-
Hallo nochmal!
Danke für die schnelle Antwort!
Ich habe das Sheet jetzt ungeschrieben und alles gemacht, was empfohlen wurde und das Ergebnis is ja noch schrecklicher! *lach*...hier das neue Sheet:
div, td {
color: #808080;
font: 8pt/1.5em Tahoma, Verdana, sans-serif;
}/* Body-Style */
body {
background: #333;
margin-top: 10px;
text-align: center;
}/* Spezielle Div- und Span-Styles */
.box {
visibility: visible;
background: #262626;
margin: auto;
width: 600px;
}.content {
padding: 20px 50px 20px 50px;
margin-right: 160px;
text-align: justify;
}.footer {
margin-top: 5px;
text-align: center;
letter-spacing: 0.2em;
}.navigation {
background-image: url(images/bg.jpg);
float: right;
padding: 0;
margin: 0 0 0 440px;
}h1 {
color: #808080;
font: bold 10pt Tahoma, Verdana, sans-serif;
letter-spacing: 0.2em;
margin: 15px 0 10px 25px;
padding: 0;
text-align: left;
}Der html-Code blieb natürlich unverändert!
Danke aber nochmals! :)
Carmen.-
Achja... Umzu vergleichen:
So wars am Anfang:
http://www.cagedfreedom.com/test/index1und so isses nach der Umsetzung der Tipps:
http://www.cagedfreedom.com/test/
-
-
-
Das CSS Attribut clear hebt den Effekt von float auf.
Das min-height sorgt beim FF, Opera, ... für die richtige minimale Höhe des Content Bereichs (so hoch wie deine Menü Grafik).
Das height in "* html content" sorgt für die richtige minimale Höhe im IE.Wenn ich dir einen Tipp geben darf, nimm lieber eine Liste als Menü und keine Grafik. Versetze die Listenelemente mit hintergrundgrafiken von mir aus und lege leere Link-Blöcke drüber die einen entsprechenden Text-Verweis enthalten der allerdings versteckt wird.
/// HTML DATEI
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html><head><title>a nightmare before art</title><meta http-equiv="language" content="de">
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1"><meta name="title" content="~ nightmare before art ~">
<meta name="author" content="Carmen Kratzer">
<meta name="page-topic" content="Private Homepage">
<meta name="robots" content="index,nofollow"><link rel="stylesheet" type="text/css" href="a%20nightmare%20before%20art-Dateien/test.css"></head><body>
<a name="top"></a>
<div class="box">
<div class="navigation"><img src="a%20nightmare%20before%20art-Dateien/navi.jpg"></div>
<div class="content">
<h1>Prolog</h1>
Die Unvollendete.
Denn ich liebe die Kunst. Ich liebe zu Leben. Endlich.
Viel Vergnügen und/oder ausgiebigen Brechreiz wünscht
C.
</div></div>
<div class="footer">© cagedfreedom 2005-2007</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 1000000; width: 16px; height: 16px; visibility:
hidden;" id="linkalert-box"><img style="position: absolute; left: 0px; top: 0px;"
src="a%20nightmare%20before%20art-Dateien/none-icon.png" id="linkalert-icon"></div></body></html>
/// CSS DATEI
div, td {
color: #808080;
font: 8pt/1.5em Tahoma, Verdana, sans-serif;
}/* Body-Style */
body {
background: #333;
margin-top: 10px;
text-align: center;
}/* Spezielle Div- und Span-Styles */
.box {
visibility: visible;
background: #262626;
margin: auto;
width: 600px;
}.content {
padding: 20px 50px 20px 50px;
min-height:359px;
margin-right: 160px;
text-align: justify;
}
* html content {
height:359px;
}.footer {
clear:both;
margin-top: 5px;
text-align: center;
letter-spacing: 0.2em;
}.navigation {
background-image: url(images/bg.jpg);
float: right;
padding: 0;
}h1 {
color: #808080;
font: bold 10pt Tahoma, Verdana, sans-serif;
letter-spacing: 0.2em;
margin: 15px 0 10px 25px;
padding: 0;
text-align: left;
}-
Ach ja, damit alles richtig angezeigt wird habe ich die Navigation vor den Content gegeben. Float nimmt Elemente aus dem Regulären Textfluss. Wäre die Navigation nach dem Content so würde sie unter dem Content-Bereich rechts "schwimmen" was du ja nicht willst.
-