Pagina 2 di 3 primaprima 1 2 3 ultimoultimo
Visualizzazione dei risultati da 11 a 20 su 30

Discussione: quante ul e li

  1. #11
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,954
    bene, ma hai risolto quindi?
    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. #12
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    a dire il vero no, proprio sta cosa della position non mi va giu, non riesco proprio ad occupare la pagina intera ad ogni risoluzione....

  3. #13
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,954
    Hai provato ad applicare quanto ti ho indicato nel precedente post?
    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"

  4. #14
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    ecco il nuovo codice

    codice:
    <!doctype html><html>
       <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>Futura Logisca e Trasporti Tomao</title>
          <style>
    		 a {
      		 color: #1f6383;
    		 }
    		 a:link {
      		 text-decoration: none;
    		 }
    		 a:visited {
      		 text-decoration: none;
    		 } 
    		 a:hover {
             text-decoration: none;
    		 color: #2e9bac;
             }
             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: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;
             width: 0;
    		 }
             .topbar{
             height:25px;
             width: 713px;
             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;
             width: 1152px;
             position: Absolute;
             top: 99px;
             left: 120px;
             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;
             }	
             /* menu top*/
             ul {
             list-style-type: none;
    		 font-family: Verdana, sans-serif;
    		 font-size: 14px;
             margin-top: 72px;
             margin-left: 351px;
    		 width: 713px;
             padding-left: 200px;
             overflow: hidden;
             background-color: #2e9bac;
             height: 25px;
             }
             li {
             float: left;
             }
             li a {
             display: block;
             color: white;
             text-align: left;
             padding: 3px 5px;
             text-decoration: none;
             }
             li a:hover {
             background-color: #1f6383;
             }
             li a:active {
             background-color: #7e9faa;
             }
             li {
             border-right: 1px solid #fff;
             border-left: 1px solid #fff;
             }
             li:last-child {
             border-right: 1px solid #fff;
             }	
    		 .img {
             position: absolute;
             top: 126px;
             left: 13px;
             background-color:#fff;
             width: 1255px;
             height: 250px;
    		 border: 5px solid #7e9faa;
             }
             .menusx {
             position: absolute;
             top: 385px;
             left: 13px;
             background-color:#fff;
             width: 190px;
             height: 600px;
    		 border: 2px solid #7e9faa;
             }
    		 .desktop {
             position: absolute;
             top: 385px;
             left: 213px;
             background-color:#fff;
             width: 1055px;
             height: 600px;
    	     border: 2px solid #7e9faa;
             }
          </style>
       </head>
       <body>
          <div class="logo">
             <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="403" height="100" alt=""/>
          </div>
    	    </body>
    	<div class="menu"></div>
          <ul><div>
                <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>
             </div>
          </ul>
    	<div class="contattaci">
    Telefonaci:  <a href="tel:+39##########">+39.####.######</a>
    Scrivici:    <a href="mailto:[email protected]############.###">[email protected]############.###</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>
    </html>
    ho eliminato il min-width e il min-height
    ma non ho avuto fortuna, ti spiego, sul portatile lo vedo bene, ovviamente sul fisso no, per quanto riguarda la larghezza, invece per la lunghezza è l'inverso.
    credo che questo sia il mio scoglio più grande, non riesco proprio a capire dove sia l'inceppo, anche leggendo tra la guida che mi hai postato, col positioning, devo essere sincero no ci ho capito granché
    Ultima modifica di KillerWorm; 14-10-2021 a 15:34 Motivo: rimossi dati privati

  5. #15
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,954
    ho eliminato il min-width e il min-height
    ma non ho avuto fortuna
    Perdonami ma vedo che hai fatto metà di ciò che ti ho indicato e poi hai fatto altro di testa tua: sì, hai eliminato min-width e min-height ma non hai aggiunto bottom e right come ho indicato, mentre hai invece impostato delle width ed height con valori fissi. Non puoi quindi pretendere che questi elementi si adattino alle dimensioni del contenitore.

    Inoltre continuo a vedere degli errori abbastanza grossolani nel markup HTML che andrebbero corretti a prescindere dal funzionamento: vedi la chiusura anticipata del </body> e un <div> che non può essere messo come figlio diretto di <ul>.
    Che validatore hai usato?!
    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"

  6. #16
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    codice HTML:
    <!doctype html><html>
       <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>Futura Logisca e Trasporti Tomao</title>
          <style>
    		 a {
      		 color: #1f6383;
    		 }
    		 a:link {
      		 text-decoration: none;
    		 }
    		 a:visited {
      		 text-decoration: none;
    		 } 
    		 a:hover {
             text-decoration: none;
    		 color: #2e9bac;
             }
             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: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;
             width: 0;
    		 }
             .topbar{
             height:25px;
             width: 713px;
             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;
             width: 1152px;
             position: Absolute;
             top: 99px;
             left: 120px;
             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;
             }
             li {
             float: left;
             }
             li a {
             display: block;
             color: white;
             text-align: left;
             padding: 3px 5px;
             text-decoration: none;
             }
             li a:hover {
             background-color: #1f6383;
             }
             li a:active {
             background-color: #7e9faa;
             }
             li {
             border-right: 1px solid #fff;
             border-left: 1px solid #fff;
             }
             li:last-child {
             border-right: 1px solid #fff;
             }	
    		 .img {
             position: absolute;
             top: 126px;
             left: 13px;
             background-color:#fff;
             width: 1255px;
             height: 250px;
    		 border: 5px solid #7e9faa;
             }
             .menusx {
             position: absolute;
             top: 385px;
             left: 13px;
             background-color:#fff;
             width: 190px;
             height: 600px;
    		 border: 2px solid #7e9faa;
             }
    		 .desktop {
             position: absolute;
             top: 385px;
             left: 213px;
             background-color:#fff;
             width: 1055px;
             height: 600px;
    	     border: 2px solid #7e9faa;
             }
          </style>
       </head>
       <body>
          <div class="logo">
             <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="403" height="100" alt=""/>
          </div>
    	<div class="menu"></div>
        <div>  
    	<ul>
                <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 class="contattaci">
    Telefonaci:  <a href="tel:+39##########">+39.####.######</a>
    Scrivici:    <a href="mailto:[email protected]############.###">[email protected]############.###</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>
    corretto, c'era l'errore del div come figlio di ul per via di alcune prove che stavo facendo prima, quindi in teoria ora siamo corretti e possiamo iniziare a capire come correggere la posizione

    come variatore ho usato questo https://validator.w3.org/
    Ultima modifica di KillerWorm; 14-10-2021 a 16:51 Motivo: rimossi dati privati

  7. #17
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    scusa la mia ignoranza, da quello che scrivi mi pare di capire allora che tutto il sito dovrebbe risiedere dentro un contenitore, e questo si adatta alla pagina/risoluzione, corretto?

  8. #18
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    49
    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

  9. #19
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,954
    [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]

    quindi in teoria ora siamo corretti e possiamo iniziare a capire come correggere la posizione
    Certamente

    come variatore ho usato questo https://validator.w3.org/
    Benissimo

    scusa la mia ignoranza, da quello che scrivi mi pare di capire allora che tutto il sito dovrebbe risiedere dentro un contenitore, e questo si adatta alla pagina/risoluzione, corretto?
    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;
    }
    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"

  10. #20
    La butto lì....e usare bootstrap, così ti levi un sacco di problemi?

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.