• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text soll fest neben Navigation sitzen mit scrollbalken

L

Lehrling1991

Neues Mitglied
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: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>

</head>
<body>

  <img src="logo.png" alt="Das ist unser Logo" />
  
<div class="menu">

<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

    <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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

    <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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>

    <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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>

    <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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>

    <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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>


  <div id="Inhalt">
    <p>
        BeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltext
BeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltext
BeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltextBeispieltext</p>
  </div>
</div>

</body>
</html>
CSS:
Code: 
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em; 
    background-color: gray;
  }

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


Hoffe jmd. kann mir helfen :)
Einen schönen Sonntag wünsche ich allen

out' Luca
 
Definiere in deinem CSS Code doch bitte für alle Elemente eine feste Breite (oder wenigstens Mindest-Breite), damit wird verhindert, dass die Elemente kleiner werden, als sie sein sollen.

Und seit wann benutzt man bei 'font-size' bitte Prozentangaben? Dadurch wird die Standarteinstellung des Browsers genommen und davon 100.01 %. Hat der User jetzt als Standarteinstellung eine Schriftgröße von 40 pt, wird deine Seite komplett verzogen. Also bitte benutze hier genaue Größenangaben ;D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben