bilder horizontal ausrichten text darunter

<--steph--> · #1 (**permalink**) 07.10.2012, 19:31

hallo,

habe folgendes Problem. Seit meinem letzten Eintrag habe ich das damals beschriebene Problem lösen können, dass ich 4 bilder horizontal so ausrichte, dass das Bild ganz links immer am linken Rand "pickt", das Bild rechts immer rechts außen und die restlichen Bilder gleichmäßig dazwischen aufgteteilt werden.

Danke an der Stelle an Ingo Chao

Zitat:

"http://xhtmlforum.de/49974-bilder-sollen-horizontal-die-ganze-fl.html"

dessen Ansatz mit 4 Bildern super klappt.

Was nicht funktioniert ist, dass ich unter diesen Bildern gerne Text haben möchte.

Leider kommt es dabei zu einem ungewollten Umbruch.

Anbei der relevante Teil aus

html:

HTML-Code:

 <div id="bildmenü">

<ul id="Orte">
         <li>
                 <a id="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <a><h3>La Fortuna</h3></a>
                 <a><p>La Fortuna ist ein schöner Waldabschnitt</p></a>
         </li>

         <li>
                 <a id="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <a><h3>La Fortuna</h3></a>
                 <a><p>La Fortuna ist ein schöner Waldabschnitt</p></a>
         </li>

         <li>
                 <a id="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <a><h3>La Fortuna</h3></a>
                 <a><p>La Fortuna ist ein schöner Waldabschnitt</p></a>
         </li>

         <li>
                 <a id="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <a><h3>La Fortuna</h3></a>
                 <a><p>La Fortuna ist ein schöner Waldabschnitt</p></a>
         </li>
</ul>
<span><!----></span>
</div><!--bildmenü-->

und css

Code:

div#bildmenü{
border: 6px solid #f0f0f0;
positon: relative; /*positioniert aber bleibt im Fluss wichtig für position:absolute der Kinderelemente*/
}

        div#bildmenü ul /*Nachzulesen: http://xhtmlforum.de/49974-bilder-sollen-horizontal-die-ganze-fl.html*/
        {
        display: inline;
        text-align: justify; /* Ausrichtung Blocksatz*/
        width: 100%;
        list-style: none;
        }

        div.bildmenü span {
                display: inline-block; /* ?*/
                padding-left: 100%; /* 5. "Zeichen" das sehr lang ist und Zeilenumbruch erzeugt*/
        }

       div#bildmenü a img {
                border: 3px solid black;
                padding: 0px;
                width: 18em;
                height: 12.5em;
        }

So sieht das ganze als Grafik aus:

Was habe ich bei der Umstellung von Ingo Chao's Ansatz auf eine ul nicht berücksichtigt?

Danke vorab für Hinweise

BG

cebito · #2 (**permalink**) 07.10.2012, 19:52

Nicht die ul sollte inline sein, sondern die Listenpunkte (li), und bitte, eine ID ist was Eindeutiges und darf nur einmal auf der Seite verwendet werden, benutze stattdessen Klassen.

Edith sagt noch - auf Umlaute würde sie bei der Benennung von Klassen und IDs auch verzichten.

<--steph--> · #3 (**permalink**) 07.10.2012, 20:09

Zitat:

Zitat von cebito

Nicht die ul sollte inline sein, sondern die Listenpunkte (li), und bitte, eine ID ist was Eindeutiges und darf nur einmal auf der Seite verwendet werden, benutze stattdessen Klassen.

Edith sagt noch - auf Umlaute würde sie bei der Benennung von Klassen und IDs auch verzichten.

Danke für deinen schnellen Tipp,

dass mit der einen ID habe ich schon gehört und umgestellt. das inline bzehieht sich nun auf die li. Leider sind die bilder und texte immernoch untereinander sowie beim ersten image:

Codes nach der umgestaltung:

Code:

div.bildmenü{
border: 6px solid #f0f0f0;
positon: relative; /*positioniert aber bleibt im Fluss wichtig für position:absolute der Kinderelemente*/
}

        ul.Orte {
        list-style-type: none;
        }

        ul.Orte li /*Nachzulesen: http://xhtmlforum.de/49974-bilder-sollen-horizontal-die-ganze-fl.html*/
        {
        display: inline;
        text-align: justify; /* Ausrichtung Blocksatz*/
        width: 100%;
        }

        div.bildmenü span {
                display: inline-block; /* ?*/
                padding-left: 100%; /* 5. "Zeichen" das sehr lang ist und Zeilenumbruch erzeugt*/
        }

        div.bildmenü a img {
                border: 3px solid black;
                padding: 0px;
                width: 18em;
                height: 12.5em;
        }

und der html code 

	HTML-Code:
	<div class="bildmenü">

<ul class="Orte">
         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <a><h3>La Fortuna</h3></a>
                 <a><p>La Fortuna ist ein schöner Waldabschnitt</p></a>
         </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <a><h3>La Fortuna</h3></a>
                 <a><p>La Fortuna ist ein schöner Waldabschnitt</p></a>
         </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <a><h3>La Fortuna</h3></a>
                 <a><p>La Fortuna ist ein schöner Waldabschnitt</p></a>
         </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <a><h3>La Fortuna</h3></a>
                 <a><p>La Fortuna ist ein schöner Waldabschnitt</p></a>
         </li>
</ul>
<span><!----></span>
</div><!--bildmenü-->


<div style="clear: both;"></div>

Woran kann es noch liegen?

Danke vorab

<--steph--> · #4 (**permalink**) 07.10.2012, 20:16

Zitat:

Zitat von cebito

Nicht die ul sollte inline sein, sondern die Listenpunkte (li), und bitte, eine ID ist was Eindeutiges und darf nur einmal auf der Seite verwendet werden, benutze stattdessen Klassen.

Edith sagt noch - auf Umlaute würde sie bei der Benennung von Klassen und IDs auch verzichten.

Das mit den Umlauten schließe ich aus, da andere Styles auch funktionieren (z.B. border 3px solid black)

cebito · #5 (**permalink**) 07.10.2012, 20:20

http://jsfiddle.net/fJ82E/1/

... und ich bleibe dabei, nimm die Umlaute raus! Du handelst dir damit nur Probleme ein!

<--steph--> · #6 (**permalink**) 07.10.2012, 21:32

klappt super. ich denk mir das heute noch mal durch (da ich css irgenwann mal verstehen möchte).

Vielen Dank soweit, u.U. frag ich bei dm einen oder anderen Punktnoch im Detail nach (wie gesagt: soll keine copy paste übung werden)

<--steph--> · #7 (**permalink**) 08.10.2012, 21:40

Zitat:

Zitat von cebito

Edit this Fiddle - jsFiddle

... und ich bleibe dabei, nimm die Umlaute raus! Du handelst dir damit nur Probleme ein!

Hi Jebito,

also wie gesagt, klappt super

Code:

#bildmenue ul{
    list-style:none;
    text-align:justify;
}
#bildmenue ul:after{
    content:'';
    display:inline-block;
    width:100%;
}
#bildmenue ul li{
    display:inline-block;
    width:200px;
    border:1px solid #000;
}
#bildmenue ul li h3,#bildmenue ul li p{
    padding:5px;
}

kannst du mir noch 1-2 fragen zum code erklären?

was heißt in dem Zusammenhang #bildmenue ul:after{
content:'';
display:inline-block;
width:100%; ???

sind im css code soviel display: inline-blocks' nötig?

Danke

cebito · #8 (**permalink**) 08.10.2012, 22:07

Zitat:

Zitat von <--steph-->

Hi Jebito

Auf meiner Tastatur ist das "c" auch gleich neben dem "J"

Zitat:

Zitat von <--steph-->

was heißt in dem Zusammenhang #bildmenue ul:after{
content:'';
display:inline-block;
width:100%; ???

Das heißt, du sparst dir ein leeres span im Dokument und erzeugst stattdessen ein Pseudoelement... Pseudo-Elemente: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Wenn du den IE kleiner 8 noch unterstützen möchstest brauchst du hier aber noch ein Fallback...

Zitat:

Zitat von <--steph-->

sind im css code soviel display: inline-blocks' nötig?

Ja, ich kann einem inline keine Breite geben, da ich aber einen Zeilenumbruch erzwingen will brauch ich die Eigenschaften von Blockelementen und ich bin mit den 100% auf der sicheren Seite. display: Anzeigeart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

<--steph--> · #9 (**permalink**) 11.10.2012, 19:52

Zitat:

Zitat von cebito

Auf meiner Tastatur ist das "c" auch gleich neben dem "J"

Bin wahrscheinlich auf der Tastatur eingeschlafen weil ich keine Lösung gefunden habe. Aber danke ich versteh jetzt das Konzept, glaube ich.

BG

<--steph--> · #10 (**permalink**) 11.10.2012, 22:02

War wahrscheinlich zu vorschnell mit dem verstehen. Das Konzept von Cebito klappt an sich sehr gut. Danke an dieser Stelle

hab jetzt aber für h3 und p einen div-container herum gebastelt, sodass ich hintergrundfarbe und font-size hinzufügen kann.

html:

HTML-Code:

<div class="bildmenue">

 <ul class="Orte">
         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
         </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
         </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
        </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
         </li>

 </ul>
</div><!--bildmenue-->

Code:

div.bildmenue {
border: 6px solid #f0f0f0;
positon: relative; /*positioniert aber bleibt im Fluss wichtig für position:absolute der Kinderelemente*/
}

        ul.Orte {
        list-style: none;
        text-align: justify; /* Ausrichtung Blocksatz*/
        margin: 0 0 1em 0;
        }

        .bildmenue ul:after /*Nachzulesen: http://xhtmlforum.de/49974-bilder-sollen-horizontal-die-ganze-fl.html*/
        {
        content:'';
        display: inline-block;/* ja, da einem inline Element keien breite gegeben werden kann*/
        width: 100%;
        }

        .bildmenue ul li {
        display: inline-block;/* ?*/
        width: 20em;
        border: 4px solid #000;
        }

        .bildmenue ul li h3 p, {
        }

        div.bildmenue a img {
                padding: 0px;
                width: 20em;
                height: 13em;
        }

        div.bildmenue div {
        background-color: lightgrey;
        padding: 5px;
        font-family: "Arial Black", Gadget, sans-serif;;
        }

Das Problem ist der Bereich zwischen Bild und dem Container. Dieser Abstand ist nicht beabsichtigt und ich komme nicht drauf von wo der kommt. Bin jetzt schon wider 2 Stunden am probieren.

Hat jemand hier noch einen Tipp?
BG

anbei noch ein kleines Bild meines Problems

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
gibt es eine andere Lösung ohne Tabelle?	online	CSS	16	24.04.2009 08:41
Layoutcheck von einer Beispielseite	wave	Site- und Layoutcheck	1	12.11.2008 21:48
Zeilenabstand bei font-Angabe wieder weg	nick	CSS	7	16.02.2008 14:39
Floats verschwinden im nichts, Fließer überdecken Floats.	nick	CSS	5	09.02.2008 14:34