Layout problem css
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bereich
boxen
container
ende
farbe
gemeinsamen rahmen
hintergrundbild
hintergrundfarbe
http
inhalt
layout
links mitte
mitte
overall
problem
rahmen
tabelle
text
wachsen
ziel
-
Hallo Leute!
Ich arbeite mich gerade wieder bissl in Webdesign ein ... hab früher sehr viel mit tabellen gearbeitet und versuch mich jetzt mit den \"divs\" ... leider funktioniert das nicht so wie ich mir das vorstelle ...
Was ich erreichen möchte:
1.
Ich möchte ein Drei-Spalten-Layout machen (links die navigation, mitte der content und rechts irgendwas anderes ... die Seite soll mit dem Inhalt wachsen (also wenn im content bereich mehr inhalt als zB. im Navibereich (links) soll auch der gesamte navibereich mit der Seite \"mitwachsen\" ...
mit Tabellen war das nicht schwer: einfach \"height: 100%\" und fertig ... mit den divs funktioniert das leider nicht (ich denk ich mach da grundlegend was falsch)
2. ganz unten (unter dem 3 Spalten: links, mitte, rechts) möchte ich eine Fußzeile platzieren ... egal was ich schon ausprobiert habe, entweder sie ist ganz oben, oder irgendwo mittem im layout ...
Würde mich sehr über etwas Hilfe freuen ... bin am verzweifeln :(
Hier noch der Code zum ausprobieren:
---------------------------
_stylesheet.css:
---------------------------
#container
{
position:absolute;
top: 0px; left: 50%;
width: 920px; height: 100%;
margin-left: -400px;
background-color: #ffffff;
}
#links
{
position: absolute;
top: 0px; left: 0px;
width: 175px; height: 100%;
text-align: left;
background-color: #0000ff;
}
#mitte
{
position: absolute;
top: 0px; left: 175px;
width: 555px;
height: 100%;
text-align: left;
padding-top: 10px;
padding-left: 15px;
background-color: #00ffff;
}
#rechts
{
position: absolute;
top: 0px; left: 745px;
width: 175px; height: 100%;
text-align: left;
background-color: #0000ff;
}
#unten
{
/*fusszeile ??*/
}
---------------------------
HTML Vorlage:
---------------------------
<html>
<head>
<link rel = \"stylesheet\" href=\"_stylesheet.css\" lang=\"text/css\" />
</head>
<body>
<div id=\"container\">
<div id=\"links\">
</div>
<div id=\"mitte\">
<div id=\"path\">
</div>
</div>
<div id=\"rechts\"
</div>
<div id=\"unten\">
</div>
</div>
</body>
</html>
---------------------------------
bitte um Hilfe -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Schau mal hier vorbei: http://www.css4you.de/wslayout1/ex0010.html
-
kannte ich schon ... leider hilft mir das auch nicht wesentlich weiter ...
100% Breite will und brauche ich auch nicht ... möchte mein Layout mit fixen angaben (width, height) festlegen ... nur der mittlere Bereich (#links, #mitte, #rechts) sollen mit dem Inhalt wachsen ... und so wie es aussieht funzt das mit den %-Angaben nicht ... bzw. ich mach was falsch
-
Du kannst beispielsweise alles in einen zentrierten Div Container schmeissen --> das Layout ist nicht mehr 100%
(sollen die Divs in die Breite oder in die länge wachsen?)
Beitrag geändert: 28.3.2008 16:18:56 von cuchullain -
ich versteh net was du mir sagen willst sorry ^^
wie meinst du das? \"das Layout ist nicht mehr 100%\" ... 100% von was ?
hast du ev. den code den ich beigefügt habe ausprobiert ?
*edit*
in die Länge natürlich (also nach unten!) ...
Beitrag geändert: 28.3.2008 16:20:24 von khazur-crew -
Frage: Wozu sollen die Bereiche links und rechts mitwachsen? Was soll dadurch dort passieren? Soll nur die Hintergrundfarbe und vielleicht ein Rand bis nach ganz unten eingeblendet werden?
An dem Problem hab ich selber nämlich bereits lange gessen und keine Lösung gefunden.
Es sieht meiner Meinung nach aber auch nicht schlechter aus, wenn Hintergrundfarbe und Rahmen auch dort enden, wo ihr Inhalt endet.
Und wenn es umbedingt so sein muss, könntest du das Problem mit einem Hintergrundbild lösen. Eins für ganz oben mit dem Rahmen, dann eins, was nur 1 Pixel hoch ist und nach unten wiederholt wird, und ganz unten erneut eins für den Rahmen. -
naja, im Grunde sollen sie mitwachsen, weil es meiner meinung nach schöner ausschaut ... bin es von den tabellen her noch so gewöhnt und es ärgert mich ganz schön, dass das nicht so einfach ohne weiteres möglich ist ...
wegen dem hintergrundbild: aber woher weiss er wie weit das \"div\" nach unten geht ? wenn es oben irgendwo aufhört dann wird auch das hintergrundbild nicht bis ganz nach unten angezeigt ... ?
hat denn niemand eine Idee wie man das \"einfach\" und schön lösen kann ... und am Ende noch ne Fußzeile anhängen kann ?
ich seh schon, ich werd heute alpträume von den divs haben ^^
hoffe auf weitere Ideen wie man das Problem lösen könnte
danke schonmal
lg. -
Ihr ein Vorschlag, wenn du auch einen Header haben möchtest, und unter Umständen ein Div um alles herum (damit das Design beispielsweise zentriert ist, Abstände hat, einen gemeinsamen Rahmen, oder ähnliches):
<div id=\"all\">
.<div id=\"header\">[HEADER]</div>
.{evtl. <img src=\"rahmen_oben.png\" alt=\"Rahmen\" />}
.<div id=\"middle\" style=\"background-image: url(\'dein_bild.png\');\">
..<div id=\"left\">[LINKE NAVI]</div>
..<div id=\"content\">[INHALT]</div>
..<div id=\"right\">[RECHTE NAVI]</div>
.</div>
.{evtl. <img src=\"rahmen_unten.png\" alt=\"Rahmen\" />}
.<div id=\"footer\">[FOOTER]</div>
</div>
Ich kenne das Problem, es war eine Umstellung von Tabellen auf Div\'s - aber es geht. Man kann eben nicht alles so umsetzen, wie man möchte. Da macht ohnehin der Internet Explorer einem zu oft einen Strich durch die Rechnung. Also: Nicht zu lange mit einem Problem aufhalten. Umdenken und das ganze anders gestalten.
(In einer Englisch-Klausur hilft es auch nicht, jedes Wort, was man in einem Text verwenden möchte, nachzuschlagen - man sucht besser eine Möglichkeit mit seinen Mitteln (fast) das gleiche auszudrücken.)
@cuchullain:
Er möchte doch gerade, dass die Navigationen links und rechts nach unten \"mit wachsen\", also genauso hoch sind, wie der Inhalt.
Beitrag geändert: 28.3.2008 17:04:08 von hts -
@ cuchullain:
so hatte ich es auch schon ... ich denke du hast jetzt \"height: auto;\" gesetzt oder ?
was ich möchte ist, dass #links, #mitte und #rechts immer die gleiche Länge (also höhe, height) haben ... und mit dem Inhalt (#mitte) nach unten auch wachsen (alle gemeinsam) ...
weiters brauche ich am Ende noch eine Fußzeile, die direkt unter #links, #mitte und #rechts plaziert sein soll ...
hoffe es ist jetzt besser verständlich :)
mfg.
@hts:
wenn du genau schaust habe ich schon einen gemeinsamen Rahmen (#container) ...
Beitrag geändert: 28.3.2008 17:07:24 von khazur-crew -
Ich habe das bei meinem Layout folgendermassen gemacht:
Erst eine grosse div-Box, sozusagen die äussere Hülle und dann alle Bereiche dort eingefügt.
position: absolute; geht meiner Meinung nach nicht, ich habe stattdessen auto; eingefügt, ob das jetzt alles so richtig war, weiss ich nicht, aber es funktioniert so, wie du es dir wünscht.
Ich wede jetzt mal deinen Code testen, vielleicht finde ich ja eine Möglichkeit.
Malia
-
wenn du genau schaust habe ich schon einen gemeinsamen Rahmen (#container)
Das war ja auch nicht mein primäres Ziel. Mein primäres Ziel war es, zu zeigen, wie du das mit dem Hintergrundbild machst. Und innerhalb des Div-Containers, in dem dann sowohl die Navigationen als auch der Inhalt enthalten sind, wird das Hintergrundbild nach unten wiederholt. (Gib von mir aus noch background-repeat: repeat-y; an)
Ich habe das bei meinem Layout folgendermassen gemacht:
Erst eine grosse div-Box, sozusagen die äussere Hülle und dann alle Bereiche dort eingefügt.
Meinst du damit deine eigene Website aus deiner Signatur?
Wenn ja: Deine Navitation hört auch nach Ende des Navigation-Inhaltes auf, und nicht erst nach Ende des gesamten Inhaltes.
Und außerdem: CSS-Styling gehört in eine externe Date und nicht in <div style=\"...\"> ;P -
Also ich wüsste eine Variante. Es würde sich aber auch nicht von selbst anpassen, sondern man müsste immer einmal EIN EINZIGES MASS ändern und das würde dann alles richtig weiterverändert. Ich glaube aber das reicht dir nicht^^
http://cuchullain.redio.de/overall.html
Beitrag geändert: 28.3.2008 17:42:01 von cuchullain
Beitrag geändert: 28.3.2008 17:42:29 von cuchullain -
hts schrieb:
wenn du genau schaust habe ich schon einen gemeinsamen Rahmen (#container)
Das war ja auch nicht mein primäres Ziel. Mein primäres Ziel war es, zu zeigen, wie du das mit dem Hintergrundbild machst. Und innerhalb des Div-Containers, in dem dann sowohl die Navigationen als auch der Inhalt enthalten sind, wird das Hintergrundbild nach unten wiederholt. (Gib von mir aus noch background-repeat: repeat-y; an)
Ich habe das bei meinem Layout folgendermassen gemacht:
Erst eine grosse div-Box, sozusagen die äussere Hülle und dann alle Bereiche dort eingefügt.
Meinst du damit deine eigene Website aus deiner Signatur?
Wenn ja: Deine Navitation hört auch nach Ende des Navigation-Inhaltes auf, und nicht erst nach Ende des gesamten Inhaltes.
Und außerdem: CSS-Styling gehört in eine externe Date und nicht in <div style=\'...\'> ;P
Weiss ich im Grunde, das habe ich so gemacht, weil der IE es immer anders interpretiert hat als der FF, es mag ja sein, dass es nicht perfekt ist aber ich lerne noch dazu :P war mein allerster Versuch ;)
Malia
Beitrag geändert: 28.3.2008 17:41:41 von malia -
naja, das sieht ja schon ganz nett aus, aber \"dynamisch\" kann man das nicht nennen :(
Ich bräuchte etwas das sich automatisch an die Länge des Inhaltes anpasst ... alles andere würde bei mehreren Seiten zu aufwendig werden ...
-
ist zwar keine optimale lösung, aber ich hab jetz einfach alle balken in der selben farbe -> man sieht nicht wo sie enden ^^
naja, falls doch noch wer eine Lösung findet: bitte posten ^^
danke trotzdem für die hilfe
mfg. -
So ich habe die Lösung:
http://cuchullain.redio.de/images/test/overall.html
Dabei ist hier die Variante gemacht, indem man ein Hintergrundbild verwendet.
Der Trick dabei ist, dass der Wrapper alles einfasst (ein Div um alle anderen Divs herum)
Wenn du jetzt einfach Farben willst, kannst du dem Wrapper eine Farbe geben (das wird dann die Farbe für links und rechts) und dem content (der mittleren Spalte) eine Farbe die dann auf den Wrapper \"drüber\" kommt.
(Wrapper hat die Hintergrundfarbe Rot damit du siehst was ich meine, wenn du also den Eintrag vom Backgroundimage löschst werden die Roten Seiteflügel zum vorschein kommen)
viel Spass -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
