Width che si adatta automaticamente

**Valeria75_bis** · 20-10-2010, 09:57

Ciao a tutti, ho una pagina che visualizza correttamente una struttura

ma ora vorrei modificarla per fare in modo che il width sia automaticamente 90% dello schermo e per l'height la soluzione più facile (o percentuale anch'essa oppure che si riadatta automaticamente)

praticamente dovrebbe restare fissa la parte #menu ed #immagine

riaddattandosi la parte #area_contenent

mentre per l'altezza, come dicevo, la soluzione più semplice mi va bene ....

Grazie mille

codice:

#contenitore {
  width: 950px;
  margin: 0px auto;
}
#logo {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  width: 950px;
  height: 93px;
  top: 10px;
}
#menu {
  background-image: url('menu.png');
  background-repeat: no-repeat;
  width: 230px;
  height: 424px;
  float: left;
}
#area_contenent {
  background-image: url('content.png');
  background-repeat: no-repeat;
  width: 379px;
  height: 424px;
  float: left;
}
#immagine {
  background-image: url('immagine.png');
  background-repeat: no-repeat;
  width: 338px;
  height: 424px;
  float: left;
}
#footer {
  background-image: url('footer.png');
  background-repeat: no-repeat;
  height: 74px;
}
.clearfix {
  clear: both;
}

codice:

<body>

<div id="contenitore">
  <div id="logo">
  </div>
  <div id="menu">menu</div>
  <div id="area_contenent">content</div>
  <div id="immagine">img</div>
  <div class="clearfix">
  </div>
  <div id="footer">Inserire qui i dati.</div>
</div>

</body>

**Valeria75_bis** · 20-10-2010, 19:56

Nessun aiuto???

**mucu** · 20-10-2010, 20:09

guarda
http://blog.html.it/layoutgala/
ci trovi tante idee pratiche

**Valeria75_bis** · 20-10-2010, 22:36

Grazie per l'aiuto e per la risposta, io però dovrei partire dalla ma struttura

demo

praticamente la parte dell'immagine di DX e del menu di SX sono fisse .... dovrebbe adattarsi la parte centrale (content)

vorrei quindi impostare il width di tutta la struttura a 90% e anche altezza ...

come posso fare?

grazie infinite

**Mich_** · 21-10-2010, 09:38

Tu parti con il piede sbagliato.

La tua struttura ti porta ai problemi che hai segnalato, piu` altri che ancora non hai visto (prova a visualizzare la pagina in una finestra di circa 800x600).

Parti invece da una struttura fatta bene, evita i posizionamenti (che sono molto difficili da usare).

Tra le vari layout che trovi in rete cerca quello che si avvicina di piu` a quello che vuoi e parti da quello. Tieni presente che cambiare colori e font e` facile; piu` difficile e` cambiare struttura.

**Valeria75_bis** · 21-10-2010, 10:09

Ti ringrazio per la risposta!!

potresti darmi qualche dritta, vorrei risolvere questo problema

**Mich_** · 21-10-2010, 12:39

Originariamente inviato da Valeria75_bis
Ti ringrazio per la risposta!!

potresti darmi qualche dritta, vorrei risolvere questo problema

Te l'ha gia` data Mucu con il link.
Altri riferimenti li puoi trovare tra i "link utili", oppure mediante ricerca in rete

**Valeria75_bis** · 22-10-2010, 09:08

Questo potrebbe fare al caso mio

http://blog.html.it/layoutgala/LayoutGala02.html

ma ho sempre un problema, vorrei centrare anche verticalmente e fare in modo che l'altezza sia anch'essa al XX %

è possibile?

Grazie

**Mich_** · 22-10-2010, 09:39

Ora sei partita bene. Hai un'idea, hai una bozza di soluzione e chiedi come modificarla.

Nota che quel layout si basa sul fatto che il contenuto occupa meta` dello spazio (in orizzontale) mentre l'altra meta` e` equamente suddivisa tra le due colonne laterali.
Per come e` fatto non vanno modificati i rapporti. Se invece le tue colonne sono fisse, va usato un diverso schema di partenza.

Poi devi spiegare cosa vuoi centrare verticalmente.
Partendo dal layout di Gala, la cosa puo` essere:
- vuoi mettere la parte arancio equamente spaziata tra il grigio e il nero
- vuoi che l'arancio si espanda per tutta altezza e la scritta al suo interno sia centrata
- e/o stessi discorsi per la parte azzurra (colonna destra)
Oppure puo` essere che il contenuto delle colonne laterali puo` superare in altezza quello della colonna centrale (gia` lo fa il layout proposto)

Comunque tieni presente che centrare verticalmente non e` semplice: di solito richiede la conoscenza di come funzionano i posizionamenti, che sono una delle cose piu` complesse nei CSS.

**Valeria75_bis** · 23-10-2010, 21:38

Io vorrei, prima di tutto un layout al 90% e non che riempia come ora il width (quindi 90% in altezza e lunghezza)

Per quanto riguarda le due aree: arancio (fissa), azzurra (fissa), bianca (con il contenuto) si deve ridimensionare per raggiungere appunto, un totale del 90% di tutto il layout

Quindi quale mi consigliate di utilizzare?

Grazie

Discussione: Width che si adatta automaticamente

Strumenti discussione

Ricerca discussione

Visualizza

Width che si adatta automaticamente

Permessi di invio