Wie würdet ihr das in DIV umsetzen?

[n3012]

ich versuche gerade meine erste Valide Homepage ohne Tabellen zu bauen... bin also was das programieren angeht noch ein neuling

aber ich knabber jetzt am inhalt meiner seite. ich möchte diese inhalts boxen da natürlich auch mit div machen.. aber irgendwie fehlt mir das logische denken wie ich das umsetzen kann.

ImageShack - Hosting :: hpji2.jpg so soll die seite später ungefär aussehen...

Stand Letzte Woche
also zum kleinen headbereich wo später die newsüberschrift stehen soll:
die abgerundete ecke würde ich als JPG machen, den verlauf mach ich dann als background-IMG. und die 3 grünen glaskugeln rechts wieder als jpg.
dann soll darunter die box wo dann der inhalt bzw der text drinn steht.

sind das jetzt 4 Div Boxen?
und wie kann ich dann die oberen 3 so anordnen das diese nebeneinander sind.
wie würdet ihr das in DIV umsetzen?
und wie bekomm ich dann z.b. die kleine box mit der dame und dem headset neben die inhalts box?


///// EDIT: 31.03.2008

Ich habe mir jetzt überlegt die wie nach den bisherigen tips hier.. zwei divs anzulegen "left_content" und "right_content" und in diese div kommt dann der rechte und linke inhalt.

meine momentanen probleme:
ich habe einen großen container... (um diesen habe ich mal einen orangen rahmen gezogen)
und dieser soll in der mitte des browers sein (also margin 0 auto)

und natürlich 100% height haben. aber das hat er anscheind nicht...
vielleicht könnt ihr mir helfen das erstmal zu lösen dann kommen die nächsten prob

hier der LINk zum bisherigen programierungstand:

HTML seite:
CSS Datei:

nicht wunder... die navi hat ne extra css, aber die brauchen wir ja auch nicht


////// EDIT 1.04.2008

So, das mit der gesamtbox habe ich hinbekommen...
die ist jetzt af 100% und vergrößert sich auch mit dem Inhalt.

neues problem

Ich habe ein große Div Box (DIV 1) in dieser befinden sich links und rechts zwei Boxen (DIV 2 und DIV 3). Problem ist wenn ich Box2 mit inhalt fülle geht Box 1 nicht nach unten mit. das heisst die höhe skaliert sich nicht.

bei der blauen funktioniert es.

#content {
position:relative;
background:red;
margin:0 auto;
margin-top:4px;
border:2px solid black;
width:938px;
}
#content_left {
float:left;
background:green;
top:0px;
left:0px;
width:652px;
min-height:200px;
}
#content_right {
background:blue;
top:0px;
left:650px;
width:288px;
min-height:200px;
}

Bisherige Probleme:
Logische anordnung der DIVS [Gelöst]
100% Height des Gsamtcontainers [Gelöst]

 

[ingoS]

Das kommt alles stark darauf an, wie puristisch du das Ganze sehen möchtest.
Wenn du sowieso das komplette Layout neu gestaltest, schlage ich dir vor, es auch gleich semantisch sinnvoll zu tun d.h. Text kommt in Absätze <p></p>, Überschriften sind auch wirklich Überschriften <h1></h1>, <h2></h2> etc.
"Herzlich Willkommen[...]" wäre also eine Überschrift <h1>, die du mit CSS nach Wunsch formatierst, das darunter ein Absatz <p></p> mit eigener Formatierung. Die Bilder fügst du so ein, wie du es vorgeschlagen hast.
Die beiden linken Boxen mit dem Text insgesamt umrahmst du wiederum mit einem <div></div> und die rechten Boxen mit den Bildern und den Erreichbarkeitszeiten auch. Das div um die Boxen, die links sein sollen, versiehst du mit float: left; und gibst ihm die zutreffende Breite, das andere schiebst du mit margin-left: 123px um die entsprechende Breite vom Rand weg. Fertig.

 

[n3012]

ahhh super vielen dank... der schlüssel hat mir gefehlt einfach zwei große div boxen anzulegen die den inhaltsbereich in zwei teile teilen...

die texte und überschriften richtig zu machen ist auch mein grundgedanke... mein ziel ist halt die seite valide hinzubekommen und nach dem standart halt.

aber wie bekomm ich jetzt die drei bilder bzw divboxen nebeneinander?
soll ich die auch einfach mit top und left in der css positionieren?

 

[ingoS]

aber wie bekomm ich jetzt die drei bilder bzw divboxen nebeneinander?

Wieso drei? Du hast den Inhalt doch in zwei Teile geteilt - den linken Teil versiehst du mit float: left; sowie width: 123px; und den rechten mit margin-left: 123px;.

soll ich die auch einfach mit top und left in der css positionieren?

Wieso hast du überhaupt irgendwas mit top und left positioniert? margin-top und margin-left sollten eigentlich ausreichen.

 

[n3012]

ahhh ok verstehe.... aber ich meinte halt die leiste wo dann die h1 drinn steht "herzlich willkommem bla" das sind ja in dem sinne 3 divs. einmal die runde ecke... dann der verlauf als HG-Repeat und dann noch die 3 grünen kugeln. die muss ich ja auch irgendwie nebeneinander bekommen...

hab das jetzt mit float left gemacht, aber weiss halt nicht ob das der optimale weg ist, ich will ohne tricks programieren.

und ich will die DIV klasse für die box dann so lassen, das ich halt nur die eine klasse habe und die box mehrmals auf der seite benutzen kann...


danke für deine mühe :) total tolles forum hier

 

[ingoS]

Soll das Ganze eine feste Breite haben?
Dann kannst du nämlich die runde Ecke, die Kugeln und den Hintergrundverlauf in ein breites jpg-Bild packen und als Hintergrund für die Überschrift nehmen. div neben div zu reihen ist eigentlich auch kein schöner Stil, jedenfalls empfinde ich das so.
Danke für das Lob, hört man in der Form viel zu selten.:-)

 

[n3012]

ja das hat mir mein dozent auch vorgeschlagen (mach einen HTML kursus) aber ich will ja die ladezeit gering halten.. deswegen will ich so ein großes jpg vermeiden. der header frisst ja schon genug... und man könnte dann die dann die teile nochmal für die kleinen boxen rechts benutzen...

ich halte dich (euch) auf den laufenden und poste die tage mal ne aktuelle version wie weit ich bin

danke nochmal

 

[n3012]

Hallo mal wieder... Bitte mal ins EDIT oben reinschauen... es gibt wieder neue Fragen :) vielen dank nochmals...

 

[ingoS]

Für 100% Höhe muss ein wenig getrickst werden:
frixon.de - Die Webpräsenz der anderen Art - Tutorials/Eine dynamische Höhe von 100%

 

[n3012]

ich hab meinen fehler gefunden... ich hatte einige DIV boxen mit position:absolute gesetzt und die habe ich jetzt auf relative gesetzt! ich programier morgen weiter und stell dann meine nächsten fragen der thread hier gehört ja anscheinend uns beiden +hehe*

wünsch dir noch einen schönen abend...
n3012

 

[ingoS]

ich programier morgen weiter und stell dann meine nächsten fragen

Mach das, aber das dann bitte nicht wieder mit einem Doppelpost.

wünsch dir noch einen schönen abend...

Danke, ebenfalls. :mrgreen:

 

[n3012]

Guten Tag :)
was meinst du mit Doppelpost? Dachte so kommts dann wieder in die "NEWPOSTS" rein.

ich hab wieder editiert... neues problem :)

 

[Efchen]

Moin!

Problem ist wenn ich Box2 mit inhalt fülle geht Box 1 nicht nach unten mit. das heisst die höhe skaliert sich nicht.

Das ist richtig. Es gibt ja auch keine Verbindung zwischen den beiden Boxen. So eine Verbindung gibt es nur bei Tabellen. Moderne Browser können da IMHO mit display:table-cell was drehen, aber der IE kann das natürlich nicht, daher scheidet die Lösung eigentlich von vornherein aus.

Je nachdem, welche Anwendung dahintersteckt, kann man aber das ein oder andere tricksen.

Ich finde Deine Probleme eher ziemlich trocken, weil der Inhalt fehlt. Die meisten Probleme sind mit Inhalt und Anwendungsbeispiel viel einfacher zu lösen. Dazu zählt auch die div-Suppe, die Du kochst. Viele Menschen denken "heutzutage ist es in div-Layouts zu machen". Dass das völliger Käse ist, verstehen die wenigsten. Man kann CSS-Layouts auch ganz ohne divs machen. CSS-Design ist viel einfacher, wenn man HTML verstanden hat und das auch vorher angewendet hat. Also die Reihenfolge Inhalt-HTML-CSS einhält.

Schöne Grüße,
-Efchen

 

[n3012]

es sollen ja nicht beide boxen die gleiche höhe haben... das is doch unsinnig für mein projekt...

aber verstehe ich das jetzt richtig das ich ne tabelle verwenden soll?
ich kann mir nicht vorstellen das es hier für keine lösung gibt...

aber wozu brauchst du inhalt in meinen fragen? der inhalt der webseite geht erstmal niemanden was an.

EDIT///
sagt mal is es okay, wenn die linke box relative ist und die rechte absolute???

 

[Efchen]

Hallo nochmal,

es sollen ja nicht beide boxen die gleiche höhe haben... das is doch unsinnig für mein projekt...

Dann verstehe ich wohl die Fragestellung nicht. Du hast gefragt, warum sich die Größe von Box1 nicht mit ändert, wenn sich die Größe von Box 2 ändert.

aber verstehe ich das jetzt richtig das ich ne tabelle verwenden soll?

Nö. Tabellen verwendet man nur, wenn man tabellarische Daten auszeichnen will. Deine Frage bezieht sich doch aufs Layout, damit haben Tabellen nichts zu tun.

ich kann mir nicht vorstellen das es hier für keine lösung gibt...

Es gibt für so vieles keine Lösung :-)

aber wozu brauchst du inhalt in meinen fragen? der inhalt der webseite geht erstmal niemanden was an.

Was abstrakt (zum Testen des Layouts) so aussieht, sieht mit Inhalt vielleicht wieder ganz anders aus. Aber ich habe Dein Image übersehen, das wohl Dein Wunschlayout darstellen soll.

Wenn sich Deine Frage auf das Image bezieht, dann kann ich meiner Antwort nichts hinzufügen. Wenn sich die Höhe der Box2 (hier rechts) verändert, verändert sich logischerweise die Höhe der Box1 nicht mit. Aber auch, wenn ich mir Dein Image vom Wunschlayout so ansehe, weiß ich einfach nicht, warum sich die Höhe der Box1 ändern sollte, wenn sich die Höhe der Box2 ändert. Anhand des geplanten Layouts sehe ich dafür keine Notwendigkeit.

sagt mal is es okay, wenn die linke box relative ist und die rechte absolute???

Ich würde die eine floaten lassen und gar nicht mit position arbeiten.

Bis zum nächsten Mal,
-Efchen

 

[n3012]

das ist ja kein layout...das is nur der content bereich meiner seite... es gibt natürlich noch nen header usw.

aber wenn ich in BOX2 meinen text reinschreibe... dann vergrößert sich die box, und die box soll doch nicht über BOX1 hinausragen... (das tut sie unter position relative auch nicht) aber dann bekomm ich BOX3 ja nichtmehr neben BOX2

 

[Efchen]

Ach so,

jetzt fällt mir gerade auf, dass ich die Boxen verwechselt habe, entschuldige bitte!

Wenn Du Elemente absolut oder relativ positionierst, nimmst Du sie aus dem normalen Textfluss (genauso wie bei float). Ein umschließendes Element (hier Box1) umschließt diese Boxen dann nicht mehr völlig.

Wenn Du Box2 (die linke innere Box) links floaten ließest, Box3 (die innere rechte) weder positionierst, noch floatest, dann passt sich Box1 (die umschließende) zunächst der Größe von Box3 an, Box2 könnte theoretisch darüber hinaus ragen.

Dieses Phänomen lässt sich lösen durch ein auf Box3 folgendes Element, das die Eigenschaft clear:left; bekommt, d.h. "beende alle floats auf der linken Seite und mach im normalen Textfluss weiter. Dann erweitert sich Box1 in der Höhe um Box2 herum.

Nach meinem Wissensstand kann man die absolute und relative Positionierung nicht durch clear "beenden". Ich sehe aber auch keinen Grund, position überhaupt zu verwenden, float ist da eigentlich das gebräuchliche Mittel.

Damit müsste es dann also klappen.

Gruß,
-Efchen

 

[n3012]

also ich hab es jetzt so gemacht

#content {
position:relative;
background:red;
margin:0 auto;
margin-top:4px;
border:2px solid black;
width:938px;
}
#content_left {
float:left;
background:green;
top:0px;
left:0px;
width:652px;
min-height:200px;
}
#content_right {
clear:left;
background:blue;
width:220px;
margin-left:660px;
min-height:500px;
}

und es sieht dann so aus:




funktioniert also auch nicht... nur so halb
die blaue box soll ja neben die grüne

 

[Efchen]

die blaue box soll ja neben die grüne

Das hast Du ihr aber nicht gesagt. Du hast gesagt, dass die blaube Box unterhalb der grünen anfangen soll (mit "clear:left"). Diese Eigenschaft (clear) musst Du einem Element geben, was nach Deinen beiden Boxen kommt.

Gruß,
-Efchen

 

[n3012]

da kommt aber kein element mehr... das sollen halt einfach zwei spalten sein... in die jeweils inhalt reinkommt