• M
    User Newbie •

    Layaut che non segue contenuto

    Salve allora ho un piccolo problema, ho un layaut a due colonne, la lunghezza della colonna di sinistra si allunga quando si apre uno dei sottomenù, il problema è che se si allunga una colonna vorrei far allungare anche il layaut e l'altra colonna, vi posto il codice

    Il codice html
    [HTML]
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    </head>
    <div id="layaut">
    <div id="logo">
    <div id="partner"><p>Il nostro gruppo</p><a href="">Siervo Plast </a><br><a href=""> Siervo Rappresentanze </a></div>
    </div>
    <div id="menu">
    <ul>
    <li style="border-left: 0px;"><a class="primo" href="">Home</a></li><li><a href="">News</a></li><li><a href="">Chi Siamo</a></li><li><a href="">Contatti</a></li><li><a href="">Dove Siamo</a></li><li><a href="">Partner</a></li>
    </ul>
    </div>
    <div id="menulat"><div id="intro"></div><div id="prodotti"></div>
    <div class="prod">
    <li id="p1" class="menu"><img src="" border="0" style="position:relative;left:55px"></li>
    <ul id="s1" class="links">
    <li><a href="#"><h2>Ciniglia</h2></a></li>
    <li><a href="#"><h2>Ecopelli</h2></a></li>
    <li><a href="#"><h2>Velluti</h2></a></li>
    <li><a href="#"><h2>Damascati</h2></a></li>
    <li><a href="#"><h2>Stampati</h2></a></li>
    <li><a href="#"><h2>Microfibra</h2></a></li>
    <li><a href="#"><h2>Jacquard</h2></a></li>
    <li><a href="#"><h2>Satin</h2></a></li>
    <li><a href="#"><h2>Canape</h2></a></li>
    <li><a href="#"><h2 style="font-weight: bold";>STOCK</h2></a></li>
    </ul>
    <hr style="color: #FFF; width: 50%;margin-left:45px;">
    <li id="p2" class="menu"><img src="" border="0" style="position:relative;left:52px"></li>
    <ul id="s2" class="links">
    <li><a href="#"><h2>Ricamati</h2></a></li>
    <li><a href="#"><h2>Devore</h2></a></li>
    <li><a href="#"><h2>Bucle</h2></a></li>
    <li><a href="#"><h2>Misti-Lino</h2></a></li>
    <li><a href="#"><h2>Organze</h2></a></li>
    <li><a href="#"><h2>Stropicciati</h2></a></li>
    <li><a href="#"><h2>Oscuranti</h2></a></li>
    <li><a href="#"><h2>Rasi</h2></a></li>
    <li><a href="#"><h2>Taftà</h2></a></li>
    <li><a href="#"><h2>Fantasie</h2></a></li>
    <li><a href="#"><h2>Giro Inglese</h2></a></li>
    <li><a href="#"><h2>Teli Ricamati</h2></a></li>
    <li><a href="#"><h2>Ignifughi</h2></a></li>
    <li><a href="#"><h2>Stampati</h2></a></li>
    </ul>
    <hr style="color:; width: 50%;margin-left:45px;">
    <li id="p3" class="menu"><img src="" border="0" style="position:relative;left:55px"></li>
    <ul id="s3" class="links">
    <li><a href="#"><h2>Per Tappezzeria</h2></a></li>
    <li><a href="#"><h2>Per Tendaggi</h2></a></li>
    </ul>
    <hr style="color:; width: 50%;margin-left:45px; ">
    </div>
    <div id="news"></div>
    <div class="prod"></div>
    </div>
    <div id="contenuti"></div>
    </div>
    <div id="footer"></div>

    </html>[/HTML]

    Il css

    
/*Reset */

/*-------------------------Layaut Pagina--------------------*/
div#layaut{
    width: 930px;
    height: auto !important;  /* per i browser moderni */
    height: 500px;      /* per IE5.x e IE6 */
    min-height: 500px;  /* per i browser moderni */
    margin: 0 auto;
    background-color: #fff;
    clear:both
}
div#contenuti{
    float: left;
    display: inline;
    margin-top: 1em;
    margin-left: 2em;
    width: 688px;
    height: auto !important;  /* per i browser moderni */
    height: 340px;      /* per IE5.x e IE6 */
    min-height: 340px;  /* per i browser moderni */
    background-color: #EEE;
}
div#footer{
    display: block;
    height: 15px;
    width: 930px;
    margin: 0 auto;
    background-color: #cb2726;
}
/*--------------------------Fine Layaut----------------------*/
/*----------------------------Logo---------------------------*/
div#logo{
    height:97px;
    background-color: transparent;
    background-image: url(../img/logo.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    border-top: 2px solid #bf0101;
    border-left: 2px solid; 
    border-right:2px solid; 
}
div#partner{
    position: relative;
    margin-right: 0px;
    padding-right: 1.3em; 
    margin-top:1em;
    float: right;
    height: 72px;
    width: 190px;
    font-family: "Arial" serif;
    font-size: 16px;
}
div#partner p{
    font-weight: bold;
    padding-bottom: 7px;
    text-align: right;
}

div#partner a{  
    color:#000;
    text-align: left;
}
/*-----------------------------Fine Logo----------------------------*/
/*----------------------Inizio Menù superiore-----------------------*/
div#menu{
    float: left;
    border: 2px solid;
    padding-top:6px;
    padding-bottom:7px;  
    text-align: center;
    width: 926px;
}
div#menu ul{
    list-style:none;
    overflow:hidden;
    width:100%;
    display: inline;
}
div#menu li{
    border-left: 1px solid #C0C0C0;
    display:inline;
}
div#menu a.primo{
    margin-left:0;
}
div#menu a{
    margin-right:1.4em;
    margin-left:1.4em;  
    text-transform:uppercase;
    text-decoration:none;
    color:#000;
    font-family: 'Lato', arial, serif;
    font-size: 14px;  
}
div#menu a:hover{
    color:#656565;   
}

/*----------------------Fine Menù superiore---------------------*/
/*----------------------Menù Laterale---------------------------*/
div#menulat{
    float: left;
    display: inline;
    margin-top: 1em;
    width: 210px;
    height: 600px;
}
div#menulat div{
    width: inherit;  
}
div#intro{
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(../img/Space.jpg);
    height: 45px;
}
div#news{
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 20px top;  
    background-image: url(../img/News.jpg);  
    margin-top: 0.3em;
    height : 15px;
    display: block; 
}
div#prodotti{
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 20px top;  
    background-image: url(../img/Prodotti.jpg);      
    margin-top: 0.3em;
    height : 15px;
    display: block;
}
div.prod{
    margin-top: 0.3em;
    background-color:;  
    padding: 0.3em 0 0.2em;
    height: auto !important;  /* per i browser moderni */
    height: 120px;      /* per IE5.x e IE6 */
    min-height: 120px;  /* per i browser moderni */
}
.menu{
  margin-top:0.5em;
  text-decoration: none;
  list-style:none;  
  cursor: pointer;
}
/*----Sottomenù---*/
.links{
    cursor:pointer;
    text-align:left;
    margin-top: 0.3em;
    margin-left: 4em;
}     
.links a{
    color:#000; 
    text-decoration: none;}
.links a:hover{
    text-decoration: underline;}
h2{
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5;
    font-family: 'Quattrocento', arial, serif;    
}
/*---------------Fine Menu Lat--------------*/

    Il javascript

    $().ready(
  function() {
    // nascondo tutti i sottomenu
    $("#s1").hide();
    $("#s2").hide();
    $("#s3").hide();
    // mostro i sottomenu del blocco principale 1
    $("#p1").click(
      function() {
        if ($("#s1").is(":hidden")) $("#s1").slideDown(); else $("#s1").slideUp();
        if ($("#s2").is(":visible")) $("#s2").slideUp();
        if ($("#s3").is(":visible")) $("#s3").slideUp();
      }
    );
    // mostro i sottomenu del blocco principale 2
    $("#p2").click(
      function() {
        if ($("#s1").is(":visible")) $("#s1").slideUp();
        if ($("#s2").is(":hidden")) $("#s2").slideDown(); else $("#s2").slideUp();
        if ($("#s3").is(":visible")) $("#s3").slideUp();
      }
    );
    // mostro i sottomenu del blocco principale 3
    $("#p3").click(
      function() {
        if ($("#s1").is(":visible")) $("#s1").slideUp();
        if ($("#s2").is(":visible")) $("#s2").slideUp();
        if ($("#s3").is(":hidden")) $("#s3").slideDown(); else $("#s3").slideUp();
      }
    );
  }
);

    Sono alle prime armi quindi se avete anche consigli sono sicuramente ben accetti, ringrazio in anticipo chi risponderà

    0
Effettua l'accesso per rispondere