zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden layout - 4 div´s, angeordnet wie ein fenster?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.06.2007, 03:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2007
Beiträge: 9
Guybrush befindet sich auf einem aufstrebenden Ast
Standard 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 03:39 Uhr) Grund: was vergessen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.06.2007, 03:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Guybrush Beitrag anzeigen
ist es in ordnung, die 4 div´s in ein containerdiv zu packen und dieses dann per css auszurichten?
Klar, auf jeden Fall. Gib dem div eine Breite, die ausreicht für die Breiten und Abstände der 4 divs innerhalb, und dann stelle diese per float nebeneinander und gib ihnen margin für die Abstände zueinander.

Entweder gibst Du dem umgebenden div dann eine passende Höhe (wäre bei Deinen festen Pixelwerten ja kein Problem), oder Du clearst die Floats innerhalb wie in den FAQ Punkt 2 beschrieben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.06.2007, 02:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2007
Beiträge: 9
Guybrush befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 27.06.2007, 11:16
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 27.06.2007, 17:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2007
Beiträge: 9
Guybrush befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 27.06.2007, 18:00
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 28.06.2007, 14:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2007
Beiträge: 9
Guybrush befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 28.06.2007, 16:53
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
 
Registriert seit: 09.08.2006
Beiträge: 317
Krischu befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 28.06.2007, 18:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2007
Beiträge: 9
Guybrush befindet sich auf einem aufstrebenden Ast
Standard

<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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bitte um Hilfe - CSS und Prozentangaben sprefer CSS 3 01.03.2011 05:11
Untermenü im IE nici CSS 10 22.06.2009 22:19
Layout selbst coden - Hilfe ! kgsbm CSS 4 25.03.2008 20:25
Probleme mit Layout kruemelchen26 CSS 0 15.05.2007 23:40
css layout problem mit 3 zentrierten div´s horst CSS 5 19.08.2005 10:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:21 Uhr.