nicht angemeldet
HTML seite zentriert ausgerichtet schiebt sich ins nirvana
hallo
ich habe mir eine seite programmiert die ich zentriert ausgerichtet habe. dazu habe ich ich einen mittelpunkt gesetzt und alle anderen divs hineingelegt. das problem ist jetzt nur dass ich, wenn ich die seite z. b. im explorer öffne und den explorer verkleinere schiebt sich ein teil nach rechts ins nirvana so dass ich den teil nicht mehr nutzen kann. habt ihr vielleicht einen lösungsvorschlag?
hier der Quelltext zum rauskopieren und selber testen:
"und das ist nur eine probeseite zum ausprobieren: also keine kritik an dem layout usw."
danke im voraus
allen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testseite, Schwarz Computersysteme</title>
<style>
body
{
background-color: white;
font-family: courier new;
font-size: 0.9em;
color: black;
}
a
{
text-decoration: none;
color: yellow;
}
a:hover
{
text-decoration: none;
color: orange;
}
#mitte
{
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
}
#kasten
{
position: absolute;
top: -180px;
height: 360px;
left: -350px;
width: 700px;
background: #0080FF;
}
#navi1
{
position: absolute;
top: -10px;
height: 15px;
left: -350px;
width: 700px;
}
#navi2
{
position: absolute;
top: 5px;
height: 15px;
left: -350px;
width: 700px;
}
.navi1
{
background: navy;
color: yellow;
}
.navi2
{
background: #0080C0;
color: yellow;
}
.n1
{
color: yellow;
padding: 4px 0px 4px 30px;
}
.n2
{
color: yellow;
padding: 4px 0px 4px 20px;
}
.n3
{
color: yellow;
padding: 4px 0px 4px 40px;
}
.n4
{
color: yellow;
padding: 4px 0px 4px 20px;
}
#banner
{
position: absolute;
top: -180px;
height: 170px;
left: -350px;
width: 700px;
}
</style>
</head>
<body>
<div id="mitte">
<div id="kasten">
</div>
<div id="navi1" class="navi1">
<a href="Home.html" class="n1" title="Homepage - Acceskey a" acceskey="a" tabindex="1">Home</a> <a href="Home.html" class="n2" title="Kontakt - Accesskey b" accesskey="b" tabindex="2">Kontakt</a> <a title="Impressum - Acceskey c" href="Impressum.html" class="n2" accesskey="c" tabindex="3">Impressum</a> <a href="Forum.html" class="n2" title="Forum - Accesskey d" accesskey="d" tabindex="4">Forum</a>
</div>
<div id="navi2" class="navi2">
<a href="News.html" class="n3" title="News - Accesskey z" accesskey="z" tabindex="6">News</a> <a href="Suche.html" class="n4" title="Suche - Accesskey y" accesskey="y" tabindex="7">Suche</a> <a href="ueberuns.html" class="n4" title="über uns - Accesskey - x" accesskey="x" tabindex="8">Über uns</a>
</div>
<div id="banner">
<img src="banner.jpg" height="170" alt="Ein Schneebedeckter Ast einer Winterlandschaft">
</div>
</div>
</body>
</html>
-
Der Code durch die absoluten Postionierungen nicht so schnell zu durchschauen, aber mittig zentrieren mach ich so:
<body style="text-align: center;"><!-- braucht der IE weil er den "richtigen" Befehl nicht kapiert-->
<div style="width: 50%; margin: auto;">
...
</div>
</body>und fertig ist die mittige zentrierung
-
Ich will ja ganze divs zentrieren nicht nur den text
gruesse aus dem regnerischen bayern
-
Hi,
Ich will ja ganze divs zentrieren nicht nur den text
wenn Du auch vertikal zentrieren willst, geht das ohne Tabelle nur mit dieser "Nebenwirkung".
freundliche Grüße
Ingo -
Ich will ja ganze divs zentrieren nicht nur den text
das passiert auch, Du kannst den Text _im_ DIV ja auch als Blocksatz oder meinetwegen rechtsbündig anzeigen. Der IE braucht aber das text-align: center; damit das Element im body zentriert wird.
Ansonsten hier ein CSS Creator:
http://www.csscreator.com/version2/pagelayout.phpund einige Beispiel-Templates:
http://intensivstation.ch/css/template.php
-
-
-
Hallo allen
habt ihr vielleicht einen lösungsvorschlag?
Schau dir Blockelement zentrieren und die dort verlinkte Seite an.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!