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.
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
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
Autore Titolo Forum Risposte Data
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
trattorino css solo se richiama un class di un div HTML e CSS 1
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1
trattorino Estrarre Nome Utente jquery div php PHP 9
T [Javascript] Far partire script al raggiungimento del div/section Javascript 0
G [Javascript] scrollare div Javascript 2
A Bootstrap grid img a sinistra serie di div a destra CMS (Content Management System) 1
A Visualizzare div quando le immagini sono state uploadate con successo (Ajax) Ajax 0
WebDr [ASP] Aggiornare una pagina in un div da un altro div su pagina diversa Classic ASP 3
F [HTML] pagina non scorre e div sotto l'altezza del browser non si vedono HTML e CSS 3

Discussioni simili