Wie kann wandle ich ein solches Bild am besten in xhtml um. Was ist die beste Taktik um alle drei Bereiche mit Content füllen zu können? Wie sieht dazu ein gut gestaltete html bzw CSS Datei aus?
ich würde sagen: versuch macht klug :-)
[quote]die beste Taktik um alle drei Bereiche mit Content füllen zu können[/quote]
(1) Also in den blauen Container links könnte prima die Navi rein. Ich würde eine mit CSS formatierte Liste nehmen.
(2) In den umgebenden schwarzen Container würde ich den Seiteninhalt packen. Hier bieten sich Überschriften (H1 bis Hx) und Absätze (P) an.
(3) Im rechten Container machen sich Comments ganz gut. Nenn sie einfach "Sidebar" und leg Links für archivierte Nachrichten an. Da hat bestimmt auch noch ne Search-box platz.
Jo, so wird ein Schuh draus!
Upps, ich glaub das ist falsch rüber gekommen.
Mich interessiert, wie ihr dieses Layout in xhtml umsetzen würdet. Bei meinen Versuchen (von denen ich schon unzählige getätigt habe) ist nie was zufriedenstellendes rausgekommen. Der Inhalt der einzelnen Contentbereiche interessiert nicht.
Noch zu sagen bleibt, dass das ganze Layout mittig auf der Seite erscheinen soll.
gibts da nicht ganze Bücher drüber .....
.. die mit den Tieren drauf?
ich versteh die frage nich :/
1 container, der mittig im browser ist, da drin, der linke schwarze und der rechte schwarze, im linken schwarzen dann ein container mit dem blauen
die rundungen musste wie auch immer machen, kannste als bilder, hintergrundbilder oder als geteilte hintergrundbilder einbinden ...
was auch immer, das design ist auf jeden fall nicht einfach .... zumindest so wie du willst ...
bla blub
Hallo Fernando,
Marcel hat dir ja schon gute Hinweise gegeben. Für jemanden der sich damit auskennt kein großes Ding, ich würde ca. 1-2 Stunden (je nach Aufwand) schätzen. Wenn du dich nicht so auskennst müsstest du es aber sicher an einem Tag hinbekommen.
Nochmal der Hinweis von Marcel: die abgerundeten "Ecken" einzeln, der sonstige schwarze Bereich als Hintergrund. Ein Problem ist sonst immer wieder das die DIVs nicht gleich lang sind - wird also so umgangen.
Falls du allerdings eine komplette Umsetzung erwartest - wovon ich nicht ausgehe - wirst du hier wahrscheinlich niemanden finden.
Grüße,
Jonis
Phono Phunk ist vielleicht auch eine Inspirationsquelle ...
ich finde diese "templates" sehr gut. vielleicht ist da auch das richtige für dich dabei: http://intensivstation.ch/templates/
Super! Danke für eure Hilfe. Mir geht es nicht darum, dass mir jemand das komplette Layout umsetzt sondern um die Theorie dahinter. Wie teile ich die Grafik geschickt auf, so dass ich nicht gross Zeit dafür verschwenden muss die Seite für IE bzw ff zu optimieren.
Wie teilt ihr eine Box mit abgerundeten Ecken auf? Teilt ihr die Box in drei Teile auf (Oben, Mitte und Unten) oder nehmt ihr eine ganz andere Variante? Die Box soll nur vertikal variabel sein.
Grüße, Fernando
Du kannst es sogar ohne Bilder und ohne IE/Firefox-Stress basteln. Schau dir mal http://www.html.it/articoli/niftycube/index.html an (Beispiel 11 sollte für dich passen).
Selber basteln ist aber wahrscheinlich trotzdem eleganter, weil es nur drei Rundungsgrößen gibt und man keinen Rand haben kann. Musste gucken, obs für dich passt.
Optimal, die Intensivstation hat super geholfen! Immer wieder ein tolles Gefühl einen vormals langen Quelltext auf ein Minimum zu reduzieren. CSS ist schon was spassiges.
Ich hab die drei DIVs links "gefloatet". Das weisse DIV hab ich in das große schwarze reingepackt und mit position:relative positioniert. Bei dem linken, schwarzen DIV hab ich noch einen linksseitigen Margin reingemacht.
________
Im Endeffekt war das jetzt eine Arbeit von 10 Minuten :) Man muss immer nur die richtigen Beispiele zur Hand haben und dann funktioniert das problemlos.
cool! intensivstation hilft doch immer wieder :)
Seitentitel: Grundgerüst