Percentuali in html 5

Pubblicità
CyberKylo

CyberKylo

Nuovo Utente
Messaggi
4
Reazioni
0
Punteggio
22
Ciao ragazzi, sono nuovo e già ho un problema, sicuramente sono io che non ho abbastanza conoscenze, sto facendo un sito internet utilizzando html e css, in passato già ne avevo messo uno online e funzionava bene ma le grandezze dei div le avevo messe tutte statiche in pixel. Questa volta volevo fare un sito fluido con le grandezze in percentuale, fino a qui nessun problema imposto per larghezza e altezza le percentuali e il sito si adatta perfettamente alla risoluzione (anche i vari div contenuti all interno), il problema é sorto quando ho inserito la dichiarazione per l' html5, cioé:
Codice: 
<!DOCTYPE html>
<html lang="it">
<head>
              <title>Prova</title>
              <meta charset = "utf-8">
</head>
Mettedo il doctype il div non si vede e non prende la dimensione data in percentuale nel css (se metto le dimensioni in pixel va bene), se elimino la voce doctype invece funziona perfettamente.
Da cosa é dato questo problema?
Grazie in anticipo!
 
Ultima modifica da un moderatore:
per dare la dimensione ad un div devi fare:
Codice: 
<div style="width:180px;(oppure 70%)">
codice html
</div>

oppure devi creare un foglio CSS con dentro il nome del tuo div ad esempio:
Codice: 
.div{
margin-bottom:8px;
etc
width:180px; oppure 70%;
}

e poi nell'html
Codice: 
<div class="div">
codice html
</div>
 
Sisi io ho usato un foglio di stile esterno, nell'esempio del post precedente non ho inserito il codice, il problema è che se metto un div con dimensioni in percentuale il div non si vede, se uso i pixel si.
Codice: 
<!DOCTYPE html>
<html lang="it">
<head>
         <title>prova</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
</head>
<body>
         <div id="box">Prova</div>
</body>
</html>

CSS:
Codice: 
#box {
         width: 100%;
         height: 50%;
         background-color:orange;
}
 
Ultima modifica da un moderatore:
CyberKylo ha detto:
Sisi io ho usato un foglio di stile esterno, nell'esempio del post precedente non ho inserito il codice, il problema è che se metto un div con dimensioni in percentuale il div non si vede, se uso i pixel si.

<!DOCTYPE html>
<html lang="it">
<head>
<title>prova</title>
<link href="http://www.tomshw.it/forum/style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
</head>
<body>
<div id="box">Prova</div>
</body>
</html>


CSS:

#box {
width: 100%;
height: 50%;
background-color:orange;
}
Clicca per espandere...

ma cosa dovrebbe fare perche a me il tuo codice fa questo:
Cattura.webp
 
Si questo l'ho scritto adesso cosi al volo per far capire il problema, se levo la scritta Prova all'interno del div, questo non si vede.
In pratica nel mio sito ho inserito un div header per il titolo, un div nav per il menu, un div contenuto e un div footer.
Tutti con larghezza 100% e altezza in percentuale fino a coprire il 100% della pagina. Il problema è che mettendo la dichiarazione <!DOCTYPE html> questi div non vengono visualizzati e mi rimane la pagina bianca, invece se non la inserisco funziona perfettamente.
 
CyberKylo ha detto:
Si questo l'ho scritto adesso cosi al volo per far capire il problema, se levo la scritta Prova all'interno del div, questo non si vede.
In pratica nel mio sito ho inserito un div header per il titolo, un div nav per il menu, un div contenuto e un div footer.
Tutti con larghezza 100% e altezza in percentuale fino a coprire il 100% della pagina. Il problema è che mettendo la dichiarazione <!DOCTYPE html> questi div non vengono visualizzati e mi rimane la pagina bianca, invece se non la inserisco funziona perfettamente.
Clicca per espandere...

in teoria è un problema di visualizzazione del browser....quale browser stai usando perchè io su explorer se tolgo la scritta Prova vedo la fascia gialla con scritto nulla dentro
 
Io di solito utilizzo Firefox, quindi se il problema è questo c'è qualcosa da aggiungere al codice per renderlo visibile?
 
Ti consiglio di provare con un altro browser e ti consiglio di creare un div container che contenga dimensioni della pagina e tutti gli elementi in piu come figli del div principale..

Inviato dal mio SM-G900F utilizzando Tapatalk
 
Di solito per la compatibilità con IE si scrive un CSS a parte e si mette una condizione di far leggere il CSS IE se l'utente è collegato con IE
 
Pubblicità
Pubblicità
Indietro
Top