Ergebnis 1 bis 2 von 2

Thema: mittiges menu umfließen lassen

  1. #1
    Meister(in)
    Registriert seit
    27.03.2009
    Ort
    Berlin
    Beiträge
    278
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard mittiges menu umfließen lassen

    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;
    }
    Hier das HTML
    HTML-Code:
    <!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>

    Mein eigener Ansatz war ein dummy-element einzufügen das floatet. Jedoch hatte ich bis jetzt damit leider nicht viel Erfolg : (
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: mittiges menu umfließen lassen

    Ä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.

Ähnliche Themen

  1. Bei PortalTabs MouseOver ein Menu aufklappen lassen
    Von Seawolf-371 im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 2
    Letzter Beitrag: 21.06.2007, 13:34
  2. Probleme mit Bild vom Text umfließen lasssen
    Von piet im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.04.2005, 16:21
  3. Menu
    Von tunisie-online.net im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 04.04.2005, 13:41
  4. Jscript zur Darstellung von linearem Menu in ein Baum Menu
    Von stud3 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 28.11.2004, 09:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •