design mit css - probleme

tabledesign · 12. Dez. 2006

hallo!

ich hab leider erfolglos versucht folgendes design mit hilfe von divs umzusetzen:

PHP:

|--------------------------------------
|                  HEADER        |    |
|------------------------------- |    |
|                                | B  |
|                        CONTENT |    |
|                                |    |  
|--------------------------------------

scheint einfach zu sein, aber ich bin völliger neuling.

der header hat eine fixe höhe von 200px.
der rechte bereich B ist ebenfalls in der breite fix: 160px.
der content soll scrollbar sein, aber eben in der höhe nicht fix. (scrollbar eben im inneren bereich und nicht ganz aussen)
der header und content sollen rechtsbündig an B hängen.

vielleicht kann mir jemand einige tips geben. hab bis jetzt nur sachen gefunden die leider mit opera dann nicht gehen.

bin für jeden Tip dankbar.

sanchez · 12. Dez. 2006

tabledesign schrieb:
der content soll scrollbar sein, aber eben in der höhe nicht fix. (scrollbar eben im inneren bereich und nicht ganz aussen)
der header und content sollen rechtsbündig an B hängen.

woraus ergibt sich denn die höhe von content...aus der höhe von "B" ???

ein schlauer · 12. Dez. 2006

Opera ist einer der wenigen Browser der den Acidtest besteht, heise online - Opera 9 schafft den Acid-Test [Update], dann dürften die Lösungen ziemllicher Murks sein.

Dein Layout ist ein Tabellenlayout (voneinander anhängige Zellen), mach's mit einer Tabelle oder versuch ein CSS Layout.

bine · 17. Dez. 2006

Das wiederspricht sich aber. Wenn Content in der Höhe skalieren soll, dann hast du dort auch keine Scrollbar!

Scrollen kannst Du nur dann wenn Du eine feste Höhe vorgibst.

also mal so in der Art:

Code:

<html>
<head>
<style type="text/css">
#right	{
	width: 760px;
         background: #000;
         color: #fff;
}
#header	{
height: 200px;
margin-right: 160px;
background: #43304E;
}

#content	{
height: 400px;
overflow: auto;
margin-right: 160px;
background: #C4B8D8;
padding: 10px;
color: #000;
}
</style>
<body>
<div id="right">
<div id="header"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce lacinia urna a magna. Curabitur commodo hendrerit urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque id orci sed ligula aliquam euismod. In eget ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut pede. Pellentesque molestie pellentesque orci. Nulla ut quam sit amet erat tristique faucibus. Nulla quis tellus. Duis vel nisi. Cras sit amet odio eget sapien sollicitudin tempor. In a urna sit amet sapien dictum ullamcorper. Etiam luctus justo accumsan tortor. Duis at nisl quis turpis fringilla malesuada. Cras suscipit egestas tortor. Proin adipiscing tellus quis nisi. In hac habitasse platea dictumst.
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce lacinia urna a magna. Curabitur commodo hendrerit urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque id orci sed ligula aliquam euismod. In eget ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut pede. Pellentesque molestie pellentesque orci. Nulla ut quam sit amet erat tristique faucibus. Nulla quis tellus. Duis vel nisi. Cras sit amet odio eget sapien sollicitudin tempor. In a urna sit amet sapien dictum ullamcorper. Etiam luctus justo accumsan tortor. Duis at nisl quis turpis fringilla malesuada. Cras suscipit egestas tortor. Proin adipiscing tellus quis nisi. In hac habitasse platea dictumst.
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce lacinia urna a magna. Curabitur commodo hendrerit urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque id orci sed ligula aliquam euismod. In eget ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut pede. Pellentesque molestie pellentesque orci. Nulla ut quam sit amet erat tristique faucibus. Nulla quis tellus. Duis vel nisi. Cras sit amet odio eget sapien sollicitudin tempor. In a urna sit amet sapien dictum ullamcorper. Etiam luctus justo accumsan tortor. Duis at nisl quis turpis fringilla malesuada. Cras suscipit egestas tortor. Proin adipiscing tellus quis nisi. In hac habitasse platea dictumst.
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce lacinia urna a magna. Curabitur commodo hendrerit urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque id orci sed ligula aliquam euismod. In eget ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut pede. Pellentesque molestie pellentesque orci. Nulla ut quam sit amet erat tristique faucibus. Nulla quis tellus. Duis vel nisi. Cras sit amet odio eget sapien sollicitudin tempor. In a urna sit amet sapien dictum ullamcorper. Etiam luctus justo accumsan tortor. Duis at nisl quis turpis fringilla malesuada. Cras suscipit egestas tortor. Proin adipiscing tellus quis nisi. In hac habitasse platea dictumst.
<br /><br />
</div>
</div>
</body>
</head>

sanchez · 17. Dez. 2006

also wenn ich das richtig verstanden habe, dann ist der content schon mit einer fixen breite versehen, nur diese ergibt sich aus der Höhe von b...aber wir bekommen hier ja keine antworten also ist das Problem wahrscheinlich schon gelöst.

design mit css - probleme

tabledesign

New member

sanchez

Lounge-Member

ein schlauer

Lounge-Member

bine

Lounge-Member

sanchez

Lounge-Member