hallo zusammen
Hab ein 3-Spaltiges Layout kreirt. Das Ziel ist ein Logo oben horizontal über alles drüber, ein menü, links am Bildschirmrand. Und ein Textbereich wo Inhalte hinkommen, wie Bilder und Texte der den rest des Platzes braucht.
Soweit so gut. Nun hab ich das Problem, das ich es nicht schaffe den Textbereich so zu kreiren das er sich nicht ausdehnt wenn man die grösse des browsers ändert. wenn man den browser verkleiner fliesst der text plötzlich ums menü herum. ebenso sollte der textbereich einen eigenen scrollballken haben.
wie realisiere ich sowas?
könnt ihr mir weiterhelfen?
Hier noch meine Codes:
[HTML]
- DEMOS
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="left2"> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="#nogo">FLYOUT third level</a><!--<![endif]--> </li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li> </ul> - BOXES
<ul> <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> - MOZILLA
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> - EXPLORER
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li> </ul> - OPACITY
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="left"> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul>
BeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltext BeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltext BeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltext
img {
/* margin: 0 0 0.7em; padding: 0.3em; */
text-align: center;
background-color: #fed;
width: 100%;
}
/* ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
/* margin: 0 0 1.2em; padding: 0; /
/ border: 1px dashed silver; */
}
/ul#Navigation li {
list-style: none;
/ margin: 0; padding: 0.5em; */
}
/* ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
/
div#Inhalt {
/ margin: 0 12em 1em 16em; /
padding: 0 1em;
/ border: 1px dashed silver; */
position:absolute;
display: block;
}
- html div#Inhalt {
height: 1em;
}
.menu {
width:0px;
font-size:0.85em;
padding-bottom:0px;
}
.menu ul {
padding:0;
margin-right:150px;
list-style-type:none;
float: left;
}
.menu ul ul {
width:150px;
}
.menu li.left {
width:150px;
position:absolute;
left: 150px;
}
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:139px;
height:30px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#758279;
padding-left:10px;
line-height:29px;
}
- html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}
/
.menu ul ul {
visibility:hidden;
position:relative;
height:0;
/top:31px;/
left:150px;
width:150px;
top:-31px;
}
- html .menu ul ul {
top:30px;
t\op:31px;
}
.menu ul ul ul {
left:150px;
top:-31px;
width:150px;
}
.menu ul ul ul.left {
left:150px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px;
/* yet another hack for IE5.5 */
}
- html .menu ul ul a{
width:150px;
w\idth:129px;
}
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
.menu ul :hover ul ul{
visibility:hidden;
}
.menu ul :hover ul :hover ul{
visibility:visible;
}
[/CODE]
Hoffe jmd. kann mir helfen 
Einen schönen Sonntag wünsche ich allen
out’ Luca