Beiträge von dj-giver

dj-giver

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

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

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

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

dj-giver

mmm, habe jetzt das nächste Problem.
Da ich alles im Browser zentriet ausrichten möchte, kann ich die bei position:fixed; die Divs nicht mehr anständig ausrichten.

..die Positionierung orientiert sich am Viewport (dem sichtbaren Browserfenster) und nicht am übergeordneten Element.

Schade eigentlich

Habt Ihr noch ne Idee?

dj-giver

Hallo Lukas,
Vielen Dank, das hilft schon. Wie bekomme ich es jetzt noch hin, das sich alle anderen divs (zb. navi) nicht mit scrollen???

dj-giver

http://www.orange-cube.de/

dj-giver

mmm, Danke für deine Antwort.
Da die divs auf 3 Ebenen liegen, geht das mit position: fixed; nicht oder ich binn zu dösig ;o)

Ich habe hier eine Seite gefunden, die es ähnlich gemacht hat. Ich glaube, die haben das mit iframe gelöst. Nicht so toll oder?!

dj-giver

Hallo Leute,
leider finde ich keine passende lösung um nur ein Div zu scrollen. Die Divs befinden sich übereinander, weil sie mit hintergrundbildern aus gestattet sind. Ich habe das mal versucht zu skizzieren [Blockierte Grafik: http://www.css-info.de/forum/images/smilies/icon_mrgreen.gif]

Wie gesagt, es soll nur das contentDIV gescrollt werden. Der Scrollbalken soll der große ganz rechts sein und nicht am DIV selbst.

Könnt Ihr mir helfen???

Hier mein bisherriger Code:

Code

* {margin:0; padding:0;}
html, body {height:100%;  overflow:hidden;
}
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; 
   }

h1,h2,h3,h4  {
   font-family: verdana, arial, helvetica, sans-serif;
    font-weight:bold;
   font-size: 14px; 
   line-height: 17px;
    color: #a21a41;
   text-decoration:none; 
   }


ul,li  {padding-left:5px; 
line-height: 2; 
list-style-image:  url(pics/haus.gif);
}


body {   position: center; 
background-image:  url(../pics/back1.jpg);
background-repeat:repeat-x;
}


#haupt  {   
   background-image: url(../pics/back2.jpg);   
    background-color:#ffffff;
   background-repeat:repeat-x;
    border: #000000 1px solid;
   margin:0 auto;
    position:relative;  
   width:950px;
   height: 100%;
   }


#navi  {border: red 0px dashed ;
   width:700px;
   float:right;
    height: 100%;
   }


#content {
   height: 100%;
    border:0px solid #3399ff;
   background-image:  url(../pics/back3.jpg);
   background-repeat:repeat-y;
    width:475px;
   }

Alles anzeigen

Code

<div id="haupt">
  <div id="navi">
     <div id="content">content</div>
  </div>
</div>

Beiträge von dj-giver

layout immer mittig, trotz pos. fixed

layout immer mittig, trotz pos. fixed

layout immer mittig, trotz pos. fixed

layout immer mittig, trotz pos. fixed

Layout problem, div scrollen

Layout problem, div scrollen

Layout problem, div scrollen

Layout problem, div scrollen

Layout problem, div scrollen