Div Content immer in der Mitte, auch wenn man das Browser Fenster minimiert etc. Wie?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bleiben
browser
code
copyright
fenster
fotografie
freuen
hinsicht
http
impressum
jemand
kleines problem
kontakt
liebes forum
mitte
paar
position
schnelle antwort
tag
zeichnung
-
Hallo tag/liebes forum">liebes Forum,
Ich habe mich vor ein paar Tagen hier angemeldet und ich versuche mich zurzeit an meiner eigenen Homepage. Da ich aber leider nicht das beste Wissen über HTML und CSS verfüge habe ich ein kleines Problem in Hinsicht auf die Position meiner Div Contents.
Also ich möchte, dass meine Contents immer in der Mitte des Browsers bleiben, egal ob ich das Browser Fenster verschiebe oder minimiere etc. und das natürlich in jedem Browser. Ich hab die Position meiner einzelnen Div Content mit "position: absolute; top: XXX; left:XXX; " festgelegt. Ich bin mir auch bewusst, dass es deswegen auch nicht in der Mitte des Browser bleibt, wenn man es verschiebt. Finde aber nicht die passende Lösung dafür. Würde mich freuen, wenn mir das jemand Anfänger freundlich erklären würde. Die Such Funktion habe ich bereits benutzt und google natürlich auch.
Um das etwas leichter zu gestalten hier mein code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Lace | Dimitri Lajer</title>
<style type="text/css">
#eichhoernchen { width: 200px;
height: 200px;
position: absolute;
top: 460px;
left: 440px;
}
#navcontainer
{
margin: 0;
padding: 0;
height: 32px;
font: 11px Verdana, sans-serif;
width: 32%;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #fff;
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}
#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block;
}
#navlist li a:hover
{
color: black;
border-bottom: 3px solid #bbb;
cursor: pointer;
background: white;
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: ;
border-bottom: 3px solid #999;
}
#navlist li a#current:hover
{
border-bottom: 3px solid #f90;
background: white;
}
div#footer { background-color: ;
color: #808080;
width: 800px;
height: 20px;
top: 600px;
left: 100px;
position: relative;
font-family: Times New Roman;
font-size: 9pt;
border: 0px solid ;
text-align: center;
}
#anfangsbild {
width: 292px;
height: 436px;
position:absolute;
top:20px;
left:350px;
border: 1px solid #999;
}
</style>
</head>
<body style="background-color:ebefa5; background-image:url(Leiste_oben.jpg); background-repeat: repeat-x; " >
<div id="anfangsbild">
<img src="Bild_Index.jpg">
</div>
<div id="eichhoernchen">
<img src="eichhoernchen3.png">
</div>
<div id="navcontainer" style="position:absolute; top: 550px; left: 340px;">
<ul id="navlist">
<li id="active"><a href="index.php" id="current">Home</a></li>
<li><a href="fotografie.php">Fotografie</a></li>
<li><a href="zeichnungen.php">Zeichnungen</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>
<div id="footer">
Impressum | Copyright by Dimitri Lajer
</div>
</body>
</html>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Sollte selbsterklärend sein.div#mitte{ position:absolute; width:500px; height:400px; left: 50%; top:50%; margin-left:-250px; margin-top:-200px }
Beitrag zuletzt geändert: 13.2.2010 12:56:06 von nerdinator -
Danke für die schnelle Antwort. Hab mich etwas falsch ausgedrückt, aber hat mir trotzdem gut geholfen.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
