Div oder TD für dieses Vorhaben
am 15.06.2007 - 19:15 Uhr in
Hallo Leute,
habe folgendes Probleme bei meinen eigenen Template( Theme ) das am Anfang steht:
Ich habe in der page.tpl.php > einen Header, left, content, right.
diese 4 Sachen kann ich per css absolute fixieren und die bereiche werden passend angezeigt.
Nun will ich aber noch einen "footer" haben, dieser soll unter dem bereich "content" in der mitte erscheinen.
Im prnizip könnte man das auch per css "absolute" unter dem content anlegen, jedoch wechselt der content den inhalt und ist mal grösser oder kleiner, und somit würde der content mal über den footer liegen mal nicht.
Was genau ist zu tun, welche Divs oder anweisung muss ich dem footer geben damit dieser sich
automatisch unter dem content anpasst - hat das jemand schon hier behandelt bzw weiss es jemand?!?!?
hier mal die page.tpl.php:
<?php
print $header
?>
<?php
print $sidebar_left
?>
<?php
print $content
?>
<?php
print $sidebar_right
?>
und hier die css datei:
#left, #content, #right, #footer {
position:absolute;
top:95px;
padding: 10px;
}
#header {
width: 550px;
margin-left: 0px;
margin-top: 15px;
}
#left {
width:185px;
left:0;
}
#content {
width:545px;
left:200px;
border: 0.1em solid #cdcdcd;
}
#right {
width:165px;
left:775px;
border: 0.1em solid #cdcdcd;
}
#footer{
width:165px;
left:800px;
border: 0.1em solid #cdcdcd;
}
- Anmelden oder Registrieren um Kommentare zu schreiben
jetzt footer relativ
am 15.06.2007 - 19:37 Uhr
<div id="wrapper>
<div id="container">
<div id="left>
</div>
<div id="mitte">
<div id="footer">
</div>
<div id="rechts">
</div>
</div>
</div>
jetzt footer relativ position geben und fertig
danke, aber dachte ich auch,
am 15.06.2007 - 19:47 Uhr
danke, aber dachte ich auch, aber das problem ist, das der footer dann direkt unter dem header ist und nicht unter dem content!?!?
habe den footer aus diese anweisung genommen:
#left, #content, #right, #footer {
position:absolute;
top:95px;
padding: 10px;
}
wobei unten es sowieso der footer von relative wieder überschrieben wurde:
#footer{
position: relative;
border: 0.1em solid #cdcdcd;
}
achso
am 15.06.2007 - 20:17 Uhr
jetzt verstehe ich das Problem
du willst den footer quasie immer ganz unten aber unter conent haben?
dann mach
#footer{
position:relative;
position-bottom:10px;
padding-top:10px
}
:-))))) nee auch das nicht,
am 15.06.2007 - 20:28 Uhr
:-)))))
nee auch das nicht, wiegesagt hab auch schon alles versucht, aber das ding taucht ständig
unter dem header auf!
HILFEEE :-))
kann es sein dass du keine
am 15.06.2007 - 20:33 Uhr
kann es sein dass du keine speziellen div angaben in der page.tpl.php machst?
so sieht dein erster post aus
mhmhm, kannst du mir am
am 15.06.2007 - 20:38 Uhr
mhmhm, kannst du mir am besten ein beispiel nennen wie du es meinst, doer es zu machen ist,
weil bei mir raucht schon der kopf, wäre super nett :-)
ahh meinst du so
div id="content"
<?php print $content ? >
< /div >
Kannst du einen Link zur
am 15.06.2007 - 22:21 Uhr
Kannst du einen Link zur Site posten? Und ein Screenshot vom Soll-Zustand wäre auch praktisch.
Wenn ich dich richtig verstanden habe, willst du in etwa folgendes erreichen:
|header |
|left|content|right|
|bla |bla |
|bla |
|footer|
Etwas verstehe ich nicht ganz: Im oben geposteten CSS positionierst du den #footer absolut 800px rechts. Im Text schreibst du, er sollte unterhalb von #content kommen. Was denn nun? Ich gehe hier mal von unten aus.
Dass der #footer direkt unterm #header kommt, liegt daran, dass du #left, #content und #right absolut positionierst. Diese divs liegen nicht mehr im «Fluss» der Objekte. Für nicht absolut positionierte Elemente existieren diese divs gar nicht. Nicht absolut positioniert sind bei dir #header und #footer. Für den relativ positionierten #footer ist #header also das einzige vorangehende Element. Deshalb erscheint er direkt danach.
Bau dein Layout lieber mit float auf, dann klappts.
genau blos würde ich das
am 15.06.2007 - 22:23 Uhr
genau blos würde ich das obere div nicht 1zu1 nennen
und damit die struktur und in diese die versch. Variablen anzeigen
zur deiner frage elias: das
am 15.06.2007 - 23:40 Uhr
zur deiner frage elias: das war nur ein test mit den 800px left für den footer! hätte ich korrigieren sollen damit
es hier nicht für verwirrung sorgt!
Aber genau! du siehst das vollkommen richtig mit deinem beispiel. footer soll ganz unten sein, jetz
verstehe ich auch das mit dem absolute- befehl und warum deswegen der footer unter dem header erscheint = da header kein absolute befehl hat!
Jedoch wüsste ich gerne wie ich diese positionen, die im moment als "absolute" angegeben sind für |left|content|right| beibehalten kann, wenn ich mit "relative" positionen arbeite, denn bei "relative" für die genannten sachen erscheint alles untereinander = hintereinander.
Habt ihr hilfsweise ein beispiel ( css ), mit dem "float" für diese sache???
Piet wrote: jetz verstehe
am 16.06.2007 - 09:25 Uhr
jetz verstehe ich auch das mit dem absolute- befehl und warum deswegen der footer unter dem header erscheint = da header kein absolute befehl hat!
Nicht ganz. Eher weil die anderen Objekte nicht relativ positioniert sind. Wenn nämlich #header, #left, #content und #right absolut und #footer relativ positioniert wären, würde es für den #footer kein vorangehendes Objekt geben, so dass er zuoberst (etwa an der selben Stelle wie #header) erscheinen würde.
Absolut positionierte Elemente ignorieren die Position der anderen Elemente. Sie haben ihre Koordinaten und fertig. Egal wie lange der vorangehende content ist. Du kannst #footer in einem absoluten Layout deshalb nicht nach #content (dessen Länge unbestimmt und unterschiedlich ist) positionieren.
Per float kannst du #left, #content und #right nebeneinander «fliessen» lassen.
http://www.html-seminar.de/design_per_css_-_float.htm
http://css-technik.de/css-examples/219_9/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-s...
Hier, als Ausgangsbasis, dein CSS mit floats:
#left, #content, #right, #footer {
float: left;
padding: 10px;
}
#header {
width: 550px;
margin-left: 0px;
margin-top: 15px;
}
#left {
width: 185px;
}
#content {
width: 545px;
border: 0.1em solid #cdcdcd;
}
#right {
width: 165px;
border: 0.1em solid #cdcdcd;
}
#footer{
clear: left;
width: 165px;
border: 0.1em solid #cdcdcd;
}
ok, das ist mal sehr
am 16.06.2007 - 12:55 Uhr
ok, das ist mal sehr ausführlich erklärt! auch danke für die links, jetzt verstehe ich das!
Aber wie es so ist, gibt es weitere nervende punkte:
NUn jetzt passt alles im IE und im FF mit dem footer, jedoch ist im Firefox folgendes:
Firefox:
#header ganz oben, neben header fängt #left, #content usw. an und unten #footer wie es sein soll!
Aber, problem ist nicht mehr mit dem footer, sondern im FF werden die genannten sachen ( left, content, right. usw )
nicht unter dem #header gezeigt sondern neben dem #header!
Im IE jedoch passt dies, da werden die anderen regionen unter dem #header angezeigt wie es sein soll, habe versucht für den #header anweisungen per css zu geben wie: display:block, oder position: absolute, beim letzteren überlappt lediglich der #header auf #left!?!?
habs rausgefunden! die
am 16.06.2007 - 20:08 Uhr
habs rausgefunden!
die -clear: left;- funkttion hat gefehlt!
danke an alle nochmal!