Archief - CSS: float naast 2 div's ipv 1

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
J

Jellepunk

Legacy Member
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: 
<!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:[email protected]"/>
        <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;}
d

denk

Legacy Member
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 :)
J

Jellepunk

Legacy Member
ok, ik heb alles absoluut gepositioneerd, ik was gewoon aan het experimenteren met float, absolute is wel handiger.
bedankt
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan