nicht angemeldet
Text nach einer Liste nicht darunter
Hallo zusammen!
Folgendes Problem:
Ich habe mehrere kleine Bilder, die ich nebeneinander ausrichten möchte. Zur besseren Übersicht möchte ich sie in Boxen mit einer einheitlichen Größe bringen, da sie unterschiedliche Höhen haben. Hierfür dachte ich, ist es am besten, die Bilder in eine Liste zu packen und die Unterpunkte (li) in Boxen zu formatieren. Folgender Code gehört dazu:
.prebild li {
width: 130px;
min-height: 120px;
background-color: #F5F5F5;
text-align:center;
vertical-align:middle;
color: #000;
font-size:10px;
border-style: dashed;
border-width: thin;
float: left;
list-style-type: none;
margin-right: 2px;
}
und
<div class="prebild">
<ul>
<li><a id="res_94" href="http://nooster.no.funpic.de/lifetype-1.2.8/gallery/1/ubuntu%20gutsy.jpg"><img src="http://nooster.no.funpic.de/lifetype-1.2.8/gallery/1/previews/ubuntu%20gutsy.png" border="0"></a><br>
Ubuntu Gutsy</li>
<li>
<a id="res_95" href="http://nooster.no.funpic.de/lifetype-1.2.8/gallery/1/ubuntu%20hardy.png"><img src="http://nooster.no.funpic.de/lifetype-1.2.8/gallery/1/previews/ubuntu%20hardy.png" border="0"></a><br>
Ubuntu Hardy</li>
<li>
<a id="res_96" href="http://nooster.no.funpic.de/lifetype-1.2.8/gallery/1/ubuntu%20intrepid.png"><img src="http://nooster.no.funpic.de/lifetype-1.2.8/gallery/1/previews/ubuntu%20intrepid.png" border="0"></a><br>
Ubuntu Intrepid</li>
</ul>
</div>
<p>Hier ist der nachfolgende Text...</p>
Ergebnis:
http://nooster.no.funpic.de/lifetype-1.2.8/gallery/1/Listenproblem.png
Dabei entsteht folgendes Problem: Wie im Screenshot zu erkennen ist, wird der folgende Text nicht DARUNTER, sondern DANEBEN angezeigt. Ich weiß nicht, wie ich das beheben kann!
Bitte Helft mir.
Gruß Benni
-
Lieber Benni2,
<div class="prebild">
<ul>
wozu das <div>-Element? Reicht es nicht, dem <ul>-Element eine Klasse (oder gar besser eine ID?) zu geben? > Wie im Screenshot zu erkennen ist, wird der folgende Text nicht DARUNTER, sondern DANEBEN angezeigt. Du suchst die Eigenschaft <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear>. Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
ich danke dir für deine schnelle Antwort. Die Sache funktioniert mit clear wunderbar! Allerdings verstehe ich nicht ganz, warum das nicht mit </div> (bzw. jetzt mit </ul>) aufgehoben wird.
wozu das <div>-Element? Reicht es nicht, dem <ul>-Element eine Klasse (oder gar besser eine ID?) zu geben?
Da hast du vollkommen recht, danke dir. Allerings klappt das mit der ID nicht wirklich (falls damit <ul id="prebild"> gemeint ist). Aber das ist ein Problem mit dem ich kein Problem habe.
Danke dir, Gruß Benni
-
Lieber Benni2,
Allerdings verstehe ich nicht ganz, warum das nicht mit </div> (bzw. jetzt mit </ul>) aufgehoben wird.
die Eigenschaft float gilt für das jeweilige Element (<li>). Da wird nix "aufgehoben". Das Element "driftet" (engl: float) auf der Seite und der Rest ordnet sich drumherum an. In Deinem Falle enthält das <ul>-Element also keine "festen Bestandteile", da alle <li>-Elemente floaten. Das kannst Du testen, indem Du Deinem <ul>-Element einen border verpasst. Du wirst dann sehen, dass Dein <ul>-Element eine Höhe von 0px hat (denn innerhalb von <ul> gibt es nichts, das im Elementenfluss steht - alle <li>s floaten ja, und sonst gibt es dort nix!).
Erst ein nachfolgendes Element, das explizit nicht um Bisheriges drumherum fließen soll, kann mit seiner clear-Eigenschaft wie von Dir gewünscht in einer neuen Zeile beginnen.
| wozu das <div>-Element? Reicht es nicht, dem <ul>-Element eine Klasse (oder gar besser eine ID?) zu geben?
Da hast du vollkommen recht, danke dir. Allerings klappt das mit der ID nicht wirklich (falls damit <ul id="prebild"> gemeint ist).
Logisch, da müsstest Du schon Dein CSS von ".prebild" auf "#prebild" umschreiben (und auch den Nachfahrenselektor eventuell anpassen). Du darfst natürlich weiterhin die Klasse benutzen, ohne auf eine ID umzusteigen. Ich finde es im Grunde ebenso gut, wie mit ID. Dass Du das <div> eingemottet hast, sehe ich semantisch aber als eine Verbesserung. Solltest Du mehrere
<ul class="prebild">auf einer Seite planen, dann wäre eine ID ohnehin nicht sinnvoll.Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Ok, danke für die Erläuterung. Ich bleibe dann doch bei der Klasse, falls in einem Artikel mal mehrere "Bildstrecken" kommen ;)
Da du dich damit ja offensichtlich gut auskennst, habe ich noch eine kleine Frage mit Listen, die sich http://de.selfhtml.org/css/eigenschaften/listen.htm@title=hier leider nicht klärte:
In der "Liste" mit den kleinen Vorschaubildern beginnt das linkeste nicht direkt am Rand, sondern rückt etwas nach rechts ein. Kann man das beeinflussen? Mit
margin: 2pxklappt es leider nicht :(Link dazu: http://www.best-of-benni.de.vu
Vielen Dank
-
Lieber Benni2,
In der "Liste" mit den kleinen Vorschaubildern beginnt das linkeste nicht direkt am Rand, sondern rückt etwas nach rechts ein. Kann man das beeinflussen? Mit
margin: 2pxklappt es leider nicht :(Deine <ul>-Elemente haben ein Standard-Padding von 40px (zumindest im FF), da Du nirgends etwas anderes notier hast und daher der Browser auf Voreinstellungen zurückgreift. Wenn Du
.prebild { padding: 0px; }notierst, sollte das behoben sein.Übrigens: Da Du auf ein umgebendes <div> verzichtest, haben die Selektoren ".prebild ul ..." keinen Sinn mehr, oder hast Du in
<ul class="prebild">weitere<ul>verschachtelt? Ich finde jedenfalls keine!Hast Du Dir den Firebug in Deinen FF installiert? Ich wüsste wirklich nicht, wie ich ohne das Teil heute zurecht käme...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Danke dir nochmal, das hat gepasst. ich habe das mit padding immer nur bei <li> ausprobiert, aber es war genauso wie du gesagt hast.
-
-
-
-
-
-
Hallo Beni
Abgesehen vom float Ansatz, den dir Felix nahelegt, bzw dem clearing Problem würde sich für deine Aufgabenstellung eigentlich die Eigenschaft:
li{
display:inline; zoom:1; /* für MSIE 7 */
display:inline-block;
}
eignen. Bei inline-block hast du dann andere Möglichkeiten, zum Beispiel mit der Höhe zu arbeiten. Du kannst auch mit
ul {
text-align:center;
vaerical-align:top;
}
Die Bilder mittig, bzw mit der Oberkante gemeinsam ausrichten.Aufpassen muss man lediglich auf whitespace, das diese Zweichen zwischen den li Elemente eben als inline content behandelt werden.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o