mittiges menu umfließen lassen

thilda

Hallo zusammen,
ich bin mal wieder ein wenig am basteln und habe ein kleines problem für das es eine lösung zu finden gibt.

Das mittige Menu soll vom inhalt "umflossen" werden. Dabei soll der inhalt rechts UND links fließen.

Hier ist mal das was ich hingebastelt habe. Alles noch in der entstehung.

Eventuell gibt es dafür ja keine Lösung. Dann will ich es aber wenigstens besprochen haben : )

Hier das CSS

Code

/*Allg. Reset der Elemente*/
/*BEGIN*/
html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup,
tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline;
}
/*END*/
html {
   font-family: Arial, Helvetica;
   font-size: 1em;
   line-height: 1em;
   color: #555;
   width: 100%;
   min-width: 42em;
   height: 100%;
}
body {
}
#menu {
   border: 1px solid black;
   position: relative;
   width: 8em;
   height: 8em;
   text-align: center;
   margin: 10em auto 0 auto;
   z-index: 99;
}
ul {
   list-style-type: none;
}
#menu ul {
   margin: 1.5em 0;
}


#submenu-left {
   border-left: 3px solid #ccc;
   border-right: 3px solid #ccc;
   background: #ccc;
   min-width: 20em;
   width: 49%;
   height: 4em;
   float: left;
   margin: -4em 0 1em 0;
}
#submenu-right {
   border-left: 3px solid #ccc;
   border-right: 3px solid #ccc;
   background: #ccc;
   min-width: 20em;
   width: 49%;
   height: 4em;
   float: right;
   margin: -4em 0 1em 0;
}
#submenu-right:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#submenu-left ul li, #submenu-right ul li {
   display: inline-block;
}


#content {
   background: #abc;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 12em;
   padding: 0 0 2em 0;
   overflow: auto;
   z-index: 10;
}


#extension-left {
   border: 3px dotted #ccc;
   min-width: 20em;
   width: 49%;
   min-height: 1em;
   max-height: 7em;
   float: left;
   overflow: auto;
}
#extension-right {
   border: 3px dotted #ccc;
   min-width: 20em;
   width: 49%;
   min-height: 1em;
   max-height: 7em;
   float: right;
   overflow: auto;
}
#extension-right:after {
    content: ".";
    display: block;
    line-height: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}

Alles anzeigen

Hier das HTML

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <link rel="stylesheet" href="layer3.css" type="text/css" media="screen"><!--für Browser-->


   <title>Eine &Uuml;bersicht an verschiedenen Styles.</title>
</head>


<body>
   <div id="menu">
      <ul>
         <li><a href="index.php?category=start" title="Die Startseite">Startseite</a></li>
         <li><a href="index.php?category=css" title="Was ist CSS?">CSS</a></li>
         <li><a href="index.php?category=page1" title="Eine Testseite">Page 1</a></li>
         <li><a href="index.php?category=page2" title="Eine zweite Testseite">Page 2</a></li>
         <li><a href="index.php?category=page3" title="Eine dritte Testseite">Page 3</a></li>
      </ul>
   </div>
   <div id="submenu-left">
      <ul>
         <li>Eins</li>
         <li>Zwei</li>
         <li>Drei</li>
      </ul>
   </div>
   <div id="submenu-right">
      <ul>
         <li>Vier</li>
         <li>Fünf</li>
         <li>Sechs</li>
      </ul>
   </div>


      <div id="content">
<p>Dies ist die Startseite der style-umgebung. Ich wünsche allen viel spass beim durchschaun.</p><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>


      <div id="extension-left">Extension - left</div>
      <div id="extension-right">Extension - right</div>
</body>
</html>

Alles anzeigen

Mein eigener Ansatz war ein dummy-element einzufügen das floatet. Jedoch hatte ich bis jetzt damit leider nicht viel Erfolg : (

threadi

Ändere im HTML-Code die Reihenfolge der Elemente zu
1) submenu-left
2) submenu-right
3) menu
Dann sollte die Ansicht anhand deines CSS-Codes eigentlich passen, wobei ich mir auf Grund der relativen Breitenangaben hierbei nicht 100%ig sicher bin.

Tags