Hallo,
ich möchte meine Website teilweise zentrieren.
D.h. Das Bild/Verlauf oben soll über den ganzen Bildschirm gehen,
der Teil mit dem Inhalt soll aber eine feste Breite haben und mittig sein.
Versucht habe ich es schon mit einem Seitenbereich,
dem ich margin auto gebe,
und dem body text align center.
Im Anhang mal ein Screenshot
wie es jetzt aussieht.
Quellcode
PHP
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link href="design/design.css" type="text/css" rel="stylesheet">
<link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
<div id="seitenbereich">
<div id="navi">
<ul id="nav">
<li><a href="index.php">startseite</a></li>
<li class="span"><a href="#">bildergalerie</a></li>
<li><a href="ueber.php">über mich</a></li>
<li><a href="impressum.php">impressum</a></li>
</ul>
</div>
<div id="inhalt">
<div id="galerie">
<?php include ("auswahl.php")
?>
</div>
<div id="vorschau">
<h1>Herzlich Wilkommen in der Galerie!</h1>
Hier werden im Laufe der Zeit in den folgenden Kategorien hochgeladen:
<ul>
<li> <a href="tiere.php">Tiere</a></li>
<li> <a href="landschaft.php">Landschaft</a></li>
<li> <a href="sonstiges.php">Sonstiges</a></li>
</ul>
Die Galerie wird Schrittweise aufgebaut und stetig erweitert.
<p>Viel Spaß!</p>
</div>
</div>
<!--Footer Anfang-->
<?php include ("footer.php")
?>
<!--Footer Ende-->
</div>
</body>
</html>
Alles anzeigen
css
Code
/* RESET STYLESHEET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0} /*Reset Ende*/
body {
background: #0FF;
text-align: center;
/*color:#222222;
margin: 20px 30px;
background: #eaeaeafff;
border: 1px solid #ccc;
Damit auch ohne Inhalt etwas zum testen sichtbar ist:
min-height: 640px;*/}
/*Navigation*/
#seitenbereich {background:silver;
margin: auto;
}
#navi {width: 980px;
background-image: url(../b-g.gif);
height: 150px;}
ul#nav {width: auto;
height: 50px;
float: right;
}
ul#nav li {
float: left;
list-style: none;
display: block;
margin-left: 15px;
margin-top: 25px;
}
ul#nav li a {
text-decoration: none;
font-family: Cambria;
font-size: 16px;
color: #080808;}
ul#nav li a:hover {
color: #303030;
text-decoration: underline;
}
ul#nav li.span a {color: #3D3D47;
text-decoration: underline;}
/*Text auf der linken Seite*/
#inhalt {float:left;
text-align: left;
width: 980px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 15px;
color: #2b2b2b;
font-family: cambria;
font-size: medium;
border-top: 1px solid #2b2b2b;
min-height: 300px;
border-bottom: 1px solid #2b2b2b;
/* border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright:10px;*/
}
#fenster {float: right;
min-width: 600px;
min-height: 450px;
max-width: 500px;
margin-right:0;
margin-left: 5px;
padding-left: 20px;
padding-bottom: 5px;
}
#footer {
height: 50px;
width: 980px;
float: left;
margin-top: 5px;
text-align: left;
font-family: Verdana, Geneva, sans-serif;
font-size: medium}
#zusatz.mittig {font-family: veranda;
text-align: center;
font-size: small;
width: 980px;
float: left;
}
#zusatz.rechts a.border{border-right: 1px solid #2b2b2b;
margin:0;
padding:0}
#zusatz.rechts {text-align:right;
font-family: veranda;
font-size: small;
width:auto;
float: right
}
/*Galerie Teil*/
#galerie {
width: 150px;
float: left;
padding-left: 20px;
}
#galerie ul {line-height: 1.5em;
font-family: cambria;
font-size: medium;
list-style: circle;
list-style-position: inside;
}
#galerie ul a {text-decoration:none;
color: #222;}
#galerie ul a:hover {color: #303030;
text-decoration: underline; }
#vorschau {
float: right;
width: 730px;
padding-left: 30px;
padding-right: 10px;
border-left: 1px dashed #2b2b2b;
min-height: 300px;}
#vorschau ul {margin-left: 20px;
margin-top: 5px;
margin-bottom: 5px;
list-style: disc;
list-style-position: inside;
font-size: medium;
}
#vorschau ul a {color:#004;
}
#vorschau ul a:hover {color:#007}
/*Überschriften
*/
h1 { font-weight: bold;
margin-bottom: 10px; }
Alles anzeigen