Layout con css

**iomenef8** · 11-12-2007, 14:23

Ho letto le guide ai css ed ai layout con css, ed ho scaricato lo zip finale, ma come posso fare per allargare o stringere la sezione navigation e la sezione extra?
Vi posto il sorgente del layout che mi interessa:

codice:

<style type="text/css">
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 12px;text-align: center}
div#container{position: relative; width: 760px;margin: 0px auto;
    border-left: 1px solid #000; border-right: 1px solid #000; background-color: #eee;color: #000;text-align: left}

/*stili generici, su header e footer*/
div#header{height: 80px;background-color:#009900;color: #FF0000}
div#header a{color: #eee;text-decoration:none}
h1,h2,h3,p{margin: 0}
p{padding-bottom: 10px}
h3{padding-top: 10px}
h1{padding-left:10px;font: bold 2.3em/80px georgia,times,serif}
h2{font-size: 1.5em}
h3{font-size: 1.2em}
div#footer a{color:#0000FF;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{position: absolute; top: 80px; left: 0;
    width: 110px;\width:110px;w\idth:100px;padding: 1em 0 0 10px}
div#extra{position: absolute; top: 80px; right: 0;
    width: 180px;\width:190px;w\idth:180px;padding: 1em 5px}
div#content{margin: 0 190px 0 110px;padding: 1em 10px;background-color: #fff}
div#footer{text-align:right; padding: 5px 20px;
    background-color: #FF0000; color: #fff}

/*stili per la navigazione*/
div#navigation ul{margin: 0 0 20px;padding: 0; list-style-type: none}
div#navigation ul a{display:block;width: 90px;border-bottom: 1px solid #fff;color:#000;
    font-weight:bold; text-decoration: none}
div#navigation ul a:hover{background-color: #fff;color: #f00}
div#navigation ul a#activelink{color: #f00;text-decoration: none}
div#minilink a{margin: 20px 0;display: block;border: 1px inset #666;width:90px;line-height: 40px;
    background-color: #fff;color: #000;text-align: center;text-decoration: none}
div#minilink a:hover{font-size: 2em;font-weight: bold;color: #ccc}

/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{padding: 1px 2px;background-color: #999;color: #fff;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}

/*stili per i contenuti*/
div#content{border-left: 1px solid #999; border-right: 1px solid #999}
div.textimage{border-bottom: 1px dotted #999; width: 100%} /*risolve il peek-a-boo bug di IE6*/
div.textimage img{float:left;margin: 10px}
div.textimage h2{margin-top: 10px}


div.wide,div.split2,div.split3{clear:left}
div.wide{margin: 0 1%; border-top: 1px dotted #ccc}
div.split2 div{float: left; width: 208px; \width: 218px; w\idth: 208px;padding: 0 5px}
div.split3 div{float: left; width: 135px; \width: 145px; w\idth: 135px;padding: 0 5px;
    border-top: 1px dotted #ccc}
</style

Grazie in anticipo!

**Myaku** · 11-12-2007, 14:36

Originariamente inviato da iomenef8
Ho letto le guide ai css ed ai layout con css, ed ho scaricato lo zip finale, ma come posso fare per allargare o stringere la sezione navigation e la sezione extra?

se hai letto (studiato?) le guide ai css non riesco a capire dove sia la difficoltà ... modifichi le width degli elementi (compresa quella di un eventuale div padre).
Se poi non è quello che intendevi, chiedo venia.

Cyà

**iomenef8** · 11-12-2007, 14:53

Devo intervenire quì, giustp?

codice:

/*stili specifici per il layout*/
div#navigation{position: absolute; top: 80px; left: 0;
    width: 110px;\width:110px;w\idth:100px;padding: 1em 0 0 10px}
div#extra{position: absolute; top: 80px; right: 0;
    width: 180px;\width:190px;w\idth:180px;padding: 1em 5px}
div#content{margin: 0 190px 0 110px;padding: 1em 10px;background-color: #fff}
div#footer{text-align:right; padding: 5px 20px;
    background-color: #FF0000; color: #fff}

Ma se modifico quì non cambia nulla:

codice:

div#navigation{position: absolute; top: 80px; left: 0;
    width: 110px;\width:110px;w\idth:100px;padding: 1em 0 0 10px}

**copsteve** · 11-12-2007, 17:11

Come diceva Myaku devi modificare anche il div padre, nel tuo caso penso sia il div "container" (ti dico penso perchè non vedendo l'html non si può risp con certezza).
Ad ogni modo devi fare semplicemnte un paio di conti e vedere quanto è grande il container, successivamente suddividere i div che stanno al suo interno dando la dimensione che vuoi ma senza superare quella del div principale.
(spero di essere stato chiaro

)

Siccome dici di aver letto le guide, ti consiglio di farti uno schema a penna su un foglio, farti i conti e poi scrivere a mano il codice.

**iomenef8** · 11-12-2007, 19:35

Io voglio mantenere la larghezza totale come è attualmente, 760px, vorrei allargare la navigation e stringere l'extra...
Le ho provate tutte su questo pezzo, penso che debba intervenire quì:

codice:

/*stili specifici per il layout*/
div#navigation{position: absolute; top: 80px; left: 0;
    width: 110px;\width:110px;w\idth:100px;padding: 1em 0 0 10px}
div#extra{position: absolute; top: 80px; right: 0;
    width: 180px;\width:190px;w\idth:180px;padding: 1em 5px}
div#content{margin: 0 190px 0 110px;padding: 1em 10px;background-color: #fff}
div#footer{text-align:right; padding: 5px 20px;
    background-color: #FF0000; color: #fff}

Potete dirmi esattamente dove intervenire?

**iomenef8** · 12-12-2007, 17:38

up

**iomenef8** · 13-12-2007, 14:04

Per favore, aiutatemi!

**webmas** · 13-12-2007, 21:41

Potresti postare una pagina html a cui e' applicato il css in oggetto, in modo da vedere come sono posizionati i vari DIV.
Comunque perche' nel codice "width: 110px;\width:110px;w\idth:100px;" c'e' il tag di ampiezza triplicato? E' sufficiente solo uno.

**iomenef8** · 14-12-2007, 17:34

Era già così

Metto qui lo stile e una pagina:

codice:

<style type="text/css">
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 12px;text-align: center}
div#container{position: relative; width: 760px;margin: 0px auto;
    border-left: 1px solid #000; border-right: 1px solid #000; background-color: #eee;color: #000;text-align: left}

/*stili generici, su header e footer*/
div#header{height: 80px;background-color:#aaa;color: #aaa}
div#header a{color: #000;text-decoration:none}
h1,h2,h3,p{margin: 0}
p{padding-bottom: 10px}
h3{padding-top: 10px}
h1{padding-left:10px;font: bold 2.3em/80px georgia,times,serif}
h2{font-size: 1.5em}
h3{font-size: 1.2em}
div#footer a{color:#ff0;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{position: absolute; top: 80px; left: 0;
    width: 110px;\width:110px;w\idth:100px;padding: 1em 0 0 10px}
div#extra{position: absolute; top: 80px; right: 0;
    width: 180px;\width:190px;w\idth:180px;padding: 1em 5px}
div#content{margin: 0 190px 0 110px;padding: 1em 10px;background-color: #fff}
div#footer{text-align:center; padding: 5px 20px;
    background-color: #aaa; color: #00ff00}

/*stili per la navigazione*/
div#navigation ul{margin: 0 0 20px;padding: 0; list-style-type: none}
div#navigation ul a{display:block;width: 90px;border-bottom: 1px solid #fff;color:#000;
    font-weight:bold; text-decoration: none}
div#navigation ul a:hover{background-color: #fff;color: #f00}
div#navigation ul a#activelink{color: #f00;text-decoration: none}
div#minilink a{margin: 20px 0;display: block;border: 1px inset #666;width:90px;line-height: 40px;
    background-color: #fff;color: #000;text-align: center;text-decoration: none}
div#minilink a:hover{font-size: 2em;font-weight: bold;color: #ccc}

/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{padding: 1px 2px;background-color: #999;color: #fff;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}

/*stili per i contenuti*/
div#content{border-left: 1px solid #999; border-right: 1px solid #999}
div.textimage{border-bottom: 1px dotted #999; width: 100%} /*risolve il peek-a-boo bug di IE6*/
div.textimage img{float:left;margin: 10px}
div.textimage h2{margin-top: 10px}


div.wide,div.split2,div.split3{clear:left}
div.wide{margin: 0 1%; border-top: 1px dotted #ccc}
div.split2 div{float: left; width: 208px; \width: 218px; w\idth: 208px;padding: 0 5px}
div.split3 div{float: left; width: 135px; \width: 145px; w\idth: 135px;padding: 0 5px;
    border-top: 1px dotted #ccc}
</style>

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TITOLOPAGINA</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">

    <style type="text/css" >
        @import url("stile.css");
    </style>


</head>
<body>




<div id="container"> 

    <div id="header"> 
        <h1>TITOLOPAGINA</h1>
    </div> 
    
    <div id="content"> 
    
    


   
    

        <div class="textimage"> 

            <h2>TITOLO</h2>
            
            




            



            [img][/img]
 
            TESTO
                      
            </p>
            

        </div> 
        








































     
    </div> 
    


    
    <div id="extra"> 
    
   
    
                  
    
        <div class="newsbox"> 
            <h2>TITOLO</h2>
            

testo</p>
        </div> 
        



    </div> 
    
    
    <div id="navigation"> 
        <ul>[*]Home[*]XXXXXX XX XXXXXXXXX
			[*]XXXXXXX			[*]XXXXXXXXXXX[*]XXXXXXXXX[*]XXXXXXXXXXX[*]XXXXXXXXX[*]XXXXXXXX[*]XXXXXXXXXXXX[*]XXXXXXXXXX[*]XXXXXXXXX[*]XXXXXXX[/list]





        <div id="minilink">spot</div> 
        
        
    </div> 
    

    
    <div id="footer"> 
    
footer

</font>

</div> 

</div> 

</body>
</html>

**iomenef8** · 17-12-2007, 14:25

up

Discussione: Layout con css

Strumenti discussione

Ricerca discussione

Visualizza

Layout con css

Re: Layout con css

Permessi di invio