nicht angemeldet
Ausrichtung nach dem Bewegen von DIV-Boxen.
Wie kann ich bei folgendem Code den Block "Inhalt" um den real angezeigten Block "Navigation" fließen lassen?
"Inhalt" befindet sich ja sozusagen direkt neben der fiktiv unbewegten "Navigation". Also zu weit rechts.
Danke.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout mit fester Breite</title>
<style type="text/css">
body {
color: black;
background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 3em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 760px;
padding: 0.5em;
border: 1px ridge silver;
z-index: 1;
}
ul#Navigation {
position: relative;
top: -2em; left: -5em;
font-size: 0.91em;
float: left;
width: 12em;
margin: 0; padding: 0;
border: 1px dashed silver;
z-index: 2;
}
html>body #fixiert { /* nur fuer moderne Browser! */
position: fixed;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Inhalt {
margin-left: 0em;
padding: 0 1em;
border: 1px dashed silver;
z-index: 3;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 1em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0 0 1em;
}
div#Inhalt p {
font-size:1em;
margin: 1em 0;
}
</style>
</head>
<body>
<div id="Seite">
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Inhalt">
<h1>CSS-basierte Layouts</h1>
<h2>Seite mit fester Breite</h2>
<p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>
<p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal
gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
</div>
</div>
</body>
</html>
-
Lieber Alex,
Wie kann ich bei folgendem Code den Block "Inhalt" um den real angezeigten Block "Navigation" fließen lassen?
<body>
<div id="Seite">
<ul id="Navigation">
</ul><div id="Inhalt">
</div>
</div></body>
Du suchst <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float>. Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
danke für Deine schnellen Reaktionen.
»» Wie kann ich bei folgendem Code den Block "Inhalt" um den real angezeigten Block "Navigation" fließen lassen?
Du suchst http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float.Natürlich kenne ich mich noch nicht perfekt aus, aber mit Float habe ich schon alles getestet. Der Navigationsblock wird ja "relative" verschoben und somit fließt der Inhalt um genau den Bereich, wie wenn der Navigationsblock NICHT verschoben wäre.
Ich möchte aber, dass der Inhalt so den Naviationsblock umfließt, wie er nun NACH der Verschiebung sichtbar ist. Geht das überhaupt?Danke.
-
Lieber Alex,
Du "verschiebst" nix. Du hast in Deiner Dokumentstruktur zuerst einen Block "Navi", und dann einen Block "Inhalt" stehen. Wenn Du nun den Navi-Block floaten lässt, dann kann der Inhaltsblock um den Navi-Block herumfließen.
Eventuell gewünschte Abstände des Navi-Blocks kannst Du mittels margin und padding einstellen, jedoch "verschieben" kannst Du nichts.
Float und relatives Positionieren arbeiten nicht gut zusammen. Wenn Du mit relativer Positionierung ein Element "verschiebst", dann fließt der Rest um das Element, als stünde es an der ursprünglichen Position - und das willst Du ja offensichtlich nicht.
Ich habe mir zur Faustregel gemacht: Relatives oder gar absolutes Positionieren verträgt sich nicht mit der Idee von float.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Du "verschiebst" nix. Du hast in Deiner Dokumentstruktur zuerst einen Block "Navi", und dann einen Block "Inhalt" stehen. Wenn Du nun den Navi-Block floaten lässt, dann kann der Inhaltsblock um den Navi-Block herumfließen.
Das ist klar.
Eventuell gewünschte Abstände des Navi-Blocks kannst Du mittels margin und padding einstellen, jedoch "verschieben" kannst Du nichts.
Ich meine "relatives Positionieren"
Float und relatives Positionieren arbeiten nicht gut zusammen. Wenn Du mit relativer Positionierung ein Element "verschiebst", dann fließt der Rest um das Element, als stünde es an der ursprünglichen Position - und das willst Du ja offensichtlich nicht.
Genau darum geht es mir.
Ich habe mir zur Faustregel gemacht: Relatives oder gar absolutes Positionieren verträgt sich nicht mit der Idee von float.
Aber ich muss doch irgendwie lösen können, dass der Navi-Block irgendwie halb über dem Inhalt-Block liegt. Gibt's da denn eine ganz andere Möglichkeit?
Danke, Felix!!
-
Lieber Alex,
Aber ich muss doch irgendwie lösen können, dass der Navi-Block irgendwie halb über dem Inhalt-Block liegt. Gibt's da denn eine ganz andere Möglichkeit?
vielleicht sowas? http://danielrichter.da.funpic.de/
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
-