Larghezza variabile di un div

**ResianTaxidrive** · 09-09-2008, 16:25

Ipoteticamente, è possibile fare una cosa come nella foto con l'immagine di larghezza variabile, in cui il pulsante grigio sotto è anch'esso di larghezza variabile e in cui bisogna centrare il testo "Premi per ingrandire"? Per il pulsante grigio ho inserito una immagine grigia a cui forzo io la dimensione della larghezza ma poi come centro il testo?

**Myaku** · 09-09-2008, 19:19

piuttosto che usare un'immagine grigia, non ti conviene usare un background-color?

**ResianTaxidrive** · 10-09-2008, 11:58

Io lo metterei anche ma poi ho un div il cui bg-color è grigio ma non ho modo di impostargli dinamicamente la larghezza. Invece mettendo una immagine riesco a mettergli nel html la larghezza calcolata dinamicamente.

**Myaku** · 10-09-2008, 12:48

Originariamente inviato da ResianTaxidrive
Io lo metterei anche ma poi ho un div il cui bg-color è grigio ma non ho modo di impostargli dinamicamente la larghezza. Invece mettendo una immagine riesco a mettergli nel html la larghezza calcolata dinamicamente.

spetta che a qusto punto mi sa che mi sono persa

la larghezza del box non è data dall'immagine sopra il testo?

nel senso:
se tu metti immagine e testo in un box, fai prendere a questo la larghezza del contenuto (immagine sopra). quindi applichi lo sfondo e l'allineamento all'elemento che contiene il testo ... no?
o mi sfugge qualcosa della struttura?

**ResianTaxidrive** · 10-09-2008, 19:03

Allora provando col sistema da te suggerito ho fatto:

codice:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.pippo {
	background-color: #333333;
	float: left;
	height: 230px;
	margin-right: 2px;
}
.pippo img {
	margin-bottom: 2px;
	background-color: #FFFFFF;
	padding-bottom: 2px;
}
.cont {
	height: 220px;
}
.testo {
	color: #FFFFFF;
	float: left;
	text-align: center;
}
-->
</style>
</head>
<body> 
<div class="cont"> 
  <div class="pippo"> 
  [img]azzurre.jpg[/img]<span class="testo">Premi per ingrandire</span></div> 
<div class="pippo">[img]Ninfee.jpg[/img]<span class="testo">Premi per ingrandire</span></div> 
</div> 
</body>
</html>

ma sto cavolo di testo non mi si centra. In più con FF ho una visualizzazione urenda.

**fcaldera** · 10-09-2008, 19:21

facciamo un po' d'ordine

- il doctype non è un optional. Usa xhtml strict 1.0 per lo standard compliant mode
- ottimizza la marcatura, usa la discendenza della classe .cont, varia i tag
- un paio di ottimizzazioni qui e lì

copia e incolla

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css">
    * {
       margin       : 0;
       padding      : 0;
    }
    
    .cont p {
        background-color: #333;
        float           : left;
        display         : inline;
        height          : 230px;
        margin-right    : 2px;
    }
    .cont p img {
        margin-bottom   : 2px;
        background-color: #fff;
        padding-bottom  : 2px;
        display         : block;
        border          : 1px solid #767676;
    }
    .cont {
        height      : auto;
        _height     : 1%;
        overflow    : hidden;
        border      : 1px solid #c00;
    }
    .cont span {
        color       : #fff;
        display     : block;
        text-align  : center;
    }
    </style>
</head>

<body> 
    <div class="cont"> 
        

 
            [img]azzurre.jpg[/img]
            <span>Premi per ingrandire</span>
        </p>
        


            [img]Ninfee.jpg[/img]
            <span>Premi per ingrandire</span>
        </p> 
    </div> 

    

    <div class="cont"> 
        

 
            [img]azzurre.jpg[/img]
            <span>Premi per ingrandire</span>
        </p>
        


            [img]Ninfee.jpg[/img]
            <span>Premi per ingrandire</span>
        </p> 
    </div> 
</body>
</html>

**Myaku** · 10-09-2008, 19:23

intanto mettici anche il doctype

il float del div non ha clearing, e questo non andrebbe bene.
non hai chiuso il div #cont
e il testo non occorre fluttuarlo, ti basta dargli text-align: center;

ecco, come non detto, sono stata preceduta

**fcaldera** · 10-09-2008, 19:28

ah un'altra cosa

poiché quei blocchi saranno chiaramente cliccabili puoi modificare in

codice:

 


    <a href="...">
       [img]azzurre.jpg[/img]
       <span>Premi per ingrandire</span>
    </a>
</p>

**ResianTaxidrive** · 10-09-2008, 20:46

Si' ce l'ho l'intestazione doctype etc, non l'ho copiata perchè non mi sembrava rilevante qui sul forum

Myaku in che senso non ho chiuso il div cont? me pare chiuso me pare.

Seguendo ciò che avete detto ho fatto qualche prova e ho visto che in effetti il testo mi andava a sinistra perchè avevo messo il float:left. Solo che se non lo mettevo, il testo mi andava a destra dell'immagine. Però mettendo il display:block mi si è aperto un mondo. E' stato determinante, adesso provo a vedere cosa succede solo col clearing.

**Myaku** · 10-09-2008, 21:25

Originariamente inviato da ResianTaxidrive
Myaku in che senso non ho chiuso il div cont? me pare chiuso me pare.

me pare che sò suonata stasera

sorry

Discussione: Larghezza variabile di un div

Strumenti discussione

Ricerca discussione

Visualizza

Larghezza variabile di un div

Permessi di invio