quante ul e li

**KillerWorm** · 13-10-2021, 16:05

bene, ma hai risolto quindi?

**merovese** · 13-10-2021, 16:18

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....

**KillerWorm** · 13-10-2021, 16:32

Hai provato ad applicare quanto ti ho indicato nel precedente post?

**merovese** · 14-10-2021, 13:29

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:info@############.###">info@############.###</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é

**KillerWorm** · 14-10-2021, 16:01

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?!

**merovese** · 14-10-2021, 16:15

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:info@############.###">info@############.###</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/

**merovese** · 14-10-2021, 16:21

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?

**merovese** · 14-10-2021, 17:03

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

**KillerWorm** · 14-10-2021, 17:58

[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;
}

**Dascos** · 14-10-2021, 18:13

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

Discussione: quante ul e li

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio