layout con dimensione 100%

**gaetanoTwins** · 08-10-2007, 18:10

salve ragazzi ho trovato un layout fatto con i css; adesso dovrei modificarlo affichè la pagina occupi tutta la finestra del browser e nn so come fare.
Il codice è il seguente:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}


#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" "
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #2.1- (Fixed-Fluid)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">Content Column: Fluid <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">Left Column: 200px <script type="text/javascript">filltext(15)</script></div>

</div>

<div id="footer">Dynamic Drive CSS Library</div>

</div>
</body>
</html>

Cosa posso modificara?
Grazie mille

**gaetanoTwins** · 09-10-2007, 13:04

Ragazzi ho una consegna a breve

, sapreste darmi anche solo qualche indicazione?

**Mich_** · 09-10-2007, 14:59

Personalmente non mi piace quel tipo di layout. Se fossi in te ne cercherei un altro.
Inoltre non vedo elementi che mi facciano pensare a margini importanti.
Se vuoi proseguire con questo layout, dovresti colorare in modo diverso tutti i blocchi (background-color), in modo da identificare il blocco che lascia il margine.

Dovresti anche eliminare lo script, e sostituirlo con del contenuto tuo, in modo da capire il funzionamento ed escludere trucchi inseriti dallo script stesso.

**gaetanoTwins** · 09-10-2007, 15:20

Ti rigranzio...sto da giorni a capirci qualcosa e finalmente qualcuno che mi risponde.

Avevo gia provato a togliere lo script e se ho capito bene tira fuori dei numeri che rappresentano le larghezze delle colonne; cmq il layout che voglio utilizzare è quello ma solo come struttura, poi ci metto i miei sfondi, il mio tipo di carattere e altro.

Il mio approccio è il seguente: non sono bravo in css ma se devo modificare qualcosina la so fare, quindi mi trovo un layout che abbia una struttura simile al sito che voglio realizzare e poi gli cambio sfondo e tutto; alla fine mi prendo solo la struttura.

Adesso quello che vorrei modificare di questo layout è la lunghezza che deve occupare tutta la lunghezza della finestra del browser.

Ti ringrazio ancora

**Mich_** · 09-10-2007, 15:32

Personalmente non mi piace quel tipo di layout. Se fossi in te ne cercherei un altro.

Non mi piace l'uso dei margini per lasciare lo spazio ai blocchi. Io preferisco l'uso dei float, che in quel layout sono usati solo in parte.

Se vuoi proseguire con questo layout, dovresti colorare in modo diverso tutti i blocchi (background-color), in modo da identificare il blocco che lascia il margine.

Discussione: layout con dimensione 100%

Strumenti discussione

Ricerca discussione

Visualizza

layout con dimensione 100%

Permessi di invio