zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden <div> mit mehreren <img> mit verschiedener Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.03.2012, 13:19
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard <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;
	}
Vielen Dank für eure Hilfe ^__^
Guss Toby
__________________

Nyaa~~
------------------------------------------
http://www.codestyle.ch
------------------------------------------
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.03.2012, 15:07
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.03.2012, 15:35
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #4 (permalink)  
Alt 06.03.2012, 15:57
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
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.
Vielen Dank, das wars... fast!

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 06.03.2012, 16:49
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Die ul benötigt overflow-x:hidden;

Deine Selektoren sind spezifischer als nötig.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #6 (permalink)  
Alt 06.03.2012, 17:11
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 06.03.2012, 19:19
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Code:
header ul#pic_gallery li img
Code:
#pic_gallery img
Code:
header img
Der Selektor muss nicht versuchen, die Verschachtelung des HTML nachzubilden. Er soll schlicht das Notwendige wählen. Welche der drei Varianten für einen Fremden ein halbes Jahr nach deinem Job am leichtesten verständlich ist, überlasse ich der Diskussion.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #8 (permalink)  
Alt 07.03.2012, 09:36
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard

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
------------------------------------------
Mit Zitat antworten
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
<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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:19 Uhr.