Nemesis19_italy Inviato 13 Febbraio 2007 Segnala Condividi Inviato 13 Febbraio 2007 Salve a tutti! C'è una cosa che non sono mai riuscito a capire. Come fare a far estendere al massimo l'altezza di un div box. Ecco un semplice stile id: div#contenuto { width: auto; height: 100%; margin: 157px; text-align: left; border: 1px solid red; padding-bottom: auto; } con height:100% assolutamente non funziona. sono costretto a mettere una dimensione in altezza fissa in pixel, oppure non mettere niente e vedere adattato verticalmente il box al contenuto. qualche idea diversa? e se non si può fare, almeno qualcuno conosce la radice del perché di questa mancanza? colpa del w3c? Fabrizio Link al commento Condividi su altri siti Altre opzioni di condivisione...
Sergio P. Inviato 13 Febbraio 2007 Segnala Condividi Inviato 13 Febbraio 2007 La domanda a cui devi risponderti è: il 100% di che? Se l'elemento padre di quel div ha una altezza dichiarata, il tuo DIV si adatterà al 100% di quell'altezza. Altrimenti, non esistendo un valore a cui adattarsi, è normale che non funzioni. Ciao. S. Link al commento Condividi su altri siti Altre opzioni di condivisione...
MacTrin Inviato 13 Febbraio 2007 Segnala Condividi Inviato 13 Febbraio 2007 aggiungi: position: absolute; e imposta un width preciso MAC IS MEL CHE WIN Più vecchio diventi più forte sarà il vento e sarà sempre contro "Jack Nicklaus" Link al commento Condividi su altri siti Altre opzioni di condivisione...
Nemesis19_italy Inviato 13 Febbraio 2007 Autore Segnala Condividi Inviato 13 Febbraio 2007 Sergio P. ho messo un height: 100% anche all'elemento padre che è un div, quindi il div in questione dovrebbe espandersi, invece no. l'elemento padre dell'elemento padre è la pagina quindi non credo di dover impostare altri parametri. ma non succede nulla! non si allarga in altezza. MacTrin, grazie ma vorrei evitare avendolo così sempre alla massima estensione. per carità i float sono una bella invenzione, ma quando si faceva tutto con le tabelle era un'altra stroria, anche se non correttissime per la funzione che veniva usata, erano semplicemente prive di problemi. grazie ancora Fabrizio Link al commento Condividi su altri siti Altre opzioni di condivisione...
caruso_g Inviato 13 Febbraio 2007 Segnala Condividi Inviato 13 Febbraio 2007 Il problema non è del css ma dei browser, se interpretassero per bene le specifiche del css, impostando height 100% si sarebbe dovito estendere per tutta l'altezza. puoi postare un linke per vedere come è strutturata la pagina? in generale * { margin: 0; padding: 0; } html, body { height: 100%; max-height: 100%; margin: 0; padding: 0; } body>#ilDivCheVuoiEstendere { height: auto; min-height: 100% } visit ((( Bonsai Studio ))) RapidWeaver themes DEVELOPMENT Link al commento Condividi su altri siti Altre opzioni di condivisione...
Nemesis19_italy Inviato 11 Febbraio 2008 Autore Segnala Condividi Inviato 11 Febbraio 2008 non avevo notato questa ultima risposta.....probabilmente un problema negli avvisi del forum... cavolo grazie caruso_g, ti posto qui il link: http://www.slamdunk.it/index.php sto facendo un template per joomla 1.5 e come vedi le colonne laterali hanno uno sfondo che non arriva al 100% di altezza. ti posto il mio css: * { margin: 0; padding: 0; } html, body { height: 100%; max-height: 100%; margin: 0; padding: 0; } body { font-family: Verdana; font-size: 76%; } body>div#container { height: auto; min-height: 100%; } /* div layout */ div#content { width: auto; height: auto; margin: 0px 227px; padding-top: 0px; } div#left { float: left; width: 217px; height: auto; margin: 0 auto; background-image: url("../images/sfondo_left.gif"); background-repeat: repeat-y; padding-top: 0px; text-align: left; overflow: hidden; } div#right { float: right; width: 217px; height: auto; margin: 0 auto; background-image: url("../images/sfondo_right.gif"); background-repeat: repeat-y; padding-top: 0px; text-align: left; } riaprendo questa discussione spero che qualche anima buona mi illumini! Fabrizio Link al commento Condividi su altri siti Altre opzioni di condivisione...
grigio60 Inviato 11 Febbraio 2008 Segnala Condividi Inviato 11 Febbraio 2008 il punto delle misure in percentuale è quello sollevato da Sergio P. quando tu indichi "width: 100%" o "height:100%", quel 100% si deve riferire a qualche cosa, perché le misure in percentuale sono "relative" e hanno quindi bisogno di un riferimento assoluto esplicito. nel caso di height non basta dire "ho messo al 100% anche l'altezza del contenitore padre" né i browser sono in grado di interpretare correttamente cosa si intende con "100%" nel caso di un elemento padre: il 100% di che cosa in questo caso? del body? della finestra visualizzata (ma in questo caso l'altezza cambierebbe se uno ridimensiona la finestra)? è per questo che l'elemento "height: 100%" risulta molto difficile da gestire - e non è colpa dei browser perché questi non possono essere nella testa di chi ha concepito il sito e ha sparato lì un height: 100% di cui non si riesce a interpretare in modo univoco "il 100% di che cosa". il primo punto quindi è capire il 100% "di quale altezza" vuoi che venga occupato. di solito nelle css la regola è che un elemento di dimensioni di tipo relativo (in percentuale) debba avere un contenitore padre o comunque ascendente in cui la dimensione corrispondente è data in modo assoluto (in pixel): solo in questo modo i browser sono in grado di gestire correttamente (e non in modo arbitrario) il ridimensionamento di tipo relativo. nel caso delle colonne laterali: height: 100% viene interpretato SEMPRE come "100% dei contenuti" quindi non arriveranno mai automaticamente a riempire tutta l'altezza del corpo, speci se i contenuti non sono sufficienti. In effetti il metodo basato su css per "rendere" colonne verticali tutte della stessa altezza indipendentemente dai contenuti è tutt'altro e NON si basa affatto su height: 100% ma su un approccio completamente differente. Serve aiuto? Posso darti una mano in Webmasters - Aiuto Software - Da Windows a Mac Mappa Utenti ItaliaMac [[miao]] Link al commento Condividi su altri siti Altre opzioni di condivisione...
Nemesis19_italy Inviato 11 Febbraio 2008 Autore Segnala Condividi Inviato 11 Febbraio 2008 e sapresti indicarmi questo approccio differente? ho fatto la frubata :oP non si imposta lo sfondo in basa ai float maledetti se riclicchi sul sito si vede il miracolo :oP infatti ho creato due id div#container { width: auto; padding: 0; background-image: url("../images/sfondo_left.gif"); background-repeat: repeat-y; background-position: left 0px; } div#container2 { width: auto; padding: 0; background-image: url("../images/sfondo_right.gif"); background-repeat: repeat-y; background-position: right 0px; } e mettendo i valori su position del background ho il risultato in base alla lunghezza dei contenuti non float. ora spero solo che se i contenuti saranno più corti dei menù di non avere le righe di bordo più corte...per ovviare ho lasciato quello sfondo anche ai float div#left { float: left; width: 217px; height: auto; margin: 0 auto; background-image: url("../images/sfondo_left.gif"); background-repeat: repeat-y; padding-top: 0px; text-align: left; overflow: hidden; } div#right { float: right; width: 217px; height: auto; margin: 0 auto; background-image: url("../images/sfondo_right.gif"); background-repeat: repeat-y; padding-top: 0px; text-align: left; } se trovate errori a questa cosa, fatevi avanti ) Fabrizio Link al commento Condividi su altri siti Altre opzioni di condivisione...
alfaconceptstudio Inviato 11 Febbraio 2008 Segnala Condividi Inviato 11 Febbraio 2008 Intanto dovresti mettere anche html e body al 100% dell'altezza. Poi dovresti togliere i margini e paddign superiori e posteriori se vuoi avere il 100% di altezza e che non ti rimanga neanche uno spaziettino bianco. E per utlimo per avere 2 barre laterali alla stessa altezza dovresti mettere un div che fa da footer in fondo con "clear: both" in modo che il div in questione si posizioni subito sotto la colonna più lunga innalzando la dimensione del div padre e facendo di conseguenza allungare anche le altre colonne impostate al 100%. Il div può anche contenere semplicemente uno spazio html. PS: non paragonare le tabelle ai css per favore, perchè semplicemente non sono paragonabili: i css a volte sono .... ostici ... ma hanno un potenza infinita se impari i trucchetti del mestiere! Le tabelle inoltre vanno contro ogni specifica W3c di accessibilità e rendono più difficile l'indicizzazione da parte dei motori di ricerca oltre che creare confusione nel codice html! ----------------------------------------------------- My Apple: Mac Pro 8-Core 3,2 Ghz - 16GB ram - 2TB hd - Leopard; Macbook Pro Core 2 Duo 2,33 Ghz 17'' - 3GB ram - 250GB hd - Leopard; Ipod 5G 80GB Bianco; 2 Iphone 8GB 1.1.2 OOTB portato a 1.1.3 Link al commento Condividi su altri siti Altre opzioni di condivisione...
Nemesis19_italy Inviato 11 Febbraio 2008 Autore Segnala Condividi Inviato 11 Febbraio 2008 alfaconceptstudio io ho seguito le tue indicazioni ma non funziona: ecco il css: html, body { margin: 0; padding: 0; } body { font-family: Verdana; font-size: 76%; } div#container { width: auto; padding: 0; } /* div layout */ div#content { width: auto; height: auto; margin: 0px 227px; padding-top: 0px; } div#left { float: left; width: 217px; height: auto; margin: 0 auto; background-image: url("../images/sfondo_left.gif"); background-repeat: repeat-y; padding-top: 0px; text-align: left; } div#right { float: right; width: 217px; height: auto; margin: 0 auto; background-image: url("../images/sfondo_right.gif"); background-repeat: repeat-y; padding-top: 0px; text-align: left; } div#footer { clear: both; width: auto; height: 70px; padding-top: 1px; margin: 0; text-align: center; } ecco il body php/html: <body> <div id="container"> <div id="left"> <img src="templates/<?php echo $this->template ?>/images/logo.jpg" alt="" title="" border="0" /> <jdoc:include type="modules" name="left" style="xhtml" /> </div> <div id="right"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> <div id="content"> <jdoc:include type="component" /> </div> <div id="footer"> <jdoc:include type="modules" name="footer" style="xhtml" /> </div> </div> </body> non fate caso hai tag strani, è tutta roba di joomla che non infierisce sul css. cliccando sul sito che ho riportato sopra vedi il risultato di questi codici che ho messo adesso Fabrizio Link al commento Condividi su altri siti Altre opzioni di condivisione...
grigio60 Inviato 11 Febbraio 2008 Segnala Condividi Inviato 11 Febbraio 2008 Intanto dovresti mettere anche html e body al 100% dell'altezza. dell'altezza "di cosa?" non serve a niente questa direttiva l'approccio per avere una resa di tre colonne assolutamente della stessa altezza, indipendentemente dai contenuti, NON si basa su height che NON può funzionare per il modo stesso in cui l'attributo è specificato nelle css. l'approccio corretto è questo: - una div contenitore che ha una grafica di sfondo (ripetuta solo verticalmente) che differenzia le tre colonne questa div contenitore contiene quattro div - le tre colonne realizzate con div diversa: una div float:left (colonna di sx), una div float:right (colonna di dx) e la div centrale senza float. - una div di footer caratterizzata da "clear: both" e di ampiezza (width) pari alla div contenitore in questo modo si otterranno sempre tre colonne ben distinte, tutte della stessa altezza, indipendentemente dai contenuti delle tre div. Serve aiuto? Posso darti una mano in Webmasters - Aiuto Software - Da Windows a Mac Mappa Utenti ItaliaMac [[miao]] Link al commento Condividi su altri siti Altre opzioni di condivisione...
Nemesis19_italy Inviato 11 Febbraio 2008 Autore Segnala Condividi Inviato 11 Febbraio 2008 esatto funziona adesso mettendo come hai detto anche se con qualche ritocchino qua e là ..... grazie mille..... se siete interessati al risultato potete dare una occhiata QUI se volete sapere codici vari fatemelo sapere...adesso non li riposto per decenza Fabrizio Link al commento Condividi su altri siti Altre opzioni di condivisione...
iMario Inviato 11 Febbraio 2008 Segnala Condividi Inviato 11 Febbraio 2008 Io ho avuto un problema simile con semplici tabelle e dreamweaver. Ho risolto rimuovendo le prime righe del codice relative al w3c. Il sito funziona perfettamente su tutti browser, quindi rimane standard. Link al commento Condividi su altri siti Altre opzioni di condivisione...
Sergio P. Inviato 11 Febbraio 2008 Segnala Condividi Inviato 11 Febbraio 2008 Io ho avuto un problema simile con semplici tabelle e dreamweaver. Ho risolto rimuovendo le prime righe del codice relative al w3c. Il sito funziona perfettamente su tutti browser, quindi rimane standard. Ommamma... il fatto che funzioni non vuol dire che sia standard. Tu hai ignorato una delle regole basi della costruzione delle pagine. Levando il DTD ora i browser non sapranno in che "lingua" tu stai scrivendo il codice e quindi interpreteranno le tue pagine senza nessuna direttiva comune, ma ognuno secondo le proprie regole. Avrai risolto quel problema ...ma te ne ritroverai mille altri. Link al commento Condividi su altri siti Altre opzioni di condivisione...
grigio60 Inviato 11 Febbraio 2008 Segnala Condividi Inviato 11 Febbraio 2008 quindi rimane standard. ma nemmeno per sogno: prova ad andare su validator.w3.org, inserire la URL di quella pagina e vedi cosa ti salta fuori come risultato. Serve aiuto? Posso darti una mano in Webmasters - Aiuto Software - Da Windows a Mac Mappa Utenti ItaliaMac [[miao]] Link al commento Condividi su altri siti Altre opzioni di condivisione...
Messaggi raccomandati
Archiviato
Questa discussione è archiviata e chiusa a future risposte.