www.MegaLab.it

da **Ozne** » lun set 20, 2010 10:01 pm

Sono sempre io [bleh]

sto facendo una pagina dove mi servirebbero dei box al cui interno inserire nel testo delle immagini allineate a destra o sinistra.
I div sono perfetti, solo che le immagini se più alte del corpo del testo, trabordano... Ovvero anche se vanno oltre il testo, non fanno allungare il div, ma arrivate all'altezza massima vanno oltre i margini del div...

codice css

Codice: Seleziona tutto: body{background:#000; color:#000;font:font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10;background:black;} a{color:red;} a:hover, a:visited {color:white} .wrapper {width:502px;background:#fff;padding:6px;} .box_title{width:100%;padding:3px; border-left: solid #990000 10px; margin-bottom:15px; margin-top:40px;font-weight:bold;} .box h3{font-weight:bold;font-size:100%;text-shadow: 0px 4px 3px #cc0000;color:#000;margin-bottom:5px;} .box a{color:#000;border-bottom:1px solid #990000;text-decoration:none;} .box a:hover, a:visited {border-bottom:1px solid #333;} .box p{width:auto;background:#ccc; border:outset #333 2px; margin-left:3px;margin-right:3px;padding:6px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;} .box2{width:100%;text-align:justify;margin-bottom:6px;min-height:120px;} .box img {border:0px solid #ccc;padding:4px;margin:4px;max-height:100px;padding-bottom:3px;} .box a:link img{border-bottom:2px solid #990000;} .box {width:auto; border-bottom: solid #ccc 1px; margin-left:0px;margin-right:0px;margin-top:3px;padding:6px;min-height:142px;}

codice html

Codice: Seleziona tutto: <html> <body> <div class='wrapper'> <div class='box_title'>titolo</div> <div class='box'> <h3>descrizione<h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </body> </html>

Ho provato a rimediare dando un altezza massima alle immagini, e un'altezza minima per i div, ma la soluzione non mi soddisfa, visto che non sempre risolve il problema...

l'ideale sarebbe avere le immagini che si ridimensionano massimo al 90% dell'altezza del div, ma non ci sono riuscito.

Chi mi sa aiutare?

Grazie. ;)

da **Andy94** » mar set 21, 2010 6:11 am

Dovresti impostare un'altezza predefinita per il DIV, quindi far ridimensionare le immagini in base a quello.
Che so, supponi che scegli un'altezza per il div come height: 100px; a quel punto metterai all'interno dei selettori di img max-height: 90px.

O hai bisogno di DIV che siano ad altezza fluida?

da **Ozne** » mar set 21, 2010 9:59 am

In altezza devono rimanere fluidi, è quello il problema. [uhm]

ma è possibile far allargare il div anche alle immagini?

da **Ozne** » mar set 21, 2010 10:46 am

ho riolto, inserendo nella classe "box img" un float:left per tenere le immagini a sinistra e creato un altra classe per averle a destra.
poi ho creato una classe clear da posizionare in fondo al box, e così le immagini riescono ad allargare il div. [applauso+]

da **Ozne** » mar set 21, 2010 12:04 pm

Mi ero illuso. [cry]

Questo sistema funziona perfettamente con le immagini allineate a sinistra, ma non per quelle allineate a destra...

css.jpg

css

Codice: Seleziona tutto: body{background:red;} .wrapper {width:502px;margin-left:33%;background:#fff;padding:6px;} .box h3,.box2 h3{font-weight:bold;font-size:100%;color:#000;margin-bottom:5px;} .box a,.box2 a{color:#000;border-bottom:1px solid #990000;text-decoration:none;} .box a:hover, a:visited .tips a:hover, a:visited, .box2 a:hover, a:visited{border-bottom:1px solid #333;} .box img, .box2 img{border:0px solid #ccc;padding:4px;margin:4px;max-height:100px;padding-bottom:3px;float:left;} .box a:link img, .box2 a:link img{border-bottom:2px solid #990000;} .box, .box2 {width:auto; margin-left:0px;margin-right:0px;margin-top:3px;padding:6px;border-bottom: 2px dotted red;background:#ccc;} .clearer{clear: left;height:0px;} .box2 img{float:right;}

html

Codice: Seleziona tutto: <html> <head> <title>Mafia - EasterEggs</title> <link rel="stylesheet" type="text/css" href="stile2.css"> </head> <body> <p> <div class='wrapper'> <div class='box'> <h3>titolo</h3><img src='100.jpg'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class='clearer'> </div> </div> </div> </p> <div class='wrapper'> <div class='box2'> <h3>titolo</h3><img src='100.jpg'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <div class='clearer'> </div> </div> </div> </body> </html>

da **ssjx** » mar set 21, 2010 12:57 pm

La ruggine mi assale ma forse la soluzione dovrebbe essere l'assegnazione di overflow: hidden al div contenente l'immagine .... non ne sono troppo sicuro, fai una prova

da **Ozne** » mar set 21, 2010 1:01 pm

ma così non viene tagliata? [boh]

edit

ha funzionato! [:)]

dei css non ci capirò mai abbastanza... [V]

da **ssjx** » mar set 21, 2010 1:20 pm

Ozne ha scritto:dei css non ci capirò mai abbastanza...

No in questo caso hai ragione tu.... nemmeno io l'ho mai capito questo hack, ma tempo fa lo avevo letto ed memorizzato ugualmente ... ma è per l'appunto un hack quindi io li considero un po' storia a sè [:D]

da **Ozne** » mar set 21, 2010 1:56 pm

funziona in tutti i browser, quindi ottimo, ma dall'oscura azione [:D]

grazie

da **Pacopas** » ven ott 08, 2010 2:28 pm

Scusate il ritardo in questa discussione... poichè l'utente ha già risolto. Mi ero messo la discussione nei segnalibri ma l'ho persa di vista.

Il problema principale che si riscontra credo risieda nel fatto che l'opzione float viene utilizzata in maniera inopportuna... come se funzionasse come un valore di allineamento.
Dobbiamo ricordare che il float esula dal flusso del documento l'elemento che utilizziamo, per questo infatti il div contenitore non contiene poi l'immagine nella sua interezza.

Ricordiamoci inoltre che il tag <img> è un elemento in linea questo porta a dover considerare non solo l'allineamento ma anche il fatto che lo volete allineare come se fosse un elemento blocco.

Ciò concettualmente è sbagliato anche se il fatto che l'immagine abbia dimensioni fisse e sia racchiusa in un quadrato immaginario porta spesso a questa considerazione...

nel caso specifico quindi dovete annullare il float dato all'immagine che parte dall'immagine e non si chiude da solo, contrapponendo un altro elemento nel nostro caso un paragrafo di testo <p> come primo passo e dopo usare uno spazio pulitore prima della chiusura dell'elemento contenitore...

meglio un esempio.
solita procedura ... copia incolla in un file txt e nominare il file prova_allineamento_immagini.html

come si può vedere i css racchiusi in style sono molto lineari e danno solo l'allineamento desiderato all'immagine
i box hanno il backgroud color per vedere che non "trasborda"

Codice: Seleziona tutto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Prova allineamento immagini</title> <meta name="generator" content="Bluefish 2.0.0" > <meta name="author" content="Pacopas" > <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .box_imm_sx{background: #FFFFCC;} .box_imm_dx{background: #CCFFFF;} .box_imm_sx img {float: left;} .box_imm_dx img {float: right;} .clearit {clear: both;} </style> </head> <body> <div class="box_imm_sx"> <h2>Immagine a sinistra</h2> <img src="firefox.png" alt="Firefox Black"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><br class="clearit"> </div> <div class="box_imm_dx"> <h2>Immagine a destra</h2> <img src="firefox.png" alt="Firefox Black"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><br class="clearit"> </div> <div class="box_imm_sx"> <img src="firefox.png" alt="Firefox Black"> <h2>Immagine a sinistra anche del titolo</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><br class="clearit"> </div> <div class="box_imm_dx"> <img src="firefox.png" alt="Firefox Black"> <h2>Immagine a destra anche del titolo</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><br class="clearit"> </div> <ul> <li><a href="http://jigsaw.w3.org/css-validator/#validate_by_upload" name="CSS Validation Service" title="CSS Validation Service">CSS Validation Service</a></li> <li><a href="http://validator.w3.org/#validate_by_upload" name="Markup Validation Service" title="Markup Validation Service">Markup Validation Service</a></li> </ul> <ul> <li>Testato con Firefox 3.6.10</li> <li>Testato con Opera 10.62</li> <li>Testato con Safari 4.0</li> <li>Testato con Chrome 6.0</li> <li>Testato con Explorer 8.0</li> </ul> </body> </html>

l'ho testato dovrebbe funzionare con tutti ed è estremamente fluido.
se racchiudere i vari box in un altro contenitore sta alle vostre esigenze di layout [^]

l'immagine che ho usato la allego ma ovviamente può essere sostituita... assicuratevi che il nome con cui la salvate sia firefox.png yyy

fatemi sapere se vi torna... o se conoscete procedure più lineari [std]

da **ssjx** » ven ott 08, 2010 2:37 pm

Pacopas ha scritto:Dobbiamo ricordare che il float esula dal flusso del documento l'elemento che utilizziamo, per questo infatti il div contenitore non contiene poi l'immagine nella sua interezza.

Ricordiamoci inoltre che il tag <img> è un elemento in linea questo porta a dover considerare non solo l'allineamento ma anche il fatto che lo volete allineare come se fosse un elemento blocco.

Ciò concettualmente è sbagliato anche se il fatto che l'immagine abbia dimensioni fisse e sia racchiusa in un quadrato immaginario porta spesso a questa considerazione...

In effetti è vero... ogni tanto una ripassatina anche a queste cavolate pare sia necessaria [^]

Pacopas ha scritto:nel caso specifico quindi dovete annullare il float dato all'immagine che parte dall'immagine e non si chiude da solo, contrapponendo un altro elemento nel nostro caso un paragrafo di testo <p> come primo passo e dopo usare uno spazio pulitore prima della chiusura dell'elemento contenitore...

è una cosa che ormai non rientra proprio più nella mia mentalità... all'aggiunta di markup a fini "visivi" preferisco la prima soluzione [std]

da **Pacopas** » ven ott 08, 2010 2:42 pm

ssjx ha scritto:è una cosa che ormai non rientra proprio più nella mia mentalità... all'aggiunta di markup a fini "visivi" preferisco la prima soluzione

non ho compreso quale marckup è introdotto a fini visivi onestamente.
il codice html è il seguente

Codice: Seleziona tutto: <div class="box"> <h2></h2> <img> <p></p> <br> </div>

di contro parte
l'assenza del paragrafo <p> è un errore... il box non contiene solo testo quindi il testo devo essere racchiuso in <p> imho
poniamo infatti che vogliamo dare solo al testo uno sfondo o dargli del padding... va inserito in un paragrafo
infatti non serve all'allineamento in senso stretto... togliendolo il risultato è il medesimo... visivamente.. a livello di codice un testo sta nel paragrafo... almeno spero yyy

il codice iniziale aveva un markup solo visivo ed è il seguente
<div class='clearer'> </div>

il br è una esigenza in questo caso per la pulizia del codice... e per annullare un allineamento forzato ad un elemento in linea...
oltre a non essere un elemento aggiunto a caso ma un tag la cui funzione è proprio quella di creare un break nel flusso ordinario a cui diamo anche il compito di annullare il float
analizzando i css dei due codici credo che sia molto più logico e immediato il metodo da me descritto [std]

poi sai socio ognuno fa ..... come funziona [rotolo]

da **ssjx** » ven ott 08, 2010 4:36 pm

Pacopas ha scritto:il codice iniziale aveva un markup solo visivo ed è il seguente
<div class='clearer'> </div>

il br è una esigenza in questo caso per la pulizia del codice... e per annullare un allineamento forzato ad un elemento in linea...
oltre a non essere un elemento aggiunto a caso ma un tag la cui funzione è proprio quella di creare un break nel flusso ordinario a cui diamo anche il compito di annullare il float
analizzando i css dei due codici credo che sia molto più logico e immediato il metodo da me descritto

In effetti non ricordavo neanche più la presenza di quel div vuoto [acc2]

Per quanto allo stesso tempo continui a non gradire quel <br> fondamentalmente inutile nel flusso dei contenuti... voglio dire: quel tag va bene se usato all'interno del testo, ma usato alla fine è già errato perché perde la sua funzione originaria e ne acquista un'altra finalizzata unicamente ad aggiustare la resa visiva del layout... non so se ho reso l'idea

Poi è chiaro che queste son solo menate mentali e null'altro... ma visto che si fa per parlare [std]

da **Pacopas** » ven ott 08, 2010 6:00 pm

ssjx ha scritto:In effetti non ricordavo neanche più la presenza di quel div vuoto

vedi la presenza del div vuoto (o meglio del clear) serve poichè si è deciso di usare float
a questo punto tanto vale usare un elemento html di break e non un div estetico

Per quanto allo stesso tempo continui a non gradire quel <br> fondamentalmente inutile nel flusso dei contenuti... voglio dire: quel tag va bene se usato all'interno del testo, ma usato alla fine è già errato perché perde la sua funzione originaria e ne acquista un'altra finalizzata unicamente ad aggiustare la resa visiva del layout... non so se ho reso l'idea

capisco e condivido... resta inteso che a mio modesto parere ... se si vuole imporre a dei contenuti questa forma qualcosa a riguardo si deve pur fare...
rimanendo nella totale fluidità poichè impostando i px le cose potrebbero cambiare come impostando il position probabilmente... è l'uso del float che lo impone
però meglio un br in più ma che logicamente è intuibile a cosa serva e non il div vuoto + l'hack overflow che onestamente non so nemmeno io come faccia a funzionare... è semplicemente (imho) più logico

Poi è chiaro che queste son solo menate mentali e null'altro... ma visto che si fa per parlare

ovvio

per me è anche un modo per affinare l'abilità di scrivere codice...

da **Andy94** » ven ott 08, 2010 6:31 pm

Ho perso gli ultimi sviluppi, ma in linea di massima mi sembra di ricordare che non servono spazi di alcun tipo dentro a div con clear. [^]

da **ssjx** » ven ott 08, 2010 7:21 pm

Vi dirò... se ne parliamo ancora un po' mi risale la scimmia per il coding fine a se stesso [:D]

da **Pacopas** » ven ott 08, 2010 9:39 pm

Andy94 ha scritto:Ho perso gli ultimi sviluppi, ma in linea di massima mi sembra di ricordare che non servono spazi di alcun tipo dentro a div con clear.

senza dubbio andy [^]

ma io e ssjx che siamo flashati per dare ad html e ai css la rispettiva importanza e funzione ci stavamo sparando una discussione "stilistica" sull'uso di un tag vuoto non utile alla formattazione del testo ma che correggeva l'estetica ... o no ssjx [:D]

Vi dirò... se ne parliamo ancora un po' mi risale la scimmia per il coding fine a se stesso

deve essere così... sarebbe bello avere sempre una struttura lineare come la intendi tu [;)]

che condivido yyy

la mia osservazione era come dire... tra il male minore [acc2]

edit.
dimenticavo... c'è una soluzione senza l'uso di tag "estetici" ed è flottare tutto... se la preferisci [;)]

però dovrai stare attento a tutto il resto della impaginazione perché il comando float non annullato può essere una palla al piede [^]

Codice: Seleziona tutto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Prova allineamento immagini</title> <meta name="generator" content="Bluefish 2.0.0" > <meta name="author" content="Pacopas" > <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .box_imm_sx{background: #FFFFCC; float: left;} .box_imm_dx{background: #CCFFFF; float: left;} .box_imm_sx img {float: left;} .box_imm_dx img {float: right;} </style> </head> <body> <div class="box_imm_sx"> <h2>Immagine a sinistra</h2> <img src="firefox.png" alt="Firefox Black"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="box_imm_dx"> <h2>Immagine a destra</h2> <img src="firefox.png" alt="Firefox Black"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="box_imm_sx"> <img src="firefox.png" alt="Firefox Black"> <h2>Immagine a sinistra anche del titolo</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="box_imm_dx"> <img src="firefox.png" alt="Firefox Black"> <h2>Immagine a destra anche del titolo</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <ul> <li><a href="http://jigsaw.w3.org/css-validator/#validate_by_upload" name="CSS Validation Service" title="CSS Validation Service">CSS Validation Service</a></li> <li><a href="http://validator.w3.org/#validate_by_upload" name="Markup Validation Service" title="Markup Validation Service">Markup Validation Service</a></li> </ul> <ul> <li>Testato con Firefox 3.6.10</li> <li>Testato con Opera 10.62</li> <li>Testato con Safari 4.0</li> <li>Testato con Chrome 6.0</li> <li>Testato con Explorer 8.0</li> </ul> </body> </html>

da **Ozne** » lun nov 08, 2010 5:56 pm

Mamma che ho causato! [:D]

Interessante sviluppo [^]

www.MegaLab.it

le mmagini trabordano dai div.

le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Re: le mmagini trabordano dai div.

Chi c’è in linea