• A
    User •

    Posizionamento corretto del foglio di style.

    ciao ragazzi sto avendo dei problemi a posizionare correttamente questo foglio di stile.
    Quello che vorrei realizzare è riportato in figura
    image
    qui invece il code che sono riuscito a sviluppare

    
<html>
<head>
<style type="text/css">
<!--
.box{width:500px;border:1px solid #29353C;} 
.box-comm{ width:495px; height:90px; border:0px; background-image:url(bg-comm.gif); background-repeat:repeat-x; padding:5px 0 0 5px;} 
.box-centrale .box-1 .box-567 {width: 41px; height: 32px;  display: block; float: left; text-align: center;} 
.box-7-loading {width: 41px; height: 32px;  display: block; float: left; text-align: center; display: none;}
.box-centrale .box-1 .box-567 span {font-size: 15px; color: #5B6D81; padding-top: 3px !important; display: block; } 
.box-centrale .box-1 .box-7 {width: 14px; float: right;}     
.box-3 {float: left; width: 250px;}
-->
</style>
</head>

<body> 
  <div class="box" id="ol"> 
  <div class="box-comm" id="ol">
    <div class="box-3"> 3 </div>
  <div class="box-3"> 4 </div>
  <div ></div>
  <div class="box-centrale"><span class="box-1"> 
  <div class="box-567"><span class="box-56" >5</span>6  </div>
  <div class="box-7">7</div></span></div>
  </div>
  <p>2</p> 
  </div> 
</body>
</html>

```qualcuno riesce ad aiutarmi?
grazie
    0
  • M
    User Attivo •

    una cosa così....

    <style>
    .box1 {position:relative; width:500px; padding:0; margin:0; border-top:1px solid #ff0000; border-left:1px solid;height:150px; border-right:1px solid; height:100px;}
    .box2 {position:relative; width:500px; padding:0; margin:0; border:1px solid;height:250px;}
    .box3 {position:absolute; top:5px; left:5px;border:1px solid #000; width:50px;}
    .box4 {position:absolute; top:25px; left:5px;border:1px solid; width:50px;}
    .box5 {position:absolute; top:5px; right:5px;border:1px solid; width:50px; height:70px}
    .box6 {position:absolute; top:5px; right:50px;border:1px solid; width:50px;}
    .box7 {position:absolute; top:25px; right:50px;border:1px solid; width:50px;}
    </style>

    <div class="box1">1
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
    <div class="box6">6</div>
    <div class="box7">7</div>
    </div>
    <div class="box2">2</div>

    0
  • A
    User •

    non potrei ricevere risposta migliore :yuppi:

    a buon rendere! :ciauz:

    0
  • K
    Super User •

    Io invece ti sconsiglio di usare l'attributo "position:absolute";

    0
  • M
    User Attivo •

    si vero, potresti usare anche gli absolute e poi lo z-index per dire a quale div deve stare "sopra" l'altro...
    giusto karedas, nn ci avevo pensato

    0
  • K
    Super User •

    Perchè parli di div che stanno sopra l'altro? Un div sta dentro un altro in quel caso non importa l'uso di absolute o di z-index. Basta giochi con i float, width e margin facendo ben attenzione alle dimensioni e alle misure di ognuno di loro. Se racchiude i due elementi (3,5 e 5,6,7) in 2 ulteriori div che li contengano, può gestirsi tutto molto tranquillamente.

    0
  • K
    Super User •

    Indubbiamente questo che metto è più lungo di quello proposto da misterWo però odio l'uso del position:absolute (diciamo lo uso raramente).
    L'effetto è identico, per le dimensioni vanno cambiate in modo dettagliato (non si può sgarrare con i float :arrabbiato: ) a seconda di ciò che si vuole

    [HTML].....
    <head>
    <style type="text/css">
    body{
    }
    #container{
    width:850px;
    }
    #top{
    height:150px;
    width:800;
    padding:25px;
    background-color:#99FF00;
    }
    #center{
    height:300px;
    width:100%;
    background-color:#00FF00;
    }
    #topleft{
    width:500px;
    height:150px;
    float:left;
    clear:right;
    }
    .int{
    width:100%;
    height:75px;
    float:left;
    background-color:#999999;
    }
    #topright{
    float:left;
    clear:right;
    width:200px;
    height:100%;
    margin-left:100px;
    }
    .intB{
    width:200px;
    height:150px;
    }
    #tabA{
    float:right;
    width:50px;
    height:100%;
    background-color:yellow;
    }
    #tabB{
    float:left;
    width:150px;
    background-color:#009933;
    height:50%;
    }
    #tabC{
    float:left;
    height:50%;
    width:150px;
    background-color:red;
    }
    </style>
    </head>

    <body>
    <div id="container">
    <div id="top">
    <div id="topleft">
    <div class="int"></div>
    <div class="int"></div>
    </div>
    <div id="topright">
    <div class="intB">
    <div id="tabA"></div>
    <div id="tabB"></div>
    <div id="tabC"></div>
    </div>
    </div>
    </div>
    <div id="center"></div>
    </div>
    </body>
    ....
    [/HTML]

    0
Effettua l'accesso per rispondere