Pagina 1 di 7 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 67
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82

    Impostare layout e forme particolari CSS (era: separare due div)

    ciao a tutti, cercherò di essere il più chiaro possibile.
    allora ho 3 div, div1, div2, div3 che non hanno propriamente forme rettangolari, allora mi chiedevo come posso separarli tramite piccola riga bianca, non essendo rettangolari separarli tramite posizione non riesce, ho provato a disegnare delle linee e devo dire che è la soluzione più semplice, finché non si va a ridimensionare la finestra del browser, e di conseguenza le righe si accorciano o si allungano, se riusciste anche solo a dirmi come evitare che queste si spostino, per me sarebbe un traguardo.
    grazie.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    ciao a tutti, cercherò di essere il più chiaro possibile.
    Ciao, è un buon proposito però io sono duro di comprendonio quindi ti chiedo se puoi aggiungere qualche altro dettaglio.

    Non ho capito la storia delle forme non rettangolari e nemmeno quella delle linee. Puoi postare un esempio (codice , immagine, link) di ciò che hai già realizzato?

    Come sono disposti questi div e come vuoi che si comportino quando si ridimensiona la finestra?

    Nel titolo hai indicato "due div" ma nella descrizione son diventati 3. La quantità sarà poi definita in modo stabile o potrà essere variabile? Questo magari influisce sull'eventuale soluzione da adottare.

    Puoi chiarire il contesto? A volte capire il contesto può aiutare a trovare soluzioni a cui non si arriverebbe se ci si focalizza solo sul fulcro della questione. A che servono questi div? Riguardano solo il design del layout o sono anche strutturali? Cosa devono contenere? L'ingombro del contenuto potrà variare? ecc...
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, è un buon proposito però io sono duro di comprendonio quindi ti chiedo se puoi aggiungere qualche altro dettaglio.

    Non ho capito la storia delle forme non rettangolari e nemmeno quella delle linee. Puoi postare un esempio (codice , immagine, link) di ciò che hai già realizzato?

    Come sono disposti questi div e come vuoi che si comportino quando si ridimensiona la finestra?

    Nel titolo hai indicato "due div" ma nella descrizione son diventati 3. La quantità sarà poi definita in modo stabile o potrà essere variabile? Questo magari influisce sull'eventuale soluzione da adottare.

    Puoi chiarire il contesto? A volte capire il contesto può aiutare a trovare soluzioni a cui non si arriverebbe se ci si focalizza solo sul fulcro della questione. A che servono questi div? Riguardano solo il design del layout o sono anche strutturali? Cosa devono contenere? L'ingombro del contenuto potrà variare? ecc...
    come al solito hai ragione, allora, il titolo era sommario, non era specifico, quindi in realtà sono 3 e rimangono 3, allego una foto
    Schermata 2021-10-19 alle 23.38.55.png

    mi pare piccola ma spero tu possa capire, se noti bene ci sono 3 div di colori diversi, vorrei separare i colori utilizzando una riga bianca spessa 2px, se lascio un spazio di 2px, capisci bene, mi ritrovo una linea che non segue il colore ma taglia in orizzontale da una parte all'altra della pagina, ho trovato però una soluzione, ho disegnato una riga bianche che segue il colore ma purtroppo quando si ridimensiona il browser si restringe scoprendo la magia. in sostanza se si sposta la riga si vede che i colori sono uniti, l'ultima volta mi hai aiutato a fare in modo che queste righe potessero riempire tutta la lunghezza della pagina a qualsiasi misura del browser o della risoluzione, ora mi servirebbe che, oltre a mantenere la funzione di potersi allargare e stringere com'è ora, la riga "disegnata" in bianco mantenga sempre la sua posizione, è possibile? oppure c'è un modo più scientifico per ottenere questo effetto?
    altra domanda: come posso specificare un range massimo di allungamento o restringimento consentito della pagina? mi serve per evitare che il sito diventi sformato, preoccupandomi poi di gestirlo con altre modalità grafiche.

    non sei tu che sei duro di comprendonio, ma io che sono duro a farmi capire....ahahahah
    grazie

  4. #4
    Usa border nel o nei div interessati.

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    Quote Originariamente inviata da SoloWiFi Visualizza il messaggio
    Usa border nel o nei div interessati.
    non si può perché il div non è rettangolare ma ha degli scalini irregolari

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    Ho indagato un po' e fatto qualche prova, direi che si può intervenire con vari approcci.

    Qui una panoramica di alcuni metodi:

    - Puoi usare un elemento o degli elementi <svg> nel formato XML per creare le forme che vai ad inserire opportunamente nel markup HTML. Chiaramente è necessaria la conoscenza dello standard SVG per poter ricreare tali forme.

    - Puoi usare delle immagini SVG applicate magari come background degli elementi in questione, esterne o convertite come Data URI per applicarle direttamente nel CSS. In questo caso ti serve un programma o qualche strumento per grafica vettoriale con cui poter realizzare tali immagini.

    - Puoi adoperare vari metodi per la realizzazione di "CSS Shapes" (vedi anche qui) con cui vai a ricreare le forme che ti servono usando solo del "semplice" CSS. Più o meno come hai già fatto nell'altra discussione impostando opportunamente i bordi con differenti dimensioni per ricreare le parti inclinate.

    Personalmente ho provato a realizzare qualcosa proprio con quest'ultimo approccio ma usando il filtro skew per la parte inclinata e poi applicando il drop-shadow per creare un bordo attorno sopra il limite irregolare delle forme.

    Qui l'elaborato di esempio:
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
       <head>
          <title>Esempio</title>
          <style>
             
             /* --- GENERALE ---*/
             
             * {
                box-sizing: border-box;
             }
             html, body {
                margin: 0;
                padding: 0;
                width: 100%;
                font: 15px Verdana, sans-serif;
             }
             h1 {
                margin: 0;
                padding: 10px 30px;
             }
             #header {
                width: 100%;
                overflow-x: hidden;
             }
             
             /* --- FORME ---*/
             
             #header > .strip {
                position: relative;
                min-height: 40px;
                padding-bottom: 20px;
                filter:
                   drop-shadow(-2px -2px 0 #fff)
                   drop-shadow(2px 0px 0 #fff)
                   
                   /* Decommenta questo per un effetto material design*/
                   /*drop-shadow(0px 10px 20px #000)*/
                ;
             }
             #header > .strip::before {
                content: "";
                display: block;
                position: absolute;
                right: -20px;
                bottom: calc(100% - 1px);
                height: 25px;
                background: inherit;
                transform: skew(-22deg);
             }
             
             #strip2 { padding-left: 50vw; }
             #strip2::before { left: 50vw; }
             
             #strip3 { padding-left: 10vw; }
             #strip3::before { left: 10vw; }
             
             #main {
                margin: 20px;
                padding: 30px 20px 50px;
                border: 3px solid;
                border-radius: 20px;
             }
             
             /* --- MENU BAR --- */
             
             ul.topmenu {
                position: relative;
                top: -20px;
                margin: 0 20px;
                padding: 0 0 0 1px;
                color: inherit;
                overflow: hidden;
                list-style-type: none;
                font-size: 14px;
             }
             ul.topmenu  > li {
                float: left;
                border: solid #fff;
                border-width: 0 1px;
                margin-left: -1px;
             }
             ul.topmenu  > li a {
                display: block;
                padding: 3px 5px;
                text-decoration: none;
                color: inherit;
             }
             /* --- COLORI --- */
             
             body              { background: #123444; }
             #header           { background: #aaa07f; color: #fff}
             h1                { color: #fff; }
             
             #strip1           { background: #7e9faa; }
             #strip2           { background: #2e9bac; }
             #strip3           { background: #1f6283; }
             
             .topmenu a:hover  { background: #0003; }
             .topmenu a:active { background: #fff3; }
             
             #main             { background: #f7f7f7; color: #55384b; border-color: #fff}
    
          </style>
       </head>
       <body>
          <div id="header">
             <div id="top">
                <h1>Esempio</h1>
             </div>
             <div id="strip1" class="strip"></div>
             <div id="strip2" class="strip">
                <ul class="topmenu">
                   <li><a href="#home">Contatti</a></li>
                   <li><a href="#news">News</a></li>
                   <li><a href="#contact">Noi</a></li>
                   <li><a href="#about">Home</a></li>
                </ul>
             </div>
             <div id="strip3" class="strip"></div>
          </div>
          <div id="main">
             <h2>Lorem ipsum</h2>
             <p>
                Dolor sit amet, consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper. 
                Quisque suscipit sem non est eleifend consectetur.
             </p>
             <p>
                Suspendisse malesuada massa lorem, id pharetra arcu iaculis a. 
                Aliquam in dolor vitae purus interdum vulputate vel ac augue. Nulla congue vehicula purus eget scelerisque. 
                Nullam suscipit metus id sem eleifend, ut molestie eros dictum.
             </p>
             <p>
                Curabitur faucibus urna nec ullamcorper pharetra. 
                Nunc eget lacus at arcu scelerisque gravida ut non lectus. Donec sit amet felis in justo hendrerit ornare eu sed risus. 
                Fusce suscipit, eros id cursus suscipit, urna orci ullamcorper velit, sed ultricies mauris enim sed quam. 
                Sed nibh ante, tempor ac eleifend non, sodales a massa.
             </p>
             <p>
                Phasellus ornare elementum semper. 
                Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a.
             </p>
          </div>
       </body>
    </html>
    .
    Chiaramente ho impostato il layout secondo una mia personale interpretazione, prendilo giusto come esempio che potrai adeguare come meglio credi per il tuo elaborato.

    Non mi dilungo descrivendo riga per riga il codice che ho utilizzato ma se hai domande chiedi pure.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  7. #7
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    molto valido, devo dire che è proprio quello che avevo in mente, però sto provando ad apportare delle modifiche semplici e si scombina tutto, ad esempio sto cercando di spostare le tre strip in fondo alla pagina che è dove mi servono, inserendo un semplice top:600px; ma diventa scrollabile tutto il div header...quindi ho un div a parte nella pagina e scrollandoci dentro appaiono in fondo le strip

  8. #8
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    in parte ho risolto, ma non riesco ancora a impostare i margini left e right 1px delle 3 strips
    il top l'ho risolto inserendolo direttamente nell'header, che io ho chiamato footer, ma per right e left non funziona.
    ti posto il codice che dopo questa modifica è un pò disordinato ma farò pulizia appena risolto il dilemma grafico

    codice:
    <!doctype html>
    <html lang="it">
       <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>##############</title>
    	  <link rel="icon" href="favicon.ico" />
          <style> a {
         color: #7e9faa;
    }
     a:link {
         text-decoration: none;
    }
     a:visited {
         text-decoration: none;
    }
     a:hover {
         text-decoration: none;
         color: #7e9faa;
    }
     a:active {
         text-decoration: none;
    }
     .logo{
         position: Absolute;
         top: 11px;
         left: 3px;
    	 width:10%;
    	 height:100px;
    }
     div.contattaci {
         position: absolute;
         font-family: Verdana, sans-serif;
         font-size: 14px;
         color: #1f6383;
         text-align: left;
         border: 0px solid #1f6383;
         padding: 10px;
         top: 3px;
         left: 630px;
         width: 440px;
         height: 15px;
    }
     .menubar{
         position: absolute;
    	 background-color: #2e9bac;
         top: 72px;
         left: 411px;
    	 right: 1px;
    	 height:25px;
    }
     div.menubar:before{
         content: '';
         top: 0px;
         left: 0px;
         position: absolute;
    	 border: 1px solid #fff;
         border-top: 25px solid #fff;
         border-right: 14px solid transparent;
    }
     .topbar{
         height:25px;
         right: 1px;
         position: Absolute;
         top: 45px;
         left: 559px;
         background-color: #1f6383;
    }
     div.topbar:before{
         content: '';
         top: 0px;
         left: 0px;
    	 width: 0;
         position: Absolute;
    	 border: 1px solid #fff;
         border-top: 25px solid #fff;
         border-right: 14px solid transparent;
    }
     .toplastbar{
         height:25px;
         position: Absolute;
         top: 99px;
         left: 120px;
         right: 1px;
         background-color: #7e9faa;
    }
     div.toplastbar:before{
         content: '';
         top: 0px;
         left: 0px;
    	 width: 0;
         position: absolute;
    	 border: 1px solid #fff;
         border-top: 25px solid #fff;
         border-right: 14px solid transparent;
    }
     .img {
         position: absolute;
         top: 122px;
         left: 1px;
         background-color:#fff;
         right: 1px;
         height: 250px;
         border: 1px solid #7e9faa;
    }
     .contmenulat {
         position: absolute;
         top: 375px;
         left: 1px;
         height: 400px;
         background-color:#fff;
         width: 207px;
         bottom: 13px;
         border: 1px solid #7e9faa;
    }
     .desktop {
         position: absolute;
         top: 375px;
         left: 213px;
         height: 400px;
         right: 1px;
         bottom: 13px;
         background-color:#fff;
         border: 1px solid #7e9faa;
    }
    		    
    div.credit {
         position: absolute;
         font-family: Verdana, sans-serif;
         font-size: 9px;
         color: #fff;
         text-align: left;
         border: 0px;
         padding: 10px;
         top: 7px;
         right: 0px;
         height: 1px;
    	 bottom: 0px;
    }
     #menutop .menutop{
         height:25px;
         position: absolute;
    }
     #menutop ul {
         font-family: Verdana, sans-serif;
         font-size: 14px;
         list-style-type: none;
         margin-top: 64px;
         margin-left: 551px;
         width: 413px;
         height: 25px;
         padding: 0;
         overflow: hidden;
         background-color: #2e9bac;
         position: absolute;
    }
     #menutop li {
         float: left;
    }
     #menutop li a {
         display: block;
         color: white;
         text-align: center;
         padding: 4px 16px;
         text-decoration: none;
    }
     #menutop li a:hover:not(.active) {
         background-color: #7e9faa;
         text-decoration: none;
         color: white;
    }
     #menutop li {
         border-right: 1px solid #fff;
         border-left: 1px solid #fff;
    }
     #menutop li:last-child {
         border-right: 1px solid #fff;
    }
     #menutop .active {
         background-color: #1f6383;
         text-decoration: none;
         color: white;
    }
     #menulat ul {
         font-family: Verdana, sans-serif;
         font-size: 14px;
         list-style-type: none;
         margin-top: 367px;
         margin-left: -6px;
         padding: 0;
         width: 207px;
         background-color: #2e9bac;
         border: 0px;
         position: relative;
    }
     #menulat li a {
         display: block;
         color: #fff;
         padding: 8px 16px;
         text-decoration: none;
    }
     #menulat li {
         text-align: center;
         border-bottom: 1px solid #fff;
    }
     #menulat li:last-child {
         border-bottom: none;
    }
     #menulat li a.active {
         background-color: #1f6383;
         color: white;
    }
     #menulat li a:hover:not(.active) {
         background-color: #7e9faa;
         color: white;
    }
    		   /* --- GENERALE ---*/
             
             #footer {
                width: 100%;
                overflow-x: hidden;
    			margin-top:278px;
    			bottom:1px;
             }
             
             /* --- FORME ---*/
             
             #footer > .strip {
                position: relative;
                min-height: 70px;
                padding-bottom: 20px;
                filter:
                   drop-shadow(-1px -2px 0 #fff)
                   drop-shadow(1px 0px 0 #fff)
                   
                   /* Decommenta questo per un effetto material design*/
                   /*drop-shadow(0px 10px 20px #000)*/
                ;
             }
             #footer > .strip::before {
                content: "";
                display: block;
                position: absolute;
                right: -20px;
                bottom: calc(100% - 1px);
                height: 25px;
                background: inherit;
                transform: skew(-22deg);
             }
              
             #strip2 { padding-left: 50vw; }
             #strip2::before { left: 70vw; }
             
             #strip3 { padding-left: 10vw; }
             #strip3::before { left: 30vw; }
         
             }
             
            
             /* --- COLORI --- */
             
             #footer           { background: #fff; color: #fff}
             
    		 #strip1           { background: #aaa; }
             #strip2           { background: #aee; }
             #strip3           { background: #aae; }
             
             
    
    
     </style>
       </head>
       <body>
    	    <div class="logo">
             <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="403" height="100" alt=""/>
          </div>
    	<div class="contattaci">
    Telefonaci:  <a href="tel:##############">##############</a>
    Scrivici:    <a href="mailto:##############">##############</a>
    	</div>
    	  <div class="menubar"></div>
          <div class="topbar"></div>
          <div class="toplastbar"></div>
    	  <div id="menutop"> 
      <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#tl">Trasporti e Logistica</a></li>
      <li><a href="#contatti">Contatti</a></li>
      <li><a href="#news">News</a></li>
      </ul>
    	   </div>
          <div class="desktop"><a href="#home">desktop</a></div>
          <div class="contmenulat"></div>	 
    	  <div class="img"><a href="#home">img</a></div>
      <div id="menulat">   
      <ul>
       <li><a class="active" href="#home">Home</a></li>
      <li><a href="#tl">Trasporti e Logistica</a></li>
      <li><a href="#contatti">Contatti</a></li>
      <li><a href="#news">News</a></li>
    </ul>
      </div>
    <div id="footer">
             <div id="strip1" class="strip"></div>
    		 <div id="strip2" class="strip"></div>
    		 <div id="strip3" class="strip"></div>
    	</div>
    </body>
    </html>

  9. #9
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    altra domanda; ma non sarebbe possibile variare l'altezza di ogni singola strip? e in più quando inserisco il nuovo codice nella pagina esistente sparisce il menutop, o meglio essendo il testo di colore bianco non si vede, ma si sposta di parecchio più in basso....come mai?
    Ultima modifica di merovese; 23-10-2021 a 02:33

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    il top l'ho risolto inserendolo direttamente nell'header, che io ho chiamato footer,
    Bene

    altra domanda; ma non sarebbe possibile variare l'altezza di ogni singola strip? e in più quando inserisco il nuovo codice nella pagina esistente sparisce il menutop, o meglio essendo il testo di colore bianco non si vede, ma si sposta di parecchio più in basso....come mai?
    A mio parere andrebbe studiata meglio la struttura dei vari elementi e in particolare il modo con cui vuoi posizionarli per formare il layout; ci sono delle cose che non mi tornano a livello logico e rendono difficile gestire al meglio le varie posizioni.

    Non vuole essere una critica ma a me pare di capire che i vari contenitori debbano essere semplicemente incolonnati seguendo il normale flusso dei contenuti, invece tu stai applicando posizionamenti assoluti che slegano tali elementi dal normale flusso dei contenuti, per cui devi di conseguenza applicare altri posizionamenti e/o margini per far tornare nel giusto posto quegli elementi che vengono dopo.

    Secondo me puoi gestire la cosa in modo più semplice se, con i giusti accorgimenti, lasci gli elementi all'interno del normale flusso dei contenuti. Questo ti evita di applicare posizionamenti assoluti a pioggia.

    Un esempio tra tanti: il div.contmenulat è vuoto, ma non dovrebbe essere un contenitore proprio di #menulat?
    Invece #menulat lo hai tenuto fuori e hai dovuto poi applicare all'ul, in esso contenuto, un margin-top per farlo "sedere sopra" .contmenulat.

    Il resto degli elementi li hai gestiti allo stesso modo.

    Al momento non riesco a dedicarmi a questo ma più tardi, se posso, provo a reimpostare il tutto partendo dall'ultimo tuo codice così da semplificare il layout e la gestione dei posizionamenti.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

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 © 2021 vBulletin Solutions, Inc. All rights reserved.