Habe schon im Forum gesucht aber nix gefunden.
Ich möchte das meine Seite z.B. 800 x 600 pix bei jedem Monitor, egal ob 17 , 19, oder 21 Zoll, immer in der Mitte zentriert steht. Wie geht das?
Ich mache meine Seite mit Dreamweaver MX.
Seite immer zentriert in der Mitte?
-
Moin
Horizontal geht es, indem du z.B. dem div, das die seite darstellt via css margin: auto gibst.Fürs vertiakale probier mal dem body via css die eigentschaft vertical-align: midle zu geben.
-
Code
<table border="0" heigth="100%" width="100%"> <tr><td align="center" valign="middle"> <iframe src="seite.html" width="800" height="600" name="hummldumml"></iframe> </td></tr> </table> -
Oder mit CSS:
CSS (innerhalb des Headbereichs oder in ausgelagerte Datei einfügen)Code
Alles anzeigen<style type="text/css"> body { margin: 0;padding: 0; } #center { position: absolute;height: 600px;width: 800px;margin-top: -300px;margin-left: -400px;top: 50%;left: 50%;z-index:1;border:1px solid black; } </style>HTML
Code<body> <div id="center"> Inhalt </div> </body> -
btw.... nur so als ergänzung... für den threadsteller
die größe des monitors (15,17,19,21...) is egal. wichtig is die auflösung !
-
Du musst nach dem <body> den center-div öffnen:
Code<div id="center">
und vor </body> mitCode</div>wieder schließen.
Viel Erfolg! -
Meinst du so?
<body>
<div id="center"><"Layer1" style="position:absolute; left:67px; top:34px; width:800px; height:550px; z-index:1">
</div>
<div id="Layer2" style="position:absolute; left:102px; top:65px; width:136px; height:505px; z-index:2">
</div>
</body> -
Ja, den Layer1 aber wie ursprünglich nochmal mit div id öffnen (so wie bai Layer 2).
Und vor </body> fehlt noch ein schließender div. Der wo da ist gehört zum Layer 2.
Außerdem: Deine Seite sollte 800 px breit sein. Du verwendest jedoch eine Grafik mit 900 px. -
So müsste es hinkommen:
Code
Alles anzeigen<style type="text/css"> body { background-color: #0000FF; margin: 0;padding: 0; } --> #center { position: absolute;height: 600px;width: 900px;margin-top: -300px;margin-left: -400px;top: 50%;left: 50%;z-index:1;border:1px solid black; } </style> </head> <body> <div id="center"> <div style="position:absolute; left:67px; top:34px; width:900px; height:600px; z-index:1">[img]fotos/hg.jpg[/img] </div> <div style="position:absolute; left:102px; top:65px; width:136px; height:505px; z-index:2">[img]fotos/menu.jpg[/img] </div> </div> </body> </html>Aber wie gesagt: Wenn die Seite nur 800px breit sein soll, passt kein Bild mit 900 px und einem Abstand von 67 px rein.
-
Super, dankeschön
-
du meinst ne css auslagern ?
also dazu schreibst alle css befehle erstmal in ne extra datei die du dann in etwa style.css nennst.
ins html must se dann so einbinden:
Code<link rel="stylesheet" href="style.css" type="text/css">(halt mit auf den pfad achten)
fotos hinzufügen usw kannst weiterhin. die css sorgt nur dafür das alles
gleich aussieht, bzw entsprechend den vorgaben im css-file.
praktisch ne globale optische richtlinie -
didi2005,
oder so
HTML
Alles anzeigen<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Unbenanntes Dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body {background-color: #0000FF;} #background {width:850px;height:550px;background-image: url(http://home.arcor.de/vereinskonzept/fotos/hg.jpg);text-align: left;padding: 25px;position:absolute;top:50%;left:50%;margin-top:-275px;margin-left:-425px;} #navi { width:188px;height:500px;background-image: url(http://home.arcor.de/vereinskonzept/fotos/menu.jpg);background-repeat:no-repeat;} --> </style> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> </head> <body> <div id="background" > <div id="navi"></div> </div> </body> </html>Gruß yeti66
