CSS [AIUTO] Problema con Html e Css

Stato
Discussione chiusa ad ulteriori risposte.
Ordina per data Ordina commenti per reazioni
S

Stefano1709

Utente Electrum
24 Ottobre 2012
363
22
66
160
Salve a tutti, recentemente ho iniziato a lavorare con HTML e CSS ma ho riscontrato alcuni problemi.

Questa è la parte HTML:


Questa è la parte CSS:


Questo è il risultato:
https://gyazo.com/fa9815d065132f452c36e36849f1d5b8

Adesso, il problema è che c'è una parte in alto che non è NERO ma è dello stesso colore del background, scusate se sembrerà un stupido errore ma sono nuovo nel campo web.
Grazie in anticipo, accetto consigli/critiche costruttive che mi potrebbero aiutare ad imparare bene nella programmazione web.
 
Ultima modifica:
Stefano1709 ha detto:
Salve a tutti, recentemente ho iniziato a lavorare con HTML e CSS ma ho riscontrato alcuni problemi.

Questa è la parte HTML:


Questa è la parte CSS:


Questo è il risultato:
https://gyazo.com/fa9815d065132f452c36e36849f1d5b8

Adesso, il problema è che c'è una parte in alto che non è NERO ma è dello stesso colore del background, scusate se sembrerà un stupido errore ma sono nuovo nel campo web.
Grazie in anticipo, accetto consigli/critiche costruttive che mi potrebbero aiutare ad imparare bene nella programmazione web.
Clicca per espandere...


@Stefano1709
Il problema è nel css:
nav {
width: 90%;
margin-top: 30px;
margin-left: 420px;
overflow: hidden;
}

Ti ho modificato il css in modo che la parte di schermo grigio venisse riempita, credo sia quello che volevi:
Codice: 
body {
        background-color:#181818;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
#entry-header {
        margin: auto auto 50px auto;
        width: 80%;
        max-width: 978px;
        position: relative;
        z-index: 10001;
}
#main {
        padding-top: 100px;
}
#content {
        overflow: hidden;
    margin: 0 auto;
    padding-bottom: 50px;
    width: 80%;
    max-width: 978px;
} 
html {
    display: block;
}
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url(../images/preload.png);
    z-index:99;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:41%;
    top:50%;
    background-image:url(../images/status.gif);
    background-repeat:no-repeat;
}
* {
        padding: 0;
        margin: 0;
      
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}
.menu{
        margin: 0;
        width: 100%;
        height: 130px;
        background-color:black;
}
#logo {
    float: left;
    margin-top: 15px;
    margin-left: 70px;
    position: absolute;
    width: 352px;
    height: 83px;
}
nav {
    width: 90%;
    padding-top: 30px;
    margin-left: 420px;
    overflow: hidden;
}
nav ul {
        list-style: none;
        overflow: hidden;
}
nav li a {
        background: black;
        color: #fff;
        display: block;
        float: left;
        font: 1000 20px/10.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        width: 12.5%;
      
        /*TRANSISTIONS*/
        -webkit-transition: background 0.5s ease;
           -moz-transition: background 0.5s ease;
             -o-transition: background 0.5s ease;
            -ms-transition: background 0.5s ease;
                transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover {
        color: orange;
}
/*SMALL*/
nav small {
        font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
        text-transform: none;
        color: #aaa;
}
/*BORDER FIX*/
nav li:last-child a {
        border: none;
}
/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
        nav li a {
                font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        }
      
        nav small {
                font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
        }
}
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
        nav li a {
                width: 25%;
                border-bottom: 1px solid #fff;
                font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        }
      
        nav li:last-child a, nav li:nth-child(4) a {
                border-right: none;
        }
      
        nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
                border-bottom: none;
        }
}
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
        nav li a {
                width: 50%;
                font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
                padding-top: 12px;
                padding-bottom: 12px;
        }
      
        nav li:nth-child(even) a {
                border-right: none;
        }
      
        nav li:nth-child(5) a, nav li:nth-child(6) a {
                border-bottom: 1px solid #fff;
        }
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
        nav li a {
                font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        }
}
 
  • Mi piace
Reazioni: TheSeeker e Stefano1709
venticello ha detto:
@Stefano1709
Il problema è nel css:
nav {
width: 90%;
margin-top: 30px;
margin-left: 420px;
overflow: hidden;
}

Ti ho modificato il css in modo che la parte di schermo grigio venisse riempita, credo sia quello che volevi:
Codice: 
body {
        background-color:#181818;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
#entry-header {
        margin: auto auto 50px auto;
        width: 80%;
        max-width: 978px;
        position: relative;
        z-index: 10001;
}
#main {
        padding-top: 100px;
}
#content {
        overflow: hidden;
    margin: 0 auto;
    padding-bottom: 50px;
    width: 80%;
    max-width: 978px;
}
html {
    display: block;
}
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url(../images/preload.png);
    z-index:99;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:41%;
    top:50%;
    background-image:url(../images/status.gif);
    background-repeat:no-repeat;
}
* {
        padding: 0;
        margin: 0;
     
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}
.menu{
        margin: 0;
        width: 100%;
        height: 130px;
        background-color:black;
}
#logo {
    float: left;
    margin-top: 15px;
    margin-left: 70px;
    position: absolute;
    width: 352px;
    height: 83px;
}
nav {
    width: 90%;
    padding-top: 30px;
    margin-left: 420px;
    overflow: hidden;
}
nav ul {
        list-style: none;
        overflow: hidden;
}
nav li a {
        background: black;
        color: #fff;
        display: block;
        float: left;
        font: 1000 20px/10.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        width: 12.5%;
     
        /*TRANSISTIONS*/
        -webkit-transition: background 0.5s ease;
           -moz-transition: background 0.5s ease;
             -o-transition: background 0.5s ease;
            -ms-transition: background 0.5s ease;
                transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover {
        color: orange;
}
/*SMALL*/
nav small {
        font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
        text-transform: none;
        color: #aaa;
}
/*BORDER FIX*/
nav li:last-child a {
        border: none;
}
/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
        nav li a {
                font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        }
     
        nav small {
                font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
        }
}
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
        nav li a {
                width: 25%;
                border-bottom: 1px solid #fff;
                font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        }
     
        nav li:last-child a, nav li:nth-child(4) a {
                border-right: none;
        }
     
        nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
                border-bottom: none;
        }
}
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
        nav li a {
                width: 50%;
                font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
                padding-top: 12px;
                padding-bottom: 12px;
        }
     
        nav li:nth-child(even) a {
                border-right: none;
        }
     
        nav li:nth-child(5) a, nav li:nth-child(6) a {
                border-bottom: 1px solid #fff;
        }
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
        nav li a {
                font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        }
}
Clicca per espandere...

Grazie mille, ho notato che hai cambiato da "margin-top" a "padding-top", qual'è la differenza? Hai cambiato altro oltre a questo?
@venticello
 
Stefano1709 ha detto:
Grazie mille, ho notato che hai cambiato da "margin-top" a "padding-top", qual'è la differenza? Hai cambiato altro oltre a questo?
@venticello
Clicca per espandere...
Mentre margin-top sposta l'elemento dalla sua posizione originale di tot pixels, padding-top serve ad estenderlo; ciò vuol dire che se io nelle proprietà di un elemento scrivo padding-top: 15px, all'interno dell'elemento viene creato uno spazio vuoto di 15 pixels.
Pensandoci, non cambia niente in questo caso tra le due opzioni :asd:

Un'altra proprietà che ho cambiato è la height del menu, da 100px l'ho portata a 130px per riempire i 30 pixels vuoti lasciati dal padding del nav.
Ho anche cambiato il margin-top del logo da -15px a 15px, in modo che mantenesse la posizione, ora che il margin-top del nav è stato tolto (in caso contrario, il menu sarebbe stato appiccicato al top della pagina).
Felice di averti aiutato :)
 
Stato
Discussione chiusa ad ulteriori risposte.

DISCUSSIONI SIMILI

N
Discussione Come ho capitalizzato il mio fallimento al bug bounty di Instagram
  • Chiuso
  • 0
  • 311
0
311
Sicurezza Informatica
Netcat
0
Guida Videoguida 3 tecniche per bypassare il WAF di AWS
  • 3
  • 1K
3
1K
Pentesting e Ethical Hacking Guide e Tools
0xbro
0
Guida I migliori libri per studiare l'Ethical Hacking e Penetration Testing nel 2024
  • Release
  • In evidenza
  • 29
  • 8K
29
8K
Pentesting e Ethical Hacking Guide e Tools
0xbro
0
Discussione Ufficiale I migliori siti dove praticare Ethical Hacking nel 2024
  • Release
  • In evidenza
  • 10
  • 6K
10
6K
Pentesting e Ethical Hacking
MRPants
N
Discussione Altro Xorg Vs Wayland: quali sono le differenze?
  • 0
  • 1K
0
1K
Linux, Unix e altri OS
nfvblog
Top Bottom
Indietro