Zweizeilige Listenelemente

Matzinger86 · #1 (**permalink**) 13.09.2013, 12:59

Hallo Community,

heute ist mein "erster Tag" und ich hoffe, dass ich die Fragen hier an die richtige Stelle poste. Ich möchte gerne zweizeilige Listenelemente erstellen die horizontal in einer Reihe angeordnet sind. Dabei soll ein Bild eine Zeile und quasi ein Untertitel des Bildes die zweite Zeile jeweils darstellen. Letztendlich sollen 4 Bilder in Reihe stehen und direkt unter jedem Bild jeweils mittig der Untertitel.

Bisher war das mein HTML-Code dazu

Code:

<div class="ListeJobs">
     <ul>
     <li><a href="http://www.younik.dk" target="_blank"><img src="Australien.jpg"class="jobpic" alt="Something went wrong!"/></a></li>
     <li><a href="http://www.younik.dk" target="_blank"><img src="Coast.jpg"class="jobpic" alt="Something went wrong!"/></a></li>
     <li><a href="http://www.younik.dk" target="_blank"><img src="head.jpg"class="jobpic" alt="Something went wrong!"/></a></li>
     <li><a href="http://www.younik.dk" target="_blank"><img src="Hefte.jpg"class="jobpic" alt="Something went wrong!"/></a></li>
     <br>
     <li><a href="http://www.younik.dk" target="_blank"><img src="Australien.jpg"class="jobpic" alt="Something went wrong!"/></a></li>
     <li><a href="http://www.younik.dk" target="_blank"><img src="Australien.jpg"class="jobpic" alt="Something went wrong!"/></a></li>
     <li><a href="http://www.younik.dk" target="_blank"><img src="Australien.jpg"class="jobpic" alt="Something went wrong!"/></a></li>
     <li><a href="http://www.younik.dk" target="_blank"><img src="Australien.jpg"class="jobpic" alt="Something went wrong!"/></a></li>
     </ul>

Und das der CSS Part.

Code:

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

.ListeJobs li {
display: inline; 
margin-right: 3%;
margin-left: 3%;
}

.ListeJobs {
text-align: center;
}

Könnt ihr mir helfen?

mymaksimus · #2 (**permalink**) 13.09.2013, 13:17

Zum Beispiel so. (link)

Matzinger86 · #3 (**permalink**) 13.09.2013, 13:43

Manchmal kann es so einfach sein. VIELEN DANK für die schnelle Hilfe.
Eine Frage habe ich allerdings noch: Nachdem ich es jetzt left floate steht das ganze natürlich auch nicht mehr mittig auf meiner Seite, da der Text-align Befehl scheinbar ignoriert wird. Wo bzw. wie kann ich jetzt noch das ganze mittig in meinen Container rücken?

explanator · #4 (**permalink**) 13.09.2013, 14:26

Der Eigenschaft text-align wird nicht ignoriert, sie richtet innerhalb der LI-Elemente den Text aus.

Wenn du es zentriert haben willst darfst du dich nicht an die Li-Elemente halten sondern musst das Elternelement, welches ein Block-Element darstellt zentrieren.
Das wäre in deinem Fall das UL. Mit margin: 0 auto; zentriert man dann Blockelemente, sofern sie nicht durch feste Positionierungen davon abgehalten werden.

Bitte lerne die Grundlagen, wenn du dich mit HTML und CSS beschäftigen willst.

Matzinger86 · #5 (**permalink**) 13.09.2013, 15:19

Danke für die Antwort. Ich beschäftige mich mit HTML und CSS was nicht ausschließt, dass man anfangs Fragen hat und ich denke, dass solch ein Forum dafür eingerichtet wurde, um allen Mitgliedern die Möglichkeit zu geben nach Problemlösungen zu fragen.
Nichstdestotrotz funktioniert dein Hinweis so nicht. Selbst wenn ich das Elternelement zentral ausrichten will in dem ich die Margin änder bleibt es am linken Rand kleben.

Gibt es noch andere Alternativen?

explanator · #6 (**permalink**) 13.09.2013, 15:24

Zitat:

Zitat von Matzinger86

Gibt es noch andere Alternativen?

Zeig uns mal mit einem Link zu deiner Seite, dann kann man sich das mal praxisnah ansehen.

Matzinger86 · #7 (**permalink**) 13.09.2013, 15:34

Ich hab leider noch keinen Server und mach das bisher nur offline.
Der Code ist wiegesagt der hier....

CSS

Code:

.jobpic {
margin-top: 5%;
height: 200px;
width: 200px;
border-radius: 50% ;
-webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
          transition: all 0.2s linear;
}

 
.jobpic:hover {
  border: 10px solid #FAFAFA;
}


.ListeJobs ul {
list-style-type: none; 
margin: 0 auto;
}

.ListeJobs li { 
text-align: center;
float: left;
margin: 2% 4%;
}

.ListeJobs {
text-align: center;
}

Und HTML

Code:

<div class="ListeJobs">
     <ul>
     <li><a href="http://www.google.de" target="_blank"><img src="Australien.jpg"class="jobpic" alt="Something went wrong!"/></a><br><p class="jobtitle">HEAD OF DESIGN</p></li>
     <li><a href="http://www.google.de" target="_blank"><img src="Coast.jpg"class="jobpic" alt="Something went wrong!"/></a><br><p class="jobtitle">HEAD OF DESIGN</p></li>
     <li><a href="http://www.google.de" target="_blank"><img src="head.jpg"class="jobpic" alt="Something went wrong!"/></a><br><p class="jobtitle">HEAD OF DESIGN</p></li>
     <li><a href="http://www.google.de" target="_blank"><img src="Hefte.jpg"class="jobpic" alt="Something went wrong!"/></a><br><p class="jobtitle">HEAD OF DESIGN</p></li>
   
     </ul>
     </div>

Danke, dass du dir die Mühe machst.

explanator · #8 (**permalink**) 13.09.2013, 16:16

Melde ich bei einem Freehoster an und lade es hoch.

Es fehlen grundlegende Dinge in deinem Code, wie zum Beispiel der Head-Bereich der Seite oder die Bilder, die wir nicht haben. Zudem zeigst du immer nur ein Codeschnippsel.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Float o.ä. für Listenelemente mit unterschiedlicher diskreter Höhe	mariane	CSS	3	14.08.2013 20:11
Listenelemente links ausrichten	MacWorker	CSS	10	27.03.2009 17:30
Listenelemente dynamisch an Breite anpassen	ronjambo	CSS	16	26.03.2009 18:16
Liste inline mit Bildchen, zweizeilige Elemente??	me_flay	CSS	0	23.03.2007 17:06
Zweizeilige Listennavigation	kloevekorn	CSS	4	23.12.2005 15:56