problema nel posizionamento di un div

gandalf1959 · 22 Set 2014

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:

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

gandalf1959 · 30 Set 2014

bene, ho risolto dando un'altezza in pixel e non in percentuale ai div in questione.

Cerca

Cerca

problema nel posizionamento di un div

gandalf1959

Utente Attivo

gandalf1959

Utente Attivo

Discussioni simili