• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild zentrieren

Z

zefug

Neues Mitglied
Hallo,

ich habe ein Bild, das möchte ich ganz oben und mittig haben. Dass es ganz oben ist habe ich gelöst, allerdings kann ich es nicht zentrieren. Wenn ich z.B. <center> eigeben, so beginnt das bild in der mitte der Website und wird nicht zentriert. Weiß jemand was ich hier ergänzen muss?

<div style="position:absolute; top:0px; middle:0px">
<img src="/images/Navibar.png"></div>

danke.
 
Werbung:
Hallo,
hast du das schon probiert:
Code: 
<div align="center">
Hier deinen HTML Code, z.B. <img src="" alt="" height="16" width="16" />
</div>
Mit freundlichen Grüßen
 
Ja, so bginnt das Bild in der Mitte, aber so soll nicht in der mitte beginnen, es soll Ja perfekt zentrieret werden.

Danke
 
Werbung:
Hallo,
so sollte es eigentlich funktionieren:
Code: 
<div align="center" style="height:123px;width:456px;">
Hier deinen HTML Code, z.B. <img src="/images/Navibar.png" alt="" height="123" width="456" />
</div>
Bei dem Code musst du jedes "123" durch die Höhe des Bildes und "456" durch die Breite des Bildes ersetzen, dann sollte es eigentlich nicht mehr in der Mitte anfangen, sondern komplett zentriert sein.
Mit freundlichen Grüßen
 
Ohne alles drumherum:
Code: 
<img style="text-align: center;" src="/images/Navibar.png">
bzw. anstelle der Styleangabe eine CSS-Klasse bilden.
 
Hallo prm,
soweit ich weiß, bezieht sich das CSS-Attribut "text-align" lediglich auf Text, wie schon so schön im Namen erkennbar ist :p
Mit freundlichen Grüßen
 
Werbung:
Andreas B schrieb:
Hallo prm,
soweit ich weiß, bezieht sich das CSS-Attribut "text-align" lediglich auf Text, wie schon so schön im Namen erkennbar ist :p
Mit freundlichen Grüßen
Zum Vergrößern anklicken....

Dann solltest du dein Wissen etwas erweitern. text-align bezieht sich auf Inline Elemente, dazu gehören auch Bilder (Nicht vom Namen verwirren lassen).

@zefug: Schmeiss deine Absolute Positionireung weg und benutze das Beispiel von prm.

Wenn du einen gültigen Doctype hast und die margin und padding Abstände auf 0 gesetzt sind sollte dein Bild dann genau da stehen wo du es haben willst.

Gruss
Elroy
 
Habe deinen rat befolgt (PRM - Code), jetzt ist das Bild weder oben, noch zentriert. Es soll aber ganz oben sein und zentriert werden.....

Hat jemand noch eine Idee?
 
Hallo,
hattest du meinen neuesten Code schon probiert? Bin mir sehr sicher dass es damit geht, auch wenn es vielleicht nicht die kürzeste/eleganteste Variante ist.
Andreas B schrieb:
Code: 
<div align="center" style="height:123px;width:456px;">
Hier deinen HTML Code, z.B. <img src="/images/Navibar.png" alt="" height="123" width="456" />
</div>
Bei dem Code musst du jedes "123" durch die Höhe des Bildes und "456" durch die Breite des Bildes ersetzen, dann sollte es eigentlich nicht mehr in der Mitte anfangen, sondern komplett zentriert sein.
Zum Vergrößern anklicken....
Ansonsten könnte es an dem von dir verwendeten DOCTYPE liegen, dass es mit text-align nicht funktioniert.
Mit freundlichen Grüßen
 
Werbung:
Hallo,
dann probier es zusätzlich noch so:
<html style="height:100%;width:100%">
....
<body style="height:100%;width:100%">

Den Rest solltest du so lassen können.
Mit freundlichen Grüßen
 
So wird das nichts. Du hast nicht mal die HTML-Grundstruktur drinne und schreibt auszugebenden Quellcode in den <head>-Bereich. Bitte schau dir nochmal die HTML-Grundlagen an ohne die das sowieso nicht wirklich funktionieren wird. Wenn Du das hast, kannst Du auch ein Bild mit

Code: 
img {
 display: block;
 margin: 0 auto;
}

horizontal zentrieren.
 
Werbung:
Danke,

aber hat leider auch nichts gebracht, habe ich es falsch eingebaut? www.zefug.de

Mal davon abgesehen, muss ich sagen, dass seit dem rausmachen von "absolute" das Bild nicht mehr oben beginnt, sondern etwas weiter unten....
 
zefug schrieb:
nicht mehr oben beginnt, sondern etwas weiter unten....
Zum Vergrößern anklicken....

Hallo,
das liegt an den Standardwerten vom HTML/BODY tag. Standardmäßig ist dort ein margin von ein paar pixeln drin, das kannst du via CSS aber "resetten":
Code: 
html,body{margin:0;padding:0;}
Kümmere dich aber lieber erst um das was threadi erwähnte, das ist wichtiger ;)
Mit freundlichen Grüßen
 
Werbung:
Hallo.

Ich habs dir mal schnell gemacht damit das keine endlose Geschichte wird.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Zefug.de</title>
<meta name="keywords" content="zefug.de zefug homepage">
     <link rel="stylesheet" type="text/css" href="/MAIN.css">
     <style type="text/css">
     <!--
     * {margin: 0;
        padding: 0;}

     body {background-image: url('/images/background_oben.png');
           background-repeat: repeat-x;
           background-color: #DFDFDF;
           font-family: Trebuchet MS, arial;
           font-size: 12px;
           color: black;}

     .mitte {text-align: center;}
     -->
     </style>
</head>
  <body>
     <p class="mitte"><img src="/images/Navibar.png" alt="Titelbar" height="90px"         
     width="1007px"></p>
  </body>
</html>
Aber jetzt kümmere dich erst mal ein wenige um die HTML und CSS Grundlagen sonst gibts von mir keine Hilfe mehr.

Gruss
Elroy
 
Zuletzt bearbeitet:
Ich danke dir und jedem anderen! Es funktioniert (*finsteres lachen; hände reiben*). Bis (hoffentlich nicht so) bald :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben