Antworten auf deine Fragen:
Neues Thema erstellen

Wieder mal probleme mit divs

reox

Nicht mehr ganz neu hier

Ich hab mal wieder probleme mit divs... Ich habe zZ diese Struktur:

div wrapper
div header
div primary links /
div banner /
/div header
div contentwrapper
div sidebar /
div text /
/div contentwrapper
div footer /
/div wrapper

Nun ist die länge des contents variabel aber immer min. 400px hoch
Nun soll der footer immer am ende stehen, auch wenn der text mal länger wird. Das Problem: Wenn der Text länger wird, steht der footer immer noch an der gleichen stelle (firebug debugged^^) und wird folglich nicht angezeigt, da der darüberliegende div (content) das verdeckt...

Hier mal mein gesamtes CSS:
Code:
@charset "utf-8";
/* CSS Document */

body {
	background-color:#DEDEDE;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.wrapper {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
}
.primary {
	background-color:#DEDEDE;
	height:54px;
	width:100%;
}

.primary .plinks {
	font-size:14px;
	color:black;
	font-weight:bold;
	padding-top:14px;
	width: 950px;
	margin: 0 auto; 
}

.banner {

	background-image:url(gfx/header.png);
	background-repeat:no-repeat;
	background-position:center;
	background-color:#ffee00;
	height:198px;
	width:100%;
	border-top:1px solid white;
	border-bottom:1px solid white;
	top:54px;
}

.contentwrapper {
	color:black;
	font-size:12px;
	width:950px;
	margin:0 auto;
}

.sidebar {
	margin-top:20px;
	border:5px solid #58bf8c;
	width:217px;
	min-height:400px;
	background-color:white;
	padding:4px;
}

.text {
	margin-top:20px;
	margin-left:260px;
	border:5px solid #58bf8c;
	background-color:white;
	width:672px;
	top:254px;
	min-height:400px;
	position:absolute;
	padding:4px;
}

.footer {
	bottom:10px;
	margin: 0 auto; 
	text-align:center;
	color:#6C6C6C;
}
 

W

waterwebdesign

Guest

AW: Wieder mal probleme mit divs

Kannst du vielleicht ne Skizze anfertigen? Zumindest ich verstehe deine Strukturvorgaben nicht ganz.

Edit: Struktur verstanden, guck jetzt die CSS durch.
Da wird man einmal von der Abeit abgehalten und schon ist einer schneller. :) Aber recht hat sokie. Wenn absolute Positionierung, dann komplett und richtig, besser aber dynamisch. Sidebar und Text mit einer relativen Weite versehen, links und rechts gefloatet, und schon ist es so, wie du dir es vorstellst.
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

AW: Wieder mal probleme mit divs

Code:
.wrapper {
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
}
dieser Wrapper ist keiner.
die absolute Positionierung Führt dazu, dass er mit seinen Inhalten nicht mehr viel zu tun hat. Ausserdem macht left:0 UND right:0; nicht viel Sinn beim Positionieren. entwerder rechts ODER links.

Die Absolute Positionierung des contentwrapper fürhrt natürlcih dazu, dass er beim grösser werdenden Inhalt über den footer hinausläuft (was soll er auch machen?)

versuch mal weitestgehend ohne absolute Positionierungen hinzukommen, dann wird der Footer auch da stehen wo er hingehört, wenn der Inhalt RELATIV lang wird.
 
K

kiwiform

Guest

AW: Wieder mal probleme mit divs

hallöchen reox,
nimm doch mal aus .text{} das position:absolute; raus!
 

reox

Nicht mehr ganz neu hier

AW: Wieder mal probleme mit divs

ok danke für die ganzen tipps! geht schonmal was weiter... nur nun hab ich das problem das ja sidebar und text nebeneinander sein sollen, also ein zweispaltiges layout. Wenn ich die ganz normal positioniere ist der text div unter dem sidebar div... wie bekomm ich den wieder noch oben? wenn das geht is alles fertig :D

aja: ich hab ausm wrapper das left und right sowie die position rausgenommen und dann is mir wieder aufgefallen warum ich das gemacht habe^^ Ich wollte das die seite den gesamten bildschirm ausfüllt. nehme ich das raus habe ich auf einmal an beiden seiten etwa 5px luft, was nicht sein soll...
 
Zuletzt bearbeitet:
W

waterwebdesign

Guest

AW: Wieder mal probleme mit divs

Damit dieser Seitenabstand nicht ist, einfach body{margin:0,padding:0;}. Für die zwei Spalten verweise ich auf Post#2 in diesem Thread, floaten.
 

reox

Nicht mehr ganz neu hier

AW: Wieder mal probleme mit divs

edit: nun geht alles^^ der footer musste so aussehen:
Code:
.footer {
	width:100%;
	position:relative;
	float:right;
	margin:0 auto;
	text-align:center;
	color:#6C6C6C;
}
und noch im content wrapper drin sein..

danke an alle für die hilfe!
 
Zuletzt bearbeitet:
K

kiwiform

Guest

AW: Wieder mal probleme mit divs

den footer brauchst du nicht auch noch floaten, sondern: clear:both;wir
das hebt die auskungen der vorigen floats ab dem footer auf und er positioniert sich wieder ganz normal unterhalb des vorigen div's. wenn du nem div keine explizite width zuordnest, zieht er sich von allein über die gesamte breite des übergeordneten elemens (hier: contentwrapper -> 950px).

zum thema floaten zB. schau dir mal de.selfhtml.org ->css an ...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben