Webseitenaufbau so möglich (mit divs)?

Status
Nicht offen für weitere Antworten.
J

Jarod06

Grünschnabel
Hi Leute,

Ich hab in den letzten Wochen (leider immer nur am Wochenende) versucht eine HP zu schreiben, doch leider kapiere ich wohl CSS-Klasse "div" und ihren Aufbau nicht.

Meine HP sollte wie folgend später mal aussehen :

Seitendarstellung : center

<---------------------Bild0------------------------->
<-Bild1-------------Bild2-----------------Bild3->
<-Bild4---------Textinhalt--------------Bild5->
<-Bild6-------------Bild7-----------------Bild8->


Bild0 soll man die gesamte Breite vorgeben und die restlichen Bilder (gerade als Umrandung) sollen nur den Textinhalt ummanteln.

Ich wollte alle Bilder aus der CSS heraus in Div´s darstellen lassen. Doch irgendwie bekomme ich die Div nur untereinander aufgereiht. Ich verstehe es nicht und zweifel langsam wirklich.

Kennt jemand von euch vielleicht eine gute deutsche Webseite wo ich mir anhand von Beispielen es mal erklären kann oder kann mir einer von euch mal klären wie man so was schreiben muss ?

Ich über jede Hilfestellung echt dankbar.

MfG

Jarod06
 
Hallo und Willkommen auf tutorials.de, Jarod06.

Block-Elemente, wie beispielsweise das DIV, werden im "Normalfall" (also ohne jegliche CSS-Formatierung) im Dokument untereinander angeordnet bzw. dargestellt. Mit Hilfe der float-Eigenschaft lassen sie sich aber auch horizontal ausrichten.

Bekanntermaßen führen viele Wege nach Rom, und da ich jetzt nicht so recht weiß, wie du dir das mit den Bilder-DIVs im Detail vorstellst, habe ich mal zwei Varianten als Lösungsansatz aufgezeichnet, wie sich dein Seitenkonzept um- bzw. zusammensetzen lässt.


  • In diesem Beispiel floaten jeweils drei DIVs pro Zeile:
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">
<title></title>

<style type="text/css">
<!--
div.wrapper {
    width: 800px;
    border: 1px solid #000;
    margin: 0 auto;
}

div.row { /* Zeile für floatende Boxen */

}

 /* 1. Zeile */
div.bild_0 {
    text-align: center;
}

 /* Start 2. Zeile */
div.bild_1 {
    float: left;
    width: 150px;
    margin-right: 0 !important;
    margin-right: -3px;
}

div.bild_2 {
    text-align: center;
    margin: 0 150px !important;
    margin: 0 147px;
}

div.bild_3 { 
    float: right;
    width: 150px;
    margin-left: 0 !important;
    margin-left: -3px;
}
/* Ende 2. Zeile */

/* Start 3. Zeile */
div.bild_4 {
    float: left;
    margin-right: 0 !important;
    margin-right: -3px;
}

div.bild_5 {
    float: right;
    width: 150px;
    margin-left: 0 !important;
    margin-left: -3px;
}

div.textinhalt {
    text-align: center;
    margin: 0 150px !important;
    margin: 0 147px;
}
/* Ende 3. Zeile */

/* Start 4. Zeile */
div.bild_6 {
    float: left;
    width: 150px;
    margin-right: 0 !important;
    margin-right: -3px;
}

div.bild_7 {
    text-align: center;
    margin: 0 150px !important;
    margin: 0 147px;
}

div.bild_8 {
    float: right;
    width: 150px;
    margin-left: 0 !important;
    margin-left: -3px;
}
/* Ende 4. Zeile */
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="bild_0">Bild 0</div>

     <div class="row">
          <div class="bild_1">Bild 1</div>
          <div class="bild_3">Bild 3</div>
          <div class="bild_2">Bild 2</div>
     </div>

     <div class="row">
          <div class="bild_4">Bild 3</div>
          <div class="bild_5">Bild 5</div>
          <div class="textinhalt">Textinhalt</div>
     </div>

     <div class="row">
          <div class="bild_6">Bild 6</div>
          <div class="bild_8">Bild 8</div>
          <div class="bild_7">Bild 7</div>
     </div>
</div>

</body>
</html>
  • In diesem Beispiel floaten drei Spalten, in denen die entsprechenden DIVs eingebettet sind:
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">
<title></title>

<style type="text/css">
<!--
div.wrapper {
    width: 800px;
    border: 1px solid #000;
    margin: 0 auto;
}

div.leftCol { /* linke Spalte */
    float: left;
    width: 150px;
    margin-right: 0 !important;
    margin-right: -3px;
}

div.rightCol { /* rechte Spalte */
    float: right;
    width: 150px;
    margin-left: 0 !important;
    margin-left: -3px;
}

div.centerCol { /* mittlere Spalte */
    margin: 0 150px !important;
    margin: 0 147px;
}

div.bild_0 {
    text-align: center;
}

div.bild_1 {

}

div.bild_2 {
    text-align: center;
}

div.bild_3 {

}

div.bild_4 {

}

div.bild_5 {

}

div.bild_6 {

}

div.bild_7 {
    text-align: center;
}

div.bild_8 {

}

div.textinhalt {
    text-align: center;
}

div.clear {
    clear: both;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="bild_0">Bild 0</div>

     <div class="leftCol">
          <div class="bild_1">Bild 1</div>
          <div class="bild_4">Bild 4</div>
          <div class="bild_6">Bild 6</div>
     </div>

     <div class="rightCol">
          <div class="bild_3">Bild 3</div>
          <div class="bild_5">Bild 5</div>
          <div class="bild_3">Bild 8</div>
     </div>

     <div class="centerCol">
          <div class="bild_2">Bild 2</div>
          <div class="textinhalt">Textinhalt</div>
          <div class="bild_7">Bild 7</div>
     </div>

     <div class="clear"></div>
</div>

</body>
</html>
Vielleicht helfen dir diese "Protoypen" bei der Umsetzung deines Projekts weiter?

Hier noch ein paar interessante Links mit Anleitungen und Beispielen zum Thema "CSS-Layout":

  1. andreas kalt.de: Ein CSS-Layout erstellen
  2. barrierefrei.e-workers.de: Workshop - temp
  3. CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen
  4. css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
  5. intensivstation :: CSS Templates :: Templates
  6. selfHTML: CSS-basierte Layouts
  7. Stichpunkt CSS: Layout ohne Tabellen
  8. stu nicholls | CSS PLaY | CSS layouts
 
@michaelsinterface,

wow....ich bin wirklich sehr erfreut über deine HIlfestellung, eine solche freundliche und umfassende Hilfestellung hatte ich, ehrlich gesagt, garnicht erwartet. Ich hab mich für Beispiel Zwei entschieden, da steige ich mal wirklich durch.

Code: 
site {
  width: 250px;
  border: 1px solid #000;
  margin: 0 auto;
}
div.header {
    text-align: center;
    width: 250px;
    height: 100px;
    background: url(./images/hi.gif) no-repeat;
}
div.leftCol { /* linke Spalte */
    float: left;
    width: 50px;
    margin-right: 0 
    margin-right: 0;
}

div.rightCol { /* rechte Spalte */
    float: right;
    width: 50px;
    margin-left: 0
    margin-left: 0;
}

div.centerCol { /* mittlere Spalte */
    margin: 0 
    margin: 0;
}

So weit so gut. Doch leider hab ich nun noch ein kleines Problem und komme einfach nicht weiter. Im Firefox (aktuelle Version) wird zwischen dem Center-Block und dem rechten Rand (mit den Bildern) eine große Lücke angezeigt und die Bilder gehen ein kleines Stück über die gesamte vorgegebene Breite.
Im IE 6 wird links und rechte (im gleichen Abstand) ebenfalls über die vorgesehene Breite verschoben, dafür hab ich im IE zwischen den drei Blöcken immer einen kleinen Abstand.

Ich würde gerne es so schaffen, das alle Blöcke nahtlos an einander sich reihen und dabei die vorgesehene Gesamtbreite nicht überschreiten.

Wie ist dies möglich und warum zeigen beide Browser es unterschiedlich an?

Ich verstehe es nicht und hoffe, das du oder andere mir vielleicht weiterhelfen. *bettel*
 
Verwende mal dieses Stylesheet, in dem ich die margin-Eigenschaften der einzelnen DIVs erweitert habe, damit sie ohne Lücken nebeneinander dargestellt werden:

Code: 
div.site {
  width: 250px;
  border: 1px solid #000;
  margin: 0 auto;
}
div.header {
    text-align: center;
    width: 250px;
    height: 100px;
    background: url(./images/hi.gif) no-repeat;
}
div.leftCol { /* linke Spalte */
    float: left;
    width: 50px;
    margin-right: 0 !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin-right: -3px; /* Für IE */
    background: #d0d0d0;
}
div.rightCol { /* rechte Spalte */
    float: right;
    width: 50px;
    margin-left: 0 !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin-left: -3px; /* Für IE */
    background: #d0d0d0;
}
div.centerCol { /* mittlere Spalte */
    margin: 0 50px !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin: 0 47px; /* Für IE */
    background: #e5e5e5;
}
div.clear { /* nach den floatenden Boxen den normalen Textfluss herstellen */
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
}
HTML: 
<body>

<div class="site">
     <div class="header">header</div>

     <div class="leftCol">lC</div>

     <div class="rightCol">rC</div>

     <div class="centerCol">cC</div>

     <!-- nach den floatenden Boxen den normalen Textfluss herstellen -->
     <div class="clear"></div>
</div>

</body>
 
Ich hab es mal geändert, doch leider kaum Auswirkung erfahren dürfen.

Das Merkwürdige an der Geschichte ist folgendes :

Gebe ich in CSS an, das beide Seitenblöcke "float: left;" sind,

Code: 
div.leftCol { /* linke Spalte */
    float: left;
    width: 72px;
    margin-right: 0 !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin-right: -3px; /* Für IE */
}

div.rightCol { /* rechte Spalte */
    float: left;
    width: 72px;
    margin-left: 0 !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin-left: -3px; /* Für IE */
}

dann passen sie im Firefox prefekt zusammen (im IE überlappen sie sich etwas (1-2px)), nur alle drei Divs in Reihe wollen einfach nicht nahtlos nebeneinander stehen.

Im Firefox ist zwar nun die Lücke zwischen Center-Divblock und Right-Divblock kleiner geworden, aber im IE ist alles beim Alten geblieben (Divleftblock startet ca.4-5px zu weit links und zu CenterDivblock wird genau dieser Abstand (des verschobenen Außenrandes gelassen). Das Gleiche dann ebenfalls von Centerdivblock zu Rightdivblock.

Komisch oder nicht ?
 
Zeig doch bitte mal den vollständigen Quelltext (HTML + CSS) des Dokuments, denn bei mir funktionieren alle drei gezeigten Beispiele in allen mir zur Verfügung stehenden Browsern einwandfrei.

Meine Testumgebung: Win2k, FF 1.5.0.6, IE 6.0, MOZ 1.7.12, NN 7.0, OP 8.50

Hier mal ein Screenshot des zuletzt vorgeschlagenen CSS- und HTML-Codes:

.
 

Anhänge

  • 25762attachment.png
    25762attachment.png
    784 Bytes · Aufrufe: 33
Aber natürlich, hier sind mal beide Dateien (index.html und main.css) :

index.html :

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title></title>

	<link rel="stylesheet" type="text/css" href="main.css" media="screen" title="" />
</head>
<body>
 <div id="sitebox">
     <div class="header">
     <center><div class="title"></div></center>
     </div>
     <div class="leftCol">
          <div class="siteheadleft"></div>
          <div class="siteborderleft"></div>
          <div class="footerleft"></div>
     </div>
     <div class="rightCol">
          <div class="siteheadright"></div>
          <div class="siteborderright"></div>
          <div class="footerright"></div>
     </div>
     <div class="centerCol">
          <div class="siteheadmiddle"></div>
          <div class="sitetext">Textinhalt</div>
          <div class="footermiddle"></div>
     </div>
     <div>copyright</div>
     <div class="clear"></div>

 </div>

</body>
</html>

main.css :

Code: 
/***************************************************
   HTML Element Styles
 ***************************************************/

body {
  margin: 20px;
  text-align: center;
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  background-attachment : fixed;
  background: url(./images/bg.jpg) repeat bottom center;
  }

/***************************************************
   Site Layout Container
 ***************************************************/

sitebox {
  width: 450px;
  border: 1px solid #000;
  margin: 0 auto;
}

/***************************************************
   Site Styles
 ***************************************************/

div.leftCol { /* linke Spalte */
    float: left;
    width: 72px;
    margin-right: 0 !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin-right: -3px; /* Für IE */
}

div.rightCol { /* rechte Spalte */
    float: right;
    width: 72px;
    margin-left: 0 !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin-left: -3px; /* Für IE */
}

div.centerCol { /* mittlere Spalte */
    margin: 0 50px !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin: 0 47px; /* Für IE */
}

div.header {
    text-align: center;
    width: 450px;
    height: 305px;
    background: url(./images/h.gif) no-repeat;
}

div.siteheadleft {
    width: 72px;
    height: 23px;
    background: url(./images/hl.gif) no-repeat;
}

div.siteheadmiddle {
    width: 406px;
    height: 23px;
    background: url(./images/hm.gif) repeat;
    text-align: center;
}

div.siteheadright {
    width: 72px;
    height: 23px;
    background: url(./images/hr.gif) no-repeat;
}

div.siteborderleft {
    width: 72px;
    height: 200px;
    background: url(./images/sl.gif) no-repeat;
}

div.siteborderright {
    width: 72px;
    height: 200px;
    background: url(./images/sr.gif) repeat;
}

div.footerleft {
    width: 72px;
    height: 23px;
    background: url(./images/fl.gif) no-repeat;
}

div.footermiddle {
    width: 406px;
    height: 23px;
    text-align: center;
    background: url(./images/fm.gif) no-repeat;
}

div.footerright {
    width: 72px;
    height: 23px;
    background: url(./images/fr.gif) no-repeat;
}

div.sitetext {
    text-align: center;
    width: 406px;
    height: 200px;
    text-align: center;
    background: url(./images/tbg.gif) repeat;
}

div.clear {
    clear: both;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
}
 
Dir sind da ein paar "Rechenfehler" für die DIVs .centerCol, .siteheadmiddle, .footermiddle und .sitetext unterlaufen, was zu den Lücken bzw. Verschiebungen im Layout führt.

Zudem hast du im CSS-Code für den ID-Selektor sitebox das #-Zeichen vergessen.

Hier das korrigierte Stylesheet:

Code: 
/***************************************************
   HTML Element Styles
 ***************************************************/

body {
  margin: 20px;
  text-align: center;
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  background-attachment : fixed;
  background: url(./images/bg.jpg) repeat bottom center;
  }

/***************************************************
   Site Layout Container
 ***************************************************/

div#sitebox {
  width: 450px;
  border: 1px solid #000;
  margin: 0 auto;
}

/***************************************************
   Site Styles
 ***************************************************/

div.leftCol { /* linke Spalte */
    float: left;
    width: 72px;
    margin-right: 0 !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin-right: -3px; /* Für IE */
    background: #e5e5e5; /* Für Testzwecke */
}

div.rightCol { /* rechte Spalte */
    float: right;
    width: 72px;
    margin-left: 0 !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin-left: -3px; /* Für IE */
    background: #e5e5e5; /* Für Testzwecke */
}

div.centerCol { /* mittlere Spalte */
    margin: 0 72px !important; /* Für FF und alle anderen nicht-IE-Browser */
    margin: 0 69px; /* Für IE */
    background: #f0f0f0; /* Für Testzwecke */
}

div.header {
    text-align: center;
    width: 450px;
    height: 305px;
    background: url(./images/h.gif) no-repeat;
}

div.siteheadleft {
    width: 72px;
    height: 23px;
    background: url(./images/hl.gif) no-repeat;
}

div.siteheadmiddle {
    width: 306px; /* 450px - 2*72px = 306px */
    height: 23px;
    background: url(./images/hm.gif) repeat;
    text-align: center;
}

div.siteheadright {
    width: 72px;
    height: 23px;
    background: url(./images/hr.gif) no-repeat;
}

div.siteborderleft {
    width: 72px;
    height: 200px;
    background: url(./images/sl.gif) no-repeat;
}

div.siteborderright {
    width: 72px;
    height: 200px;
    background: url(./images/sr.gif) repeat;
}

div.footerleft {
    width: 72px;
    height: 23px;
    background: url(./images/fl.gif) no-repeat;
}

div.footermiddle {
    width: 306px; /* 450px - 2*72px = 306px */
    height: 23px;
    text-align: center;
    background: url(./images/fm.gif) no-repeat;
}

div.footerright {
    width: 72px;
    height: 23px;
    background: url(./images/fr.gif) no-repeat;
}

div.sitetext {
    text-align: center;
    width: 306px; /* 450px - 2*72px = 306px */
    height: 200px;
    text-align: center;
    background: url(./images/tbg.gif) repeat;
}

div.clear {
    clear: both;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
}
 
Ach verdammt, ich sollte doch mal etwas schlafen. Big Big THX.

Ich würde gerne den Thread noch ein oder zwei Tage offen halten falls ich doch noch die eine oder andere Frage hab, geht das in Ordnung ?
 
Selbst wenn du das Thema jetzt als erledigt markierst, bleibt es dennoch geöffnet, um es bei auftretenden Problemen fortsetzen zu können ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück