Pagina 3 di 3 primaprima 1 2 3
Visualizzazione dei risultati da 21 a 30 su 30

Discussione: quante ul e li

  1. #21
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,954
    Quote Originariamente inviata da merovese Visualizza il messaggio
    quindi se creo una cosa semplice

    codice:
    <!doctype html><html>
    <head>
    <meta charset="UTF-8">
    <title>Documento senza titolo</title>
    </head>
    <body>
        <style>
        .pagina{
        height:100%;
        width:100%;
        position: absolute;
        border: 16px solid #1f6383;
         }    
        </style>
        <div class="pagina">
          </div>
    </body>
    </html>

    dovrei vedere i bordi del contenitore ad ogni modo.....invece no....ufff
    In questo caso il box model è impostato di default per conteggiare solo le dimensioni del contenuto nel calcole di altezza e larghezza degli elementi; per cui il bordo di 16px, di quell'elemento, viene considerato in più oltre il 100%. Per questo è consigliato ciò che viene chiamato "box model reset".

    Altra cosa, il body ha di default un margine di una decina di px (può variare a seconda del browser), che chiaramente fa discostare i contenuti dai bordi della finestra. Con una posizione assoluta puoi azzerare top e left così che l'elemento non consideri tale margine. In alternativa basta azzerare tale margine per il body.

    Vecchi browser hanno dei valori di default anche per il padding sia nel body sia nell'elemento html. In generale può essere utile azzerare queste proprietà e, dal momento che ti serve avere l'intera pagina sempre al 100% della dimensione della finestra, puoi applicare larghezza e altezza al 100% per questi elementi.

    Una cosa del genere:
    codice HTML:
    <!doctype html>
    <html>
       <head>
       <meta charset="UTF-8">
       <title>Documento senza titolo</title>
          <style>
          * { /* Reset box model */
             box-sizing: border-box;
          }
          html, body {
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
          }
          .pagina{
             position: absolute;
             height: 100%;
             width: 100%;
             border: 16px solid #1f6383;
          }    
          </style>
       </head>
       <body>
          <div class="pagina">
          </div>
       </body>
    </html>
    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"

  2. #22
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,954
    Quote Originariamente inviata da Dascos Visualizza il messaggio
    La butto lì....e usare bootstrap, così ti levi un sacco di problemi?
    Quoto può essere una valida soluzione in casi del genere
    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. #23
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    [MOD]Consiglio di evitare di lasciare dati privati (indirizzi email, numeri telefonici, ecc.) nel codice che posti sul forum. Per ora ho rimosso io, fai attenzione in futuro, grazie.
    [/MOD]


    Certamente


    Benissimo


    Beh, hai già un contenitore principale che è il body. Chiaramente, se vuoi che il sito/pagina sia responsive, tutto il layout e i contenuti devono essere predisposti per adattarsi alla viewport (l'area visibile del dispositivo in cui è mostrata la pagina).

    Non ci sono regole fisse per la disposizione degli elementi (a parte le regole standard per avere un codice valido), ma devi valutare tu come sia meglio impostare il tutto per ottenere ciò che ti serve.

    Ora, il problema qui è il fattore responsive. Bisogna quindi capire come i vari elementi devono comportarsi con le "possibili" dimensioni del viewport in cui presumibilmente sarà visto il sito.

    Alcuni elementi possono essere impostati per adattarsi alle dimensioni dello spazio disponibile senza che questi sbordino oltre, cioè allungandosi e restringendosi in modo "elastico"; che, mi pare di capire, è ciò che stai cercando di ottenere finora.

    Bisogna però capire anche fino a che punto questi elementi possono mantenere la loro posizione pur restando elastici. E' possibile infatti che i contenuti stessi non riescano più a stare dentro il proprio contenitore quando ad esempio la viewport risulta ridotta oltre la loro reale dimensione e capacità.

    In questo caso bisogna studiare come i vari elementi del layout possono disporsi all'interno della pagina stessa in modo da mantenere focalizzati quelli con maggiore priorità. Per una viewport ristretta, potresti voler decidere di eliminare alcuni elementi (ad esempio, elementi di decorazione), piuttosto che renderli graficamente più piccoli (ad esempio l'intestazione o il logo), o ancora impostarli in modo che restino nascosti ma espandibili al click/touch (come avviene per i classici "hamburger menu") e via dicendo, in modo da garantire comunque una facile fruibilità della stessa pagina sulle varie dimensioni dei diversi dispositivi.

    Per fare questo, oltre a mantenere una certa elasticità degli elementi, è utile impostare opportunamente dei "breakpoint CSS".

    Mi fermo però qui perché il discorso del "responsive" non è così semplice e già siamo offtopic rispetto all'oggetto della discussione.

    Ora, se il tuo intento è solo quello di adeguare i contenitori alle dimensioni della pagina per evitare che si crei uno scroll, mi pare di capire che gli elementi da impostare siano principalmente .menusx e .desktop, per cui puoi fare queste modifiche (come già ti ho indicato sopra):

    codice:
    .menusx {
       position: absolute;
       top: 385px;
       left: 13px;
       bottom: 0; /* Estende l'elemento al limite basso del genitore */
       background-color:#fff;
       width: 190px;
    /*   height: 600px; - DA RIMUOVERE - */
       border: 2px solid #7e9faa;
    }
             
    .desktop {
       position: absolute;
       top: 385px;
       left: 213px;
       bottom: 0; /* Estende l'elemento al limite basso del genitore */
       right: 0;  /* Estende l'elemento al limite destro del genitore */
       background-color:#fff;
    /*   width: 1055px; - DA RIMUOVERE - */
    /*   height: 600px; - DA RIMUOVERE - */
       border: 2px solid #7e9faa;
    }

    grazie per tutte le precisazioni, in realtà vorrei anche che la grafica in alto composta dai tre segmenti colorati si estenda in orizzontale per tutta la pagina occupando tutto lo spazio disponibile.

    stasera proverò le tue modifiche e aggiorno.

  4. #24
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    Quote Originariamente inviata da Dascos Visualizza il messaggio
    La butto lì....e usare bootstrap, così ti levi un sacco di problemi?
    ..tu sei conscio del fatto che non so minimamente di cosa tu stia parlando vero? ahahah grazie del tentativo, piano piano sto cercando di districarmi nell'oscuro mondo css

  5. #25
    Quote Originariamente inviata da merovese Visualizza il messaggio
    ..tu sei conscio del fatto che non so minimamente di cosa tu stia parlando vero? ahahah grazie del tentativo, piano piano sto cercando di districarmi nell'oscuro mondo css
    Immaginavo :-D
    Dunque, bootstrap è una serie di css in framework (la faccio semplice) che serve per la costruzione di pagine/siti innanzitutto "a plugin" e poi, ben rilevante, responsive.
    Il compito di chi usa bootstrap è praticamente SOLO fare il codice html di ciò che gli serve, senza preoccuparsi quasi del tutto del lato css.
    https://getbootstrap.com/docs/5.0/ per una panoramica di cosa contiene di default, di come funziona, che plugin esistono ecc
    https://themes.getbootstrap.com/ per una panoramica di come possono essere i risultati "mettendo insieme i pezzi"
    https://getbootstrap.com/docs/5.0/examples/ per capire come costruire i singoli pezzetti che vedi nei temi

  6. #26
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    [MOD]Consiglio di evitare di lasciare dati privati (indirizzi email, numeri telefonici, ecc.) nel codice che posti sul forum. Per ora ho rimosso io, fai attenzione in futuro, grazie.
    [/MOD]


    Certamente


    Benissimo


    Beh, hai già un contenitore principale che è il body. Chiaramente, se vuoi che il sito/pagina sia responsive, tutto il layout e i contenuti devono essere predisposti per adattarsi alla viewport (l'area visibile del dispositivo in cui è mostrata la pagina).

    Non ci sono regole fisse per la disposizione degli elementi (a parte le regole standard per avere un codice valido), ma devi valutare tu come sia meglio impostare il tutto per ottenere ciò che ti serve.

    Ora, il problema qui è il fattore responsive. Bisogna quindi capire come i vari elementi devono comportarsi con le "possibili" dimensioni del viewport in cui presumibilmente sarà visto il sito.

    Alcuni elementi possono essere impostati per adattarsi alle dimensioni dello spazio disponibile senza che questi sbordino oltre, cioè allungandosi e restringendosi in modo "elastico"; che, mi pare di capire, è ciò che stai cercando di ottenere finora.

    Bisogna però capire anche fino a che punto questi elementi possono mantenere la loro posizione pur restando elastici. E' possibile infatti che i contenuti stessi non riescano più a stare dentro il proprio contenitore quando ad esempio la viewport risulta ridotta oltre la loro reale dimensione e capacità.

    In questo caso bisogna studiare come i vari elementi del layout possono disporsi all'interno della pagina stessa in modo da mantenere focalizzati quelli con maggiore priorità. Per una viewport ristretta, potresti voler decidere di eliminare alcuni elementi (ad esempio, elementi di decorazione), piuttosto che renderli graficamente più piccoli (ad esempio l'intestazione o il logo), o ancora impostarli in modo che restino nascosti ma espandibili al click/touch (come avviene per i classici "hamburger menu") e via dicendo, in modo da garantire comunque una facile fruibilità della stessa pagina sulle varie dimensioni dei diversi dispositivi.

    Per fare questo, oltre a mantenere una certa elasticità degli elementi, è utile impostare opportunamente dei "breakpoint CSS".

    Mi fermo però qui perché il discorso del "responsive" non è così semplice e già siamo offtopic rispetto all'oggetto della discussione.

    Ora, se il tuo intento è solo quello di adeguare i contenitori alle dimensioni della pagina per evitare che si crei uno scroll, mi pare di capire che gli elementi da impostare siano principalmente .menusx e .desktop, per cui puoi fare queste modifiche (come già ti ho indicato sopra):

    codice:
    .menusx {
       position: absolute;
       top: 385px;
       left: 13px;
       bottom: 0; /* Estende l'elemento al limite basso del genitore */
       background-color:#fff;
       width: 190px;
    /*   height: 600px; - DA RIMUOVERE - */
       border: 2px solid #7e9faa;
    }
             
    .desktop {
       position: absolute;
       top: 385px;
       left: 213px;
       bottom: 0; /* Estende l'elemento al limite basso del genitore */
       right: 0;  /* Estende l'elemento al limite destro del genitore */
       background-color:#fff;
    /*   width: 1055px; - DA RIMUOVERE - */
    /*   height: 600px; - DA RIMUOVERE - */
       border: 2px solid #7e9faa;
    }
    perfetto! funziona alla grande!!! ho un solo problema e spero tu possa darmi una mano a risolverlo, credi di aver capito dov'è l'inceppo ma non riesco a venirne a capo.

    codice:
       .menubar{         height:100px;
             position: absolute;
             top: 70px;
             left: 211px;
    		 }
             div.menubar:before{
             content: '';
             top: 2px;
             left: 195px;
             position: absolute;
             border-top: 25px solid #fff;
             border-right: 14px solid transparent;
    		 }
             .topbar{
             height:25px;
             right: 13px;
             position: Absolute;
             top: 45px;
             left: 559px;
             background-color: #1f6383;
    		 }
             div.topbar:before{
             content: '';
             top: 0px;
             left: 0px;
             position: absolute;
             border-top: 25px solid #fff;
             border-right: 14px solid transparent;
             width: 0;
             }	
             .bottombar{
             height:25px;
             position: Absolute;
             top: 99px;
             left: 120px;
    	     right: 13px;
             background-color: #7e9faa;
             }
             div.bottombar:before{
             content: '';
             top: 0px;
             left: 0px;
             position: absolute;
             border-top: 25px solid #fff;
             border-right: 14px solid transparent;
             width: 0;
             }	
             /* menubar*/
             ul {
             list-style-type: none;
    		 font-family: Verdana, sans-serif;
    		 font-size: 14px;
             margin-top: 72px;
             margin-left: 398px;
    		 width: 713px;
             padding-left: 200px;
             overflow: hidden;
             background-color: #2e9bac;
             height: 25px;
             }
    questa è la barra devo è presente il menù, credo di aver fatto qualche errore perché non riesco a dare delle misure alla barra ma solamente al menù che c'è sopra quindi credo che la barra sia diventata figlia del menù, invece che essere due div separati, in questo modo quando gli do il right: 0; non mi fila proprio, ho detto una porcata?

  7. #27
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    Risolto! grazie mille davvero sei stato fondamentale, ci ho messo un pò ma credo di aver assimilato la cosa. grazie.

  8. #28
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    [MOD]Consiglio di evitare di lasciare dati privati (indirizzi email, numeri telefonici, ecc.) nel codice che posti sul forum. Per ora ho rimosso io, fai attenzione in futuro, grazie.
    [/MOD]


    Certamente


    Benissimo


    Beh, hai già un contenitore principale che è il body. Chiaramente, se vuoi che il sito/pagina sia responsive, tutto il layout e i contenuti devono essere predisposti per adattarsi alla viewport (l'area visibile del dispositivo in cui è mostrata la pagina).

    Non ci sono regole fisse per la disposizione degli elementi (a parte le regole standard per avere un codice valido), ma devi valutare tu come sia meglio impostare il tutto per ottenere ciò che ti serve.

    Ora, il problema qui è il fattore responsive. Bisogna quindi capire come i vari elementi devono comportarsi con le "possibili" dimensioni del viewport in cui presumibilmente sarà visto il sito.

    Alcuni elementi possono essere impostati per adattarsi alle dimensioni dello spazio disponibile senza che questi sbordino oltre, cioè allungandosi e restringendosi in modo "elastico"; che, mi pare di capire, è ciò che stai cercando di ottenere finora.

    Bisogna però capire anche fino a che punto questi elementi possono mantenere la loro posizione pur restando elastici. E' possibile infatti che i contenuti stessi non riescano più a stare dentro il proprio contenitore quando ad esempio la viewport risulta ridotta oltre la loro reale dimensione e capacità.

    In questo caso bisogna studiare come i vari elementi del layout possono disporsi all'interno della pagina stessa in modo da mantenere focalizzati quelli con maggiore priorità. Per una viewport ristretta, potresti voler decidere di eliminare alcuni elementi (ad esempio, elementi di decorazione), piuttosto che renderli graficamente più piccoli (ad esempio l'intestazione o il logo), o ancora impostarli in modo che restino nascosti ma espandibili al click/touch (come avviene per i classici "hamburger menu") e via dicendo, in modo da garantire comunque una facile fruibilità della stessa pagina sulle varie dimensioni dei diversi dispositivi.

    Per fare questo, oltre a mantenere una certa elasticità degli elementi, è utile impostare opportunamente dei "breakpoint CSS".

    Mi fermo però qui perché il discorso del "responsive" non è così semplice e già siamo offtopic rispetto all'oggetto della discussione.

    Ora, se il tuo intento è solo quello di adeguare i contenitori alle dimensioni della pagina per evitare che si crei uno scroll, mi pare di capire che gli elementi da impostare siano principalmente .menusx e .desktop, per cui puoi fare queste modifiche (come già ti ho indicato sopra):

    codice:
    .menusx {
       position: absolute;
       top: 385px;
       left: 13px;
       bottom: 0; /* Estende l'elemento al limite basso del genitore */
       background-color:#fff;
       width: 190px;
    /*   height: 600px; - DA RIMUOVERE - */
       border: 2px solid #7e9faa;
    }
             
    .desktop {
       position: absolute;
       top: 385px;
       left: 213px;
       bottom: 0; /* Estende l'elemento al limite basso del genitore */
       right: 0;  /* Estende l'elemento al limite destro del genitore */
       background-color:#fff;
    /*   width: 1055px; - DA RIMUOVERE - */
    /*   height: 600px; - DA RIMUOVERE - */
       border: 2px solid #7e9faa;
    }
    scusa se riprendo un attimo il tuo post, come faccio a dare un a regolare per un restringimento massimo? nel senso che ho il menù che ha una misura fissa, per evitare casini nel caso di un eccessivo restringimento vorrei fissare un massimale, è possibile?

  9. #29
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Direi che c'è un bel po' di confusione. Il codice riporta diversi errori, meglio correggerli prima di proseguire. Puoi usare un validatore online, vedi questo:
    https://validator.w3.org/#validate_by_input

    Cerca inoltre di dare una indentazione corretta a tutto il codice; questo ne facilita la lettura e ti aiuta a comprendere meglio dove andare a correggere gli errori e apportare le modifiche volute. Puoi usare uno strumento di formattazione del codice, ce ne sono anche online, basta una piccola ricerca tipo html formatter.

    Non è chiaro comunque di quale menu stai parlando; nel codice HTML vedo topmenu, topmen2 e lat_sx; solo l'ultimo (lat_sx) riporta del contenuto ma nel tuo CSS vedo il commento riferito a /*menu top*/; non capisco quale tu voglia sistemare e quali sono le prove che hai fatto.

    Ti consiglio di essere più preciso, diversamente sarà difficile ricevere aiuto qui sul forum.
    allora ti riposto il nuovo codice, stesso problema, se inserisco un nuovo menù, (menusx) il menù originale (menutop) sparisce e viceversa

    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>
          <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; 
             }
             .header{
             background-color:#fff;
             width:100%;
             height:100px;
             display: flex;
             }
             .logo{
             height:100px;
             width:10%;
             position: Absolute;
             top: 11px;
             left: 3px;
             }	
    		 div.contattaci {
    		 position: absolute;
    		 font-family: Verdana, sans-serif;
       		 font-size: 12px;
    		 color: #1f6383;
    		 text-align: left;
             border: 2px solid #1f6383;
             padding: 10px;
    	     top: 3px;
    		 left: 740px;
             width: 380px;
             height: 15px;
    		 }
             .menubar{
             height:25px;
             position: absolute;
             top: 72px;
             left: 411px;
    		 background-color: #2e9bac;
    		 right: 13px;
    		 }
             div.menubar:before{
             content: '';
             top: 0px;
             left: 0px;
             position: absolute;
             border-top: 25px solid #fff;
             border-right: 14px solid transparent;
    		 }
             .topbar{
             height:25px;
             right: 13px;
             position: Absolute;
             top: 45px;
             left: 559px;
             background-color: #1f6383;
    		 }
             div.topbar:before{
             content: '';
             top: 0px;
             left: 0px;
             position: absolute;
             border-top: 25px solid #fff;
             border-right: 14px solid transparent;
             width: 0;
             }	
             .bottombar{
             height:25px;
             position: Absolute;
             top: 99px;
             left: 120px;
    	     right: 13px;
             background-color: #7e9faa;
             }
             div.bottombar:before{
             content: '';
             top: 0px;
             left: 0px;
             position: absolute;
             border-top: 25px solid #fff;
             border-right: 14px solid transparent;
             width: 0;
             }	
    		 .img {
             position: absolute;
             top: 126px;
             left: 13px;
             background-color:#fff;
             right: 13px;
             height: 250px;
    		 border: 5px solid #7e9faa;
             }
             .menusx {
             position: absolute;
             top: 395px;
             left: 13px;
    	     height: 1000px;
             background-color:#fff;
             width: 190px;
    		 bottom: 13px;
    		 border: 2px solid #7e9faa;
             }
    		 .desktop {
             position: absolute;
             top: 395px;
             left: 213px;
    	     height: 1000px;
    	     right: 13px;
    		 bottom: 13px;
             background-color:#fff;
    	     border: 2px solid #7e9faa;
             }
             #menutop ul {
    	     font-family: Verdana, sans-serif;
    		 font-size: 14px;
             list-style-type: none;
             margin-top: 64px;
             margin-left: 551px;
             width: 500px;
             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;
             }
            #menusx ul {
            list-style-type: none;
            margin-top: 400px;
            margin-left: 8px;
            padding: 0;
            width: 186px;
            background-color: #f1f1f1;
            }
            #menusx li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
            }
            #menusx li a.active {
            background-color: #04AA6D;
            color: white;
            }
            #menusx li a:hover:not(.active) {
            background-color: #555;
            color: white;
            }
          </style>
       </head>
       <body>
          <div id="menutop">
            <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#tl">Trasporti</a></li>
      <li><a href="#contatti">Contatti</a></li>
      <li><a href="#news">News</a></li>
    </ul>
         </div>
          <div id="menusx">
            <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#tl">Trasporti</a></li>
      <li><a href="#contatti">Contatti</a></li>
      <li><a href="#news">News</a></li>
    </ul>
         </div>
          <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="bottombar">
          </div>
          <div class="desktop">
             <a href="#home">desktop</a>	 
          </div>
    	<div class="menusx">
             <a href="#home">menusx</a>	 
          </div><div class="img">
             <a href="#home">img</a>	 
          </div>
         
    
    
    
    
    </body>
    </html>

  10. #30
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    ho risolto! grazie

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.