✔ komplexes Layout? mit divs umsetzen

Colt · 24. September 2007

Hallo Community,

Divs sind - leider - Neuland für mich. Die meisten Ansätze die man im Web findet, helfen einem beim Entwerfen von einfachen Layouts. Mein entwickeltes Layout ist etwas komplexer? und wahrscheinlich verschachtelter? als üblich.

im Anhang das Layout der zukünftigen Webseite zur besseren Orientierung.

Frage 1:
Kann das Layout überhaupt komplett mit divs umgesetzt werden, ohne mit fixen Positionierungen zu arbeiten?

Frage 2: Falls ja, habt ihr einen Ansatz?

versuchter Lösungsansatz:

nur Content (grüner Rahmen im angehängten Dokument)

Besten Dank im Voraus

Code:

#subnav {
	float:left;
	padding: 10px;
	width: 180px;
	height:auto;
	background:white;
	border:1px solid silver;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: relative;
	top: auto;	
}

#suchbegriffe {
	float:left;
	padding:10px;
	width:180px;
	height:auto;
	background:white;
	border: 1px solid silver;
	margin-top:15px;
	position: relative;
	left: auto;
	top: auto;
	clear: left;
	
}

#Artikel_1{
	float:left;
	padding:10px;
	width:470px;
	height:100px;
	border:1px solid silver;
	margin-left: 19px;
	margin-top: 15px;
	position: relative;
	top: auto;
	clear: none;
	
}

#Artikel_2 {
	float:left;
	padding:10px;
	width:470px;
	height:100px;
	border:1px solid silver;
	margin-left: 19px;
	margin-top: 15px;
	z-index: 4;
	position: relative;
	left: auto;
	clear: left;
}

#Artikel_3 {
	float:left;
	padding:10px;
	width:470px;
	height:100px;
	border:1px solid silver;
	margin-left: 19px;
	margin-top: 15px;
	z-index: auto;
	position: relative;
	left: auto;
	top: auto;
	clear: none;
}

#Werbung{
	padding:10px;
	width:150px;
	height:auto;
	border:1px solid silver;
	margin-left: 15px;
	margin-top: 15px;
	float: left;
	position: relative;
	clear: none;
	
}

#Umfrage{
	padding:10px;
	width:150px;
	height:auto;
	border:1px solid silver;
	margin-left: 15px;
	margin-top: 15px;
	float: left;
	position: relative;
	clear: none;
}

Code:

<body>
<div style="width:900px;margin:0px auto;text-align:left;>

<div id="Standpunkt">wo befinde ich mich
</div>

<div id="subnav">
  <p align="left">Text 1</p>
  <p align="left">Text 2</p>
  <p align="left">Text 3</p>
  <p align="left">Text 4</p>
  <p align="left">Text 5</p>
  <p align="left">Text 6</p>
</div>
<div id="Artikel_1"></div>

<div id="Werbung"></div>

<div id="Artikel_2"></div>

<div id="suchbegriffe"></div>

<div id="Artikel_3"></div>

</body>

Maik · 24. September 2007

Hi,

ich hab dir mal fix ein Modell gestrickt, und alles ohne fixe Positionsangaben

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Colt</title>

<style type="text/css">
<!--
#leftCol {
float:left;
width:200px;
}

#rightCol {
float:right;
width:170px;
}

#centerCol {
margin:0 180px 0 210px;
}

#subnav {
        padding: 10px;
        background:white;
        border:1px solid silver;
        margin-top: 15px;
}

#suchbegriffe {
        padding:10px;
        height:auto;
        background:white;
        border: 1px solid silver;
        margin-top:15px;
}

#Artikel_1{
        padding:10px;
        height:100px;
        border:1px solid silver;
        margin-top: 15px;
}

#Artikel_2 {
        padding:10px;
        height:100px;
        border:1px solid silver;
        margin-top: 15px;
}

#Artikel_3 {
        padding:10px;
        height:100px;
        border:1px solid silver;
        margin-top: 15px;
}

#Werbung{
        padding:10px;
        border:1px solid silver;
        margin-top: 15px;
}

#Umfrage{
        padding:10px;
        border:1px solid silver;
        margin-top: 15px;
}
-->
</style>

</head>
<body>

<div style="width:900px;margin:0px auto;text-align:left;border:2px solid #00ff00;">
     <div id="Standpunkt">Seitensprung &gt; Gr&uuml;nde</div>
     <div id="leftCol">
          <div id="subnav">
               <p align="left">Text 1</p>
               <p align="left">Text 2</p>
               <p align="left">Text 3</p>
               <p align="left">Text 4</p>
               <p align="left">Text 5</p>
               <p align="left">Text 6</p>
          </div>
          <div id="suchbegriffe">Suchbegriffe</div>
     </div>
     <div id="rightCol">
          <div id="Werbung">Werbung</div>
          <div id="Umfrage">Umfrage</div>
     </div>
     <div id="centerCol">
          <div id="Artikel_1">Artikel 1</div>
          <div id="Artikel_2">Artikel 2</div>
          <div id="Artikel_3">Artikel 3</div>
     </div>
</div>

</body>
</html>

Tyg3r · 24. September 2007

Hi,

mit Divs läst sich nahezu alles umsetzen.
Deine Struktur gehört sicher zu den leichtesten Übungen

Einfach mal ein Modell ohne Inhalte und mit background-colors basteln ...
Wichtig ist eins:

Versuche immer Gemeinsamkeiten zu finden und lagere diese in ein Div aus.
Bezug auf den Content nehmend, würde ich diesen zunächst in 3 Divs (nebeneinander also float=left) einteilen:

HTML:

css:
#content #c_left {float:left;width:200px;background:#333;}
#content #c_center {float:left;width:400px;background:#555;}
#content #c_right {float:left;width:200px;background:#333;}

.clear {clear:both;}

html:
<div id="content">
    <div id="c_left">
        // linker Teil
        </div>
    <div id="c_center">
        // mittlerer Teil
        </div>
    <div id="c_right">
        // rechter Teil
        </div>
    <br class="clear" /> // WICHTIG: float aufheben
    </div>

(nicht getestet)

Wie gesagt mit Divs kann man fast alles machen, siehe eine Seite von mir:
http://www.feg-rebland.de

// edit: da war ich wohl zu spät ^^

Gruß
tyg3r

Colt · 24. September 2007

WOW!

das ging aber schnell

divs in einander verschachteln... darauf hätte ich kommen müssen

Vielen Dank ^^

Gruß

Maik · 24. September 2007

Eine wichtige Masche hab ich eben beim "Modell-Stricken" nicht mit aufgenommen: http://positioniseverything.net/easyclearing.html

Code:

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Code:

<div class="clearfix" style="width:900px;margin:0px auto;text-align:left;border:2px solid #00FF00;"> ... </div>

✔ komplexes Layout? mit divs umsetzen

Colt

Grünschnabel

Anhänge

Maik

Tyg3r

Erfahrenes Mitglied

Colt

Grünschnabel

Maik

Neue Beiträge