Hi,
ich, CSS Anfänger, möchte einen Block erstellen, der wie eine Tabelle aufgebaut ist:
1. Er besitzt eine Breite von 80 % des Browserfensters
2. Alle Spalten, bis auf die Klasse "text" besitzen feste Größen.
3. Die Mindestbreite beträgt 950px
Ruft man die Routine auf, stimmt das Layout im großen und ganzen. Es gibt jedoch mehrere Schönheitsfehler:
1. Die Klasse "text" bricht bei einer Verkleinerung des Browserfensters nicht um. Aber gerade diese Klasse soll umbrechen.
2. Durch den nicht erfolgten Umbruch, werden auch die Klassen "hinweis" und "bild" auseinandergerissen. Dabei müssen diese zusammenbleiben.
3. Die Klassen "hinweis" und "bild" erzeugen einen Zwischenraum zwischen Beschreibung1 und Beschreibung2
4. Die Klasse "tabelle" zeigt keine Hintergrundfarbe. Aber genau diese muß sie darstellen
Könnt ihr mir helfen? Idealerweise mit dem korrekten Code! Habe selbst schon etliches ausprobiert aber nichts half. Vielen Dank im voraus für Eure Hilfe. Hier der Quellcode:
ich, CSS Anfänger, möchte einen Block erstellen, der wie eine Tabelle aufgebaut ist:
1. Er besitzt eine Breite von 80 % des Browserfensters
2. Alle Spalten, bis auf die Klasse "text" besitzen feste Größen.
3. Die Mindestbreite beträgt 950px
Ruft man die Routine auf, stimmt das Layout im großen und ganzen. Es gibt jedoch mehrere Schönheitsfehler:
1. Die Klasse "text" bricht bei einer Verkleinerung des Browserfensters nicht um. Aber gerade diese Klasse soll umbrechen.
2. Durch den nicht erfolgten Umbruch, werden auch die Klassen "hinweis" und "bild" auseinandergerissen. Dabei müssen diese zusammenbleiben.
3. Die Klassen "hinweis" und "bild" erzeugen einen Zwischenraum zwischen Beschreibung1 und Beschreibung2
4. Die Klasse "tabelle" zeigt keine Hintergrundfarbe. Aber genau diese muß sie darstellen
Könnt ihr mir helfen? Idealerweise mit dem korrekten Code! Habe selbst schon etliches ausprobiert aber nichts half. Vielen Dank im voraus für Eure Hilfe. Hier der Quellcode:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<style type="text/css">
.tabelle
{
width: 80%;
min-width:950px;
background-color:#7fed94;
}
.ueberschrift
{
float: left;
text-align:left;
text-decoration: underline;
background-color:#ffacbc;
}
.beschreibung
{
clear:both;
float: left;
width: 140px;
text-align:left;
font-weight:bold;
background-color:#c6fb5e;
}
.text
{
float:left;
text-align:left;
background-color:#bdbdbd;
}
.hinweis
{
float: right;
width: 200px;
text-align:right;
background-color:#efc04e;
}
.bild
{
float: right;
width: 150px;
text-align:right;
background-color:#629dd4;
}
</style>
<div align="center">
<div class="tabelle">
<div class="ueberschrift">Das ist die Überschrift. Das ist die Überschrift. Das ist die Überschrift.Das ist die Überschrift. Das ist die Überschrift. Das ist die Überschrift. Das ist die Überschrift. Das ist die Überschrift. Das ist die Überschrift.</div>
<div class="beschreibung">Beschreibung 1:</div>
<div class="text">Hier ist der Text für die Beschreibung. Hier ist der Text für die Beschreibung.</div>
<div class="bild"><img border="0" src="bild.jpg" alt="Bild"></div>
<div class="hinweis"><img border="0" src="hinweis.jpg" alt="Hinweis"></div>
<div class="beschreibung">Beschreibung 2:</div>
<div class="text">Hier ist der Text für die Beschreibung. Hier ist der Text für die Beschreibung.</div>
<div class="beschreibung">Beschreibung 3:</div>
<div class="text">Hier ist der Text für die Beschreibung. Hier ist der Text für die Beschreibung.</div>
<div class="beschreibung">Beschreibung 4:</div>
<div class="text">Hier ist der Text für die Beschreibung. Hier ist der Text für die Beschreibung.</div>
</div>
</div>