CSS: Div Layout

binäri · 17.10.2008, 17:30

Hi
Ich bin gerade dabei, mir ein tabellenloses Layout zu basteln, da komm ich auch schon nicht weiter.

Es sollen 3 Div's nebeneinander angeordet werden, und diese 3 sollen noch in einem umschließenden Div drin stecken.
Darunter dann nochmal 2 Div's nebeneinander, die auch von einen (insgesamt dem 7.) Div umschlossen werden.
Zum Abschluss noch ein einzelnes Div.

Anmerkung: Oben sind es 3 Div's, weil ich 3 Hintergrundbilder nebeneinader bräuchte. Falls es für dieses Ziel einen einfacheren Weg gibt, so teilt mir doch bitte den mit

Hier mal mein Quellcode:

Code:

<html>
	<head>
		<style type="text/css">
		div#links {float:left; border: 1px solid black;}
		div#mitte {border: 1px solid red; float: left;}
		div#rechts {border: 1px solid blue; background-color: silver; float: left;}
		div#navi {border: 1px solid orange; margin-bottom: 10px;}
		div#main {border: 1px solid navy; margin-bottom: 30px; clear: left;}
		div#logo {border: 1px solid cornflowerblue; float: left;
		div#content {border: 1px solid yellow; background-color: yellow; float: left;
		div#footer {border: 1px solid green;}
		</style>	
	</head>
	
	<body>
		<div id="navi">
		<div id="links">
		Links
		</div>
		<div id="mitte">
		Mitte
		</div>
		<div id="rechts">
		Rechts
		</div>
		</div>
		<div id="main">
		<div id="logo">
		Logo
		</div>
		<div id="content">
		Inhalt
		</div>
		</div>
		<div id="footer">
		Footer
		</div>
	</body>
</html>

Ich danke im Voraus

nikosch · 17.10.2008, 17:32

Habe das oben mal formatiert. Sag doch gleich "3-spaltiges Layout"

Manko10 · 17.10.2008, 17:58

Hallo,

bitte, suche dir etwas aus: Workshop - temp
Ich empfehle dir übrigens, einen Doctype zu verwenden (und bitte keinen Transitional-Doctype!), sonst kannst du dir ein vernünftiges und sorgenfreies CSS-Layout in den Wind schreiben.

nikosch · 17.10.2008, 17:59

Oder gleich: yaml

dr.e. · 17.10.2008, 22:33

Frag mal phpdummi, der ist Meister des CSS.

nikosch · 17.10.2008, 22:35

Zitat:

Frag mal phpdummi, der ist Meister des CSS

Ich würd ja auch helfen, wenns denn eine konkrete Frage gäbe.

binäri · 18.10.2008, 09:32

Also mein Problem ist einfach, dass die 3 , bzw. die 2 nebeneinander platzierten Div's nicht von einem Div umschlossen werden. (Dafür auch die ganzen Rahmenfarben, damit man das Problem besser sieht)
Die andere Frage wäre halt diese:

Zitat:

Anmerkung: Oben sind es 3 Div's, weil ich 3 Hintergrundbilder nebeneinader bräuchte. Falls es für dieses Ziel einen einfacheren Weg gibt, so teilt mir doch bitte den mit

dr.e. · 18.10.2008, 10:23

Zitat:

Zitat von nikosch

Ich würd ja auch helfen, wenns denn eine konkrete Frage gäbe.

phpdummi kann sicher auch hellsehen.

Koala · 18.10.2008, 14:36

vernünftiges Mehrspaltenlayout gibts im FF 3, welcher CSS 3 dahingehend unterstützt.
Es gibt zwar noch andere Lösungen, aber das sind alles Krücken.

Manko10 · 18.10.2008, 14:41

@Koala: bitte empfiehl nichts, was von vornherein die meisten Browser ausschließt. Zudem ist CSS 3 noch keinerlei Standard und bisher nur Working Draft und kann sich noch stark ändern.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layout Beispiele für Tabellen	andrew22	HTML, Usability und Barrierefreiheit	2	04.05.2007 19:45
2-spaltiges Layout	dh1sbg	HTML, Usability und Barrierefreiheit	7	13.11.2006 13:52
div layout und base href	andrew22	HTML, Usability und Barrierefreiheit	3	08.03.2006 01:48
css layout frage		HTML, Usability und Barrierefreiheit	1	23.02.2006 20:56
[Erledigt] Problem mit Layout bei Firefox		HTML, Usability und Barrierefreiheit	3	14.11.2005 15:42
Problem mit CSS Layout		HTML, Usability und Barrierefreiheit	5	15.10.2005 21:46
CSS Layout macht Probleme mit Firefox	Wimme	HTML, Usability und Barrierefreiheit	2	15.10.2005 13:33
problem mit layout		Beitragsarchiv	12	13.10.2005 12:41
[Erledigt] Probleme bei Fehlerausgabe und bei Layout		PHP Tipps 2005-2	3	01.10.2005 09:26
[Erledigt] Layout mit CSS - Habe Problem		HTML, Usability und Barrierefreiheit	3	10.05.2005 17:28
[Erledigt] <div> layout funtzt nicht!!		HTML, Usability und Barrierefreiheit	7	20.04.2005 19:10
Layout mittels DIV und CSS		HTML, Usability und Barrierefreiheit	4	21.12.2004 13:02
Layout alt gegen Neu :)	themonk	Off-Topic Diskussionen	65	26.10.2004 13:53
[Erledigt] Haupt Layout erzeugen		PHP Tipps 2004	10	17.08.2004 16:00


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.10.2008, 17:32
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Habe das oben mal formatiert. Sag doch gleich "3-spaltiges Layout" __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.10.2008, 17:58
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Hallo, bitte, suche dir etwas aus: Workshop - temp Ich empfehle dir übrigens, einen Doctype zu verwenden (und bitte keinen Transitional-Doctype!), sonst kannst du dir ein vernünftiges und sorgenfreies CSS-Layout in den Wind schreiben. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

17.10.2008, 17:59
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Oder gleich: yaml __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.10.2008, 22:33
dr.e. Moderator und Wett-König Registriert seit: 21.05.2008 Beiträge: 3.654 PHP-Kenntnisse: Fortgeschritten	Frag mal phpdummi, der ist Meister des CSS. __________________ Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

18.10.2008, 14:36
Koala Erfahrener Benutzer Registriert seit: 28.09.2008 Beiträge: 1.168 PHP-Kenntnisse: Fortgeschritten	vernünftiges Mehrspaltenlayout gibts im FF 3, welcher CSS 3 dahingehend unterstützt. Es gibt zwar noch andere Lösungen, aber das sind alles Krücken.

18.10.2008, 14:41
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	@Koala: bitte empfiehl nichts, was von vornherein die meisten Browser ausschließt. Zudem ist CSS 3 noch keinerlei Standard und bisher nur Working Draft und kann sich noch stark ändern. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”