[CSS]Replica sfondo assieme a testo

kwb · 02-08-2009, 23:07

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:

DanieleC88 · 03-08-2009, 10: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.

kwb · 03-08-2009, 10:54

Quote:

Originariamente inviato da DanieleC88

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

, 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....

Kwb

EDIT: Ecco l'immagine esplicativa

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, 17:54

Con un overflow: hidden; sul div centrale cambia qualcosa?

DanieleC88 · 03-08-2009, 19: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:

E il codice è il seguente:

Codice PHP:


			
<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.

kwb · 03-08-2009, 21:10

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, 21: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).

kwb · 03-08-2009, 23:36

Quote:

Originariamente inviato da DanieleC88

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, 23: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

kwb · 04-08-2009, 10:05

Quote:

Originariamente inviato da DanieleC88

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, 11:38

Figurati.

ciao

kwb · 04-08-2009, 23:11

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.....

02-08-2009, 23:07	#1
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	[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: __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

03-08-2009, 10:04	#2
DanieleC88 Senior Member Iscritto dal: Jun 2002 Città: Dublin Messaggi: 5989	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. __________________ C'ho certi cazzi Mafa' che manco tu che sei pratica li hai visti mai!

03-08-2009, 17:54	#4
DanieleC88 Senior Member Iscritto dal: Jun 2002 Città: Dublin Messaggi: 5989	Con un overflow: hidden; sul div centrale cambia qualcosa? __________________ C'ho certi cazzi Mafa' che manco tu che sei pratica li hai visti mai!

03-08-2009, 19:56	#5
DanieleC88 Senior Member Iscritto dal: Jun 2002 Città: Dublin Messaggi: 5989	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: E il codice è il seguente: Codice PHP: <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. __________________ C'ho certi cazzi Mafa' che manco tu che sei pratica li hai visti mai!

03-08-2009, 21:10	#6
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	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? __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

03-08-2009, 21:21	#7
DanieleC88 Senior Member Iscritto dal: Jun 2002 Città: Dublin Messaggi: 5989	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). __________________ C'ho certi cazzi Mafa' che manco tu che sei pratica li hai visti mai!

03-08-2009, 23:42	#9
DanieleC88 Senior Member Iscritto dal: Jun 2002 Città: Dublin Messaggi: 5989	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 __________________ C'ho certi cazzi Mafa' che manco tu che sei pratica li hai visti mai!

04-08-2009, 11:38	#11
DanieleC88 Senior Member Iscritto dal: Jun 2002 Città: Dublin Messaggi: 5989	Figurati. ciao __________________ C'ho certi cazzi Mafa' che manco tu che sei pratica li hai visti mai!

04-08-2009, 23:11	#12
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	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..... __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

Strumenti
Mostra una versione stampabile Invia questa pagina per email