Link im div-Element positionieren

[opi]

Hallo,

wie kann ich einen Link in einem div-Element positionieren?

.button_submit {
   width:60%;
   margin:0 auto; padding:0;
   text-align:center;
}

.button_submit a {
   display:block;
   width:104px; height:20px;
   background:url(/img/button_submit.gif);
}

.button_submit a:hover {
   background:url(/img/button_submit_hover.gif);
}

<div class="button_submit"><a href="#"></a></div>

Das Image wird leider immer linksbündig angezeigt und nicht
zentriert. Mache ich da was falsch?

Greez,
opi

[Ingo Turski]

Hi,

.button_submit {
   width:60%;
   margin:0 auto; padding:0;

damit zentrierst Du das DIV

text-align:center;

und damit dessen inline-Elemente.

.button_submit a {
   display:block;

jetzt ist a kein inline-Element mehr, auf das text-align Anwendung findet.

freundliche Grüße
Ingo

[opi]

Hallo Ingo,

.button_submit a {
   display:block;
jetzt ist a kein inline-Element mehr, auf das text-align Anwendung findet.

ok ...

.button_submit a {
   display:block;
   margin:0 auto;
   ...
}

aber da macht der IE doch Probleme, soweit ich weiss. Gibt es noch
eine andere Alternative für mich, ausser das ich ein weiteres div-
Element nutzen muss?

Greez,
opi

[opi]

Hallo Ingo,

Lösung gefunden ...

.button_submit {
   width:60%;
   margin:0 auto; padding:0;
   width:104px; height:20px;
}

.button_submit a {
   width:100%; height:100%;
   display:block;
   background:url(/img/button_submit.gif);
}

.button_submit a:hover {
   background:url(/img/button_submit_hover.gif);
}

<div class="button_submit"><a href="#"></a></div>

klappt. Danke :)

Greez,
opi

[Ingo Turski]

Hi,

.button_submit a {
   display:block;
   margin:0 auto;
   ...
}

aber da macht der IE doch Probleme, soweit ich weiss. Gibt es noch
eine andere Alternative für mich, ausser das ich ein weiteres div-
Element nutzen muss?

brauchst Du überhaupt dieses eine DIV?
Und was den IE betrifft: der wendet text-align bekanntlich auch auf blocklevel-Elemente an.

freundliche Grüße
Ingo

[opi]

Hallo,

.button_submit a {
   display:block;
   margin:0 auto;
   ...
}

brauchst Du überhaupt dieses eine DIV?

natürlich. Ohne das div-Element könnte ich den Link nicht mittig
zentrieren, da margin:0 auto; nicht mit IE funktioniert.

Ich benötige sogar zwei DIV's.

1. DIV 100%, center
2. DIV Größe und Höhe des Image
3. Link

Und was den IE betrifft: der wendet text-align bekanntlich auch auf blocklevel-Elemente an.

margin:0 auto; war gemeint.

Greez,
opi

[Ingo Turski]

Hi,

brauchst Du überhaupt dieses eine DIV?

natürlich. Ohne das div-Element könnte ich den Link nicht mittig
zentrieren, da margin:0 auto; nicht mit IE funktioniert.

Ich benötige sogar zwei DIV's.

nö, zumindest sehe ich noch keinen Grund.

1. DIV 100%, center

body {text-align:center;}

2. DIV Größe und Höhe des Image

unnötig.

3. Link

a {display:block; width:104px; margin:auto;}

Und was den IE betrifft: der wendet text-align bekanntlich auch auf blocklevel-Elemente an.

margin:0 auto; war gemeint.

ich weiß. Im standardkompatiblen Mode kann der IE6 das auch umsezten und für die übrigen Fälle hilft dann text-align.

freundliche Grüße
Ingo