[HTML] problema resonsive

simonevv · 12 Nov 2018

HTML:

#grad1 {
   margin-left: 25%;
   height: 216px;
   width: 599px;
   background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1));
   border-radius:10px;
}
#grad1:hover {
   margin-left: 25%;
   height: 216px;
   width: 599px;
   background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
   border-radius:10px;
}
@media (max-width: 767px){
#grad1 {
   margin-left: 0px;
 
}

HTML:

<div id=#grad1>
</div>

non cambia nulla rimpicciolendo la pagina
mentre in questo caso non casica proprio in css:
codice:
css

HTML:

.grad1 {
   margin-left: 25%;
   height: 216px;
   width: 599px;
   background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1));
   border-radius:10px;
}
.grad1:hover {
   margin-left: 25%;
   height: 216px;
   width: 599px;
   background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
   border-radius:10px;
}
@media (max-width: 767px){
.grad1 {
   margin-left: 0px;
 
}

<div class="grad1">
</div>

se c'e' qualcuno disposto condivido su drive il codice completo

Max 1 · 12 Nov 2018

@simonevv
Per prima cosa!!
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag

quando posti del codice, oppure la funzione codice dalla barra degli strumenti

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro

se c'e' qualcuno disposto condivido su drive il codice completo

Disposto a cosa?
Vedi di spiegarti meglio ed esporre il tuo problema con chiarezza e con molti dettagli

Jonn · 13 Nov 2018

Nel primo caso hai sbagliato a scrivere l'attributo "ID" del tag <div>, già correggendo questo vedi che funziona esattamente, ne approfitto per riscriverti il codice in modo più consono, ricordati che :hover è una pseudo-classe, questo significa che identifica uno stato come tale non definisce lo stile ma nell'uso comune lo si usa per specificare SOLO cosa cambiare rispetto alla dichiarazione degli stili del selettore in causa (nel tuo caso #grad1), nel tuo codice dallo stato "normale" allo stato "hover" cambia solamente lo sfondo, in CSS la pseudo-classe hover erediterà in automatico le regole dichiarate prima, in più applicherà le modifiche che ritieni necessarie, per questo non serve dichiarare nelle pseudoclassi regole identiche dichiarate precedentemente nello status "normale".
Ti consiglio comunque a dare un'occhiata alla spiegazione delle pseudo-classi a QUESTA PAGINA:

HTML:

<!DOCTYPE html>
<html>
   <head>
       <style>
           #grad1{
               margin-left:25%;
               height:216px;
               width:599px;
               background-image:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1));
               border-radius:10px;
           }
           #grad1:hover{
               background-image:linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
           }
           @media (max-width: 767px){
               #grad1 {
                   margin-left: 0px;
               }
           }
       </style>
   </head>
   <body>
       <div id="grad1"></div>
   </body>
</html>

Come tutti i linguaggi non ammettono imperfezioni come hai fatto, tipo la mancanza della chiusura della Media Query, come la mancanza degli apici doppi nell'HTML nella dichiarazione dell'ID.
Nel secondo caso invece, scrivendo in HTML presumo, hai omesso di "dire" al browser che quelle regole non sono HTML ma CSS, e lo si fa racchiudendole nel tag:

Codice:

<style>...Regole CSS...</style>

Cerca

Cerca

[HTML] problema resonsive

simonevv

Nuovo Utente

Max 1

Super Moderatore

Jonn

Utente Attivo

Discussioni simili