[HTML] problema resonsive

S

simonevv

Nuovo Utente
12 Nov 2018
1
0
1
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
 
Ultima modifica di un moderatore:
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
@simonevv
Per prima cosa!!
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code.gif
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box inserisci 2.png.JPG


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
Clicca per allargare...
Disposto a cosa?
Vedi di spiegarti meglio ed esporre il tuo problema con chiarezza e con molti dettagli
 
Jonn

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
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>
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
L problema collegamento file css con html HTML e CSS 1
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
P [HTML] Problema ERR_INCOMPLETE_CHUNKED_ENCODING 206 (Partial Content) con Font HTML e CSS 1
L [HTML] Problema con navbar HTML e CSS 0
F [HTML] problema tag canonical HTML e CSS 7
ANDREA20 [HTML] problema con i div HTML e CSS 10
Tommy03 [HTML] Problema Iphone - Android HTML e CSS 1
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
A [HTML] Problema HTML e CSS 2
Daniele_Carrara [HTML] Problema attributo min HTML e CSS 0
S [HTML] Problema <input type="date"> HTML e CSS 0
M problema con video in html 5 HTML e CSS 7
A [HTML] Sfondo responsive - problema specifico HTML e CSS 5
1992lvc [WordPress] Problema sidebar widget html Facebook WordPress 2
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
Andrea_Ventura [HTML] Problema centrare elemento orizzontalmente HTML e CSS 9
Angelo Russo [HTML] piccolo problema di impaginazione HTML e CSS 13
M [HTML] Problema visualizzazione immagini su dispositivi HTML e CSS 4
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
Kolop [WordPress] [HTML] Problema header su mobile WordPress 4
S [HTML] Problema non visibilità del sito HTML e CSS 1
J [HTML] problema IFrame con dispositivi IOS HTML e CSS 0
R [PHP] Problema stampa array bidimensionali con formula $html.=<<<myHtml... PHP 2
D [phpBB] [HTML] Problema pagina elenco argomenti (di forum) phpBB 9
A [HTML] Problema Safari e unita vw e vh. HTML e CSS 4
jonnino2004 [HTML] problema con bordo su h1 HTML e CSS 2
trattorino [PHP] [HTML] problema form PHP 1
B [HTML] Problema main box di un template HTML e CSS 2
Michaelweb93 [HTML] Problema sito web - wordpress WordPress 2
T [HTML] Problema pulsante scroll down su ecommerce CMS (Content Management System) 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
S Problema invio form php/html PHP 3
S [HTML] Problema menu a comparsa HTML e CSS 5
nipone [WordPress] [HTML] Problema su Sticky Sidebar WordPress 2
M [HTML] Problema Checkbox HTML e CSS 3
M [WordPress] [HTML] Problema immagine background respondive WordPress 21
S [HTML] Problema Sovrapponimento Tab con Contentuto HTML e CSS 0
fulviozecchin Problema Visualizzazione tabelle HTML nel Browser HTML e CSS 9
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
filomeni Problema con mail() in html PHP 4
S [HTML] Problema immagini verticali che si visualizzano capovolte HTML e CSS 3
L [HTML] bootstrap problema menu dropdown in mobile. HTML e CSS 3
P problema sito html su smartphone.. HTML e CSS 17
S Problema trasformare una stringa in html object Javascript 0
A problema : codice html HTML e CSS 1
C Problema con html e php :D PHP 1
D Problema collegamento file css con html HTML e CSS 4
O Problema con email in formato HTML PHP 1
G html problema table scrollable con header fisso HTML e CSS 2

Discussioni simili

Alto Basso