nicht angemeldet
3 Bereiche -> gleich lang; Float Fußleiste auf Abstand bringen
hi,
ich kämpfe seit einigen Tagen mit dem Umbau einer Seite. Ich benötige in der Mitte zwei Bereiche, der mit Inhalt gefüllt wird.
Zur Besichtigung (Nur Mozilla Clients):
Nur Text:
http://www.p-jack.de/index.php?id=166
Mit Bild:
http://www.p-jack.de/index.php?id=39
Beim zweiten Link, sollte ersichtlich werden, weshalb ich zwei Bereiche benötige. Der Inhalt kommt aus Typo3 (CMS). Ich habe es immerhin schon soweit geschafft das es dem, was ich brauche, sehr nahe kommt.
Bleiben noch drei (vier)Probleme.
Erstens, bei 800x600 reicht der Platz nicht. Man müsste es schaffen, das die News Sektion (ganz rechts) ausgeblendet wird, sobald sie mein Div "inhalt-rechts" überlagert (möglichst ohne JS).
Zweitens, die Fußleiste klebt so häßlich unten dran am "inhalt-links". Die soll bitteschön immer 10px unter dem längsten Element frei lassen.
Drittens, Div inhalt-links/rechts/news sollen von der Hintergrundfarbe immer die selbe Länge habe.
(Viertens, der IE macht alles völlig anders)
Mein HTML Template sieht so aus:
http://p-jack.de/fileadmin/template/template.htm
Die CSS:
http://p-jack.de/fileadmin/template/css/body.css
Kann mir jemand helfen?
cu denny
-
Hallo!
Zweitens, die Fußleiste klebt so häßlich unten dran am "inhalt-links". Die soll bitteschön immer 10px unter dem längsten Element frei lassen.
Pack die Elemente dadrüber einfach in einen alles umfassenden div, dem du dann margin-bottom: 10px gibst (bzw. der Fußleiste margin-top: 10px)
Drittens, Div inhalt-links/rechts/news sollen von der Hintergrundfarbe immer die selbe Länge habe.
Kannst du dann auch dadurch erreichen, indem du dem o.g. div diese Hintergrundfrabe gibst.
(Viertens, der IE macht alles völlig anders)
Das ist leider normal so, und da kann dir glaube ich ohne konkrete Problemstellungen (die wahrscheinlich für ca. 20 Posts reichen werden ;-)) kaum einer weiterhelfen.
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations-
hi,
Danke für die Antwort:
Pack die Elemente dadrüber einfach in einen alles umfassenden div, dem du dann margin-bottom: 10px gibst (bzw. der Fußleiste margin-top: 10px)
Das habe ich probiert, damit man was sieht, habe ich eine schöne Farbe genommen und statt margin padding genommen:
<body>
<div id="inhalt_komplett">
<div id="logo">
<div align="right"><a href="http://www.lippelt-back.com" target="_self"><img src="fileadmin/template/images/lippelt_neu.gif" alt="Lippelt $
</div>
<div id="rootline">###MISC###</div>
<div id="navi_misc">###INFO###</div>
<div id="inhalt-links">###CONTENT-LINKS###</div> <div id="inhalt-rechts">###CONTENT-RECHTS###</div>
<div id="rechts">###BORDER###</div>
<div id="links"><p>###NAVI_LINKS###</p><p>###SUCHEN###<br />###LANGUAGES###</p></div>
</div>
<div id="bottom"> <p>###copyright### ###DRUCK### ###ACROBAT### </p> <p>###LAST###</p></div>
<!-- ###DOCUMENT_BODY### STOP -->
</body>So schaut die HTML Seite aus, die CSS:
#inhalt_komplett {
background:yellow;
padding-bottom: 50px;
}Das Ergebniss lässt sich hier bewundern:
http://www.p-jack.de/index.php?id=39
Drittens, Div inhalt-links/rechts/news sollen von der Hintergrundfarbe immer die selbe Länge habe.
Kannst du dann auch dadurch erreichen, indem du dem o.g. div diese Hintergrundfrabe gibst.
Hmm, dafür muss das oben, aber erstmall klappen. ;-)
(Viertens, der IE macht alles völlig anders)
Das ist leider normal so, und da kann dir glaube ich ohne konkrete Problemstellungen (die wahrscheinlich für ca. 20 Posts reichen werden ;-)) kaum einer weiterhelfen.
Das befürchte ich :-/
cu
-
Hallo!
Schau dir deine DIVs mal genau an:
<div id="inhalt_komplett">
<div id="logo">
<div align="right"><a href="http://www.lippelt-back.com" target="_self"><img src="fileadmin/template/images/lippelt_neu.gif" alt="Lippelt $
</div>
<div id="rootline">###MISC###</div>
<div id="navi_misc">###INFO###</div>
<div id="inhalt-links">###CONTENT-LINKS###</div>
<div id="inhalt-rechts">###CONTENT-RECHTS###</div>
<div id="rechts">###BORDER###</div>
<div id="links"><p>###NAVI_LINKS###</p><p>###SUCHEN###<br />###LANGUAGES###</p></div>
</div>
<div id="bottom"> <p>###copyright### ###DRUCK### ###ACROBAT### </p> <p>###LAST###</p></div>inhalt_komplett wird hier nicht geschlossen.
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations-
hi,
inhalt_komplett wird hier nicht geschlossen.
hmm, eigentlich wird es geschlossen, nämlich durch das alleinstehende </div> nach <div id="links" .
Ich lasse das Template und die CSS Datei immer durch den Validator prüfen, ob sich nicht ein Syntax Fehler eingeschlichen hat.
http://validator.w3.org/check?verbose=1&uri=http%3A//www.p-jack.de/fileadmin/template/template.htm
Beide sind OK, also könntest du noch einen logischen Fehler meinen. Wo müsste demnach das </div> dann erscheinen? Wobei, ich habe eigentlich mehrere Möglichkeiten probiert, ich wette, das float:left ist daran schuld, das es nicht klappt.
cu
-
Hallo!
hmm, eigentlich wird es geschlossen, nämlich durch das alleinstehende </div> nach <div id="links" .
Der schließt meiner Meinung nach "logo". Schau dir die Einrückungen mal genau an. So sollte doch alles klar sein.
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations-
hi,
Der schließt meiner Meinung nach "logo". Schau dir die Einrückungen mal genau an. So sollte doch alles klar sein.
ei caramba, ich denke, ich werde Gas- Wasser Installateur, da muss ich mich nicht mit sowas rumschlagen ;-)
Also nochmal, ich stelle alle divs mal zusammen,
Hier ist unser inhalt_komplett, natürlich offen:
<div id="inhalt_komplett">
Dann kommt das Logo
<div id="logo">
<div align="right"><a href="http://www.lippelt-back.com" target="_self"><img src="fileadmin/template/images/lippelt_neu.gif" alt="Lippelt Home" width="160" height="70" border="0" /></a></div>
</div>Hier ist es ein div im div, beide sind geschlossen.
<div id="rootline">###MISC###</div>
das ist zu
<div id="navi_misc">###INFO###</div>
das ist zu
<div id="inhalt-links">###CONTENT-LINKS###</div>
das ist zu
<div id="inhalt-rechts">###CONTENT-RECHTS###</div>
das ist zu
<div id="rechts">###BORDER###</div>
das ist zu
<div id="links"><p>###NAVI_LINKS###</p><p>###SUCHEN###<br />###LANGUAGES### </p></div>
das ist zu
Hier kommt der Verschluss für das Div "inhalt_komplett"
</div>
Und zum Abschluss, unser Schlusslicht, die Bottom Leiste.
<div id="bottom"> <p>###copyright### ###DRUCK### ###ACROBAT### </p> <p>###LAST###</p></div>
Wieder geschlossen. Also muss bei mir irgendwo eine Blockade (im Kopf) sein.
cu denny
-
Hallo!
Hab' gerade nochmal geschaut, da paßte ja alles. Wir haben wohl aneinander vorbei geredet, ich hatte mich nämlich auf den im Forum geposteten Code bezogen, und da fehlt definitiv ein geschlossener div.
Allerdings geht halt der Hintergrund noch nicht bis nach unten. Habe mich eben nochmal dran gesetzt und habe es hinbekommen, indem ich die rechten Info-Box gefloatet habe und das, was ich "clearer" nenne, an entsprechenden Stellen eingefügt habe: http://www.makaio.de/lippelt.html (CSS im head)
Bin mir aber nicht sicher, ob die untere Leiste jetzt da sitzt, wo sie hin soll. Die Info-Box rechts müßte halt auch noch vom Rand weggerückt werden. Aber im Prinzip ist doch das jetzt das, was du wolltest, oder?
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations
-
-
-
-
-
Hallo!
Und sei so gut und schau dir das hier - möglichst noch vor deinem nächsten Post - an: </faq/#Q-19>
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations-
hi,
Und sei so gut und schau dir das hier - möglichst noch vor deinem nächsten Post - an: </faq/#Q-19>
sorry, ich werde beim nächsten Mal richtige Links setzen.
cu
-
-
-