nicht angemeldet
Mehrspaltiges Layout wird nicht korrekt dargestellt
Hallo zusammen,
ich bin noch ein Frischling und habe mich an einem mehrspaltigem CSS-basiertem Layout versucht. Dazu habe ich die tollen Erklärungen hier auf der Seite (Mehrspaltige CSS-basierte Layouts) durchgearbeitet und ein eigenes Layout erstellt. Das meiste funktioniert auch ganz gut, allerdings überschreibt der Text des "Inhalts" die Fußzeile, wenn ich eine andere Auflösung wähle. In der Vorlage passiert das nicht und ich finde meinen Fehler nicht. Vielleicht könnt ihr mir helfen?
----------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Home</title>
<style type="text/css">
body {
color: #FF8C00;
background-color: #4c2601;
font-size: 100.01%;
font-family: Papyrus;
margin: 0; padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
h1 {
color: #FF8C00;
font-size: 3.5em;
margin: 0 0 0.7em;
padding: 0.3em;
text-align: center;
background-color: #4c2601;
border-bottom-style:solid;
border-bottom-width:0.01em;
border-bottom-color:#FF8C00;
font-weight:bolder;
font-style:italic;
text-shadow:#FAFAD2 2px -1px;
letter-spacing:0.3em;
}
ul#Navigation {
background-color: #FF8C00;
font-size: 1em;
float: left;
width: 15em;
margin: -1em 0 1.2em;
padding: 0;
}
ul#Navigation li {
list-style: none;
margin: 0;
padding: 0.5em;
}
ul#Navigation a {
display:block;
padding: 0.2em;
font-weight: bold;
text-decoration:none;
}
ul#Navigation a:link {
color: #4C2601;
}
ul#Navigation a:visited {
color: #4C2601;
}
ul#Navigation a:hover {
color: #4C2601; background-color: FAFAD2;
}
ul#Navigation a:active {
color: #4C2601; background-color: FAFAD2;
}
div#Info {
color: #FAFAD2;
float: right;
width: 20em;
margin: -1em 0 1.1em 0 ;
padding: 0;
background-color: #ff8c00;
}
div#Inhalt {
margin: -1em 20em 1em 16em;
padding: 0 1em;
width: 38em;
height: 30em;
background-color: #4c2601;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}
div#Inhalt h2 {
font-size: 1.1em;
font-weight: bold;
color: #FAFAD2;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1.1em;
font-weight: bold;
line-height: 2em;
color: #FAFAD2;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 1em;
color: #FAFAD2;
margin: 2em 0 0 0 ;
padding: 0.1em;
text-align: center;
background-color: #4c2601;
border-top-style:solid;
border-top-width:0.01em;
border-top-color:#FF8C00;
letter-spacing:0.1em;
}
</style>
</head>
<body>
<h1>Malik-Thaimassage</h1>
<ul id="Navigation">
<li><a href="index.html">Home</a></li>
<li><a href="klassisch.html">Klassische Thaimassage</a></li>
<li><a href="oel.html">Öl-Massage</a></li>
<li><a href="preise.html">Preise</a></li>
<li><a href="gutschein.html">Bonus/Gutscheine</a></li>
<li><a href="kontakt.html">Termine/Hinweise</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<div id="Info">
<img src="Lid.png" width="100%" height="70%" vertical-align="middle" padding="5em" alt="Lid" />
</div>
<div id="Inhalt">
<h2>Herzlich Willkommen</h2>
<p> </p>
<p>Ich heiße Lid, komme aus Thailand und lebe seit 1997 in Neuss.</p>
<p> </p>
<p>Ich praktiziere thailändische Massage, die seit über 2.500 Jahren
für ihre wohltuende und entspannende Wirkung bekannt ist.</p>
<p> </p>
<p>Als mobiler Massagedienst komme ich zu Ihnen nach Hause, so dass
für Sie die An- und Abfahrt sowie die Parkplatzsuche entfällt
und Sie die wohltuende Massage entspannt in Ihrem Heim ausklingen
lassen können.</p>
</div>
<p id="Fusszeile">Malik-Thaimassage - Inhaber Theerasak (Lid) Khaekphong - Vereinsstr. 30 - 41472 Neuss - E-Mail: lid@malik-thaimassage.de</p>
</body>
</html>
----------------------------------------------------------------------------
Vielen Dank im voraus
Ivy
-
Hi,
Das meiste funktioniert auch ganz gut, allerdings überschreibt der Text des "Inhalts" die Fußzeile, wenn ich eine andere Auflösung wähle. In der Vorlage passiert das nicht und ich finde meinen Fehler nicht.
Der Inhaltsbereich hält sich an die feste Höhe, die du ihm gegeben hast. Die Inhalte laufen damit nach unten aus dem Element hinaus, wenn der Platz nicht ausreicht - ohne das Element dabei zu vergrößern.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Das meiste funktioniert auch ganz gut, allerdings überschreibt der Text des "Inhalts" die Fußzeile, wenn ich eine andere Auflösung wähle. In der Vorlage passiert das nicht und ich finde meinen Fehler nicht.
Der Inhaltsbereich hält sich an die feste Höhe, die du ihm gegeben hast. Die Inhalte laufen damit nach unten aus dem Element hinaus, wenn der Platz nicht ausreicht - ohne das Element dabei zu vergrößern.
MfG ChrisB
Hallo ChrisB,
danke für deine Antwort. Ich habe es probiert und es funktioniert einwandfrei. Ich hatte eine feste Höhe vergeben, damit die Fußzeile auf jeder Seite schön bündig unten steht und nicht immer woanders. Weißt du dafür auch eine elegante Lösung?
Viele Grüße Ivy
-
Hi,
bitte zitiere sinnvoll, das worauf du dich konkret beziehst, und nicht einfach alles.
Ich hatte eine feste Höhe vergeben, damit die Fußzeile auf jeder Seite schön bündig unten steht und nicht immer woanders. Weißt du dafür auch eine elegante Lösung?
Du willst also eine Mindesthöhe angeben, keine Höhe.
(Wobei die Annahme, eine Angabe von 30em würde dafür sorgen, dass die Fußzeile „immer unten“ steht, natürlich falsch ist. „Unten“ ist auf jedem Darstellungsgerät/System anders.)
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
Hallo zusammen,
p#Fusszeile { position:relative; top:20px; }Sollte dann nicht mehr überschreiben
-
Hallo zusammen,
p#Fusszeile {
position:relative;
top:20px;
}> > Sollte dann nicht mehr überschreiben Hallo Georg, danke für deine Antwort. Ich habe das probiert und leider wird die Fußzeile immer noch überschrieben. Viele Grüße Ivy-
Hallo zusammen,
p#Fusszeile {
position:relative;
top:20px;
}Die zwei Zeilen ersetzen nicht deinen Code. Sie müssten hinzugefügt werden. Hatte es getestet, bei mir hatte es geklappt. Im Moment wenig Zeit aber sobald ich Zeit hab schau ich nochmal rein
-
-