zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder nebeneinander ohne Leerraum darstellen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.10.2007, 17:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2007
Beiträge: 26
cyprus befindet sich auf einem aufstrebenden Ast
Standard Bilder nebeneinander ohne Leerraum darstellen?

Hallo,
ich beschäftige mich nur kurz mit CSS und find genial. Bislang fand ich alles sehr logisch aufgebaut, ausser das natürlich die Browser mal wieder querschießen. Abe ich hab grad ein viel profaneres Problem.
Versuche eine Flashseite von mir in CSS nachzubauen. Dabei besteht die Navigation aus Bildern die Horizontal nebeneinander plaziert sind und sich vergößern beim drüberfahren.
Nun habe ich für die Bilder in einem DIV eine Liste erstellt und es wird auch fein angezeigt, aber zwischen den Bilder liegt ein ca. 4px weiter leerraum und den krieg ich einfach nicht weg. Nachdem ich jetz nun 2 Tage drann rumfrickel und keine Idee mehr habe, frag ich jetz mal nach:
Der HTML-Code:
Code:
<ul>
<div id="subnavi">
  <li><img src="Bilder_XHTML/Gebäuderein_kl.jpg" alt="Reinigung" width="110" height="110" /></li>
  <li><img src="Bilder_XHTML/Details_kl.jpg" alt="Erfahrung" width="110" height="110" /></li>
  <li><img src="Bilder_XHTML/Stein_kl.jpg" alt="Steinreinigung" width="110" height="110" /></li>
  <li><img src="Bilder_XHTML/Holz_kl.jpg" alt="" width="110" height="110" /></li>
  <li><img src="Bilder_XHTML/Wasser_fall_kl.jpg" alt="Ökologie" width="110" height="110" /></li>
  <li><img src="Bilder_XHTML/Glaskloetze_kl.jpg" alt="Portfolio" width="110" height="110" /></li>
  <li><img src="Bilder_XHTML/UBahn_kl.jpg" alt="Referenzen" width="110" height="110" /></li>
  <li><img src="Bilder_XHTML/Handschuh_kl.jpg" alt="Kontakt" width="110" height="110" /></li>
  </ul>
<!-- id="subnavi"--></div>
Das CSS dazu:
Code:
 #subnavi {	
	width: 884px;
	
	
}

#subnavi li{
	
	display: inline;
	border:0;
	list-style-type: none;
	padding: 0;
	margin:0;
	height: 110px;
	width: 110px;
}
Wenn mir dann auch noch jemand nen Hinweis geben könnte wie ich via hoover die Skalierung deklariere wäre ich im Himmel. Aber das ist nicht so wichtig. Mich wurmt erst mal nur das Problem da oben.

Lieben Dank im vorraus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.10.2007, 18:16
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Hast du dem img auch alle Abstände genommen?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.10.2007, 18:23
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Hallo cyprus,
versuch es mit einem "float" auf die <li>-s.
Grüße: Emil
Edit:
Sorry, float auf die <img> natürlich. Die <li> kannst Du auch noch floaten lassen usw...
Grüße: Emil

Geändert von etux (08.10.2007 um 18:31 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.10.2007, 18:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2007
Beiträge: 26
cyprus befindet sich auf einem aufstrebenden Ast
Standard

Meint ihr das so:
Code:
#subnavi img{
	
	border:0;
	padding: 0;
	margin:0;
Das mit dem Float der img hab ich nicht verstanden. Würden die sich dann nicht mit nem z-index übereinander stapeln. Ich probier es gern aus aber die Idee zum wie fehlt mir.

aber danke schon mal für die schnelle Hilfe. Keine halbe Stunde ist schon toll.
Danke vielmal Cy
Mit Zitat antworten
  #5 (permalink)  
Alt 08.10.2007, 18:47
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Geht es denn so?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #6 (permalink)  
Alt 08.10.2007, 19:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2007
Beiträge: 26
cyprus befindet sich auf einem aufstrebenden Ast
Standard

Nein! Habs grad getestet.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.10.2007, 19:24
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Hallo cyprus,

So in etwa:
Code:
#subnavi li img {
	float: left;
	height: 110px;
	width: 110px;
}
Grüße: Emil
Mit Zitat antworten
  #8 (permalink)  
Alt 08.10.2007, 19:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2007
Beiträge: 26
cyprus befindet sich auf einem aufstrebenden Ast
Standard

Ja das funktionierte. Darf ich dich bitten meinem Verstehen auf die Sprunge zu helfen. Nur Abschreiben is zwar schnell aber meine Lehrer fanden das auch immer nicht wirklich hilfreich.
Mein Verständnis hängt am float:left.
Mit float kann ich soweit ich das Blöcke in position bringen. Aber was passiert hier. Hast du quasi gesagt richte dich an der nächsten Möglichkeit links aus und sei nich größer als 110x110.

Schuldigt wenn ich mir das ein wenig in Menschensprache umsetze ist halt einfacher zu verstehen.

Liebe Grüße

cy
Mit Zitat antworten
  #9 (permalink)  
Alt 08.10.2007, 19:59
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Hier erklärt man dir wie float geht:
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT }
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.10.2007, 20:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2007
Beiträge: 26
cyprus befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank Emil das war ne klasse Hilfestellung. Manchmal muß man die Sachen einfach mal sehen um sie zu verstehen.

Danke auch für den Link zum float, ist zwar ein bischen langatmig aber durchaus lesenswert.

Bis denne

cy
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
IE8 kann keine Bilder nach DOMready darstellen? killerfaultier Javascript & Ajax 2 07.08.2009 17:16
Bilder nebeneinander StarSt0rm CSS 1 10.09.2007 00:35
2 bilder nebeneinander platzieren Stressless CSS 3 25.10.2006 19:11
Bildergalerie mit Bildunterschrift, Bilder nebeneinander CvH (X)HTML 5 07.08.2006 21:41
Bildergalerie - wie am besten Bilder darstellen? Boris CSS 8 06.09.2004 00:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:25 Uhr.