Frage stellen
ich möchte gerne mein Layout so anpassen, dass es immer mittig im Browser ist. Leider gelingt mir das nicht. Ein einfaches Layout immer mittig zu bekommen, ist ja kein Problem, aber ich möchte gerne das nur die Mitte gescrollt werden kann und das der Scrollbalken immer rechts an der Seite ist (nicht mittig im Layout). Es ist soweit auch schon fertig, ich bekomme es nur nicht mittig ausgerichtet. Kann mir jemand HELFEN???
hier der css-code:
- Code: Alles auswählen
img {border:0;}
a:link { color: #707070; }
a:visited { color: #707070; }
a:hover { color: #000000; }
a:active { color: #707070; }
p,a,h2,h3,h4,ul,ol,li,div,td,th,input,select,textarea,address,blockquote,nobr {
font-family: verdana, arial, helvetica, sans-serif;
font-weight:normal;
font-size: 11px;
line-height: 17px;
color: #707173;
text-decoration:none;
}
.rex-current {list-style-type: square;}
.tinymcewysiwyg,p,h1,h2 {line-height: 2;}
html, body {height:100%;}
body{border: black 0px dashed ;
overflow: hidden;
max-height: 90%;
font-family: Verdana, Arial, Sans-Serif;
font-size: 0.7em;
line-height: 1.25em;
font-weight: normal;
background-image: url(../pics/back1.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
background-color: #ffffff;
margin:0;
padding: 0;
}
#rlinks{
border: blue 0px dashed ;
height: 100px;
width: 100px;
}
#links{border: red 0px dashed ;
position: absolute;
top: 0;
bottom: 0;
left: 100px;
padding-left: 0px;
width: 950px;
height: 100%;
overflow: hidden;
color: white;
background-position: 0px 0px ;
background-image: url(../pics/hg2.jpg);
}
#hauptkasten{border: blue 0px dashed ;
position: fixed;
top: 0;
left: 350px;
right: 0;
bottom: 0;
overflow: auto;
text-align: center;
}
#content
{
border: black 0px dashed ;
width: 445px;
padding-left: 30px;
padding-rigt: 30px;
line-height: 16px;
text-align: left;
background-image: url(../pics/back3.jpg);
background-repeat: repeat-y;
min-height: 100%;
}
div#content img
{border: black 0px dashed ;
border: 0px;
padding-left: -30px;
margin-left: -30px;
margin-top: 50px;
margin-bottom: 25px;
}
#navigation {
width: 180px;
border: black 0px dashed ;
position: relative;
top: 15px;
right: 22px;
bottom: 0;
overflow: auto;
text-align: right;
float:right;
color: #7a6a46;
}
#content h2
{
line-height: 1.8em;
font-weight: normal;
padding-right: 35px;
text-align:justify;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
color: #7a6a46;
}
hier kommt die html Seite:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="./css/styles.css" rel="stylesheet" type="text/css">
<title>test </title>
</head>
<body>
<div id="test">
<div id="rlinks"></div>
<div id="links">
<img src="pics/logo.jpg" border="0" alt="logo" /><br />
<div id="navigation">navigation1<br /><br />navigation2<br /><br />navigation3<br /><br />navigation4<br /><br />navigation5<br /><br /></div>
</div>
<div id="hauptkasten">
<div id="logo"></div>
<div id="content"><div class="content"><img src="pics/orange.jpg" border="0" alt="" /><h2>cilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis.cilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis.</h2><br /><br /><h2>cilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis.cilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis.</h2></div>
<div id="navi"></div>
</div>
</div>
</body>
</html>