Grafik dem Bereich anpassen
nance
- html
Moin!
Gibt's ne Möglichkeit, ohne Script ein Bild (als Link) dem Div in dem es liegt größenmaßig anzupassen?
Alternativ dazu wäre es auch ok, das Bild im Bereich zu zentrieren. margin: und padding: auto haben mich nicht weiter gebracht, genausowenig wie vertical-align oder text-align? Auch wenn ich das Bild wegnehme, rutscht der Link nicht in die Mitte.
Link gibts mangels zugänglichen Webspace nicht.
Code schaut wie folgt aus:
<div class="obenlinks">
<a href="{PLH_LOGO/Link}"><img src="{PLH_LOGO/Bild}" alt="logo" width="144" height="144"/></a>
</div>
css:
.obenlinks {
height: 9em; /**144px**/
top: 0px;
left: 0em;
width: 9em;
padding: auto;
}
Schon mal im Voraus vielen Dank für die Hilfe.
nance
Hi,
gib dem div-Tag eine Breite und setze text-align auf center. Dann müsste das Bild mittig zentriert werden.
Die Größe des Bildes würde ich nicht verändern, da die Browser ads meistens in minderer Qualität darstellen.
MfG Hopsel
Hi!
gib dem div-Tag eine Breite und setze text-align auf center. Dann müsste das Bild mittig zentriert werden.
Meinst du noch ein div um das Bild rum? Sonst hat das div ja schon eine Breite von 9em
Die Größe des Bildes würde ich nicht verändern, da die Browser ads meistens in minderer Qualität darstellen.
Das hab ich mir schon gedacht, bzw. so rausgelesen bei den Artikeln, die ich gefunden habe.
Danke
nance
Hi,
Meinst du noch ein div um das Bild rum?
ja!
Beispiel:
<div style="text-align: center; width: 500px;">
//jetzt kommt dein div mit Bild
</div>
Viola!
Sonst hat das div ja schon eine Breite von 9em
Aber wie willst du etwas zentrieren, wenn es die gesamte Breite des divs einnimmt?
Achja, ich weiß nicht, ob es dich stört, aber ich würde via "border: 0px;" den Linkrahmen um dein Bild entfernen.
MfG Hopsel
Hi!
gib dem div-Tag eine Breite und setze text-align auf center. Dann müsste das Bild mittig zentriert werden.
Ich hab's gerade versucht, und es funktioniert. Ich weiß aber nicht, warum das nicht schon eher geklappt hat. Ich war mir sicher, das schon mal probiert zu haben.
Gibt's auch noch eine Möglichkeit, das Bild vertikal zu zentrieren?
Danke
nance
Hi,
Gibt's auch noch eine Möglichkeit, das Bild vertikal zu zentrieren?
sicher. Mit "vertical-align: middle;" !
MfG Hopsel
Hi Hopsel,
sicher. Mit "vertical-align: middle;" !
Funktioniert leider nicht.
Auch ein extra div um das Bild funktioniert nicht, weder horizontal noch vertikal. Ich hab die Ausrichtung in einer Klasse beim Link untergebracht.
Der Rahmen um das Bild ist auch per css entfernt.
Hast du noch andere Ideen, das Bild vertikal zu zentrieren? Es hängt immer noch am oberen Rand, dafür aber jetzt in der Mitte.
nance
Hi,
Funktioniert leider nicht.
Auch ein extra div um das Bild funktioniert nicht, weder horizontal noch vertikal. Ich hab die Ausrichtung in einer Klasse beim Link untergebracht.
kannst du deinen jetzigen Quellcode bereitstellen?
Hast du noch andere Ideen, das Bild vertikal zu zentrieren? Es hängt immer noch am oberen Rand, dafür aber jetzt in der Mitte.
"vertical-align: middle;" ist schon richtig. Deine Fehler muss woanders liegen.
MfG Hopsel
Hi,
kannst du deinen jetzigen Quellcode bereitstellen?
Klar
<body>
<div class="obenlinks">
<a class="logo" href="{PLH_LOGO/Link}"><img src="{PLH_LOGO/Bild}" alt="logo" width="144" height="144"/></a>
</div>
<div class="kopfoben">
<xsl:apply-templates select="Logos"/>
</div>
<div class="kopfmittelinks">
</div>
<div class="kopfmitterechts">
</div>
<div class="kopfuntenlinks">
</div>
<div class="kopfuntenrechts">
</div>
<div class="untenlinks">
</div>
<div class="untenrechts">
</div>
</body>
css:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
background-color : #6699CC;
color: #000000;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
/************** Layout allgemein ****************/
div {
position: absolute;
margin: 0em;
padding: 0em;
border: 0px none #000000;
}
img {
border: 0;
}
.obenlinks {
height: 9em; /**144px**/
top: 0px;
}
.kopfoben {
top: 0px;
height: 3.37em; /**54px**/
}
.kopfmittelinks, .kopfmitterechts {
top: 3.37em;
height: 2.25em; /**36px**/
}
.kopfuntenlinks, .kopfuntenrechts {
top: 5.62em; /**90px**/
height: 3.37em;
}
.untenlinks, .untenrechts {
top: 9em;
bottom: 0em;
height: auto;
}
.obenlinks, .untenlinks {
left: 0em;
width: 9em;
}
.untenrechts, .kopfoben {
left: 9em;
right: 0em;
min-width: 39.37em; /**630px**/
_width: 100%;
}
.kopfmittelinks, .kopfuntenlinks {
left: 9em;
width: 29.37em; /**470px**/
}
.kopfmitterechts, .kopfuntenrechts {
left: 38.38em; /**614px**/
right: 0px;
min-width: 10em;
}
/************** Ausrichtung **********************/
.logo {
text-align: center;
vertical-align: middle;
width: 144px;
height: 144px;
}
.obenlinks {
text-align: center;
vertical-align: middle;
}
Ich hoffe, das hilft weiter.
Falls nicht, kann ich auch gern noch mehr schicken.
Gruß
nance
Hallo!
Weiß jemand woran es liegt, dass ich Links nicht mit vertical-align:center mittig ausrichten kann.
Danke.
nance
Hi,
Weiß jemand woran es liegt, dass ich Links nicht mit vertical-align:center mittig ausrichten kann.
Zum einen weil center kein zulässiger Wert für vertical-align ist.
Zum anderen vermutlich deshalb, weil Du vertical-align für ein Element benutzt, für das es nicht gilt.
cu,
Andreas