|
|||
layout - 4 div´s, angeordnet wie ein fenster?
hallo,
ich wende mich an euch, weil ich mittlerweile mit meinen nerven am ende bin. ich versuch nun schon seit stunden, ein layout mit div´s zu realisieren, welches mir 4 boxen mit 300x300 anzeigt, die horizontal wie vertikal einen abstand von 30px haben. aber so einfach wie ich mir das gedacht habe, ist es anscheinend doch nicht. jetzt würde ich gern ein wenig "schmutzen" und mal die frage in die runde werfen, ob da jemand einen codeschnipsel rumliegen hat, den ich verwenden kann? prinzipiell: ist es in ordnung, die 4 div´s in ein containerdiv zu packen und dieses dann per css auszurichten? wie bekomm ich es hin, dass ich zwischen den 4 div´s den abstand habe? ich weiss, es wurde sicher schon einige male behandelt, aber die suche hat nichts für mich verwertbares zu tage gefördert. vielen dank im voraus mfg guybrush //edit: code hab ich absichtlich keinen eingefügt, da ich jetzt mal alles in den müll geschmissen hab und "from-scratch" anfange... Geändert von Guybrush (25.06.2007 um 02:39 Uhr) Grund: was vergessen |
Sponsored Links |
Sponsored Links |
|
|||
hallo heiko_rs,
vielen dank für die antwort... ich habs auch durch ein wenig intelligenteres googeln und einfach mehr nachdenken schon zusammengebracht, allerdings happert es noch an der einen oder anderen stelle... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <STYLE type="text/css"> body {background-color:#efefef; font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} </style> </head> <body> <div> <div style="background-color:#cccccc;width:300px; height:200px; border:1px solid #000; margin-left: 177px; margin-top: 20px; padding:10px;float:left;"> DIV#1 </div> <div style="background-color:#cccccc;width:300px; height:200px; border:1px solid #000; margin-left: 20px; margin-top: 20px; padding:10px;float:left;"> DIV#2 </div> <div style="background-color:#ffffff;width:100%; width: 664px; height:30px; border:1px solid #000; margin-top: 190px;margin-left: 176px;"> NAVIGATION </div> <div style="background-color:#cccccc;width:300px; height:200px; border:1px solid #000; margin-left: 177px; margin-top: 20px; padding:10px;float:left;"> DIV#3 </div> <div style="background-color:#cccccc;width:300px; height:200px; border:1px solid #000; margin-left: 20px; margin-top: 20px; padding:10px;float:left;"> DIV#4 </div> </div> </div><br> </body> </html> das wär mein file - es passen zwar die boxen, aber das navigations-div sollte in der mitte der beiden "doppelboxen" sein (also oben 2 boxen, mitte navi-div, unten 2 boxen). das will weder im ie noch im ff, wobei beide seiten in den beiden browsern anders ausschauen. wo liegt denn da der hund begraben? mfg guybrush |
|
||||
clear ist Dein Freund.
Der Code ist jetzt nicht ganz sauber, aber ich hab's mal so abgeändert, wie Du es wahrscheinlich haben willst: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>blub</title> <style type="text/css"> body { background-color:#efefef; font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } </style> </head> <body> <div style="width:666px;margin:0 auto;"> <div style="background-color:#cccccc;width:300px; height:200px; border:1px solid #000; margin-top: 20px; padding:10px;float:left;"> DIV#1 </div> <div style="background-color:#cccccc;width:300px; height:200px; border:1px solid #000; margin-left: 20px; margin-top: 20px; padding:10px;float:left;margin-bottom:20px;"> DIV#2 </div> <div style="background-color:#ffffff;width:100%; width: 664px; height:30px; border:1px solid #000; clear:both;"> NAVIGATION </div> <div style="background-color:#cccccc;width:300px; height:200px; border:1px solid #000; margin-top: 20px; padding:10px;float:left;"> DIV#3 </div> <div style="background-color:#cccccc;width:300px; height:200px; border:1px solid #000; margin-left: 20px; margin-top: 20px; padding:10px;float:left;"> DIV#4 </div> <div style="clear:both;"></div> </div> </body> </html> |
|
|||
danke mantiz,
so funktionierts prachtvoll... aber die eine oder andere frage hätt ich noch, wenn ihr mir da auf die schnelle noch etwas helfen könntet? - wie richte ich die div´s dynamisch zentriert aus? sodass sie immer mittig sein, egal welche auflösung verwendet wird? danke |
|
||||
So, wie ich das in dem äußeren div gemacht habe. Du gibst dem div eine Breite und anschliessend margin: 0 auto;
Oder, wenn Du oben und unten verschiedene Abstände möchtest, dann margin: 1em auto 2em auto; Also dort, wo der Wert für rechts bzw. links steht nimmst Du auto. |
|
|||
ich habs nun schon fast so hinbekommen, wie ich wollte...
nur das eine oder andere bekomm ich nicht gebacken: unter WGKunterbunt wäre das fast fertige design zu sehen. css ist bis jetzt valide, xhtml noch nicht (es fehlt noch ein doctype - der ärgert mich noch ein bißchen). aber mein problem ist der abstand zwischen den unteren und den oberen div´s - das ist einfach zu viel. und wenn ich da einen wert anpasse, verschiebt sich das komplette layout. und das flash rechts oben bekomm ich auch nicht mittig in das div. gleiches problem wie mit dem abstand. immer, wenn ich nur einen wert von 10 auf 20px ändere oder so, zerstört es mir das ganze layout. wenn mir da vielleicht noch wer unter die arme greiffen könnte wär ich echt dankbar. vielen dank schonmal bis jetzt, habt mir schon sehr weitergeholfen! mfg guybrush |
|
||||
Ich habe zwar noch nicht die Lösung für Dich, aber die Positionierung mittels
<br > (abgesehen von der nicht XHTML-konformen Notation, statt <br/>) würde ich sein lassen. Nimm auch die in-line styles heraus und verlagere die ins CSS. Dann wird die Sache übersichtlicher und Du findest Fehler selbst auch schneller. So wie ich das beim Überfliegen sehen konnte, packst Du etwas 320x220 großes in ein 300x200 DIV. Auch mit border im ersten DIV stimmt was nicht. (Oberer weißer Rand).
__________________
-- Viele Grüße Christoph |
|
|||
<br/> hab ich gerade geändert, jedoch noch nicht raufgespielt.
die inlinestyles sind quasi "gewachsen", angefangen beim border, und dann halt erweitert. wenn ich die 2-3 fehler ausgemerzt habe, hätt ich sowieso nochmal alles aufgeräumt und extern in ein eigenes css-file gelegt. ich glaub, du hast das mit der größe der div´s falsch gesehen (oder ich hab einen fehler drinnen: die 4 div´s sind 320x220, und das äußere div ist halt 2x320 + mittlerer steg + border. kann aber auch sein, dass ich irgendwo einen fehler drinnen hab. so wie oben beschrieben sollte es auf jeden fall sein danke schonmal für die info, ich schaus mir noch genau an. mfg guybrush |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bitte um Hilfe - CSS und Prozentangaben | sprefer | CSS | 3 | 01.03.2011 04:11 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 21:19 |
Layout selbst coden - Hilfe ! | kgsbm | CSS | 3 | 25.03.2008 19:25 |
Probleme mit Layout | kruemelchen26 | CSS | 0 | 15.05.2007 22:40 |
css layout problem mit 3 zentrierten div´s | horst | CSS | 5 | 19.08.2005 09:34 |