• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV/CSS Layout-Problem

Status
Für weitere Antworten geschlossen.

marroh

Neues Mitglied
Hallo liebe html.de ler
Ich bin noch Anfänger und stehe vor folgendem DIV-Layout-Problem. Auf meiner Webseite möchte ich meine Musik vorstellen. Zu jedem Lied soll untereinander ein DIV-Block nach folgendem Layout dargestellt werden:

layout.gif



Mein Versuch:

Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
<!--
div.musblk {background: blue; height: 100px; width: 500px}
div.muspic {background: red; height: 100px; width: 100px}
div.musnfo {background: yellow; height: 70px; width: 400px}
div.musobj {background: white; height: 30px; width: 400px}
-->
</style>
</head>
<body>
<div class="musblk">
<div class="muspic">BILD</div>
<div class="musnfo">MUSIKINFO</div>
<div class="musobj">MUSIKPLAYER</div>
</div>
</body>
</html>
Leider sieht das Ergebniss bei mir so aus:

ergebniss.gif


Was muss ich noch ändern damit ich mein gewünschtes Layout erreichen kann?
 
Zuletzt bearbeitet:
Du musst Deine divs floaten:
<!--
div.musblk {background: blue; height: 100px; width: 500px;}
div.muspic {background: red; height: 100px; width: 100px; float: left;}
div.musnfo {background: yellow; height: 70px; width: 400px; float: left;}
div.musobj {background: white; height: 30px; width: 400px; float: left}
-->


Gruß thuemmy
 
Ich bin noch Anfänger und stehe vor folgendem DIV-Layout-Problem.
Layout macht man nicht mit Tabellen, aber Layout macht man auch nicht mit <div>. Layout macht man mit CSS. <div> dient zum Gruppieren mehrerer Elemente zwecks gemeinsamer Formatierung. Lerne semantisches HTML.

Mehr dazu auf Anfrage und wenn Dir die Suchergenisse zu dem Thema nicht reichen.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben