zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Links mit Bildern, Rahmen trotz border:none

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.07.2006, 11:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard Links mit Bildern, Rahmen trotz border:none [gelöst]

Hallöchen
hab ein kleines Problem mit einer Navigation, die mit Bildern gemacht werden soll. Obwohl ich den Links text-decoration: none und border: none verpasse, werden trotzdem alle Links gemäss den Standards (farbiger Rahmen, der nach visited wechselt) dargestellt. Kann mir jemand helfen, wo mein Fehler liegt?

Im Stylesheet hab ich folgende Definitionen:

Code:
ul.navitop {
	list-style: none;
	margin: 0px;
	padding: 0px;
	border: none;
	text-decoration: none;
	}
ul.navitop li {
	float: left;
	text-decoration: none;
	border: none;
	}
ul.navitop a {
	display: block;
	text-decoration: none;
	border: none;
	}
Auf der Seite integriere ich die Links so:

Code:
<ul class="navitop"><li><a href="home.html"><img src="view/pics/home.jpg" alt="Home"></a></li></ul>
was mache ich falsch??.. Resp. wie bringe ich die Links dazu, keine farbigen Rahmen zu erhalten?
Danke für jeden Hinweis!
grüess
fidel

Geändert von fidel (16.07.2006 um 12:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.07.2006, 11:42
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

img braucht border: none;. Noch besser wäre aber das Bild als Hintergrund. Alle "text-decoration" außer bei a können wieder raus, ebenso alle "border" (auch bei a). Und Du floatest ohne width, das sollte man nie tun. Und auch bei li solltest Du margin & padding sicherheitshalber auf Null setzen (verschiedene Browser-Defaults). Beim Wert "0" kann übrigens die Einheit (hier: px) entfallen.

Daß Deine ul die Floats nicht einschließt, sage ich schonmal, falls das irgendwann relevant wird. Außerdem solltest Du ihr eine ID geben (statt der Klasse). Und irgendwo sollten height und width für img stehen (entweder im Markup oder in der CSS, darüber gibt es verschiedene Meinungen), sofern Du es nicht doch noch als Hintergrund einbindest.

Nochmal zu margin, padding und border: Am Besten ist ein Universalselektor am Anfang der CSS-Datei in Form von

Code:
* {
margin: 0;
padding: 0;
border: 0;
}
Dann ist eh alles auf Null und ohne border (für alle Elemente auf der Seite), und wird anschließend - wenn gewünscht bzw. benötigt - individuell definiert.

Soviel Worte zu so wenig Code...

Geändert von heiko_rs (16.07.2006 um 12:19 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.07.2006, 12:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard

Ich Depp! Natürlich muss ich das img Tag mit border: none definieren! All die text-decorations (ausser bei a) hab ich in der verzweifelten Suche nach dem Fehler nachträglich noch eingefügt. Sind nun jedoch alle wieder weg.
Es klappt! Herzlichen Dank!
Betreffend dem float der li, da es sich um unterschiedliche Bilder handelt, die dynamisch (je nachdem, wo man sich befindet) eingebunden werden, kann ich keine Breite definieren. Aus der Klasse hab ich noch ne id gemacht, stimmt, ich benötige diese ja bloss einmal, daher kann ich hierfür sicherlich ne id verwenden.
Mein funktionierendes Stylesheet für die Navigation sieht nun so aus:
Code:
#navitop {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
#navitop li {
	float: left;
	}
#navitop a {
	text-decoration: none;
	}
#navitop img {
	border: none;
	}
Auf der Seite integriere ich die Links folgendermassen:
Code:
<ul id="navitop"><li><a href="home.html"><img src="view/pics/home.jpg" alt="Home"></a></li></ul>
Es klappt!
Danke!
grüess
fidel
Mit Zitat antworten
  #4 (permalink)  
Alt 16.07.2006, 13:23
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fidel
Betreffend dem float der li, da es sich um unterschiedliche Bilder handelt, die dynamisch (je nachdem, wo man sich befindet) eingebunden werden, kann ich keine Breite definieren.
Das kann nach hinten losgehen: Im IE-Mac stehen die Links dann untereinander, und z.B. in Opera 7.0 sah ich bereits ähnliche Probleme. Hintergrund: Es wurde noch nicht endgültig beschlossen bzw. festgelegt, ob Floats (wie jedes normale Blockelement ohne width-Angabe) die volle verfügbare Breite einnehmen oder auf die Breite ihres Inhalt "zusammenschrumpfen" sollen. Daher verhalten sich diesbzgl. nicht alle Browser gleich.

Du könntest jedem li dynamisch eine Klasse zuweisen lassen, für die dann in der CSS die entsprechende Breite definiert ist. Wenn Du eine wirklich "saubere" Lösung willst, solltest Du einen Weg finden, li eine Breite zu geben.

Übrigens hatte ich mein voriges Posting noch um einige Punkte ergänzt, lies es für alle Fälle nochmal durch, denn einige Punkte solltest Du noch berücksichtigen (zumindest margin & padding für li auf Null zu setzen).

Geändert von heiko_rs (16.07.2006 um 13:30 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.07.2006, 14:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard

Hab Dank! Deine Antwort hab ich schon aufmerksam durchgelesen. Das margin und padding hab ich im Stylesheet bereits für den ul Tag markiert:
Code:
#navitop {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
Scheint zu reichen... die li Tags weisen kein margin und kein padding auf. Ist jedoch schnell nachgeholt, sollten doch mal Probleme auftauchen.
Die Links erscheinen mir im Firefox und im IE so wie sie sollen, nebeneinander nach links gefloatet. Ich könnte natürlich durch eine dynamische Zuweisung einer Klasse der li Tags die Breite im Stylesheet definieren. Dies wäre jedoch mühsam. Vor allem wenn mal ein Link geändert würde, müsste dann auch noch der Eintrag im Stylesheet geändert werden. Ich arbeite zurzeit an einer php basierten Lösung für eine Layout engine, die Links sollten daher einfach über ein array definiert werden können, sodass die Navigation anhand dieses arrays dynamisch generiert wird... ich könnte natürlich noch die Breite des Bildes in diesen array integrieren und dann die Breite direkt im li Tag integrieren. Dann würde der generierte Link in etwa so aussehen:
Code:
<ul id="navitop"><li style="width: 81px;"><a href="home.html"><img src="view/pics/home.jpg" alt="Home"></a></li></ul>
Denkst Du, das wäre "sauber"?
Mit Zitat antworten
  #6 (permalink)  
Alt 16.07.2006, 14:32
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fidel
Scheint zu reichen... die li Tags weisen kein margin und kein padding auf.
In den meisten Browsern reicht das auch, aber die defaults können unterschiedlich sein, und bevor irgendeine Browser-Version da mal abweicht, würde ich es wirklich noch ergänzen (das Beste ist eh der Universalselektor am Anfang der CSS-Datei, mit dem ist man diesbzgl. wirklich vor allen bösen Überraschungen sicher).

Zitat:
Zitat von fidel
Code:
<ul id="navitop"><li style="width: 81px;"><a href="home.html"><img src="view/pics/home.jpg" alt="Home"></a></li></ul>
Denkst Du, das wäre "sauber"?
Auf jeden Fall deutlich sauberer als ohne width, oder anders ausgedrückt: In Bezug auf die Darstellung in allen Browsern ist es sauber, aber in Bezug auf das Markup sind Inline-Styles natürlich nicht die tollste Lösung. Aber wenn es in diesem Falle wirklich extreme Mühe macht, entsprechende Klassen zuzuweisen, löse es halt auf diese Weise. Denn letztlich kommt's ja hauptsächlich darauf an, keine verqueren Browser-Darstellungen zu bekommen, da ist ein Inline-Style dann ausnahmsweise schon okay
Mit Zitat antworten
  #7 (permalink)  
Alt 16.07.2006, 18:50
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.326
E|H befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs
[…]Es wurde noch nicht endgültig beschlossen bzw. festgelegt, ob Floats (wie jedes normale Blockelement ohne width-Angabe) die volle verfügbare Breite einnehmen oder auf die Breite ihres Inhalt "zusammenschrumpfen" sollen.[…]
FF hält sich an die zweite Möglichkeit, Opera glaube ich auch (IE auch?). Ehrlich gesagt nervt mich das. Ich fände es nicht schlecht, wenn man per width:auto die Breite am Inhalt orientieren und mit width:full /* oder ähnlichem */ die volle verfügbare Breite nutzen könnte.
Mit Zitat antworten
  #8 (permalink)  
Alt 16.07.2006, 19:38
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von E|H
FF hält sich an die zweite Möglichkeit, Opera glaube ich auch (IE auch?).
Fast alle Browser tun das so. Aber eben auch nur fast: Wie ich bereits geschrieben hatte, nimmt der IE-Mac bei float definitiv die volle Breite, und auch Opera 7.0 verhält sich in manchen Float-Konstellationen ohne width anders alle die übrigen Browser, und bei einer 8er-Version von Opera erinnere ich mich an eine floatende Tabelle, die die volle Breite einnahm, während alle übrigen Browser die Breite der Tabelle auf deren Inhalt reduzierten. Und das sind sicherlich noch nicht alle Browser bzw. Versionen, die bei float ohne width für Überraschungen sorgen können.

Zitat:
Zitat von E|H
Ich fände es nicht schlecht, wenn man per width:auto die Breite am Inhalt orientieren und mit width:full /* oder ähnlichem */ die volle verfügbare Breite nutzen könnte.
Ja, das wäre praktisch. Manchmal wäre es super, wenn ein Element seine Breite automatisch z.B. einem enthaltenen Bild anpassen würde, oder wenn die Breite eines Floats den vollen verfügbaren Platz einnehmen würde, genau wie ein Blockelement ohne float und width, das man mit seitlichem margin auf jede beliebige Breite bekommt, ohne diese definieren zu müssen...

Geändert von heiko_rs (16.07.2006 um 19:46 Uhr)
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
Boxlayout mit Bildern als Rahmen klopfdreh CSS 1 14.12.2005 11:33
Beim IE rutscht Text links in den Rahmen rein Tobb CSS 18 29.10.2005 23:17
automatischen rahmen mit schatten um bilder newbie2004 CSS 2 20.10.2005 16:19
Rahmen aus Bildern profimong CSS 6 22.08.2005 12:05
Rahmen Problem krakos CSS 1 19.03.2005 04:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:57 Uhr.