Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS. 3 Spalten mit div“

Whykiki

Komischer Typ und Köter

Hallo,

meine Probleme gehen weiter, irgendwie scheine ich mir immer genau das rauszusuchen, was generell mit Problemen behaftet ist. Ich greife hier auch ein paar Themen aus meinem anderen Thread wieder auf, z.B. die transparenten Borders...

So, mein Problem:

Ich möchte weg von der blöden Tabelle und will das Deisgn komplett in CSS und mit div's umsetzen, nur scheint ein "vernünftiges" 3 Spaltendesign mit Header, Footer und sich streckenden 3 Spalten so ohne weiteres damit nicht möglich zu sein. Bei meiner Googlesuche, hab ich sogar herausgefunden, dass dieses Thema eine Art "Holy Grail" sein soll (hab ich nicht gesagt...)

Zum Einstieg, so soll es aussehen: (2te Grafik mit Farben, damit ich besser erklären kann)


D.h. ich will einen Header, an den und an den Content will ich dann die halbtransp. Schatten einbauen (siehe Grafik, die grünen Bereiche).
Im Content Container (so heisst er bei mir) befindet sich ein weiterer Container, in den ich meine weiteren Seite dann inlcuden will...(siehe weiss und wieder grün).
Unten die beiden roten Ecken sollen die Abschlüsse für den Schatten sein u.s.w.

Ich hoffe man kann daraus erkennen, was ich bauen will.
Die obere Grafik ist mal ein Screenshot aus GENAU DEM Design, wenn ich es mit Tabellen baue.
Krass mit Tabellen in weniger als 5min. erstellt und wenn ich das Pendant als DIV-Layout OHNE Tabelle bauen will, daran sitze ich jetzt schon 2 Tage.

Das ganze Konstrukt soll horizontal zentriert sein und bündig oben top:0px; stehen....


Vielleicht haben ja die Cracks von euch Ideen und verhindern ein weiteres Tabellendesign. Meine Entscheidung steht nämlich auf der Kippe...mit Tabellen ist das echt soooo simpel.
Ach ja, muss natürlich auf allen Browsern gleich aussehen, wenn möglich ohne Hacks/Ptaches...

Danke danke danke!!!!
 

martinmm

punkt?!.

AW: CSS. 3 Spalten mit div

Erstmal die Frage - warum willst du ne neue Seite? Die alte gefällt mir viel besser. Gut, trotzdem:

äußerster Div, mittig zentriert, absolut positioniert (damit sich die anderen danach richten können)
div, absolut links div, absolut pos. div absolut von links gemessen
div, absolut oben pos.
div2 absolut von oben pos., höhe nicht festg.
div für include innerhalb div2, absolut def.
div für footer (inkl. schatten unten), innerhalb div2, absolut unten


ich hoffe, du kennst dich aus
 

Whykiki

Komischer Typ und Köter

AW: CSS. 3 Spalten mit div

Die Seite wird nicht für mich...meine andere bliebt so bestehen. Danke!

Ich probiere es gleich aus.

Edit:
Doch ich kenne mich aus, zwar nicht der "Mega-Kenner" (dann würd ich hier nix fragen...), aber ich verstehe schon wie CSS und HTML geht ;-)
Aber sorry, ich komme gerade mit deinem Bspl. nicht klar. Nett, dass dus erklärt hast, aber richtig verstehen tu ichs nicht. Sorry!!!
 
Zuletzt bearbeitet:

xero7

» Unterdrück(t)er

AW: CSS. 3 Spalten mit div

Ganz einfach:

Habe es mal schnell für dich gecodet.

Code:
#header {
width: 800px;
height: 100px;
background-image: url(header.jpg) no-repeat;
}

#content {
width: 800px;
background-image: url(content.jpg);#
margin: 0px auto;
}

#includekrams {
width: 400px;
background-color: green;
}

#footer {
width: 800px;
height: 50px;
background-image: url(footer.jpg) no-repeat;
}

Nur bei dir fehlt noch eine Navigation
 

Whykiki

Komischer Typ und Köter

AW: CSS. 3 Spalten mit div

OK danke soweit.

Und wie setze ich jetzt die beiden Spalten links und rechts, sowie die beiden unteren Ecken?? (siehe Rot)

Haste ne Idee?? Dsa ist ja grade mein Problem, die beiden äußeren (grün) müssen sich auch strecken mit dem Inhalt...

Edit: Die Navigation will ich hinterher absolut in dem weissen Contenbereich positionieren, mir gehts erstmal um das Ganze drumherum.
 
Zuletzt bearbeitet:

xero7

» Unterdrück(t)er

AW: CSS. 3 Spalten mit div

Code:
<div id="content">
  <div id="links"></div>
  <div id="inhalt"></div>
  <div id="rechts"></div>
</div>
 

Duddle

Posting-Frequenz: 14µHz

AW: CSS. 3 Spalten mit div

Du brauchst 3 Grafiken:
Eine für die obere Begrenzung, die schliesst die Ecken mit ein.
Eine für die untere Begrenzung, praktisch nur eine Spiegelung der ersten Grafik.
Eine für die Mitte, die kachelbar ist. Heisst, sie muss sich problemlos unauffällig aneinander legen lassen.


Wenn sich dann dein Content vergrößert, streckt sich ja der Content-Container und verschiebt den Footer. Der ganze Raum zwischen Header und Footer wird dann von der Mittelgrafik benutzt, wie bei einem Akkordeon.


Duddle
 

Whykiki

Komischer Typ und Köter

AW: CSS. 3 Spalten mit div

@xero:

Sry, nee so meine ich das nicht...theoerthisch müsste das so ähnlich sein:
Code:
<div id="container"><!--Ausrichtung-->

<div id="header"></div>
<div id="links"></div>

<div id="content">

<div id="include"></div>

</div>

<div id="rechts"></div>
<div id="footer"></div>
</div>

Bei meinem Besipiel fehlen jetzt noch die unteren Ecken....naja und das Problem, dass sich alle strecken nach der Höhe von "include", dabei müssen:

Links, Rechts und Content immer exakt gleich lang sein...

siehe dazu oben mein erstes Bild!!!

Edit:
@duddle:
Jaaa....da kommt ja mein Problem der letzten Tage zum Tragen, ich will den Rand mit einem halbtransparenten Gif machen, daher brauche ich die extra Spalte links und rechts, weil sonst habe ich ja wieder Probleme bei der Verschiebung der BG-Grafik und meiner Contentgrafik. Daher wollte ich den Content randlos machen und die Schatten seperat einfügen...

D.h. mit "nur" drei Grafiken komme ich in keinem Fall aus....

Habt ihr verstanden worauf ich hinauswill??
Es soll im Endeffekt genauso aussehen, wie meine erste Grafik, d.h. wenn ich allen div's eine Border gebe, sollte das rauskommen, wies oben steht...das hab ich mit Tabellen in 5min. gemacht und den Screenshot davon hier reingestellt.
 
Zuletzt bearbeitet:

Duddle

Posting-Frequenz: 14µHz

AW: CSS. 3 Spalten mit div

Du darfst nicht in Tabellenzellen denken.
Hast du schonmal mit einem fortgeschrittenen Bildbearbeitungsprogramm wie Photoshop oder GIMP gearbeitet? Dort arbeitest du mit Layern/Ebenen/Schichten. Bei <div>-basierten Layouts musst du in Ebenen denken.

Beispiel Hintergrundschatten: Eine Ebene ist dein halbtransparentes PNG, darüber liegt noch eine Ebene (etwas kleiner natürlich) mit dem eigentlichen Inhalt. Wenn du das noch streckbar machen willst, musst du die Grafiken jeweils oben und unten wie im vorherigen Post erwähnt zerschneiden.

Schwieriger wird es, wenn die Seite auch nach links und rechts auseinanderziehbar sein soll. Dann musst du, so weit ich weiß, leider jede einzelne Kante mit divs nachempfinden.

Edit: Ich hab mal kurz ein Beispiel gebastelt. Schattentest



Duddle
 
Zuletzt bearbeitet:

Refus

aka Noisy

AW: CSS. 3 Spalten mit div

ich würde es so machen:
#header {
width:900px;
height:150px;
margin:auto;
border:1px solid #000000;
}
#content {
width:900px;
margin:auot;
min-height: 12px;
border:1px solid #000000;
}
#footer_1 {
width:900px;
margin:auto;
min-height: 12px;
border:1px solid #000000;
}
#footer_2 {
width:900px;
margin:auto;
min-height: 12px;
border:1px solid #000000;
}
Da kannst du wunderbar weiter mit arbeiten, einfach alle divs so unter einander kleistern, sollte funzen ;)
 
Zuletzt bearbeitet:

Refus

aka Noisy

AW: CSS. 3 Spalten mit div

Ja kein Problem war ja nicht viel.
Jeweils eben als Schatten ein BG Bild nehmen (siehe Duddle) 1px hoch.
Unten dann die Ecken noch positionieren, in der Mitte kannst du deinen Content noch rein machen und fertig.

Mein 500. Post :D
 
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

Statistik des Forums

Themen
175.158
Beiträge
2.581.872
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben