1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Img Positionierung

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von mschoening, 31.10.07.

  1. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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:
    Code:
    <!-- *** 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:
    Code:
    /* -- Footer ------------------------------------------------- */
    #footer {
        padding: 10px;
        background: url(../../images/section_bg.png) repeat transparent;
    }
    
    #footer div a img {
        vertical-align: middle;
    }
    /* ----------------------------------------------------------- */
    

    Hier gehts zur momentanen Webseite.
     
  2. kilimano

    kilimano Braeburn

    Dabei seit:
    30.08.07
    Beiträge:
    47
    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
     
  3. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    okay hier die Verdeutlichung:

    So ist es im moment:
    [​IMG]

    ...und so möchte ich es gerne:
    [​IMG]
     
  4. rentophil

    rentophil Weisser Rosenapfel

    Dabei seit:
    16.04.07
    Beiträge:
    789
  5. dewey

    dewey Gewürzluiken

    Dabei seit:
    01.05.06
    Beiträge:
    5.732
    bei mir isses auch in der mitte :)

    edit: mit camino hab ichs angeschaut
     
  6. kilimano

    kilimano Braeburn

    Dabei seit:
    30.08.07
    Beiträge:
    47
    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
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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?
     
  8. rentophil

    rentophil Weisser Rosenapfel

    Dabei seit:
    16.04.07
    Beiträge:
    789
    Ich hab den Firefox (Zurzeit noch unter WinXP)
     
  9. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Das muss aber doch irgendwie auch für alle Browser gehen!!! Vielleicht mit Hintergundbildern? Hat jemand eine Idee?
     
  10. Dr.Apfelkern

    Dr.Apfelkern Jerseymac

    Dabei seit:
    18.04.07
    Beiträge:
    454
    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.
     
  11. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Kann ich denn die Ausrichtung durch vertical-align nicht ändern?
     
  12. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
  13. Dr.Apfelkern

    Dr.Apfelkern Jerseymac

    Dabei seit:
    18.04.07
    Beiträge:
    454
    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.

    Code:
    <table>
    <tr>
    <td valign="center">
    Dein Inhalt
    </td>
    
    <td valign="center">
    <img src="Bild">
    </td>
    
    </tr>
    </table>
    
    
    
     
  14. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    @Hilarious: Wie würde das in meinem Beispiel denn dann richtig sein? Ich habe gerade mal versucht aber es klappt nicht.
     
  15. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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:
    Code:
    #footer {
        padding: 10px;
        background: url(../../images/section_bg.png) repeat transparent;
    }
    
    #footer div a {
        vertical-align: middle;
    }
    
     
  16. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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)?
     
  17. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    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.
     
  18. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    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.
     
  19. drok

    drok Klarapfel

    Dabei seit:
    02.06.07
    Beiträge:
    278
    und was kommt wenn du dem img-tag folgendes attribut mitlieferst ?

    Code:
    align="middle"
    ggf. mit "line-height" verknüpfen ?
     
  20. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Align darf ich bei XHTML Strict nicht verwenden glaube ich...
     

Diese Seite empfehlen