[ERLEDIGT] CSS Problem eines Newbie

astratr · 30 August 2016

Hallo Leute, ich bin gerade dabei mich einzulesen und habe ein Problem:

ich habe den unten stehenden HTML Schnipsel auf meiner Seite.
Bislang hatte ich in jedem der Container ein <div id="tabelle"> stehen.
Nun habe ich gelesen dass auf jeder Seite eine ID nur einmal vorkommen soll. Daher habe ich es in Klassen geändert.

Aber danach funktioniert es nicht mehr. Die Seite wird vollkommen falsch angezeigt.

Kann mir jemand weiterhelfen?

HTML:

<body>
<div ID="Inhalt">
   <div class="tabelle"><div class="tableft"><img title="Bildname1" src="/images/Bild1.png" alt="Bildname1" width="103" height="99" align="left" /></div>
     <div class="tabmiddle"><h1>Überschrift 1</h1><p>Text 1</p></div>
     <div class="tabright"><p>Wert1</p></div><div class="clr"></div>
   </div>
   <div class="tabelle"><div class="tableft"><img title="Bildname2" src="/images/Bild2.png" alt="Bildname2" width="203" height="99" align="left" /></div>
     <div class="tabmiddle"><h2>Überschrift 2</h2><p>Text 2</p></div>
     <div class="tabright"><p>Wert2</p></div><div class="clr"></div>
   </div>   
   <div class="tabelle"><div class="tableft"><img title="Bildname3" src="/images/Bild3.png" alt="Bildname3" width="303" height="99" align="left" /></div>
     <div class="tabmiddle"><h3>Überschrift 3</h3><p>Text 3</p></div>
     <div class="tabright"><p>Wert3</p></div><div class="clr"></div>
   </div>   
   <div class="tabelle"><div class="tableft"><img title="Bildname4" src="/images/Bild4.png" alt="Bildname4" width="403" height="99" align="left" /></div>
     <div class="tabmiddle"><h4>Überschrift 4</h4><p>Text 4</p></div>
     <div class="tabright"><p>Wert4</p></div><div class="clr"></div>
   </div>   
</div>
</body>

Code:

  #tabelle {background-color: #f9f9f9; border: 1px solid #d6d6d6; border-radius: 12px; padding: 10px 10px 0px 10px; height:auto;margin-bottom: 20px; }
   .tabelle {background-color: #f9f9f9; border: 1px solid #d6d6d6; border-radius: 12px; padding: 10px 10px 0px 10px; height:auto;margin-bottom: 20px; }
   .tableft { float: left; width: 10%; padding: 5px; }
   .tabmiddle { float: left; width: 70%;  padding: 5px;}
   .tabright { float: right; width: 15%; padding: 5px; }

SpiceLab · 30 August 2016

astratr schrieb:
Nun habe ich gelesen dass auf jeder Seite eine ID nur einmal vorkommen soll. Daher habe ich es in Klassen geändert.

Aber danach funktioniert es nicht mehr. Die Seite wird vollkommen falsch angezeigt.

An der Umstellung von ID auf Klasse liegt es wohl kaum.

Vielmehr sind die float-Eigenschaften ohne ein entsprechendes "Clearing" die Ursache.

Wenn schon nicht die bessere Alternative des Flexbox-Modells (siehe z.B. https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/) verwendet werden soll, studiere die verschiedenen Techniken zum Clearing.

https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

Eine Möglichkeit daraus overflow:hidden.

CSS:

.tabelle {
background-color: #f9f9f9;
border: 1px solid #d6d6d6;
border-radius: 12px;
padding: 10px 10px 0px 10px;
height:auto;
margin-bottom: 20px;
overflow: hidden;
}

astratr · 30 August 2016

Danke

Spicelab schrieb:
Vielmehr sind die float-Eigenschaften ohne ein entsprechendes "Clearing" die Ursache.

Reicht das

Code:

<div class="clr"></div>

mit dem dazugeörigen CSS

Code:

.clr { clear: both; }

nicht aus .. oder ist es falsch eingebunden.

Auf der Beispielsseite wird es ja mit einem

Code:

<br class="clear">

gemacht. Was ist denn besser?

SpiceLab · 30 August 2016

astratr schrieb:
Reicht das

Code:

<div class="clr"></div>

mit dem dazugeörigen CSS

Code:

.clr { clear: both; }

nicht aus .. oder ist es falsch eingebunden.

<div class="clr"></div> ist mir vorhin garnicht aufgefallen.

Aber die zugehörige Regel fehlt im gezeigten CSS.

Mit ihr taucht das Problem überhaupt nicht auf.

astratr schrieb:
Auf der Beispielsseite wird es ja mit einem

Code:

<br class="clear">

gemacht.

Das ist lediglich die erstgenannte Methode "The Old School Way".

astratr schrieb:
Was ist denn besser?

Vorzuziehen ist Methode 3 (The "clearfix" Class), gefolgt von Methode 2 (The Overflow Way).

astratr · 30 August 2016

Vielen Dank

Habe es mt der clearfis Class umgesetzt.

Nun funktionier es wunderbar

Vielen Dank für die Hilfe

[ERLEDIGT] CSS Problem eines Newbie

astratr

Neues Mitglied

SpiceLab

Mod | ZENmechanic

astratr

Neues Mitglied

SpiceLab

Mod | ZENmechanic

astratr

Neues Mitglied

Neueste Beiträge