nicht angemeldet
display:block-Anzeige bei XHTML 1.0 strict
Einen schönen Abend zusammen! =)
Nachdem ich jetzt seit Stunden bei einem eigentlich völlig simplen Problem nicht mehr weiterkomme, wende ich mich an Euch.
Ich habe eine valide xhtml 1.0 strict Seite, wo ich mittels CSS einen Link-Button mit Hover-Effekt drauf hab. Füge ich bei diesem Button ein padding-left dazu, damit der Linktext nicht so ganz am Rand klebt, kommt es zu einem seltsamen Phänomen.
Die genaue Problembeschreibung samt Beispiel und Quelltext habe ich online gestellt :
==> http://www.blutspur.net/test/hilfe/test1.html
Ich habe mir diese Seite jetzt mit dem Explorer, dem Navigator, mit Mozilla und mit Opera angesehen und mein Problem tritt bei allen 4 Browsern gleich auf.
Der Fehler kann also nur bei MIR liegen. Nur weiß ich leider nicht, wo. =(
Danke im Voraus für jede Hilfe!
Rossi
-
hi,
Die genaue Problembeschreibung samt Beispiel und Quelltext habe ich online gestellt :
ich zitiere mal aus deiner problembeschreibung in der seite:
"Die Klasse "menu2" habe ich völlig ident definiert, mit dem einzigen Unterschied, daß hier noch zusätzlich eine "padding-left:30px"-Angabe dabei ist.
Wenn ich jetzt mit dieser Klasse einen Link setzte, kommt aber nicht das erwartete Ergebnis. Der Link-Text im Button ist zwar brav um 30 Pixel weiter nach rechts verschoben, gleichzeitig ist aber jetzt rechts vom Button ein ebensolanger, 30px breiter Anfang eines nächsten Buttons."
das ist kein "nächste" button, sondern der selbe button ist um 30px breiter geworden, und dein hintergrundbild wird dort einfach nochmal wiederholt.
du hast nicht bedacht, dass sich die gesamtbreite eines elementes aus width + padding + border ergibt.
width:159px
padding-left:30px;ergibt eine gesamtbeite von 189px.
du musst also die width-angabe vom 30px verringern, um wieder einen ebenso breiten button zu bekommen wie bei deiner ersten klasse:
width:129px
padding-left:30px;gruss,
wahsaga-
Hallo wahsaga! =)
Danke für die promte Antwort!
du hast nicht bedacht, dass sich die gesamtbreite eines elementes aus width + padding + border ergibt.
Also daß "border" auch zur Gesamtbreite beiträgt, ist mir klar. Aber "padding" gibt doch nur an, wieviel Innenabstand etwas haben soll, das in diesem Elternelement liegt. Was hat das mit der Gesamtbreite des Elternelements zu tun? *nicht verstehe*
Rossi
-
Hallo Rossi,
Danke für die promte Antwort!
Ich hätte erst kontrollieren sollen, ob schon eine Antwort vorliegt, ehe
ich anfing zu tippen. *hmpf*Aber "padding" gibt doch nur an, wieviel Innenabstand etwas haben soll, das
in diesem Elternelement liegt. Was hat das mit der Gesamtbreite des
Elternelements zu tun? *nicht verstehe*Einfach weil laut Standard tatsächlich definiert ist, daß sich die
Gesamtbreite eines Elementes so berechnet:border-left + padding-left + width + padding-right + border-right
Der Internet Explorer benutzt aber in den Versionen 5 und im Quirks Mode
in der Version 6 ein anderes Modell, nämlich Deines, in dem width die
tatsächliche Breite des Elementes angibt und padding dann den Inhaltsbereich
einschränkt. Dies hat schon öfters für Verwirrungen und Ärger gesorgt.
Leider.Tim
-
Einfach weil laut Standard tatsächlich definiert ist, daß sich die
Gesamtbreite eines Elementes so berechnet:border-left + padding-left + width + padding-right + border-right
Der Internet Explorer benutzt aber in den Versionen 5 und im Quirks Mode
in der Version 6 ein anderes Modell, nämlich Deines, in dem width die
tatsächliche Breite des Elementes angibt und padding dann den Inhaltsbereich
einschränkt. Dies hat schon öfters für Verwirrungen und Ärger gesorgt.
Leider.Das war mir ehrlich völlig neu jetzt. Aber man lernt ja nie aus! Ab jetzt weiß ich es.
»»du musst also die width-angabe vom 30px verringern, um wieder einen ebenso breiten button zu bekommen wie bei deiner ersten klasse:
»»width:129px
»»padding-left:30px;Ups, diese Angaben von wahsaga hatte ich vorhin überlesen. Somit ist mein Problem ja gelöst und ich verstehe auch, wie.
Ich danke Euch beiden für Eure Hilfe und wünsch Euch noch ein schöbnes Wochenende!
Rossi =)
-
Hi,
Somit ist mein Problem ja gelöst und ich verstehe auch, wie.
aber nur, wenn Du den IE 5.X nicht dabei berücksichtigst.
freundliche Grüße
Ingo
-
-
-
-
-
Hallo Rossi,
Wau. Eine wunderschöne Beschreibung für potentielle Antworter.
Du definierst den Link als Blockelement und gibst ihm eine feste Größe.
Diese Größe bezieht sich jedoch auf den Inhaltsbereich des Elementes,
nicht auf das gesamte Element. Fügst Du nun ein Padding auf der linken
Seite hinzu, dann vergrößert sich die gesamte Breite des Elementes:.-----------------------------------.
| | |
| padding-left | width |
| | |
.-----------------------------------.Die gesamte Breite ergibt sich also aus:
padding-left + width + padding-right
Und auf den Bereichen von padding und width wird nun das Hintergrundbild
angewandt. Da die gesamte Breite aber breiter ist, als die 159 Pixel Deines
Hintergrundbildes, wird das Bild gekachelt, das heißt wiederholt.Eine Lösungsmöglichkeit wäre nun, das Kacheln mit background-repeat
abzustellen. Dabei hast Du dann aber immer noch einen festen Restbereich
vom Inhaltsbereich (width) am Ende. Die andere ist es, die Breite des
Inhaltsbereiches einfach dementsprechend anzupassen, zum Beispiel indem
Du Deine Angabe für padding-left davon subtrahierst. Ich weiß aber nicht,
ob das mit den von Dir gewünschten möglichen Inhalten (Dem Linktext)
zusammenspielt.Tim
-
Hi Tim!
Wau. Eine wunderschöne Beschreibung für potentielle Antworter.
Danke. *g* Man lernt halt dazu. Zuerst das Forum absuchen, dann das Internet...und wenn beides nichts bringt, dann eine ordentliche Problemformulierung, oder? *g* =)
Aber um auf mein Problem zurückzukommen :
Anders rum gefragt : Wenn mein Button genau 159 x 19 Pixel groß sein soll, weil eben auch die beiden Grafiken dafür so groß sind. WIE soll ich dann die CSS-Angabe machen, damit der Linktext weiter nach rechts rückt?
Rossi
-
Hallo Rossi,
Anders rum gefragt : Wenn mein Button genau 159 x 19 Pixel groß sein soll,
weil eben auch die beiden Grafiken dafür so groß sind. WIE soll ich dann die
CSS-Angabe machen, damit der Linktext weiter nach rechts rückt?Sagte ich das nicht? Wieder mit padding-left, nur mußt Du die Breite des
Inhaltes entsprechend anpassen, also in Deinem Beispiel anscheinend
width:129px statt width:159px benutzen.Tim
-
hi,
Anders rum gefragt : Wenn mein Button genau 159 x 19 Pixel groß sein soll, weil eben auch die beiden Grafiken dafür so groß sind. WIE soll ich dann die CSS-Angabe machen, damit der Linktext weiter nach rechts rückt?
das schrieb ich doch schon ...
folgende gleichung musst du erfüllen:
padding-left + width = 159pxpadding-left hast du vorgegeben mit 30px, also
30px + width = 159px
diesen einfachen dreisatz nach width aufzulösen, überlasse ich jetzt aber wirklich dir :-)
gruss,
wahsaga
-
-