1. #1
    Jellepunk's Avatar
    Registered
    23/12/03
    Location
    Roeselare
    Posts
    836
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    CSS: float naast 2 div's ipv 1

    Hoi, ik ben mijn site aan het optimaliseren voor google en ben een probleempje tegengekomen.
    Al mijn div's floaten, maar bij het menu zou mijn rechter div moeten floaten naast mijn tekst en naast een afbeelding die eronder staat. maar zoals je op deze link kan zien, is dit niet zo: http://users.skynet.be/jellepunk/huh/template.html
    voor het gemak heb je hier mijn html bestand en css bestand
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Sample This - 25 februari 2006</title>
            <link rev="made" href="mailto:info@sample-this.be"/>
            <meta http-equiv="Content-Type" content="txt/html; charset=iso-8859-1" />
            <link href="style.css" rel="stylesheet" type="text/css" />
            
            <script type="text/JavaScript">
                <!--
                function MM_openlineWindow(theURL,winName,features) { //v2.0
                  window.open(theURL,winName,features);
                }
                //-->
            </script>
        </head>
        <body>
            <!-- Meta info voor zoekrobots -->
            <div id="meta_info">
                <h1>Sample This!</h1> gaat door op 25 februari 2006 in DieZie te Roeselare<br/>
                Er zijn optredens van Los Putas, The Apers, Core Of Anger, The Unarmed en Full Force Overdose<br/>
                http://www.sample-this.be
            </div>
            <div id="container">
                    <!-- Divs voor achtergrond afbeeldingen -->
                    <div id="top">
                    &nbsp;
                    </div>
                    <div id="menu_links">
                    &nbsp;
                    </div>
                    <!-- menu -->
                    <div id="menu_tekst">
                    <a href="news.html"> News</a> | <a href="info.html">Info</a> | <a href="lineup.html">Line up</a> | <a href="media.html">media</a> | <a href="sponsors.html">Sponsors</a> | <a href="#" onclick="MM_openBrWindow('http://www.a-free-guestbook.com/guestbook.php?username=samplethis','Guestbook','scrollbars=yes,width=640,height=480')">Guestbook</a>
                    </div>
                    <!-- Divs voor achtergrond afbeeldingen -->
                    <div id="menu_onder">
                    &nbsp;
                    </div>
                    <div id="menu_rechts">
                    &nbsp;
                    </div>
                    <div id="boord_links">
                    &nbsp;
                    </div>
                    <!-- Inhoud van de site -->
                    <div id="text">
                    
                    </div>
                    <!-- Divs voor achtergrond afbeeldingen -->
                    <div id="boord_rechts">
                    &nbsp;
                    </div>
                    <div id="onderkant">
                    &nbsp;
                    </div>
            </div>
        
        </body>
    </html>
    Code:
    #container{
      position: relative;
      margin-left: auto;
      margin-right: auto;
      width: 640px;
      overflow: visible;
    }
    #meta_info{
        display: none;
        }
    /* Position */
    
        /* top */
        
            #top{
              float: left;
              clear: both;
              width: 640px;
              height: 154px;
              background-image:url(images/layout/top.gif);
            }
        
        /* menu */
            #menu_links{
              background-image:url(images/layout/menu_links.gif);
              width: 118px;
              height: 65px;
              float: left;
            }
            #menu_tekst{
              float: left;
              width: 332px;
              padding: 2px;
              text-align: center;
              background-color: #351B01;
            }
            #menu_onder{
              float: left;
              width: 337px;
              height: 48px;
              background-image:url(images/layout/menu_onder.gif);
            }
            #menu_rechts{
              clear: none;
              background-image:url(images/layout/menu_rechts.gif);
              float: left;
              width: 185px;
              height: 65px;
              
            }
        
        /* body */
            
            #boord_links{
                float: left;
                width: 118px;
                height: 258px;
                background-image:url(images/layout/boord_links.gif);
                }
            #text{
                float: left;
                width: 370px;
                height: 248px;
                padding: 5px;
                background-color:#DF7E21;
                overflow: auto;
                }
            #boord_rechts{
                float: left;
                width: 142px;
                height: 258px;
                background-image:url(images/layout/boord_rechts.gif);
                }
    
        /* bottom */
        
            #onderkant{
                clear: both;
                float: left;
                width: 640px;
                height: 126px;
                background-image: url('images/layout/onderkant.gif');
                }
        
        /* index */
        
            #index{
                position: absolute;
                width: 600px;
                height: 450px;
                top: 50%;
                left: 50%;
                margin-top: -200px;
                margin-left: -300px;
            }
    
    /* Layout */
    body{
      margin: 0px;
      padding: 0px;
      background-color: #351B01;
      color: #ffffff;
      font-family: verdana, tahoma;
      font-size: 11px;
      
      scrollbar-base-color: #DF7E21;
      scrollbar-face-color: #DF7E21;
      scrollbar-track-color: #DF7E21;
      scrollbar-arrow-color: #330033;
      scrollbar-highlight-color: #DF7E21;
      scrollbar-3dlight-color: #DF7E21;
      scrollbar-shadow-color: #DF7E21;
      scrollbar-darkshadow-color: #DF7E21;
    }
    
    img{
      border: none;
      margin: 0px;
      }
    div{
         margin: 0px;
         padding: 0px;
         border: 0px;
    }
    a, a:visited{
    color: #FFFFFF;
    text-decoration: underline;
    }
    a:hover{
    text-decoration: none;
    }
    
    .center{
       text-align: center;
       }
    .subscript{
      font-style: italic;
      font-size: 10px;
    }
    ul{
      list-style-type: none;
    }
    h1{
      font-size: 18px;}
    .links{
      position: relative;
     margin-left:-40px;}
    .sponsor{
       margin-bottom: -10px;
     }
    .center{
      text-align: center;
    }
    .klikken{
      font-size: 8px;}
    no votes  

  2. #2

    Registered
    18/01/04
    Location
    Brussel
    Posts
    233
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ik weet niet zeker of floating de beste oplossing is.
    Als ik jou was zou ik gwn werken met het positioneren van je divs in css
    #id{
    position:absolute;
    top: px;
    left: px;
    }

    Maarja, ik ben zelf nooit goed geweest met floaten dus gebruik ik altijd positionering voor het samenstellen van een layout
    Malice 4 Team BE!
    no votes  

  3. #3
    Jellepunk's Avatar
    Registered
    23/12/03
    Location
    Roeselare
    Posts
    836
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    ok, ik heb alles absoluut gepositioneerd, ik was gewoon aan het experimenteren met float, absolute is wel handiger.
    bedankt
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in