nicht angemeldet
DIV richtet sich nur an gefüllten DIVs aus
0 0 0 
Struppi
0
DIV richtet sich nur an gefüllten DIVs aus
Hallo,
ich kapiere die Technik zur Ausrichtung der DIVs noch nicht richtig. Der Kopfbereich meiner Seite richtet sich nicht - wie von mir gewollt - oben auf der Seite , sondern an einem anderen DIV.
Offensichtlich spielt es dabei eine Rolle, ob das DIV, an das sich mein DIV ausrichten soll, mit Inhalt gefüllt ist.
Zur Einfachheit hier mal mein HTML mit eingebautem CSS:
Ihr könnt es euch ja heraus kopieren...
(An 2 Stellen habe ich Text eingebaut, der entfernt werden muss, damit der Fehler sichtbar wird)
Gruß, Uli
<html>
<head>
<title>
Mein Titel
</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
vertical-align:top;
}
#Container {
position:relative;
margin: 10px 10px 10 px;
background-color:yellow;
}
#Kopf {
position:absolute;
top:0px;
left:0px;
height:100px;
background-color:green;
}
#KopfLogo {
position:absolute;
top:0px;
left:0px;
height:100px;
width:200px;
}
#KopfSchriftzug {
position:absolute;
top:0px;
left:200px;
height:100px;
width:300px;
}
#KopfBild {
position:absolute;
top:0px;
left:500px;
height:100px;
}
#Main {
position:relative;
margin:100px 0px 0px 0px;
background-color:red;
}
#Spalte1{
position:absolute;
top:100px;
left:0px;
width:200px;
}
#Menue {
position:absolute;
top:10px;
left:10px;
width:180px;
}
#Spalte2 {
position:relative;
margin:10px 200px 200px;
background-color:blue;
}
#NavigationOben{
position:relative;
margin: 10px 10px 10 px;
}
#Inhalt {
margin:60px 10px 10px;
background-color:green;
}
#Spalte3 {
float:right;
width:200px;
}
#Fuss {
clear:both;
margin:15px 0 0 0;
}
</style>
</head>
<body>
<div id="Container">
Diese Zeile kann man wegen des Kopfbereichs schlecht lesen.<br />
Wenn man diese beiden Zeilen löscht, wird der Fehler sichtbar!
<div id="Kopf">
<div id="KopfLogo">
###KOPFLOGO###
</div>
<div id="KopfSchriftzug">
###KOPFSCHRIFTZUG###
</div>
<div id="KopfBild">
###KOPFBILD###
</div>
</div> <!-- Kopf -->
<div id="Main">
Hier ebenso!
<div id="Spalte3">
###SPALTE3###
</div>
<div id="Spalte1">
<div id="Menue">
###MENUE###
</div>
</div> <!-- Spalte1 -->
<div id="Spalte2">
<div id="NavigationOben">
###NAVIGATIONOBEN###
</div>
<div id="Inhalt">
###INHALT###
</div>
</div> <!-- SpalteMitte -->
<div id="Fuss">
<p>© ###AUTOR###</p>
<div>
</div> <!-- Main -->
</div> <!-- Container -->
</body>
</html>
-
Hi,
ich kapiere die Technik zur Ausrichtung der DIVs noch nicht richtig.
sie ist identisch mit der Technik zur Ausrichtung von <p>-, <span>-, <blockquote>-, <address>-, <kbd>- und <title>-Elementen. Grund: CSS interessiert sich nicht die Bohne für HTML-Begebenheiten wie z.B. den Namen des Elements.
Der Kopfbereich meiner Seite richtet sich nicht - wie von mir gewollt - oben auf der Seite , sondern an einem anderen DIV.
Nämlich nach welchen? Welche Elemente in Deinem Beispiel-Code bzw. welche CSS-Deklarationen spielen eine Rolle, um das Problem betrachten zu können? Warum hast Du die anderen Elemente und Deklarationen ebenfalls gepostet, die lediglich dazu dienen können, die Problembetrachtung zu erschweren?
Zur Einfachheit hier mal mein HTML mit eingebautem CSS:
Einfacher wären zwei Links, denn ...
Ihr könnt es euch ja heraus kopieren...
... hierzu fehlt mir jedweder Grund. Bitte beschreibe das Problem so, dass andere es nachvollziehen können. Ich habe beispielsweise noch immer nicht den leisesten Schimmer davon, was sich im Gegensatz zu Deinen Erwartungen wie verhält und welches Verhalten Du überhaupt erwartet hast. Ich weiß nicht mal, was Du mit "Ausrichtung" meinst.
<html>
[...]
Dieser Code ist mindestens 100 Zeilen zu lang, um in einem Forum gepostet zu werden. Warum schaltest Du die Seite in den Quirks-Mode?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
OK, ok, sorry!
Ich dachte eben es wäre einfacher zu sehen, was passiert, als eine Beschreibung verstehen zu müssen, aus der man nicht schlau wird, weil man die Details nicht kennt.Also:
Ich möchte eine Seite erstellen, die einen Kopfbereich und darunter 3 Spalten hat.
In diesen Bereichen möchte ich weitere Elemente einfügen, die relativ zu Ihren "Elterndivs" positioniert werden sollen. Wenn ich den "Elterndivs" position:relativ mitgebe, dann klappt dies auch.Allerdings bekomme ich in diesem Fall Probleme mit den absolut positionierten Elementen. Diese richten sich nicht wie von mir erwartet aus. In meinem Beispiel richtet sich beispielsweise der Kopfbereich nicht am DIV "Container" (umfasst alle DIVs) aus, sondern an irgendeinem relativ positionierten DIV innerhalb des MAIN-DIVs (liegt unterhalb des Kopfbereichs).
Offenbar spielt es dabei eine Rolle, dass diese DIVs mit Text gefüllt sind. Schreibe ich nämlich einen Text in das Container-DIV, richtet sich der Kopfbereich - wie gewünscht - oben aus.
Nach welcher Regel bestimme ich die "Ausgabgsposition" für ein absolut positioniertes Element?
Hi,
ich kapiere die Technik zur Ausrichtung der DIVs noch nicht richtig.
sie ist identisch mit der Technik zur Ausrichtung von <p>-, <span>-, <blockquote>-, <address>-, <kbd>- und <title>-Elementen. Grund: CSS interessiert sich nicht die Bohne für HTML-Begebenheiten wie z.B. den Namen des Elements.
Der Kopfbereich meiner Seite richtet sich nicht - wie von mir gewollt - oben auf der Seite , sondern an einem anderen DIV.
Nämlich nach welchen? Welche Elemente in Deinem Beispiel-Code bzw. welche CSS-Deklarationen spielen eine Rolle, um das Problem betrachten zu können? Warum hast Du die anderen Elemente und Deklarationen ebenfalls gepostet, die lediglich dazu dienen können, die Problembetrachtung zu erschweren?
Zur Einfachheit hier mal mein HTML mit eingebautem CSS:
Einfacher wären zwei Links, denn ...
Ihr könnt es euch ja heraus kopieren...
... hierzu fehlt mir jedweder Grund. Bitte beschreibe das Problem so, dass andere es nachvollziehen können. Ich habe beispielsweise noch immer nicht den leisesten Schimmer davon, was sich im Gegensatz zu Deinen Erwartungen wie verhält und welches Verhalten Du überhaupt erwartet hast. Ich weiß nicht mal, was Du mit "Ausrichtung" meinst.
<html>
[...]Dieser Code ist mindestens 100 Zeilen zu lang, um in einem Forum gepostet zu werden. Warum schaltest Du die Seite in den Quirks-Mode?
Cheatah
-
Bitte keine "Fullquotes", lass das stehen worauf du antworten möchtest und schreibe deine Antwort darunter. Du bist nicht der einzige der Fragen hat.
Also:
Ich möchte eine Seite erstellen, die einen Kopfbereich und darunter 3 Spalten hat.
In diesen Bereichen möchte ich weitere Elemente einfügen, die relativ zu Ihren "Elterndivs" positioniert werden sollen. Wenn ich den "Elterndivs" position:relativ mitgebe, dann klappt dies auch.Das klappt auch ohne Positionierung sehr gut, meistens sogar viel besser.
Nach welcher Regel bestimme ich die "Ausgabgsposition" für ein absolut positioniertes Element?
Nur in den seltesten Fällen ist es ratsam mit position zu arbeiten. Zumal das auch nicht trivial ist, denn ein Positioniertes Element wird aus dem Textfluss herausgenommen und mit verschachtelten Elementen die positioniert sind macht man sich nur das Leben schwer.
Soweit ich dich versteh willst du eine relativ einfach Struktur, hast du hier nichts gefunden?
übrigens war diese Frage von Cheatah noch sehr interessant:
Dieser Code ist mindestens 100 Zeilen zu lang, um in einem Forum gepostet zu werden. Warum schaltest Du die Seite in den Quirks-Mode?
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
-
hi,
füge zunächst eine Doctype-Deklaration ein, um den Quirks Mode zu verlassen.
Anschliessend validiere dein HTML und dein CSS.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/Anschliessend sehen wir weiter (... und uns ggf. dein Online-Beispiel an).
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }