zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zweizeilige Listenelemente

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.09.2013, 12:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 4
Matzinger86 befindet sich auf einem aufstrebenden Ast
Standard Zweizeilige Listenelemente

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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.09.2013, 13:17
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Zum Beispiel so. (link)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.09.2013, 13:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 4
Matzinger86 befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.09.2013, 14:26
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.09.2013, 15:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 4
Matzinger86 befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 13.09.2013, 15:24
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Matzinger86 Beitrag anzeigen
Gibt es noch andere Alternativen?
Zeig uns mal mit einem Link zu deiner Seite, dann kann man sich das mal praxisnah ansehen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.09.2013, 15:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 4
Matzinger86 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 13.09.2013, 16:16
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Antwort

Stichwörter
listendarstellung, listeneintrag, zweizeilig

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:16 Uhr.