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

Objekt in Website zentrieren

U

ukr

Neues Mitglied
Hallo zusammen, ich versuche verzweifelt, das unten angegebene Objekt auf einer Website zu zentrieren. Ich habe in mehreren Foren bisher geforscht und auch die entsprechenden Anweisungen gefunden. Leider bin ich bisher immer daran gescheitert, die Anweisungen an der richtigen Stelle im HTML-Code unterzubringen. Meine Hoffnung ist es nun, in diesem Forum eine Antwort auf meine Frage zu erhalten. Den Quelltext habe ich unten auch aufgeführt. Vielen Dank im voraus.

HTML: 
[ATTACH]3218.vB[/ATTACH]                                                                                                                                                                                                                                                                                                                        <html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
xmlns="[URL="http://www.w3.org/TR/REC-html40"]HTML 4.01 Specification[/URL]">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<link rel=File-List href="index-Dateien/filelist.xml">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
b\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title>Zentrieren</title>
<style>
<!--
 /* Schriftartdefinitionen */
@font-face
        {font-family:"Times New Roman";
        panose-1:2 2 6 3 5 4 5 2 3 4;}
 /* Formatdefinitionen */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin-right:0pt;
        text-indent:0pt;
        margin-top:0pt;
        margin-bottom:0pt;
        text-align:left;
        font-family:"Times New Roman";
        font-size:10.0pt;
        color:black;}
ol
        {margin-top:0in;
        margin-bottom:0in;
        margin-left:-2197in;}
ul
        {margin-top:0in;
        margin-bottom:0in;
        margin-left:-2197in;}
@page
        {size:8.-2019in 11.2232in;}
-->
</style>
<!--[if gte mso 9]><xml>
 <o:shapedefaults v:ext="edit" spidmax="4098" fill="f" fillcolor="white [7]"
  strokecolor="black [0]">
  <v:fill color="white [7]" color2="white [7]" on="f"/>
  <v:stroke color="black [0]" color2="white [7]">
   <o:left v:ext="view" color="black [0]" color2="white [7]"/>
   <o:top v:ext="view" color="black [0]" color2="white [7]"/>
   <o:right v:ext="view" color="black [0]" color2="white [7]"/>
   <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
   <o:column v:ext="view" color="black [0]" color2="white [7]"/>
  </v:stroke>
  <v:shadow color="#c5d1d7 [4]"/>
  <v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
  <o:colormenu v:ext="edit" fillcolor="#646b86 [1]" strokecolor="black [0]"
   shadowcolor="#c5d1d7 [4]"/>
 </o:shapedefaults><o:shapelayout v:ext="edit">
  <o:idmap v:ext="edit" data="1"/>
 </o:shapelayout></xml><![endif]-->
</head>

<!--[if gte vml 1]><v:rect id="_x0000_s1025" style='position:absolute;left:99.21pt;
 top:47.48pt;width:456.38pt;height:342.28pt;z-index:1;mso-wrap-distance-left:2.88pt;
 mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
 mso-wrap-distance-bottom:2.88pt' o:preferrelative="t" fillcolor="#fc9"
 stroked="f" strokecolor="black [0]" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke color2="white [7]">
  <o:left v:ext="view" color="black [0]" color2="white [7]" joinstyle="miter"/>
  <o:top v:ext="view" color="black [0]" color2="white [7]" joinstyle="miter"/>
  <o:right v:ext="view" color="black [0]" color2="white [7]" joinstyle="miter"/>
  <o:bottom v:ext="view" color="black [0]" color2="white [7]" joinstyle="miter"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:imagedata src="index-Dateien/image293.emz" o:title="&lt;EMPTY&gt;"/>
 <v:shadow color="#c5d1d7 [4]"/>
 <v:path o:extrusionok="f" insetpenok="f"/>
 <o:lock v:ext="edit" aspectratio="t"/>
</v:rect><![endif]--><![if !vml]><span style='position:absolute;z-index:1;
left:132px;top:63px;width:609px;height:457px'><img width=609 height=457
src="index-Dateien/image2931.png" v:shapes="_x0000_s1025"></span><![endif]><!--[if gte vml 1]><v:shapetype
 id="_x0000_t202" coordsize="21600,21600" o:spt="202" path="m,l,21600r21600,l21600,xe">
 <v:stroke joinstyle="miter"/>
 <v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1026" type="#_x0000_t202" style='position:absolute;
 left:249.44pt;top:96.37pt;width:138.9pt;height:51.03pt;z-index:2;
 mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
 mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' filled="f"
 fillcolor="white [7]" stroked="f" strokecolor="black [0]" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke color2="white [7]">
  <o:left v:ext="view" color="black [0]" color2="white [7]"/>
  <o:top v:ext="view" color="black [0]" color2="white [7]"/>
  <o:right v:ext="view" color="black [0]" color2="white [7]"/>
  <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:shadow color="#c5d1d7 [4]"/>
 <v:path insetpenok="f"/>
 <v:textbox style='mso-column-margin:2mm' inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
</v:shape><![endif]--><![if !vml]><span style='position:absolute;z-index:2;
left:333px;top:129px;width:186px;height:69px'>
<table cellpadding=0 cellspacing=0>
 <tr>
  <td width=186 height=69 style='vertical-align:top'><![endif]>
  <div v:shape="_x0000_s1026" style='padding:2.88pt 2.88pt 2.88pt 2.88pt'
  class=shape>
  <p class=MsoNormal><span lang=de style='font-size:48.0pt;language:de'>Probe</span></p>
  </div>
  <![if !vml]></td>
 </tr>
</table>
</span><![endif]><!--[if gte vml 1]><v:rect id="_x0000_s1027" style='position:absolute;
 left:294.8pt;top:229.6pt;width:49.92pt;height:44.16pt;z-index:3;
 mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
 mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt'
 o:preferrelative="t" filled="f" fillcolor="white [7]" stroked="f"
 strokecolor="black [0]" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke color2="white [7]">
  <o:left v:ext="view" color="black [0]" color2="white [7]"/>
  <o:top v:ext="view" color="black [0]" color2="white [7]"/>
  <o:right v:ext="view" color="black [0]" color2="white [7]"/>
  <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:imagedata src="index-Dateien/image295.jpg" o:title="Parkhaus"/>
 <v:shadow color="#c5d1d7 [4]"/>
 <v:path o:extrusionok="f" insetpenok="f"/>
 <o:lock v:ext="edit" aspectratio="t"/>
</v:rect><![endif]--><![if !vml]><span style='position:absolute;z-index:3;
left:393px;top:306px;width:67px;height:59px'><img width=67 height=59
src="index-Dateien/image2951.jpg" v:shapes="_x0000_s1027"></span><![endif]>
</div>
</body>
</html>
 

Anhänge

  • Test.jpg
    Test.jpg
    4,1 KB · Aufrufe: 6
Zuletzt bearbeitet von einem Moderator:
Dein Quellcode ist kein HTML-Code sondern ein Konstrukt was entsteht, wenn man ein MS Office Programm zur Bearbeitung von HTML-Dateien verwendet. Bitte verwende einen anderen Editor, schreibe den HTML-Code valide nach W3C-Regeln komplett neu. Nur so kann man dir dann auch verlässlich Hilfe leisten. Denn das was ein MS Office Programm an "HTML-Code" erzeugt, funktioniert so nur im Internet Explorer, und nicht mal dort richtig und irgendwie logisch.
 
Ansicht.jpgVielen Dank für die Information, habe jetzt mittels HTML-Editor Phase 5.6.2.3 eine Zentrierung eines Bildes programmiert. Dies funktioniert auch in dem integrierten Browser gut (siehe unten), aber im Internet Explorer wird diese Anweisung offenbar nicht ausgeführt (siehe beigefügte Datei oben). Liegt dies vielleicht an der Doctype-Anweisung?8) Nachfolgend der HTML-Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body
{
background-color:#FEF2F3; }
}
#Bild
{
position: absolute;
z-index: 1
width: 514px;
height: 322px;
left: 50%;
top: 50%;
margin-left: -257px;
margin-top: -161px;
}</style>
<meta name="author" content="ulli">
<meta name="editor" content="html-editor phase 5">
</head>
<div id="Bild";>
<img src="test.png" border="0">
</div>
</html>
 
Deinem HTML-Code fehlt der body-Abschnitt. Nicht valider Code kann auch Probleme verursachen.

Und verwende Bitte Code-Tags wenn Du Quellcode im Forum zeigst.
 
Habe den Body-Abschnitt eingegeben (siehe unten), trotzdem das gleiche Ergebnis
HTML: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="ulli">
<meta name="editor" content="html-editor phase 5">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<style type="text/css">
   body
   {
         background-color:#FEF2F3; }
   }
#Bild
         {
         position: absolute;
         z-index: 1
         width: 514px;
         height: 322px;
         left: 50%;
         top: 50%;
         margin-left: -257px;
         margin-top: -161px;
         }
</style>
<meta name="author" content="ulli">
<meta name="editor" content="html-editor phase 5">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="Bild";>
<img src="test.png" border="0">
</div>
</body>
</html>
 
Welchen Internet Explorer verwendest du denn?
Wenn es ei älterer ist, vergiss ihn einfach und ändere dein Doctype zu zu <!Doctype html> :)

Nach dem
<div id="Bild";>
Zum Vergrößern anklicken....
kommt kein ; hin, entferne das.
Border="0" wird soweit ich weiß nichtmehr unterstützt, löse das mit
<style type="text/css">#bild{border:none;}</style>
Zum Vergrößern anklicken....

Das zentrieren löst du normalerweise mit
<style type="text/css">#bild{margin: 0 auto; text-align:center;}</style>
Zum Vergrößern anklicken....
=> Lass das mit 'position' sein
 
Das sollte funktionieren und ist valide:

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<title>Hier steht dein Titel</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{background-color:#FEF2F3; 
}
#Bild{display:block;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<div id="Bild">
<img src="test.png" alt="Dein Bild muss ein Alt-Attribut haben!">
</div>
</html>
 
Vielen Dank für die Info, habe alles ausprobiert, leider hat sich an der Darstellung im IE 10 nichts geändert.
 
Entschuldigung, Screenshot wovon? Falls Du das Ergebnis im IE 10 meinst, das sieht immer noch so aus wie in meinem weiter unten eingefügten Bild.
 
Entschuldigung, habe natürlich eine Zeile vergessen
HTML: 
 <!DOCTYPE>
<html>
<head>
<title>Bild</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
   body
   {
         background-color:#FEF2F3; }
   }
#Bild
         {
<!--
         position: absolute;
         z-index: 1
         width: 514px;
         height: 322px;
         left: 50%;
         top: 50%;
         margin-left: -257px;
         margin-top: -161px;
-->
         margin: 0 auto; text-align:center;
         }
</style>
</head>
<div id="Bild">
<img src="test.png" alt="Dein Bild muss ein Alt-Attribut haben!">
</div>
</html> [!HTML]
 
Entschuldigung, das Problem liegt darin, daß ich auch nach Deiner Änderung im IE 10 immer noch das gleiche Problem habe.
 
Nicht nur dass die Doctype-Angabe immer noch nicht korrekt ist, fehlt in dem Code auch der body-Tag, daher kann auch die css-Definition nicht zuverlässig greifen. Mach erstmal Deinen Code valide.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben