CSS applicato ai div

**champy** · 08-01-2009, 01:10

Buonasera, mi sto incasinato da tutt'oggi (ed in compagnia) su un problema che non riusciamo a risolvere. La situazione è la seguente:

Devo realizzare una pagina divisa in tre iframe, contenuti in altrettanti div, come nell'esempio qui di seguito con i div differenziati per colore: immy.

Le uniche restrizioni in pixel che voglio tenere sono l'altezza della zona blu (70 pixel) e la larghezza di quella verde (198 pixel).
Per la parte blu so che basta fare un semplice width: 100% ma i problemi sorgono con i due div sottostanti, visto che non riesco ad affiancarli cosicchè si possano espandere per tutta la pagina senza lasciare campi 'bianchi'. L'unica soluzione che sono riuscito a trovare è quella di fare misure standard e magari 'incorniciare' il tutto, ma sinceramente preferirei, laddove possibile, tenermi gli iframe per tutta la pagina. Io più che fare un float dei div e misure in percentuale non son riuscito a fare e, comunque, l'effetto non è stato mai soddisfacente.

Qualcuno sa mica illuminarmi su qualche procedura per far sì che tutto vada bene? Grazie in anticipo

**Razorblade** · 08-01-2009, 02:21

Ciao,
innanzitutto ti dico che esistono un milione di guide in giro per fare questa cosa con esempi già pronti, comunque ti posso dire che l'header va bene come l'hai pensato, larghezza al 100% ed altezza fissa.
I div sottostanti ok anche per la larghezza fissa per la sidebar, il 'trucco' è utilizzare il margin per la parte del contenuto ed applicare il float esclusivamente alla sidebar.
Siccome un esempio vale più di mille parole te lo posto

index.html

Codice PHP:


<!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" dir="ltr" lang="it-IT">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />

</head>

<body>

<div id="header">df</div>

<div id="sidebar">fd</div>

<div id="content">fdfd</div>

</body>

</html>

stile.css

Codice PHP:




    #header {

        width: 100%;

        background: blue;

    }

    

    #sidebar {

        width: 198px;

        background: green;

        float: left;

    }

    

    #content {

        background: red;

        margin: 0px 0px 0px 198px;

    }

Ti consiglio anche di applicare il reset dei css per il tuo layout, ho scritto qualcosa sul mio blog tempo fa.
Saluti

**champy** · 08-01-2009, 02:41

Grazie sia per l'esempio che per il consiglio del reset, che in modo rudimentale fatto da me più o meno già usavo per iniziare un foglio di stile, che sono andato a vedere sul blog.

L'unico problema che però mi rimane è che, sistemata la larghezza di tutta la pagina, resta l'altezza a darmi noia, poiché le due colonne (verde e rossa) mi restano a metà pagina circa senza scendere oltre :master: ho provato ad impostare più volte l'height in percentuale, ma qualsiasi uso il risultato è sempre uguale e non mi spiego il perché, se magari mi si aiuta anche su questo punto ne sarei grato così posso continuare lo sviluppo

Grazie

**Razorblade** · 08-01-2009, 02:59

L'height non puoi specificarlo in quel modo, comunque non vedo dove sta il problema, avrai del contenuto da inserire all'interno di quei div in modo da farli 'allungare' no?

**champy** · 08-01-2009, 03:06

beh sì, avessi fatto il sito in AJAX il discorso non farebbe una piega, però dovendomi arrangiare con gli iframe e dovendoli impaginare con dei div sono loro che si adattano alla dimensione del box e non i div che si espandono a seconda del contenuto.

Mi spiego meglio: ognuno di quei div deve essere contenitore di un iframe. Sarebbe mia intenzione stendere i tre div per tutta la superficie della pagina per poi 'disegnarla' tramite le altre pagine richiamate dagli iframe.

Spero di aver reso l'idea..

**Razorblade** · 08-01-2009, 03:20

Capito,
così per esempio

Codice PHP:




    html,body {

        margin:0;

        padding:0;

        height:100%;

    }



    #header {

        position: absolute;

        top:0;

        left:0;

        width: 100%;

        background: blue;

        height: 100px;

    }

    

    #sidebar {

        width: 198px;

        margin: 0px 0px 100px 0px;

        background: green;

        float: left;

        height:100%;

    }

    

    #content{

        background: red;

        margin: 0px 0px 100px 198px;

        height:100%;

    }

C'è un inconveniente, il contenuto della sidebar e del content viene inserito dietro l'header e non puoi usare il padding, devi necessariemente inserire l'elemento al suo interno con il margin, credo che applicando il margin top dell'altezza dell'header sull'iframe risolveresti il problema.

**champy** · 08-01-2009, 03:33

Grazie mille, finalmente va ^^
Ho capito l'inconveniente e grazie per lo spunto per risolvere. comunque in ogni caso un metodo per fare 'spazio' si riesce sempre a trovare, non era quello che mi tormentava

ora posso lavorarci in santa pace **

Grazie ancora, per me va più che bene

**Razorblade** · 08-01-2009, 03:34

Discussione: CSS applicato ai div

Strumenti discussione

Ricerca discussione

Visualizza

CSS applicato ai div

Permessi di invio