Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 13
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    10

    Cambiare l'ordine di sovrapposizione dei bordi negli angoli

    Ciao a tutti, sono nuovo del forum e di HTML/CSS in generale.
    Volevo chiedere questa cosa che non riesco a trovare da nessuna parte, probabilmente perché sono un newbie.

    Quello che volevo fare è semplicemente cambiare l'ordine con cui normalmente si sovrappongono i bordi di un box negli angoli (cosa che si nota solo quando i colori sono diversi).
    Per esempio con un codice del tipo

    border-left: 1px solid red;
    border-top: 1px solid black;

    i bordi vengono disegnati così:

    codice:
      __________________
      __________________ black 
      |  |        
      |  |     
      |  |     
      |  |  <-- red
      |  |
      |  |
    Quello che vorrei è semplicemente che fossero disegnati così:
    codice:
          __________________        
      |  |__________________ black      
      |  |     
      |  |  <-- red
      |  |
      |  |
    Sicuramente è una cosa stupida, ma, abbiate pazienza, non riesco a trovare una risposta.
    Dove posso cercare?
    Grazie.

  2. #2
    Utente bannato
    Registrato dal
    Sep 2009
    Messaggi
    1,737
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <style type="text/css">
    <!--
    #bordo {
    	border-top-width: 10px;
    	border-right-width: 10px;
    	border-bottom-width: 10px;
    	border-left-width: 10px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #000;
    	border-right-color: #F00;
    	border-bottom-color: #F00;
    	border-left-color: #000;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="bordo">Inserire qui il contenuto</div>
    </body>
    </html>

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    10
    Ciao miki003 e grazie per la risposta.
    Con il tuo codice, ponendo a 1px lo spessore dei bordi, il problema si nota nell'angolo inferiore sinistro (o nel superiore destro).
    Nell'immagine qui sotto c'è il risultato del tuo codice e quello che vorrei ottenere (operando direttamente sui bordi del box e senza aggiungere box che contengono il box in questione):



    In particolare posso ottenere la sovrapposizione che cerco se cambio il colore del bordo superiore da nero a rosso, ma è una cosa di cui non ho il controllo. Se volessi lasciarlo con i colori che hai impostato tu, come posso cambiare la sovrapposizione nell'angolo in basso a sinistra?

  4. #4
    Devi usare due o più div.
    Ad sempio in quello esterno setti il bordo nero per top e left; in quello interno setti il bordo rosso per right e bottom...
    Tecnolgie per l'arte.
    Arti per la tecnologia.
    softhare

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    10
    Originariamente inviato da softhare
    Devi usare due o più div.
    Ad sempio in quello esterno setti il bordo nero per top e left; in quello interno setti il bordo rosso per right e bottom...
    Allora non trovavo come si fa perché non si può fare (senza l'aggiunta di un box esterno) :-).
    Pensavo che dipendesse in qualche modo dall'ordine con cui sono scritti i bordi nel codice, ma con l'aggiunta di qualche proprietà che non conoscevo (altrimenti semplicemente invertendo l'ordine non cambiava nulla).

    Grazie mille per l'informazione.

  6. #6
    Utente bannato
    Registrato dal
    Sep 2009
    Messaggi
    1,737
    Il risultato del mio codice non è quello della tua immahine ma è questo
    Immagini allegate Immagini allegate

  7. #7
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    10
    Originariamente inviato da miki003
    Il risultato del mio codice non è quello della tua immahine ma è questo
    Infatti, ma come ho scritto nel mio post seguente al tuo, impostando nel tuo codice lo spessore dei bordi a 1px invece di 10px, si ottiene l'immagine che ho postato (ingrandita per vedere meglio il problema).

    lo spessore del bordo che mi serve è 1px ed è solo in quel caso che nasce il problema altrimenti, come si vede dalla tua immagine, i raccordi tra i bordi vengono smussati e il problema non si pone.

    Quindi credo anche di avere capito che se non si vogliono i raccordi smussati (quando i bordi hanno spessore maggiore di 1px), occorre usare due o più "div" uno dentro l'altro e impostare i bordi di uno o dell'altro a seconda di quello che si vuole ottenere.

    Grazie ancora.

  8. #8
    Utente bannato
    Registrato dal
    Sep 2009
    Messaggi
    1,737
    Questo è settato a 1px
    Immagini allegate Immagini allegate

  9. #9
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    10
    Originariamente inviato da miki003
    Questo è settato a 1px
    Allora c'è qualche cosa che non capisco o che non mi torna.
    Dall'immagine del tuo ultimo post io ricavo questo:


    e lo spessore del bordo non mi sembra 1px specie confrontando con altri elementi dei caratteri e con il fatto che la scalettatura del raccordo del bordo deve per forza essere fatta di pixel e, ad occhio e croce, mi sembra che ce ne siano almeno 4.

    Per evitare fraintendimenti, il bordo che serve a me deve essere di un solo pixel (per intendersi il codice che hai scritto tu, tale e quale, ma sostituendo 10px con 1px) e non doppio bordo o qualche cosa di diverso.

  10. #10
    Utente bannato
    Registrato dal
    Sep 2009
    Messaggi
    1,737
    Se ti ho detto che è un pixel vuol dire che è 1px, non avrei nessun motivo per dire cavolate ti sembra?

    Se a te non risulta avrai qualche cosa di sbagliato o una risoluzione inferiore che ne so?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.