|
||||
<div> mit mehreren <img> mit verschiedener Breite
Hallo Zusammen
Ich habe ein div, wo ich eine kleiner Bildergallerie drin mache. Diese sind in der HTML-Struktur als <img>-Tags implementiert. Nun diese Bilder sind alle von unterschiedlicher Länge. Da der <div> bzw. <header> in Höhe und Breite begrenzt ist, rutscht mir, wenn es zu viele Bilder sind, das nicht mehr hineinpassende Bild eine Zeile nach unten. Was ich gerne hätte ist, dass bei den Bildern die keinen Platz mehr haben kein Zeilenumbruch passiert und das einfach nur noch das angezeigt wird, was gerade noch so sichtbar ist (sowas wie overflow:hidden). CSS Code sieht so aus: Code:
header ul#pic_gallery { width: 700px; height: 90px; } header ul#pic_gallery li { float: left; } header ul#pic_gallery li img { height: 90px; } Guss Toby
__________________
Nyaa~~ ------------------------------------------ http://www.codestyle.ch ------------------------------------------ |
Sponsored Links |
|
|||
Wir können nicht von einem CSS-Schnipsel auf das vollständige CSS schließen, uns selbst wenn, dies würde uns noch nicht das HTML offenbaren, und auch dann würden wir lieber über eine URL auf einer lauffähigen Seite mit Firebug o.ä. herumspielen.
Zumindest dienstags. |
Sponsored Links |
|
|||
Ok, vermutlich läuft es auf white-space:nowrap für die ul heraus, dazu: ent-floate die li und gib ihnen display:inline oder inline-block. je nachdem. Nimm noch den whitespace zwischen den li im HTML heraus.
|
|
||||
Zitat:
Hab den momentanen Stand hier temporär nachgespielt. Also es zeigt jetzt einfach alles darüber hinaus an. Mein Ziel war es aber, dass es den letzten Teil eben nicht anzeigt. Gibt's da ne einfache Lösung dazu? Danke!
__________________
Nyaa~~ ------------------------------------------ http://www.codestyle.ch ------------------------------------------ Geändert von TobyZ23NM8 (06.03.2012 um 16:01 Uhr) |
|
|||
Die ul benötigt overflow-x:hidden;
Deine Selektoren sind spezifischer als nötig. |
|
||||
Danke!!
Ahja, ich hab ja nur ein <ul> im Header... da kann ich die id gleich weglassen ^^ (Das hast du gemeint, oder?) Vielen Dank nochmals. Greez Toby EDIT: Mir liegt relativ viel daran, dass der HTML-Code übersichtlich bleibt. Ich denke es ist nicht allzu schlimm, wenn ich die whitespaces mittels margin-right: -4px; bei den <li>-Tags wegnehme... Oder bist du da anderer Meinung? ^^
__________________
Nyaa~~ ------------------------------------------ http://www.codestyle.ch ------------------------------------------ Geändert von TobyZ23NM8 (06.03.2012 um 17:22 Uhr) |
|
|||
Code:
header ul#pic_gallery li img Code:
#pic_gallery img Code:
header img |
|
||||
Oh, all right! Danke ^^
Muss mir das noch abgewöhnen, so genau zu deklarieren x.x Natürlich reicht die unterste Variante in diesem Fall vollkommen! Danke ^__^ EDIT: Bzw. ich habe noch ein Logo im Header, dass auch über img läuft.... Also reicht die Variante fast ^^ Aber ich hab verstanden, was du sagen wolltest!
__________________
Nyaa~~ ------------------------------------------ http://www.codestyle.ch ------------------------------------------ |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
<div> soll restliche Breite annehmen | oetzi | CSS | 11 | 11.08.2008 13:12 |
Variable Breite mit fester Breite vermischen | vertex | CSS | 11 | 16.10.2006 14:22 |
3 Spalten | Aussen: variable Breite; Mitte: feste Breite | dreamshocker | CSS | 9 | 17.08.2005 17:23 |
<div> nicht auf volle Breite ausdehnen | timo123 | CSS | 10 | 29.04.2005 00:45 |
<img> in <div> ausrichten | D3mOn | CSS | 2 | 17.03.2005 12:31 |