View Full Version : [CSS]Replica sfondo assieme a testo
Sto facendo un nuovo layout, ma mi sono reso conto di non essere in grado di fare una cosa a mio parere banale: all'aumentare del testo, questo ad un certo punto sarà più lungo dell'altezza del div che lo contiene, bene, fosse un div seguito da null'altro sono capace di farlo replicare ma come fare se c'è qualcosa sotto questo div?
Esempio: ho un div con bordi arrotondati, un'immagine in alto per i 2 angoli arrotondati destro e sinistro ( alti ), un'immagine centrale per il "corpo" e un'immagine in basso per i 2 angoli destro e sinistro ( bassi ).
Se io inserisco del testo nel "corpo" questo aumenta di altezza ( non avendola specificata ) andando a finire sopra il div basso per i bordi arrotondati... come faccio a far spostare tutto ciò che c'è sotto un div?
Ecco un'immagine esplicativa:
http://a.imagehost.org/t/0744/esempio.jpg (http://a.imagehost.org/view/0744/esempio)
DanieleC88
03-08-2009, 09:04
Dovrebbe essere automatico se non ho capito male come hai impostato il layout, a meno che i div in alto e in basso non siano fissi.
Dovrebbe essere automatico se non ho capito male come hai impostato il layout, a meno che i div in alto e in basso non siano fissi.
Ti spiego, il div alto non da problemi, perchè sopra di quello nulla si allunga oltre la misura da me impostata.
Il guaio viene con il bordo arrotondato sotto ( e il footer che ho aggiunto, che tu non hai visto, è identico al menu ) al quale ho dovuto impostare un margine ( alto e destro per la colonna di destra; alto e sinistro per la colonna di sinistra ).
Perchè ho impostato i margini? Perchè in HTML non riesco a fare in modo di avere i bordi arrotondati e il corpo di un elemento l'uno sopra l'altro se ho già altri elementi allo stesso livello.
La cosa non è sicuramente chiara, è più facile a vedersi che a dirsi :D, comunque, come tu hai già avuto modo di vedere, io ho 2 zone dove vado a mettere il testo, una spostata a sinistra, l'altra a destra. Se c'è ne fosse solo una, questa, grazie alle regole da me impostate, si autocentrerebbe senza problemi, se metto più elementi nello stesso punto ( come ho fatto ), devo usare la proprietà float ( destra e sinistra ), tuttavia così facendo gli elementi che compongo le 2 zone di scritture vengono centrare come elmenti singoli a se stanti, di conseguenza il corpo viene allineato in una posizione diversa rispetto al bordo arrotondato superiore... Per questo devo usare i margini per riallinearli, sia verticalmente che orizzontalmente.
Tuttavia, impostando un margine alto al bordo arrotondato inferiore, capisci bene che se il corpo diventa più lungo mi va a sovrapporsi al bordo inferiore, che, avendogli impostato il margine superiore, non si muove da dov è...
Appena posso posto un'immagine esplicativa fatta con PS perchè Paint non riesco ad usarlo.... :rolleyes:
Kwb
EDIT: Ecco l'immagine esplicativa
http://a.imagehost.org/t/0342/esempio.jpg (http://a.imagehost.org/view/0342/esempio)
La prima parte è come si vede ora, con margini e float specificati
La seconda è come si vede senza specificare i margini ma col float, nella seconda ho messo solo l'elemento di sinistra, anche perchè quello di destra ha lo stesso comportamento, si allinea però a destra ( avendo il float a destra ).
DanieleC88
03-08-2009, 16:54
Con un overflow: hidden; sul div centrale cambia qualcosa?
DanieleC88
03-08-2009, 18:56
Comunque, secondo me dovresti usare i div top e bottom internamente al div centrale, in questo modo non avresti problemi di espansione. O, ad ogni modo, inserirli in un wrapper.
Ho fatto un abbozzo, il risultato è questo:
http://i31.tinypic.com/29lcokz.png
E il codice è il seguente:
<html>
<head>
<title>Prova</title>
<style type="text/css">
div.wrapper
{
margin: auto;
width: auto;
}
div.left
{
border: 1px solid black;
width: 297px;
float: left;
}
div.right
{
border: 1px solid black;
width: 603px;
float: right;
}
div.top, div.bottom
{
width: 297px;
height: 82px;
padding: 0px;
margin: 0px;
}
div.center
{
padding: 10px;
text-align: justify;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<div class="top">
<img src="top.bmp">
</div>
<div class="center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
<div class="bottom">
<img src="bottom.bmp">
</div>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Le immagini sono 297x82, e il wrapper più esterno credo fortemente che sia del tutto inutile, l'avevo inserito giusto per fare una prova.
Ah bene, provo, quindi metto la parte centrale ( top sx e dx, centrale sx e dx, bottom sx e dx ) dentro un unico div, ho capito bene?
DanieleC88
03-08-2009, 20:21
No, direi di mettere ogni "colonna" dentro un suo div, e i due div top e bottom dentro la stessa "colonna" (che poi sarà una float).
No, direi di mettere ogni "colonna" dentro un suo div, e i due div top e bottom dentro la stessa "colonna" (che poi sarà una float).
Si scusa, avevo capito giusto ma ho espresso male... Alla fine si arrivano ad avere 2 div ( che contengono rispettivamente la parte destra e la sinistra )?
DanieleC88
03-08-2009, 22:42
Diciamo di sì. I due div esterni sono quelli principali, quelli "fluttuanti", per intenderci. All'interno di ognuno poi puoi metterci il contenuto con top, corpo e bottom. :)
Probabilmente ci sono anche metodi migliori, ma così su due piedi mi pare la soluzione più pratica.
ciao ;)
Diciamo di sì. I due div esterni sono quelli principali, quelli "fluttuanti", per intenderci. All'interno di ognuno poi puoi metterci il contenuto con top, corpo e bottom. :)
Probabilmente ci sono anche metodi migliori, ma così su due piedi mi pare la soluzione più pratica.
ciao ;)
Ahhhhhhhhhhhhhhhhhhhhhhh ho capito, quello che fai tu è mettere i margini e il float solo ai 2 div grandi perchè così facendo, non specificando nulla, i div interni si posizionano automaticamente l'uno sotto l'altro ( visto che non ho specificato margini ) e stanno nella posizione che devono stare!!
Grazie, grandissimo!!
DanieleC88
04-08-2009, 10:38
Figurati. :)
ciao ;)
Niente da fare... Non si riesce...
Ho messo le parti destre e sinistre dentro 2 div ( dx e sx ), a loro volta dentro un div centrale, ma non c'è verso.
Il footer si posiziona sempre sopra perchè dentro il div centrale vado a specificare la proprietà float... Togliendola tutto funziona, ma non ottengo l'effetto desiderato.....
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.