Img Positionierung

[mschoening]

Hi,
ich habe ein Problem mit einem Footer einer Seite die ich gerade code. In dem Footer steht der übliche Text: "Copyright, 2007. Valid XHTML & CSS." Jetzt habe ich aber das XHTML und das CSS als img-Tag eingebettet und bekomme den Text davor und dannach nicht auf exakt die gleiche Höhe.

Code Beispiel:
XHTML:

<!-- *** Footer *** -->
<div id="footer">
    <div class="small left">© 2007 Edwin Toledo Palao. Valid <a href="#"><img src="http://www.apfeltalk.de/forum/images/xhtml.png" alt="XHTML" /></a> & <a href="#"><img src="http://www.apfeltalk.de/forum/images/css.png" alt="CSS" /></a>.</div>
    <div class="small right">Design and hosting by Pandemic2</div>
    <div class="clear"></div>
</div>
<!-- *** End Footer *** -->

CSS:

/* -- Footer ------------------------------------------------- */
#footer {
    padding: 10px;
    background: url(../../images/section_bg.png) repeat transparent;
}

#footer div a img {
    vertical-align: middle;
}
/* ----------------------------------------------------------- */

Hier gehts zur momentanen Webseite.

 

[kilimano]

auf den ersten blick sieht der code gut aus, aber ich versteh dein anliegen nicht ganz genau... wie meinst du das mit exakt in gleicher höhe? habe deine webseite besucht und es schaut eigentlich ganz gut aus...

mfg

 

[mschoening]

Hi,
okay hier die Verdeutlichung:

So ist es im moment:

...und so möchte ich es gerne:

 

[rentophil]

http://www.apfeltalk.de/gallery/showphoto.php?photo=8270&cat=500

seh ich schlecht? ich glaub das is die gleiche höhe

 

[dewey]

bei mir isses auch in der mitte

edit: mit camino hab ichs angeschaut

 

[kilimano]

hm ok, hab es vorher mit FIrefox angeschaut und da passt es ja... eben nochma mit dem Safari angeschaut und dort wird es wie beschrieben etwas versetzt, ich werd ma bischen rumtesten und bei evtl. erfolg bericht erstatten xD

spontan würd ich die schuld auf die browser interpretation werfen, gibt ja immer probleme damit -.-

mfg

edit: soviele schreibfehler *schäm*... teste morgen weiter, brauch jetzt schlaf xD

 

[mschoening]

Hi,
@rentophil, @dewey: Mit welchem Browser habt ihr denn getestet?

Wenn ich es mir mit FF und Safari anschaue sieht es nicht gut aus...Camino benutze ich nicht! Wie bekommt man das denn Cross-browser hin?

 

[rentophil]

Ich hab den Firefox (Zurzeit noch unter WinXP)

 

[mschoening]

Das muss aber doch irgendwie auch für alle Browser gehen!!! Vielleicht mit Hintergundbildern? Hat jemand eine Idee?

 

[Dr.Apfelkern]

Das Problem ist ganz einfach. Es ist einfach nicht vorgesehen und äußerst unüblich, dass man Text in eine Zeile mit Bildern setzt.

Text richtet sich von Grund her an der oberen Linie aus. Ein Bild aber auch. Da deine Bilder aber in Pixeln größer (höher) sind als deine Schrift, ragen diese über die Schrift hinaus nach unten.

Eine Mitte wird sich rein technisch nur dann ergeben, wenn du der Schrift genau die Pixelhöhe der Bilder zuordnest.

Wenn du es dennoch machen willst, mußt du Tabellen verwenden.

 

[mschoening]

Kann ich denn die Ausrichtung durch vertical-align nicht ändern?

 

[Hilarious]

Theoretisch ist das schon vorgesehen, was Du machen möchtest, nur musst Du vertical-align so einsetzen, dass es sich auf die Kind-Objekte auswirken kann und nicht auf das Ojekt selbst:
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

Vielleicht hilft's

 

[Dr.Apfelkern]

Nein. Nicht in dem sinne wie du denkst.

Du verlagerst damit zwar die Ausrichtung von Objekten in die Mitte eines Körpers oder eines Div-Bereiches. Aber auch dort richtet sich der Text wieder an einer für den Nutzer unsichtbaren Linie oberhalb aus, und das Bild eben auch.

Nimm mal eine Tabelle, dann wird es am ehesten funktionieren.

<table>
<tr>
<td valign="center">
Dein Inhalt
</td>

<td valign="center">
<img src="Bild">
</td>

</tr>
</table>

 

[mschoening]

Hi,
@Hilarious: Wie würde das in meinem Beispiel denn dann richtig sein? Ich habe gerade mal versucht aber es klappt nicht.

 

[mschoening]

Hi,
ich habe es doch geschafft! Thanks für eure Hilfe! Das Ergebnis sieht man hier.

Zu früh gefreut. In FF ist es immer noch nicht genau zentriert. Bei Safari schon...

@Hilarious:
Ich habe das jetzt so gemacht:

#footer {
    padding: 10px;
    background: url(../../images/section_bg.png) repeat transparent;
}

#footer div a {
    vertical-align: middle;
}

 

[mschoening]

Es will einfach nicht klappen. Eine Tabelle möchte ich nicht nehmen, werde noch weiter probieren. Ich melde mich wenn es klappt.

@Hilarious: Habe ich das denn jetzt richtig gemacht (siehe einen Beitrag weiter oben)?

 

[Hilarious]

Es will einfach nicht klappen. Eine Tabelle möchte ich nicht nehmen, werde noch weiter probieren. Ich melde mich wenn es klappt.

@Hilarious: Habe ich das denn jetzt richtig gemacht (siehe einen Beitrag weiter oben)?

Theoretisch schon. Unschön sind natürlich die Unterschiede in den Browsern. Fragt sich nur, ob man die Vermischung von Text und Bildern tatsächlich braucht, oder ob einfache CSS+HTML-Konstrukte nicht auch helfen, wenn's mit den Browsern nicht klappt.

Ich könnte mir vorstellen, dass Du einfach die Wörter »XHTML« und »CSS« als generischen Text verwendest, und diese per CSS zu einem schicken Kästchen umformst.

 

[Hilarious]

Nein. Nicht in dem sinne wie du denkst.

Du verlagerst damit zwar die Ausrichtung von Objekten in die Mitte eines Körpers oder eines Div-Bereiches. Aber auch dort richtet sich der Text wieder an einer für den Nutzer unsichtbaren Linie oberhalb aus, und das Bild eben auch.

Nimm mal eine Tabelle, dann wird es am ehesten funktionieren.

<table>
<tr>
<td valign="center">
Dein Inhalt
</td>

<td valign="center">
<img src="Bild">
</td>

</tr>
</table>

Wenn Du eine Tabelle zur Positionierung verwendest, erzeugst Du natürlich semantischen »Unsinn«, denn diese dient ja nur der Optik und transportiert gar keinen Inhalt, der einer Tabelle gerecht wird (wie zum Beispiel Fussball-Ergebnisse oder Umrechnungskurse). Dass es damit auch geht, steht nicht zur Debatte. Die Frage ist vielmehr, ob nicht eine Ausrichtung rein mit den Mitteln von CSS möglich ist. Insofern scheidet Deine Lösung leider aus.

 

[drok]

und was kommt wenn du dem img-tag folgendes attribut mitlieferst ?

align="middle"

ggf. mit "line-height" verknüpfen ?

 

[mschoening]

Align darf ich bei XHTML Strict nicht verwenden glaube ich...