Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   Bild vertikal zentrieren (html) (https://www.delphipraxis.net/25011-bild-vertikal-zentrieren-html.html)

Nicolai1234 29. Jun 2004 19:14
Bild vertikal zentrieren (html)
 
Wie kann ich mit html oder php ein Bild in eine Internetseite so einfügen, dass es vertikal zentriert ist?
Danke
Nicolai

Markus 29. Jun 2004 19:16
Re: Bild vertikal zentrieren (html)
 
Hmm, ich würd es in eine Tabelle packen (1x1) und dann zentrieren.

Meflin 29. Jun 2004 19:20
Re: Bild vertikal zentrieren (html)
 
oder mit css 50% vertical alignen und dann um die hälfte der bildgröße * (-1) verschieben (mit marign)

Nicolai1234 29. Jun 2004 19:21
Re: Bild vertikal zentrieren (html)
 
Zitat:
Zitat von Meflin
oder mit css 50% vertical alignen und dann um die hälfte der bildgröße * (-1) verschieben (mit marign)
Das muss mir mal einer genauer erklären :gruebel:

Meflin 29. Jun 2004 19:25
Re: Bild vertikal zentrieren (html)
 
ganz einfach: mit
Code:
<style type="text/css">
    /*<![CDATA[*/ 
      .inhalt { 
        height:300px;
        width:650px;
        margin-top: -149px;
        margin-left: -325px;
        top:50%;
        left:50%;
        position: absolute;
      } 
    /*]]>*/ 
  </style>
wird das teil omplett in der mitte ausgerichtet. wenn dus nur vertikal haben willst dann
Code:
<style type="text/css">
    /*<![CDATA[*/ 
      .inhalt { 
        height:300px;
        width:650px;
        margin-left: -325px;
        left:50%;
        position: absolute;
      } 
    /*]]>*/ 
  </style>
die größen musst du halt entsprechend deines bildes anpassen. die vorgehensweise ist folgende: mit left:50% wird der linke bildrand in der mitte der seite gesetzt. da das aber nicht zentriert wäre, musst du das bild noch um die hälfte seiner größe nach links verschieben, also marign-left: -325px (im beispiel)

Nicolai1234 29. Jun 2004 19:28
Re: Bild vertikal zentrieren (html)
 
Und wie und wo füge ich das dann in den html-Text ein? Ich habe wie gesagt von so etwas keine Ahnung! Ich will nur ein halbwegs ansprechendes Design auf meiner HP

alcaeus 29. Jun 2004 19:31
Re: Bild vertikal zentrieren (html)
 
Machs doch so:
Code:
<table width="100%" height="100%" border="0">
  <tr valign="middle">
    <td align="center">
      [img]bild.jpg[/img]
    </td>
  </tr>
</table>
Ich hoffe ich habe align und valign an die richtige Stelle gesetzt.

Greetz
alcaeus

Meflin 29. Jun 2004 19:31
Re: Bild vertikal zentrieren (html)
 
der code von oben muss zwischen die <head> tags. beim bild schriebst du dann
[img]bild.gif[/img]</img>
und fertig

Meflin 29. Jun 2004 19:32
Re: Bild vertikal zentrieren (html)
 
Zitat:
Zitat von alcaeus
Machs doch so:
Code:
<table width="100%" height="100%" border="0">
  <tr valign="middle">
    <td align="center">
      [img]bild.jpg[/img]
    </td>
  </tr>
</table>
Ich hoffe ich habe align und valign an die richtige Stelle gesetzt.

Greetz
alcaeus
height=100% ist kein valides 4.01 HTML!

alcaeus 29. Jun 2004 19:34
Re: Bild vertikal zentrieren (html)
 
Und wie soll man dann so etwas ohne CSS lösen?

Greetz
alcaeus

Meflin 29. Jun 2004 19:37
Re: Bild vertikal zentrieren (html)
 
da bin ich erlichgesagt auch überfragt. ich weis ja nicht was du mit dem height=100% bezwecken wolltest. in nicolais fall kann man das auch weglassen. wenn du willst, dass die tabelle die gesamte seite einnimmt, so funzt das nur mit ie. wenn du das nicht wolltest, kannst dus wie gesagt auch weglassen, weil sie eh automatisch die richtige höhe kriegt! ansonsten, warum kein css verwenden? diese css attribute unterstützt nun wirklich jeder einigermasen aktuelle browser!

alcaeus 29. Jun 2004 19:39
Re: Bild vertikal zentrieren (html)
 
Das height="100%" soll bezwecken, dass die Tabelle nicht nur die verfügbare Breite sondern auch die fixe Höhe einnimmt. Dadurch kann das Bild auch zentriert werden. Ich dachte das wurde in allen Browsern implementiert?

Greetz
alcaeus

Meflin 29. Jun 2004 19:41
Re: Bild vertikal zentrieren (html)
 
das wird nur vom ie fälschlicherweise so interpretiert. hier im forum war schon,al n thread von mir irgendwie mit dem titel webseite kompatibel oder so, da steht warum das genau so ist (fals das net k&t war). jedenfalls bastelt der ie da irgendwas mit den inlineelementen falsch zusammen...

alcaeus 29. Jun 2004 19:43
Re: Bild vertikal zentrieren (html)
 
Achso...das heißt die CSS-Methode wäre besser. Kannst du die bitte mal erklären und wie sie angewendet wird?

Greetz
alcaeus

Nicodius 30. Jun 2004 05:18
Re: Bild vertikal zentrieren (html)
 
im ordner wo sich die datei befidnet muss sich eine .css datei(wo sich der code befindet mit dem align!) befinden ;) die bindest du ein

alcaeus 30. Jun 2004 06:19
Re: Bild vertikal zentrieren (html)
 
Das erklärt immer noch nicht genau die Routine. Gilt das nun für alle Bilder?
Nur BTW: Ich kenne CSS-Dateien. Und ich weiß auch dass dieser Code so nicht funktionieren würde (HTML style-Tags). Außerdem schätze ich mal, dass ich dem img-Tag noch eine style oder eine class-Eigenschaft mitgeben muss.
Also nochmal: Wie funktioniert das GENAU?

Greetz
alcaeus

Nicolai1234 30. Jun 2004 11:40
Re: Bild vertikal zentrieren (html)
 
Mich würde das auch mal interessieren, weil mit dem bis jetzt gesagtem komme ich nicht wirklich klar :(

Meflin 30. Jun 2004 13:39
Re: Bild vertikal zentrieren (html)
 
also ich hab doch schon alles gepostet! auch wie man die klasse in den img tag einbindet... wer lesen kann ist kalr im vorteil und wenn ihr es gelesen habt und net kapiert dann ist das was anderes. allerdings weis ich net wos hängen sollte ;-)

alcaeus 30. Jun 2004 15:15
Re: Bild vertikal zentrieren (html)
 
Achso...habs irgendwie übersehen :wall: :wall: :oops:
Sorry...

Greetz
alcaeus


Alle Zeitangaben in WEZ +1. Es ist jetzt 08:10 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024-2025 by Thomas Breitkreuz