zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden bilder horizontal ausrichten text darunter

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.10.2012, 19:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Unglücklich bilder horizontal ausrichten text darunter

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
Angehängte Grafiken
Dateityp: jpg koala.JPG (185,0 KB, 11x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.10.2012, 19:52
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

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.

Geändert von cebito (07.10.2012 um 20:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.10.2012, 20:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
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
Mit Zitat antworten
  #4 (permalink)  
Alt 07.10.2012, 20:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
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)
Mit Zitat antworten
  #5 (permalink)  
Alt 07.10.2012, 20:20
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

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

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

Geändert von cebito (07.10.2012 um 20:44 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 07.10.2012, 21:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.10.2012, 21:40
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
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
Mit Zitat antworten
  #8 (permalink)  
Alt 08.10.2012, 22:07
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von <--steph--> Beitrag anzeigen
Hi Jebito
Auf meiner Tastatur ist das "c" auch gleich neben dem "J"

Zitat:
Zitat von <--steph--> Beitrag anzeigen
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--> Beitrag anzeigen
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
Mit Zitat antworten
  #9 (permalink)  
Alt 11.10.2012, 19:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.10.2012, 22:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

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
Angehängte Grafiken
Dateityp: jpg koala.JPG (102,7 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links
Antwort

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:57 Uhr.