[Gast]  Foren Web allgemein HTML und CSS / Stylesheets Wie Boxmodell/Layout am besten lösen?

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Web allgemein
Themen
Beiträge
Moderatoren
Letzter Beitrag
HTML und CSS / Stylesheets
1193
6413
FSt
19. Dez 2022, 21:28
Vitus
 

Wie Boxmodell/Layout am besten lösen?

holger_buns
Beiträge gesamt: 376
30. Mär 2011, 16:02
Beitrag # 1 von 5
Bewertung:
(2322 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,
wie würdet Ihr anhand der 2 Beispiele das Layout / Boxmodell aufbauen?

http://www.solardecathlon.ugent.be/nl
http://www.myiwdesigns.com

Ich habe ja eine Header, Content und Footer. Bei allen ist jeweils ein extra Hintergrund definiert. Dieses kann ich ja nicht über eine allgemeine Hintergrundgrafik im Body lösen, weil mein Inhaltsbereich ja mal mehr mal weniger Inhalt hat. Es müssten also der Header, Conten und Footer 100% breit sein mit Hintergrundgrafik oder?

Wie kann ich denn dann mein Boxmodell mit Div´s aufbauen, so dass der reine Inhalt mittig der Seite ist? Versteht Ihr was ich meine?

Gibt es dafür ein fertiges Template mit Div´s die ich irgenwo runterladen kann? Diese Seiten sieht man halt immer öfter. Ich habs schon gesehen, bei Wordpress als Template. Ich möchte es aber selber programmieren. Bei StuNicholls hab ich nix gefunden.

Gruss
Holli

(Dieser Beitrag wurde von FSt am 30. Mär 2011, 20:27 geändert)
X

Wie Boxmodell/Layout am besten lösen?

FSt
  
Beiträge gesamt: 1961
30. Mär 2011, 20:47
Beitrag # 2 von 5
Beitrag ID: #468025
Bewertung:
(2296 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Holli

Code 
<html> 
 
	<head> 
		<style type="text/css" media="screen"> 
			<!--	 
				body {margin: 0; padding: 0;} 
				#outerheader {background: #f00; height: 150px; width: 100%;} 
				#header {background: #900; width: 950px; height:150px; margin: 0 auto;} 
				#outercontent {background: #0f0; height: 450px; width: 100%;} 
				#content {background: #090; width: 950px; height:450px; margin: 0 auto;} 
				#outerfooter {background: #00f; height: 50px; width: 100%;} 
				#footer {background: #009; width: 950px; height:50px; margin: 0 auto;} 
				.clearfloat {clear: both; height: 0; font-size: 1px; line-height: 0px;} 
			--> 
		</style> 
	</head> 
 
	<body> 
			<div id="outerheader"><div id="header"></div></div><div class="clearfloat"></div> 
			<div id="outercontent"><div id="content"></div></div><div class="clearfloat"></div> 
			<div id="outerfooter"><div id="footer"></div></div> 
	</body> 
 
</html>


Meinst Du sowas?

Gruss
Martin

als Antwort auf: [#467994]

Wie Boxmodell/Layout am besten lösen?

holger_buns
Beiträge gesamt: 376
30. Mär 2011, 21:38
Beitrag # 3 von 5
Beitrag ID: #468035
Bewertung:
(2287 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ja, danke dir schon mal. Aber der Content hat ja eine feste Höhe. Der Bereich soll sich natürlich dem Inhalt anpassen. Also wenn mehr Inhalt als die 450px soll der Bereich natürlich nach unten größer werden, der footer natürlich entsprechend auch nach unten rutschen.

Gruss
Holli

als Antwort auf: [#468025]

Wie Boxmodell/Layout am besten lösen?

FSt
  
Beiträge gesamt: 1961
30. Mär 2011, 22:06
Beitrag # 4 von 5
Beitrag ID: #468039
Bewertung:
(2279 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Holli

Ist ja nur ein schnelles, kleines Beispiel. Den Rest kannst Du sicherlich an Deine Wünsche selber anpassen. Stichwort: min-height?

Gruss
Martin

als Antwort auf: [#468035]

Wie Boxmodell/Layout am besten lösen?

holger_buns
Beiträge gesamt: 376
4. Apr 2011, 11:59
Beitrag # 5 von 5
Beitrag ID: #468315
Bewertung:
(2182 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
O.K. Danke!

als Antwort auf: [#468039]
X

Aktuell

InDesign / Illustrator
MadeToTag unterstützt Adobe InDesign 2023 (v18.0)

| 31.10.2022

axaio_PR_Bild_300x300_10_22
Weitere Events

Neuste Foreneinträge


Skipt dass Bilder such "Kanten suchen"

PDF Korrektur Steps vergleichen.

Elemente aus CC Libraries als verkn�pftes Element platzieren geht nicht.

Hilfe: Druckprobleme mit gr�sse des Druckes

Project-Octopus.net

www.project-octopus.net

Bilder nach Import skalieren durch Script

Heute Abend Veranstaltung der IGUG Stuttgart

Javascript zur Kursivierung von Klammern mit Variabler

Stellvertretende Leitung Druckvorstufe (m/w/d) im sch�nen Ostfriesland
medienjobs
Weitere Stellenangebote