2 Div uniti, cancellare bordo.

frenkytribe

Utente Attivo
17 Gen 2013
87
0
0
Ciao a tutti,
intanto chiedo scusa per il titolo troppo generico, non riesco a venire a capo di un problema:
si tratta di 2 div affiancati per ottenere una grafica simpatica non utilizzando immagini, è inutile che vi spiego a parole perché farei soltanto confusione, quindi posto 2 screenshot con quello che ho e quello che vorrei avere, più il mio codice (semplicissimo).

Index.html

Codice:
<div align="center" style="border: 1px solid #000; float: left; width: 400px; height: 500px; border-radius: 10px 0px 10px 10px;">text</div>
<div align="center" style="border: 1px solid #000; float: left; width: 120px; height: 120px; border-radius: 0px 10px 10px 0px;">text</div>

Quello che vedo
90301803.jpg


Quello che vorrei vedere :-)
32646136.jpg


Spero non sia qualcosa di difficile, comunque sia grazie a tutti in anticipo,
Francesco.
 
Ciao,

HTML:
<div align="center" style="border: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; float: left; width: 400px; height: 500px; border-radius: 10px 0px 10px 10px;">text</div>
<div align="center" style="border-top: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000;float: left; width: 120px; height: 120px; border-radius: 00px 10px 10px 0px; margin-left:-1px; background-color:#FFFFFF;">text</div>

l'ho scritto usando tre semplici trucchetti (chiamiamoli così):
1. Ho dato bordi sopra, destra e sotto al div di destra
1. ho dato margin left al div di destra -1 in modo che vada al di sopra di quello di sinistra di un pixel.
2. Ho dato sfondo bianco al div di destra perchè altrimenti ci sarebbe stata la trasparenza e si sarebbe visto il bordo del div sinistro.

Riflessioni: non so cosa ci vuoi fare ma voglio dirti che secondo me è una soluzione improvvisata e non adatta a grandi progetti, insomma non mi sembra professionale
In alternativa puoi unire i due div togliendo i bordi e dando ad entrambi uno sfondo identico, in questo modo sembrano uniti ed è anche più professionale e funzionale.

PS. se vuoi vederlo subito, l'ho caricato a questo link:
provepagine.altervista.org/
 
Ultima modifica:

Discussioni simili