Gattinara ha scritto:Io li ho inseriti nella /* struttura principale */, ma non è necessario secondarmi, puoi metterli dove preferisci; sono solita creare una struttura ordinata per il fatto che, in presenza di CSS ingombranti, risulta maggiormente agevole orientarsi (niente di più
:)
Edit: in presenza di dubbi puoi usare come riferimento
il CSS della bozza.
Ok, ho fatto casino, mi son sparite tutti i li nella versione desktop e tablet, son rimasti solo quando scendono al di sotto della barra del nav.
Non nego che ho perso la testa per inserire le righe, molto propabilmente a causa del diverso ordine in cui le abbiamo inserite, ma questo credo sia normale.
Mi mancava la sezione /*background*/ che ho aggiunto, voglio evitare di far copia incolla dal css della tua bozza, mi piace sbattere la testa contro i problemi, almeno così son sicuro di non ricascarci. Nel mentre scrivevo il codice mi son accorto che in una query (credo non son sicuro) mancava una parentesi di chiusura, che ho prontamente aggiunto, credo che forse sia questo il problema, sto rileggendomi il codice per vedere cosa c'è che non quadra, nel frattempo lo incollo anche qui almeno vedi quanto ho pastricciato e cosa dovrei correggere.
EDIT:Noto anche che tutto il nav si è avvicinato ai bordi, forse ho toccato senza rendermene conto i margini o la griglia, ma mi sembra strano visto che stavo su un altro punto della pagina. continuo a non capire, le scritte escono dallo schermo a partire dalla risoluzione ipad landscape, invece che rimanere centrate.
EDIT2: Son riuscito a far riapparire il nav, avevo chiuso quella parentesi (stupidamente) perché mi sembrava aperta a causa di un commento sezione. Ora però è comparso un altro problema, il banner non compare lasciando la scritta nera nella risoluzione desktop, scendendo a risoluzioni più basse tutto gira come dovrebbe, eccetto il testo che continua a non essere centrato. Continuo a controllare nella speranza di risolvere da me :D
p.s il codice l'ho aggiornato all'EDIT2
Codice: Seleziona tutto
/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
nav, output, section,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
font-weight: normal;
font-style: normal;
}
/* compatibilità novelli tag HTML5 su vetusti browsers */
article, aside, details, figcaption, figure, footer, header, nav, section {
display: block;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #F5F4F4;
text-align: center;
font-size: 16px;
line-height: 19px;
color: #000;
-webkit-text-size-adjust: none; /* corregge il bug del font-size maggiorato-random su iOS */
}
/* testi */
strong, b {
font-weight: bold;
}
em, i {
font-style: italic;
}
p {
padding: 0 0 8px;
}
/* immagini */
img {
max-width: 100%;
max-height: 100%;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: bicubic;
}
/* link */
a {
outline: none;
text-decoration: none;
}
a img {
border: 0;
}
.class a:link {
color: #000;
}
.class a:active {
color: #59BCBC;
}
.class a:visited {
color: #000;
}
.class a:hover {
color: #59BCBC;
}
.tel a[href^=tel] {
text-decoration: none; /* evita il text-decoration underline su mobile */
}
/* effetti */
body {
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
/* form */
input, textarea, select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
-moz-border-radius: 0;
-webkit-border-radius:0;
border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow:none; /* disabilita i gradienti di default negli input */
}
input {}
select {}
label {}
/* intestazioni e testi */
h1, h2, h3, h4, h5, h6 {
text-align: center;
text-transform: uppercase;
color: #000;
}
h1 {
font-size: 28px;
line-height: 30px;
}
h2 {
font-size: 26px;
line-height: 28px;
}
h3 {
font-size: 20px;
line-height: 22px;
}
h4 {
font-size: 18px;
line-height: 20px;
}
h5, h6 {
font-size: 16px;
line-height: 18px;
}
/* comuni */
.clear {
clear: both;
}
/* navigazione */
nav {
width: 100%;
height: 75px;
background: #FFF;
font-size: 12px; /* era 18px */
letter-spacing: 2px; /* spazio tra i caratteri */
text-transform: uppercase; /* forza il maiuscolo */
}
.griglia {
position: relative;
width: 80%;
margin: 0 auto;
}
#logo {
position: absolute;
top: 0;
left: 0;
width: 148px;
height: 98px;
z-index: 999;
}
ol, ul {
list-style: none; /* elimina il marcatore */
}
#menu {
position: absolute;
top: 20px;
right: 78px;
width: 370px; /* era 370px*/
height: 35px;
text-align: left;
}
#menu li {
line-height: 35px;
padding: 0 15px 0;
border-right: 1px solid #000; /* bordo separatore */
float: left; /* affianca le voci */
display: block;
}
#menu li a {
color: #000;
}
#menu li a:active, #menu li a:hover {
color: #59BCBC;
}
#menu li:first-child {
padding-left: 0; /* elimina il padding sinistro nella prima voce del menu */
}
#menu li:last-child {
border-right: 0; /* eliminala il bordo destro nell'ultima voce del menu */
}
#social {
position: absolute;
top: 31px;
right: 0;
width: 64px;
height: 13px;
}
#social img {
width: 100%;
height: 100%;
}
#twitter, #facebook, #google {
height: 13px;
float: left;
background-size: 100% 100%;
display: block;
}
#twitter {
width: 17px;
background: url(../img/loghi/logo-twitter-bg.svg) no-repeat; /* stato hover */
margin-right: 9px;
}
#facebook {
width: 15px;
background: url(../img/loghi/logo-facebook-bg.svg) no-repeat; /* stato hover */
margin-right: 8px;
}
#google {
width: 15px;
background: url(../img/loghi/logo-google-bg.svg) no-repeat; /* stato hover */
}
/* struttura interna */
.griglia {}
/* struttura principale */
aside {}
footer {}
header {}
section {}
/* mobile */
@media only screen
and (min-width : 300px)
and (max-width : 479px) {
.banner h1 {
line-height: 22px;
font-size: 18px;
}
}
@media only screen
and (min-width : 240px)
and (max-width : 479px) {
}
@media only screen
and (min-width : 480px)
and (max-width : 767px) {
.banner h1 {
line-height: 24px;
font-size: 20px;
}
}
@media only screen
and (min-width : 768px)
and (max-width : 1023px) {
.banner {
height: 350px;
}
.banner h1 {
width: 80%;
line-height: 32px;
margin-left: 10%; /* respiro laterale */
}
}
@media only screen
and (min-width : 300px)
and (max-width : 767px) {
.banner {
height: 220px;
margin-top: 106px;
}
.banner h1 {
bottom: 20px;
width: 90%;
letter-spacing: normal; /* riduce l'ingombro orizzontale del testo */
margin-left: 5%; /* respiro laterale */
}
/* navigazione */
#menu {
top: 75px;
right: 0;
width: 100%;
height: 105px;
border-bottom: 1px solid #59BCBC;
}
#menu li {
height: 34px;
line-height: 34px;
background: #F1F1F2;
text-align: right;
padding: 0;
border-right: 0; /* elimina il bordo destro nelle voci del menu */
border-top: 1px solid #59BCBC; /* aggiunge il bordo al top nelle voci */
float: none; /* evita l'affiancamento delle voci */
}
#menu li a {
color: #59BCBC;
display: block;
padding: 0 25px 0 0; /* spazio a destra */
}
#menu li a:hover, .menu li a:active {
color: #59BCBC;
background: #FFF;
}
nav {
font-size: 16px;
}
#social {
right: 25px;
}
/* struttura principale */
.griglia {
width: 100%;
margin: 0;
}
#logo {
left: 25px;
}
.banner {
position: relative;
height: 400px;
background-repeat: no-repeat;
background-position: top center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.banner h1 {
position: absolute;
bottom: 40px;
width: 100%;
font-size: 25px;
letter-spacing: 1px;
color: #FFF;
}
/* background*/
.home {
background-image: url(../img/home/banner.jpg);
}
}
@media only screen
and (min-width : 300px)
and (max-width : 1024px) {
nav {
font-size: 14px;
}
#social {
top: 28px;
width: 92px;
height: 19px;
}
#twitter, #facebook, #google {
height: 19px;
}
#twitter {
width: 25px;
margin-right: 12px;
}
#facebook {width: 22px; margin-right: 11px;}
#google {width: 22px;}
}
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* navigazione */
#menu {
right: 125px;
}
/* struttura interna */
.griglia {
width: 92%;
}
}
@media only screen
and (min-width : 1024px)
and (max-width : 1279px) {
.banner {
height: 320px;
}
.banner h1 {
bottom: 30px;
font-size: 22px;
}
}