✔ Umsetzung eines Designs: Div Boxen?

D

Dkl764

Wie würdet Ihr dieses Design umsetzen? Mit Div Boxen? Tabellen? Vorallem die linke Box... wie würdet ihr vorgehen?
 

Anhänge

  • voss-t_Home.jpg
    voss-t_Home.jpg
    24,2 KB · Aufrufe: 376
Hi,

da hier (im Großen, wie auch im Kleinen) ein mehrspaltiges Layout vorliegt, ist die CSS-Eigenschaft float der Schlüssel zum Erfolg, um die DIV-Blöcke aus dem normalen Textfluß zu nehmen, und sie nebeneinander auszurichten.

Die LDM-Kategorie CSS-Layouts enthält interessante Links mit weiterführenden Beispielen zum Studium dieser Technik.

mfg Maik
 
Hab kurz vor'm Feierabend nochmal mein Strickzeug ausgepackt ;-)

HTML: 
<!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">
<meta name="date" content="2009-08-13">

<title>tutorials.de | demo_Duellking</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

#wrapper {
width:904px;
padding:10px;
margin:10px auto;
border:1px solid #dfdfdf;
}
#topHeader {
height:150px;
margin-bottom:10px;
border-bottom:3px solid #dfdfdf;
background:#f5f5f5;
}
#leftColumn {
float:left;
width:610px;
padding:10px 0 50px 0;
border:1px solid #dfdfdf;
background:#f5f5f5;
}
#innerHeader {
height:100px;
margin:10px;
background:#e5e5e5;
}
#rightColumn {
float:right;
width:280px;
padding:10px 0;
border:1px solid #dfdfdf;
background:#f5f5f5;
}
.innerColumn {
float:left;
display:inline;
width:190px;
min-height:200px;
margin:20px 0 0 10px;
border-top:20px solid #e5e5e5;
background:#fff;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size: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 */

h1 {
font-size:1.4em;
}
h2 {
font-size:1em;
}
-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
     <div id="topHeader">
          <h1>topHeader</h1>
     </div>
     <div id="leftColumn" class="clearfix">
          <h1>leftColum</h1>
          <div id="innerHeader">
               <h2>innerHeader</h2>
          </div>
          <div class="innerColumn">
               <h2>innerColumn 1</h2>
          </div>
          <div class="innerColumn">
               <h2>innerColumn 2</h2>
          </div>
          <div class="innerColumn">
               <h2>innerColumn 3</h2>
          </div>
     </div>
     <div id="rightColumn">
          <h1>rightColumn</h1>
     </div>
</div>

</body>
</html>


mfg Maik
 
Vielen Dank für deine hilfreiche und schnelle Antwort.
Hast du das alles drinne oder hast du ein Programm um sowas schnell zu erstellen?
Wenn nicht, gibt es Programme um sowas einfach zu erstellen? Mich interessieren eigentlich nur solche Vorlagen wie du oben gepostet hast.
 
Zuletzt bearbeitet von einem Moderator:
Duellking hat gesagt.:
Hast du das alles drinne oder hast du ein Programm um sowas schnell zu erstellen?
Wenn nicht, gibt es Programme um sowas einfach zu erstellen? Mich interessieren eigentlich nur solche Vorlagen wie du oben gepostet hast.
Zum Vergrößern anklicken....
Das trag ich alles in meinem Oberstübchen mit mir herum :)

Abgesehen von den handelsüblichen Editoren (Dreamweaver & Co.) ist mir da kein spezielles Programm bekannt, das solch einen CSS-Code mit ein paar Klicks schnell generiert - ich tipp mir das fix im Editor (Phase5 & Win-Notepad) von der Seele :)

mfg Maik
 
Was sagst du zum Thema "Tabellen". Z.b. T-Online nutzt laut Quelltext auch gerne Tabellen. Ist dies zu empfehlen? Vorallem bei xHTML.
 
Falsch angezeigt: Internet Explorer 6

Hallo zusammen,
ich arbeite derzeit an dieser Webseite. Anschauen tu ich Sie mir in Firefox. Sieht doch gut aus... denkste...
Da viele Kunden sicher den netten "Internet Explorer 6" nutzen (Standard bei Windows XP ist glaub ich sogar die 5.0 oder 5.5!), muss auch dort alles richtig angezeigt werden.
Falsch gedacht, dort ist alles auf dem Kopf gestellt.

Wer einen Internet Explorer 6 oder niedriger hat, kann sich es gerne anschauen:
http://tombi.bplaced.de/voss/

Woran liegt das?
 
Zuletzt bearbeitet von einem Moderator:
Hi,

die Ursache für das Umbrechen des rechten Spatenblocks #rightColumn findet sich in der float:left-Deklaration für .footer, die meines Erachtens überhaupt nicht benötigt wird.

In meiner Vorlage, die hier die Grundlage für diese Kunden-Website war, tauchen derartige Probleme im IE überhaupt nicht auf.

Achja, unter WinXP ist der IE6 vorinstalliert.

mfg Maik
 
Maik hat gesagt.:
Hi,

die Ursache für das Umbrechen des rechten Spatenblocks #rightColumn findet sich in der float:left-Deklaration für .footer, die meines Erachtens überhaupt nicht benötigt wird.

In meiner Vorlage, die hier die Grundlage für diese Kunden-Website war, tauchen derartige Probleme im IE überhaupt nicht auf.

Achja, unter WinXP ist der IE6 vorinstalliert.

mfg Maik
Zum Vergrößern anklicken....

Dieser Fehler ist behoben, dennoch ist das Design an einigen Stellen zerhauen...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück