problema nel posizionamento di un div

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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

Utente Attivo
21 Nov 2013
208
1
18
bene, ho risolto dando un'altezza in pixel e non in percentuale ai div in questione.
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Problema nel passare la variabile PHP 0
M Problema inserimento parole con apostrofo nel db PHP 5
A Problema nel passaggio di una animazione da flash a animate Flash 9
fulviozecchin Problema Visualizzazione tabelle HTML nel Browser HTML e CSS 9
giuseppe_123 [WordPress] Problema inserimento widget nel footer WordPress 0
N Problema nel fissare gli oggetti alla pagina in Adobe Muse Mac e Software 5
G [PHP] Problema nel passaggio del valore mese PHP 8
L [WordPress] Problema Javascript nel log del browser WordPress 1
S Problema nel modificare un record PHP 3
L problema nel richiamare gli id HTML e CSS 2
M Problema nel coding PHP 4
P Problema di Undefined variable nel codice PHP PHP 5
Emix Problema nel concatenare jquery ed ajax nella stessa pagina Javascript 15
C Problema: salvare indirizzo file in un database(mancanza delle backslash nel percorso) PHP 13
F Problema con selezione di un file nel database PHP 5
C Problema nel Caricare file e spostarlo con la funzione move_uploaded_file PHP 14
A galleria jquery: problema nel caricamento di una immagine da un'anteprima HTML e CSS 10
S [ACCESS] Problema nel creare le tabelle da codice. MS Access 4
M Problema con disposizioni immagini e testi nel sito HTML e CSS 0
C AJAX FORM MAIL - problema con gli a capo nel messaggio Javascript 0
asevenx problema inserimento database nel sito online MySQL 3
asevenx problema con l'inserimento di un record nel database (caratteri non consentiti) PHP 11
E problema link nel menù XML 0
C Problema con il doppio invio nel form con onsubmit HTML e CSS 9
R Problema nel $_POST di dati per ricerca su DB PHP 12
T Problema nel salvataggio dei dati dopo il form. PHP 7
emanuelevt Problema nel visualizzare l'img dal database mysql PHP 1
S Problema di visualizzazione nel web PHP 6
R problema nel caricare i file sul server Web Server 1
G problema nel pubblicare un file di 10 minuti Flash 7
JellyBelly Problema con xsl con html nel db XML 2
G problema nel pubblicare in html da flash Flash 8
F Problema con scrittura dati nel DB Classic ASP 16
L problema nel ridimensionare un immagine... Classic ASP 2
cosov Problema con numeri nel form Classic ASP 2
lupin3m [help] problema nel controllare il filmato con i simboli Flash 7
I Problema SPAM nel forum Supporto Mr.Webmaster 1
giorgione_tg MySql semplice problema nel creare una tabella... Database 2
F Problema nel posizionare popup... Javascript 3
metalgemini Problema: non mi salva i dati nel db Classic ASP 11
S problema redirect e js nel mio sito Supporto Mr.Webmaster 0
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 0
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7

Discussioni simili