zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIVs nicht untereinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.04.2016, 21:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.04.2005
Beiträge: 86
DTAG befindet sich auf einem aufstrebenden Ast
Standard 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>
Aber das zweite DIV fängt bereits unter dem Text an und nicht erst wo das Bild aufhört. Wie kann ich das zweite DIV erst nach dem Bild starten lassen, ohne mit irgendwelchen statischen Abständen.

Vielen Dank,
Stefan
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.04.2016, 21:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.04.2016, 12:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.04.2005
Beiträge: 86
DTAG befindet sich auf einem aufstrebenden Ast
Standard

Super, danke!

Wie würde man es denn heute aktuell besser lösen?

Vielen Dank,
Stefan
Mit Zitat antworten
  #4 (permalink)  
Alt 18.04.2016, 12:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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>
So in etwa könnte man das machen. Je nachdem, wie es denn nun ausschauen soll.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.04.2016, 12:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Wie würde man es denn heute aktuell besser lösen?
Das läßt sich auf Grund deiner mageren Informationen kaum sinnvoll beantworten. Da ich kein Fachmann in Hundestammbäumen bin kann ich nicht mal die Informationen aus deinen Quellcodeschnipseln richtig einordnen und muss raten.

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>
Das Aussehen wird mittels CSS gestaltet:

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);
      }
   }
Eine gesamte Seite mit internem CSS würde dann folgendermaßen erstellt werden:

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>
Zum direkten Ausprobieren stelle ich die Seite kurzzeitig auf meinem Testaccount bereit:

Layout Problem 01

Gruss

MrMurphy

Geändert von MrMurphy (18.04.2016 um 14:11 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
div container

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:09 Uhr.