Hallo,
versuche mich an einer Homepage für den Privatgebrauch.
Hauptsächlich will ich nur mal reinschnuppern, was alles so möglich ist.
Ich würde gern wissen, ob ich im css Teil für z.B. Links eine Eigenschaft aus dem css Teil für Buttons ändern kann.
Wenn ich über einen Link gehe, habe ich den Abstand zu anderen Objekten vergrößert.
Gleichzeitig (wenn ich über einen Link gehe) würde ich gerne den Abstand zum Rand des Buttons verkleinern.
Ist so etwas möglich ?
Danke und Gruß
[quote]Wenn ich über einen Link gehe, habe ich den Abstand zu anderen Objekten vergrößert.
Gleichzeitig (wenn ich über einen Link gehe) würde ich gerne den Abstand zum Rand des Buttons verkleinern.[/quote]
Also wenn ich dich richtig verstanden habe - arbeite doch mit :hover und padding?
aber was mir aufgefallen ist, du hast ein element [quote][/quote] - gibts in html nicht, du meinst vermutlich [quote]
Hi
ja das habe ich versucht.
Hier das Beispiel:
box {
border:2px solid #000000;
padding:10px 70px;
//background:#404040;
width:300px;
-moz-border-radius:8px;
color:#303030;
font-size: 30px;
font-family:myFont;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
-moz-box-shadow: 4px 4px 10px #000000;
background:-moz-linear-gradient(19% 100% 90deg,#202020, #404040, #505050 100%);
}
Da habe ich den Rand horizontal zur Box auf 70 gesetzt.
In der "div id=“box” " befinden sich nun Links nebeneinander.
a:hover {
padding:20px ;
color:#202020;
}
Wenn man nun über einen Link geht, habe ich den Abstand zu anderen Objekten um 20px erhöht.
Nun würde ich gerne, noch zusätzlich in dem a:hover so etwas machen wie.
a:hover {
box:padding:10px 50px; /*Gleichzeitig den Abstand zum horizontalen Rand der Box verringern
padding:20px ;
color:#202020;
}
Wie kann ich so etwas realisieren ?
Danke und Gruß
Wie schon gesagt, in HTML gibt es kein Element box.
Also weg damit.
XHTML könntest du um Elemente aus einem anderen Namensraum
erweitern und das dann auch definiert dekorieren.
In HTML ist das Verhalten für undefinierte Elemente undefiniert,
ebenso wenn wie bei dir kein doctype angegeben ist - solch
mangelhafte Dokumente sollten gar nicht dekoriert werden.
Zunächst behebt man die Fehler im (X)HTML und kann sich danach
um eine definierte Dekoration mit CSS bemühen.
In deinem Falle wären das eher Selektoren wie
box a:hover
oder
box > a:hover
Das trifft aber wie gesagt nicht für CSS+HTML zu sondern für
CSS+XML.
Es gibt allerdings keinen Selektor, mit dem man die Dekoration
eines Elternelementes davon abhängig machen kann, welches
Kindelement darin vorkommt.
Aber wenn man nur ein Element gleichen Namens hat oder das
wie vorgeschlagen mit einem Fragmentidentifizierer versieht oder
auch mit einer Klassenzuordnung, kann das Problem darüber
gelöst werden
div#box {…}
Man kann allerdings auch die Dekoration des Elternelementes
nicht davon abhängig machen, ob ein :hover für ein Kindelement
stattfindet. Wenn es um Abstände dazwischen geht, muß man das
dann schon durch margin und padding für das Kindelement
hinfummeln.
Andersherum ginge das allenfalls durch deklarative Animation mit
SMIL (oder eine Manipulation des DOMs mit einem Skript).
