Buongiorno a tutti,
sto riscrivendo per esercizio il sito www.outsidercup.it (la home page) utilizzando solo html5 e css.
La pagina contiene un header (con logo e link di navigazione), due div e un footer.
I due div sono uguali per dimensione (95% di larghezza e 30% di altezza) e hanno un colore di sfondo proprio,
Il primo div contiene a sua volta due div, uno con del testo e l'altro con un'immagine. E fin qui tutto bene.
Il secondo div (che nella versione online è impaginato con una tabella) l'ho suddiviso in quattro section ma quando applico uno stile il div e' come se scomparisse. sparisce il colore di background e le sezioni non si comportano come ci si aspetterebbe.
Ecco l'html:
ed ecco il css:
Qualcuno mi sa spiegare come mai mi si presenta questo problema?
Grazie
sto riscrivendo per esercizio il sito www.outsidercup.it (la home page) utilizzando solo html5 e css.
La pagina contiene un header (con logo e link di navigazione), due div e un footer.
I due div sono uguali per dimensione (95% di larghezza e 30% di altezza) e hanno un colore di sfondo proprio,
Il primo div contiene a sua volta due div, uno con del testo e l'altro con un'immagine. E fin qui tutto bene.
Il secondo div (che nella versione online è impaginato con una tabella) l'ho suddiviso in quattro section ma quando applico uno stile il div e' come se scomparisse. sparisce il colore di background e le sezioni non si comportano come ci si aspetterebbe.
Ecco l'html:
HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<title>Outsider Cup - il sito ufficiale</title>
<link href="outsiderstylesnew.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<body>
<!-- Intestazione, logo e navigazione -->
<header>
<div class="intestazione1"><a href="#">storia</a></div>
<div class="intestazione"><a href="#">download</a></div>
<div class="intestazione"><a href="#">regolamento</a></div>
<div class="intestazione"><a href="#">ringraziamenti</a></div>
</header>
<div id="main" role="main" class="group">
<div id="parteprima">
<div id="uno">
Outsider Cup 2014
2 - 3 agosto 2014
Settima edizione della sempre più prestigiosa competizione golfistica che si svolgerà anche quest'anno sul bellissimo percorso del Golf Club Le Betulle di Biella.
1° GIORNO - 4 Palle
Visualizza accoppiamenti e match
2* GIORNO - Incontri singoli
Visualizza i risultati
</div>
<div><img src="images/logo_ripulito.jpg" alt="Logo outsider Cup Grigio"></div>
</div>
<div id="parteseconda">
<div id="capitani">
<img src="images/stemmarossi7.png"> <br><br>
<strong>Capitano:</strong><br>
Mauro Cecconi<br><br>
<strong>Vicecapitani:</strong><br>
Andrea Derosa<br>
Gordon Sheriff<br>
</div>
<div id="squadre">
Squadra Rossa<br><br>
<strong>Giocatori:</strong><br><br>
Paolo Cantarella, Andrea Chevallard, Gabriele Dana, Lorenzo Lenoci, Gianni Nolano, Sergio Poggi, Francesco Spadaro, Egidio Squeri, Enrico Tura<br>
</div>
<div id="capitani">
<img src="images/stemmablu7.png"> <br><br>
<strong>Capitano:</strong><br>
Stefano Sibilia<br><br>
<strong>Vicecapitani:</strong><br>
Fabrizio Boscolo<br>
Roberto Rossi<br>
</div>
<div id="squadre">
Squadra Blu<br><br>
<strong>Giocatori:</strong><br><br>
Roberto Antoniotti, Luca Bonati, Massimo Carmi, Stefano Colombo, Carlo Lella, Emanuele Losciuto, Maurizio Orlando, Giancarlo Pedrazzini, Giorgio Vercelloni<br>
</div>
</div>
<footer>
<section>
<img src="images/sponsor/IdrotecnicaMantovani.jpg">
</section>
<section>
<img src="images/sponsor/Beta.jpg">
</section>
</footer>
</div>
</body>
</html>ed ecco il css:
Codice:
@charset "UTF-8";
/* CSS Document */
/* - - - - - - - - - - - - - - - - - - - - - - -
GLOBAL FIXES
- - - - - - - - - - - - - - - - - - - - - - - - */
/* box-sizing applied to a universal selector changes the box model so that border and padding cut into the height/width of the box rather than expanding it. Explanation here: http://css-tricks.com/box-sizing. */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Add the "group" class to a container element to contain it's floats (without needing to specify a fixed height). See: http://nicolasgallagher.com/micro-clearfix-hack. http://css-tricks.com/all-about-floats. */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
body {
background-color:#002d00;
text-align:center;
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.5;
}
h1, h2 {
font-family: Impact;
line-height: 0.9;
text-transform: uppercase;
}
h1 {
font-size: 6em;
margin: 0;
}
h2 {
font-size: 2em;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #f03;
text-decoration: underline;
}
a.btn {
display: inline-block;
text-transform: uppercase;
background: #f03;
color: white;
margin: 1em;
padding: 1em 2em;
margin: auto;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
a.btn:hover {
background: #444;
text-decoration: none;
}
header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
padding: 0.5em 0.5em;
height: 100px;
}
footer {
width: 95%;
position: relative;
margin-top: 3%;
}
footer section {
float: left;
width: 40%;
}
footer img {
width: 80%;
}
.intestazione1 {
float: left;
width: 10%;
margin-left: 40%;
margin-top: 70px;
}
.intestazione {
width: 10%;
margin-left: 2%;
float: left;
margin-top: 70px;
}
#squadre {
width: 40%;
float: left;
background-color: #e6ede6;
}
#capitani {
width: 10%;
float: left;
background-color: #e6ede6;
}
#parteprima {
width: 95%;
height: 30%;
margin-top: 1.5%;
margin-left: 2.5%;
margin-right: 0;
position: relative;
background-color: #e6ede6;
}
#parteprima img {
width: 45%;
}
#parteseconda {
width: 95%;
height: 30%;
margin-top: 1.5%;
margin-bottom: 3%;
margin-left: 2.5%;
position: relative;
background-color: #e6ede6;
}
#uno {
float: left;
width: 45%;
margin-left: 2.5%;
margin-right: 2.5%;
}
#due {
float: left;
width: 45%;
margin-left: 0;
margin-right: 2.5%;
}
#due img {
width: 100%;
}Qualcuno mi sa spiegare come mai mi si presenta questo problema?
Grazie
