• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Problema risolto [HTML/CSS]Linea unica con due box

Mavin

Utente Normale
Autore del topic
21 Gennaio 2011
92
0
Miglior risposta
0
Buonsalve,
Sto lavorando ad un mio progetto e ho riscontrato un problema:

Dovrei dividere il corpo in due pezzi e dividerli con una linea, facendo in modo che se uno dei due dovesse essere più lungo la linea si veda lo stesso e che soprattutto sia unica.

La pagina d'esempio molto simile alla mia è la seguente:
Perfavore, Entra oppure Registrati per vedere i Link!


Il suo output: Screenshot:
Perfavore, Entra oppure Registrati per vedere i Link!


Come potrete notare il box di sinistra ha larghezza minore rispetto a quello di destra, così la linea del box di sinistra si interrompe.

Quel che ho già provato:

-Rimuovere la linea in uno dei due box, inutile perché si generano dinamicamente e in ogni pagina cambiano, quindi spesso capita che il box senza linea sia più lungo rispetto all'altro.
-regola css "position:absolute;" e posizionamento manuale in uno dei due box, seppur funzioni, il footer oltrepassa il box con la regola.

Qualcuno ha delle idee? Il tutto senza l'utilizzo di javascript.
 
Riferimento: [HTML/CSS]Linea unica con due box

Quando mi capitano questi problemi, solitamente metto margin-left: -1px al box a destra (o margin-right: -1px al sinistro), cosicché le linee si sovrappongano.

Comunque sia sposto in Assistenza Tecnica :emoji_slight_smile:
 
Riferimento: [HTML/CSS]Linea unica con due box

Ci avevo già pensato, il problema è che il body è di soli 1024px e praticamente vanno ad incastro, un pixel più a sinistra o a destra e uno dei due scende sotto.
 
Riferimento: [HTML/CSS]Linea unica con due box

Ci avevo già pensato, il problema è che il body è di soli 1024px e praticamente vanno ad incastro, un pixel più a sinistra o a destra e uno dei due scende sotto.

Beh potresti ridurre di 1px il padding dei due box, comunque essendo un valore negativo, si crea un pixel in meno non in più..
 
Riferimento: [HTML/CSS]Linea unica con due box

Beh potresti ridurre di 1px il padding dei due box, comunque essendo un valore negativo, si crea un pixel in meno non in più..

Riducendo il padding di uno dei due box non ci concludo comunque niente, perché si vedrebbero due linee.
Sul 2° punto hai ragione, però non succede niente :emoji_slight_frown:
 
Riferimento: [HTML/CSS]Linea unica con due box

Ho comunque risolto in questo momento facendo dei test, utilizzando il "position:inherit;" sul primo box, ho levato un pixel "margin-right: -1px;" e ho aumentato di un pixel la larghezza del box sinistro.

Grazie comunque dell'aiuto!
 
Riferimento: [HTML/CSS]Linea unica con due box

Non mi sembra ottimale come soluzione position: inherit, solitamente a seconda del browser cambiano le cose (prova a vederlo con Firefox, Chrome e IE). Comunque segno come risolto ^^ @Mavin

2i9ow2v.jpg
 
Riferimento: [HTML/CSS]Linea unica con due box

è la prima cosa che provo dopo ogni modifica, funziona tutto alla perfezione ;)
@Kaito