|
|||
frage zur umsetzung (siehe anhang)
Hallo zusammen,
im Anhang an diesen Post ist ein Screenshot von einem Model welches ich per CSS/XHTML umzusetzen versuche. Im Moment weis ich nicht genau wie und hoffe das mir von euch jemand helfen kann. Ich schreibe mal was mir durch den Kopf geht: Dadurch das die Koepfe ueber den Rahmen rausragen kann ich mir nur vorstellen die Grafik als Hintergrundbild zu machen. Meine Seitenbreite ist fest, es waere jedoch toll wenn beim zoomen der Textgroesse im Browser die Boxen nach unten mitwachsen. Mit einer Hintergrundgrafik wuerde das ja nicht funktionieren?! Wenn ich die Koepfe einfach innerhalb der Boxen lasse koennte ich flexible Boxen erstellen die nach unten mitwachsen?! Achja, der Text in den Boxen kann ruhig rechtsbuendig sein. Vielen Dank im vorraus. Martin |
Sponsored Links |
Sponsored Links |
|
|||
HTML-Code:
<div class="box"> <div class="img"></div> text text text text text text text text text text </div> HTML-Code:
<div class="box"> <img src="..." alt="Bild" /> <p>text text text text</p> </div> HTML-Code:
<div class="box"> <p>text text text text</p> </div> Man könnte sogar darüber diskutieren, ob die 3 einzelnen "Einträge"/"Boxen" (oder wie man das nennt) nicht lieber in eine <ul> gesteckt werden sollten. Kannst ja mal darüber nachdenken. |
|
||||
Es ging mir hierbei nur um die Idee eine Box links floaten zu lassen und mit negativen margin-top zu versehen, damit diese herausragt, dass das semantisch nicht toll war, ist mir klar, aber es ging ja auch nur um die Idee.
Aber schön, hier eine sematisch korrekte Lösung: 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> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>[ untitled ]</title> <style type="text/css"> .box { float: left; width: 33%; border: 1px solid #000; } .box p { margin: 0; margin-top: -10px; padding-top: 10px; padding-left: 70px; min-height: 40px; background: url('portrait.png') no-repeat 10px 0; } * html .box p { position: relative; height: 40px; } </style> </head> <body> <div class="box"> <p> text text text text text text text text text text text text text text text text text text text text </p> </div> <div class="box"> <p>text text text text text text text text text text</p> </div> <div class="box"> <p>text text text text text text text text text text</p> </div> </body> </html> Noch zur Info: Mein Beispiel-Portrait-Bild hat hier die Ausmaße 50x50, das müsste also entsprechend angepasst werden. |
|
|||
Mantiz & Regloh, vielen Dank fuer eure Hilfe.
Sehr, sehr hilfreich Ich denke ich werde das img jedoch im MarkUp lassen da die Bilder (Portraits) spaeter evtl. aus dem CMS kommen. Gruss Martin |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
dringende Frage zu Navi (ul) Umsetzung | zombZ | CSS | 10 | 29.01.2010 02:21 |
Frage zur Technik bzw. Umsetzung | uspri | Offtopic | 9 | 30.10.2009 10:26 |
Frage zur Umsetzung meines Layouts? Geht das überhaupt was ich möchte? | Delysid-25 | CSS | 4 | 18.03.2009 09:07 |
Frage zur Umsetzung einer Tab-Navigation | alopias | CSS | 4 | 22.08.2008 17:02 |
Navigation: frage zur umsetzung | snazz | (X)HTML | 9 | 02.01.2008 02:55 |