|
|||
DIVs nicht untereinander
Hallo zusammen,
ich habe zwei DIVs. Code:
<div style="width: 100%;"> <p align="center"><b><img style="float: left;" src="/boxer/images/Hunde/tammy1.jpg" alt="" width="250px" /></b></p> <p align="center">...verabschiedete sich im Mai 2008.</p> <p align="center"><b>WT.: 27.04.1997</b><br /> <b>ZB.Nr.: 210341</b> <b><br /> Augenfarbe 1b</b> <b><br /> Zahnstand 2bM</b> <b><br /> HD B</b> <b><br /> HZ 0</b> <br /> <b>SP 0</b></p> </div> <div> <h2 align="center">Ahnentafel</h2> <table class="hundetabelle"> ... </div> Vielen Dank, Stefan |
Sponsored Links |
|
|||
Hallo
Mit dem float nimmst du das Bild aus dem Dokumentenfluß und es kann nicht mehr auf andere Elemente wie div reagieren. Du musst an geeigneter Stelle clearen. Merksatz: Kein floaten ohne zu clearen. Siehe auch Float - Die Theorie Aber auch dein restlicher Quelltext hat mit aktuellem, sinnvollen HTML / CSS nur am Rande zu tun. Gruss MrMurphy Geändert von MrMurphy (17.04.2016 um 21:54 Uhr) |
Sponsored Links |
|
|||
Kommt drauf an, was du darstellen möchtest. So ganz geht das aus deinem ersten Post nicht hervor. Zusammengehöriger Text gehört in einen Absatz (und nicht in 4), Tabellen sollen nur für tabellarische Daten verwendet werden (aber eventuell hast du ja so eine, dann passts ja)
align-Attribut gibt es nicht mehr, das kannst du ersatzlos aus deinem Quellocde streichen Inline-CSS brauchst du wohl auch nicht, wieso verwendest du kein externes CSS-File hier? Code:
<p> <img src="pfad/zum/Bild.jpg"> Das ist ein Text, der zum Bild gehört. Du siehst, hier ist kein zweites p-Element vorhanden, da der Text und das Bild zusammen gehören </p> <h2> Ahnentafel - Ich bin eine Überschrift ohne align-Attribut</h2> <table> </table> |
|
|||
Hallo
Zitat:
Zunächst sollte die Seite mit HTML5 und CSS3 erstellt werden und über ein dazu passendes Grundgerüst verfügen. Auf Inline-CSS sollte verzichtet werden, auch bei Testseiten. Besser für Testseiten ist internes CSS (im head-Bereich in einem style-Block) oder externes CSS. Veraltete Attribute wie align dürfen nicht mehr verwendet werden. Dafür gibt es CSS-Anweisungen. Elemente wie b oder h2 dürfen nicht benutzt werden, um ein bestimmtes Aussehen zu erreichen. Das Aussehen wird grundsätzlich mittels CSS gestaltet. Für Listen sollten Listenelemente verwendet werden. table-Elemente dürfen nur für Tabelleninhalte verwendet werden, nicht um eine tabellarische Darstellung zu erhalten. Das br-Element sollte nur verwendet werden, wenn es keine geeigneteren für einen Zeilenumbruch gibt. Der Quelltext im body-Bereich könnte folgendermaßen aussehen: Code:
<body> <main role="main"> <article class="tierinfo"> <figure> <img src="http://lorempixel.com/250/400/animals/1" alt="Beispielbild"> </figure> <section> <p>... verabschiedete sich im Mai 2008.</p> <dl> <dt>WT.:</dt> <dd>27.04.1997</dd> <dt>ZB.Nr.:</dt> <dd>210341</dd> <dt>Augenfarbe:</dt> <dd>1b</dd> <dt>Zahnstand:</dt> <dd> <p>2bM</p> <p>HD B</p> <p>HZ 0</p> <p>SP 0</p> </dd> </dl> </section> <section> <h2>Ahnentafel</h2> <p>...</p> </section> </article> </main> </body> Code:
@media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { width: 96%; margin: 1rem auto; } figure { margin: 0; min-width: 0; max-width: 100%; } img { /*text-align: bottom;*/ display: block; max-width: 100%; max-height: 100vh; border: 0; } dl { margin: 0.3rem 0; } dt, dd { margin: 0; } .tierinfo>:nth-child(1n+2)>h1, .tierinfo>:nth-child(1n+2)>h2, .tierinfo>:nth-child(1n+2)>h3, .tierinfo>:nth-child(1n+2)>p { text-align: center; } .tierinfo { display: flex; flex-wrap: wrap; } .tierinfo>:nth-child(1) { margin: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 250px; } .tierinfo>:nth-child(2) { margin: 0; flex-grow: 1; flex-shrink: 1; flex-basis: calc(100% - 250px); } .tierinfo>:nth-child(2) dl { display: flex; flex-wrap: wrap; } .tierinfo>:nth-child(2) dl>* { font-weight: bold; } .tierinfo>:nth-child(2) dl dt { text-align: right; padding-right: 0.5rem; margin: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 50%; } .tierinfo>:nth-child(2) dl dd { padding-left: 0.5rem; margin: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 50%; } .tierinfo>:nth-child(2) dl dd p { margin: 0; } .tierinfo>:nth-child(3) { margin-left: 250px; flex-grow: 1; flex-shrink: 1; flex-basis: calc(100% - 250px); } } Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout Problem 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { width: 96%; margin: 1rem auto; } figure { margin: 0; min-width: 0; max-width: 100%; } img { /*text-align: bottom;*/ display: block; max-width: 100%; max-height: 100vh; border: 0; } dl { margin: 0.3rem 0; } dt, dd { margin: 0; } .tierinfo>:nth-child(1n+2)>h1, .tierinfo>:nth-child(1n+2)>h2, .tierinfo>:nth-child(1n+2)>h3, .tierinfo>:nth-child(1n+2)>p { text-align: center; } .tierinfo { display: flex; flex-wrap: wrap; } .tierinfo>:nth-child(1) { margin: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 250px; } .tierinfo>:nth-child(2) { margin: 0; flex-grow: 1; flex-shrink: 1; flex-basis: calc(100% - 250px); } .tierinfo>:nth-child(2) dl { display: flex; flex-wrap: wrap; } .tierinfo>:nth-child(2) dl>* { font-weight: bold; } .tierinfo>:nth-child(2) dl dt { text-align: right; padding-right: 0.5rem; margin: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 50%; } .tierinfo>:nth-child(2) dl dd { padding-left: 0.5rem; margin: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 50%; } .tierinfo>:nth-child(2) dl dd p { margin: 0; } .tierinfo>:nth-child(3) { margin-left: 250px; flex-grow: 1; flex-shrink: 1; flex-basis: calc(100% - 250px); } } </style> </head> <body> <main role="main"> <article class="tierinfo"> <figure> <img src="http://lorempixel.com/250/400/animals/1" alt="Beispielbild"> </figure> <section> <p>... verabschiedete sich im Mai 2008.</p> <dl> <dt>WT.:</dt> <dd>27.04.1997</dd> <dt>ZB.Nr.:</dt> <dd>210341</dd> <dt>Augenfarbe:</dt> <dd>1b</dd> <dt>Zahnstand:</dt> <dd> <p>2bM</p> <p>HD B</p> <p>HZ 0</p> <p>SP 0</p> </dd> </dl> </section> <section> <h2>Ahnentafel</h2> <p>...</p> </section> </article> </main> </body> </html> Layout Problem 01 Gruss MrMurphy Geändert von MrMurphy (18.04.2016 um 14:11 Uhr) |
Stichwörter |
div container |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
[CSS] Divs mit float erscheinen untereinander | nicostumpf | CSS | 5 | 16.05.2012 16:23 |
3 Divs (untereinander) parallel mit 3 Divs (untereinander) | SimonK. | CSS | 16 | 19.02.2009 09:56 |
zwei Divs untereinander gleich hoch | Moonphoenix | CSS | 6 | 15.05.2008 00:13 |
Keine blauen Links/ Div verlinken/ Div's untereinander anornen | timbo | CSS | 3 | 03.01.2007 17:47 |
1 div links, 2 div's untereinander daneben | jensr | CSS | 9 | 01.07.2004 00:41 |