Bild per HTML in die Mitte verschieben!
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausprobieren
bild
code
editor
einlesen
header
hervorragend funktionieren
http
info
kopieren
mitte
quellcode
setzen
sichtlich aufpassen
stehen
unterscheiden
untertitel
url
verzichten
wichtigste url
-
Hi,
cDas ist mein PHP Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x html1-transitional.dtd"> kopieren <html xmlns="http://www.w3.org/1999/xhtml" ;> kopieren <head> <meta http-equiv="Content-Type&quo t; content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> </head> <body> <p><img src="header.png" width="730" height="337" align="middle" /> </p> <p><h1>Herzlich Willkommen auf nicolas.de</h1> <p><img src="footer.png" width="730" height="212" align="middle" /></p> <script src="http://layer.lima-city.de/support _layer.php" kopieren type="text/javascript"& gt;</script></body> </html>
Die Bilder footer.png und header.png sollen in die Mitte.
Hier eine Vorschau:
http://bettag.lima-city.de/test/U nbenannt-2.php kopieren
Wie kriege ich das in die Mitte?!
Beitrag zuletzt geändert: 26.11.2009 10:36:14 von cbhp -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn Du horizontal mittig meinst, kannst Du zum Beispiel folgendes verwenden.
<p align="center"></p>
oder direkt
<center></center>
Vertikal weiß ich leider auch grad nicht.. Vielleicht was mit CSS ausprobieren.
-
ich benutze Dreamweaver CS4, wie macht man das da?!
-
Das was du gepostet hast, ist ein HTML Code und nichts weiter;) Dreamweaver ist u.a ein WYSIWYG-Editor, danach müsste es recht einfach sein. Allerdings solltest du auf das center-Tag verzichten, da es veraltet ist.
Du solltest es über CSS machen.
text-align:center;
Wenn du Teile von dem was ich gesagt habe, nicht verstanden hast, solltest du dich mal etwas in die Materie HTML/CSS einlesen, denn es bringt dir nichts, wenn du nur stur etwas vorgekaut bekommst. -
Hmmm es gibt zwei lösungsansätze. Vorab noch eine Info: Das Bild nicht zwischen <p></p> setzen.
Lösungsansatz Nr. 1:
Du stellst dein Bild in ein div also wie folgt:
und setzt das div via align="center" in die Mitte.<div><img src="Pfad zum Bild"><div>
müsste da stehen.<div align="center"><img src="Pfad zum Bild"><div>
Lösungansatz 2:
Ist zwar nicht der eleganteste aber auch ein Weg. Du baust dir eine Tabelle mit Einer Zeile und einer Spalte und setzt die komplette tabelle via align="center" in die Mitte
Das müsste in etwa so aussehen:
<table align="center""> <tr> <td><img src="Pfad zum Bild"></td> </tr> </table>
Um das Vertikal zu zentrieren fügst du eben neben das normale align ein valign ein und setzt dahintrer ein center. Müsste in beiden Lösungsansätzen gehen.
Beitrag zuletzt geändert: 25.11.2009 22:06:24 von kalinawalsjakoff -
Weiterer Lösungsansatz mit bereinigtem Code wenn alles zentriert sein sollte
<body> <div style="margin-right:auto; margin-left:auto; width:730px;"> <img src="header.png" width="730" height="337" align="middle" /> <h1>Herzlich Willkommen auf nicolas.de</h1> <img src="footer.png" width="730" height="212" align="middle" /> <script src="http://layer.lima-city.de/support _layer.php" kopieren type="text/javascript"& gt;></script> </div> </body>
Und nur das Bild zentriert (...achte auf den Endtag des DIVs, nur der hat sich geändert):
<body> <div style="margin-right:auto; margin-left:auto; width:730px;"> <img src="header.png" width="730" height="337" align="middle" /> </div> <h1>Herzlich Willkommen auf nicolas.de</h1> <img src="footer.png" width="730" height="212" align="middle" /> <script src="http://layer.lima-city.de/support _layer.php" kopieren type="text/javascript"& gt;></script> </body>
Weitere Verbesserungen wären es, wenn Du dem DIV eine ID gibst und das Style in den Header schreibst oder gleich in ein externes Stylesheet.
P.S. Achte auf Deine Quellcode und schreibe ihn sauber, Du hast manche Tags nicht geschlossen oder beim script das ">" vergessen.
Auch wenn man sich von DW helfen läßt, ein Blick in den Code ist das Wichtigste.
http://www.css4you.de/ ist Dein Freund
Gruß .
Beitrag zuletzt geändert: 26.11.2009 9:58:20 von tom-moeller -
kalinawalsjakoff schrieb: Hmmm es gibt zwei lösungsansätze. Vorab noch eine Info: Das Bild nicht zwischen <p></p> setzen.
Prinzipiell spricht nichts dagegen ein Bild in einem Paragraphen stehen zu haben. Das entspricht ja durchaus der Realität. Wo man aber nun sichtlich aufpassen muss ist die Benutzung in diesem Fall:
[Zugegeben, dass ich mir das wohl zu wenig angeschaut habe]
Anscheinend handelt es sich dabei um eine Header-Graphik. In diesem Fall sollte man nocheinmal unterscheiden, ob es sich um ein Logo als solches oder wirklich "nur" um ein graphisches Element handelt. Je nachdem sieht der allgemeine HTML5 Aufbau wie folgt aus:
.. </head> <body> <header> <a href="#" title="Startseite"> <hgroup> <h1>Der Titel der Seite</h1> <h2>Untertitel</h2> </hgroup> </a> </header> ...
Falls es sich um ein Logo handelt, würde es sich anbieten, das h1 zu ersetzen:
Dies beschreibt nun einen mehr oder weniger vollständigen semantischen Aufbau - allerdings keine Patentlösung.<h1><img src="..." title="Der Titel der Seite" alt="Logo der Webseite..." /></h1>
Die restlichen Formatierungen sollten dann mit CSS übernommen werden! -
<img src="header.png" style="display:block; width:730px; height:337; margin: 0 auto;" />
Das sollte hervorragend funktionieren. Beachte aber, dass das Bild dann im Elternelement zentriert ist.
Beitrag zuletzt geändert: 26.11.2009 20:44:42 von jmuc -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
