layout immer mittig, trotz pos. fixed

dj-giver

Hallo Leute,

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

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;
}

Alles anzeigen

hier kommt die html Seite:

HTML

<!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>

Alles anzeigen

MyXoToD

Was willst du mit deinem Scrollbalken?^^
Wenn du die Seite mittage haben willst, kannste ein div um die komplette Seite legen und dem div dann folgendes zuweisen:

Code

#container {
width: 900px; /* or what ever */
margin: 0 auto;
}

PS:
padding-rigt gibt es btw nicht
und padding kann keine negativen werte haben

dj-giver

Hallo Santos, danke für deine Antwort. Leider ist das nicht ganz so einfach. Der Container ist jetzt ganz oden und schön brav in der Mitte. Nur leider der Inhalt nicht!
Siehe online
Irgend wie habe ich da einen Gedankenfehler drin!

"Was willst du mit deinem Scrollbalken?^^" Es soll halt nur das Content <div> gescrollt werden und nicht der Rest. Was mache ich Falsch

MyXoToD

Alles was nicht scrollen soll bekommt einfach position: absolute; oder position: fixed; fertig

dj-giver

Was mache ich jetzt falsch, das nichts mittig ist???

Wenn ich jetzt alles in den neuen Container bringen möchte, muss ich ja position:absolut gegen relative tauschen. Dann habe ich es mittig! Nur leider ist der scrollbalken dann nicht in der mitte, da er ja position:fixed hat. Somit also nicht von dem Rand des neuen Containers mißt, sonder o.l. von Browser.

Fällt dir noch was anderes ein???

MyXoToD

Oh sry wenn du mit position absolute und fixed arbeitest dann funktioniert das zentrieren mit margin nicht mehr...
Was anderes fällt mir ejtzt gerade nicht ein sorry :-/

synaptic

geh mal logisch vor.. nimm 50% left und mach nen margin left mit nem negativen wert von der hälfte der gesamten breite deines umschliessenden divs (also hier des div test, was du übrigens dann ganz unten schliessen solltest...)

dj-giver

Jo, das wars. Vielen Dank, es hat geklapt.:D

Tags