nicht angemeldet
Hilfe bei CSS-basiertem Design
Hallo SelfHTML-User,
ich versuche zur Zeit ein Design komplett auf CSS-Basis zu entwerfen.
Leider gibt es dabei noch einige Probleme. Vielleicht kann mir ja hier
jemand helfen.
Die geplante Webseite soll neue CDs vorstellen. Dabeí habe ich mir
folgendes gedacht: Eine etwa 775 Pixel breite Seite, die im Browser
zentriert wird. Im oberen Teil sollen dann 3-4 CD Cover nebeneinander
stehen und jeweils unter den Covern ein Beschreibungstext.
Mit einer Tabelle hätte ich einfach eine zweizeilige Tabelle mit 3-4
Spalten gemacht, in die erste Zeile die CD Cover, in die zweite Zeile
die Texte.
Jetzt mit CSS klappt da leider so gar nichts.
Ich habe hier noch eine Konzeptzeichnung, damit versteht man vielleicht
eher, was ich meine: http://img288.imageshack.us/img288/6331/konzept6ao.png
Die 775 Pixel breite und zentrierte Seite ist kein Problem. Da habe
ich einen entsprechend formatierten DIV-Block. Aber die Sache mit den
Covern und den Texten darunter klappt nicht.
Würde mich freuen wenn mir jemand helfen kann.
Sebastian
-
Ich könnte mir sowas in der Richtung vorstellen
Stylesheet:
body {text-align:center;}
div#content {width:774px; margin:auto; text-algin:left; background:red;}
div.cd {width:258px; float:left;}HTML-Body:
<body>
<div id="content">
<div class="cd">
CD Cover 1
</div>
<div class="cd">
CD Cover 2
</div>
<div class="cd">
CD Cover 3
</div>
</div>
</body>-
Ich könnte mir sowas in der Richtung vorstellen
[ ... ]
Vielen Dank, das funktioniert schon mal. :-)
Jetzt bräuchte ich das ganze nochmal für den Fall das das Design die
komplette Seite ausfüllen soll (also nicht 774px zentriert).Habe daher mal aus:
div#content {width:774px; margin:auto; text-align:left;}
einfach:
div#content {width:100%; margin:auto; text-align:left;}
gemacht, was aber nicht funktioniert (obwohl der DIV-Block doch dann
eigentlich die Breite der gesamten Webseite haben sollte).Wäre daher wirklich nett wenn du mir noch schreiben könntest, wie ich
die drei Cover nun im DIV-Block zentriert bekomme, wenn dieser die
Breite des gesamten Browserfensters haben soll.Viele Grüße,
Sebastian-
Habe daher mal aus:
div#content {width:774px; margin:auto; text-align:left;}
einfach:
div#content {width:100%; margin:auto; text-align:left;}
gemacht, was aber nicht funktioniert (obwohl der DIV-Block doch dann
eigentlich die Breite der gesamten Webseite haben sollte).Die Breite hat er auch.
Wäre daher wirklich nett wenn du mir noch schreiben könntest, wie ich
die drei Cover nun im DIV-Block zentriert bekomme, wenn dieser die
Breite des gesamten Browserfensters haben soll.Der Sinn ist mir nur nicht ganz klar. Wenn der Div-Block die Breite des Browser-Fensters haben soll, dann brauchst du doch keinen Div-Block mehr, sondern kannst den Inhalt direkt dem Body-Element unterordnen.
Ich würde also folgendes vorschlagen:Stylesheet:
body {text-align:center;} div#cdcontainer {width:774px; margin:auto; text-align:left; background:red;} div.cd {width:258px; float:left;}HTML-Body:
<body> <div id="cdcontainer"> <div class="cd"> CD Cover 1 </div> <div class="cd"> CD Cover 2 </div> <div class="cd"> CD Cover 3 </div> </div> <p>Inhalt der Seite mit width:100%</p> </body>
-
-