Problema con i div

**francecco** · 24-11-2009, 13:40

ciao a tutti, ho un problema sulla visualizzazione della pagina di cui vi posto sotto il codice

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Language" content="it">
<link rel="stylesheet" type="text/css" href="css/articolo_style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/articolo_print.css" media="print">

<title>ARTICOLO</title>
</head>
<body>
<div id="header">
	<p id="testata"><font class="black">STANNO</font><font class="red">ARRIVANDO</font></p>
</div>
<div id="centra">
	<div class="inizio">
		<div class="boxrosso">
			<h1>
				ALFA ROMEO
			</h1>
			<h2>
				MiTo Multiair
			</h2>
			

prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			</p>
		</div>
		<hr>
		<div class="boxrosso">
			<h1>
				BMW
			</h1>
			<h2>
				Serie 320
			</h2>
			

prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			</p>
		</div>
	</div>
</div>
</body>
</html>

allego anche il file css associato

codice:

html {
	height:100%;
}
img {
	float:left;
	border:none;
	width:80%;
}
h1{
	font-family:Verdana,sans-serif;
	font-size:16px;
	font-weight:800;
	color:white;
	margin-top:auto;
}
h2{
	font-family:Verdana,sans-serif;
	font-size:16px;
	font-weight:800;
	color:black;
	margin-top:auto;
}
#header
{
	margin: 0px auto;
	max-width:780px
}
#testata
{
	font-family:Verdana,sans-serif;
	font-size:34px;
	font-weight:500;
	color:black;
	margin-right:50px;
}
p{
	font-family:verdana,sans-serif;
	font-size:12px;
}
div.inizio
{
	float:left; 
}
div.boxrosso{
	width:200px;
	height:20px;
	background-color:red;
	margin-top:auto;
}
font.black{
	color:black;
	float:left;
	margin-right:100px;
}
font.red{
	color:red;
}
#centra{
	margin-left:auto;
	margin-right:auto;
	max-width:780px;
}

allora io non vorrei che si sovrapponessero i div....vorrei che l'effetto fosse proprio quello visuale che si intuisce dal codice ovvero :

ALFA ROMEO##################
MiTo Multiair

prova testo - prova testo - prova testo
prova testo - prova testo - prova testo
prova testo - prova testo - prova testo
prova testo - prova testo - prova testo
_________________________________

BMW#######################
Serie 320

prova testo - prova testo - prova testo
prova testo - prova testo - prova testo
prova testo - prova testo - prova testo
prova testo - prova testo - prova testo

**albott** · 24-11-2009, 14:04

Ciao..gli ho dato una corretta al volo...cosi su firefox funziona...poi da qui vai avanti

codice:

* {
margin:0;
padding:0;
}
html {
height:100%;
}
img {
border:medium none;
float:left;
width:80%;
}
h1 {
color:white;
font-family:Verdana,sans-serif;
font-size:16px;
font-weight:800;
margin-top:auto;
}
h2 {
color:black;
font-family:Verdana,sans-serif;
font-size:16px;
font-weight:800;
margin-top:10px;
}
#header {
margin:0 auto;
max-width:780px;
}
#testata {
color:black;
font-family:Verdana,sans-serif;
font-size:34px;
font-weight:500;
margin-right:50px;
}
p {
font-family:verdana,sans-serif;
font-size:12px;
}
div.inizio {
float:left;
height:200px;
width:auto;
}
div.boxrosso {
background-color:red;
height:20px;
margin:10px 0 115px;
width:200px;
}
font.black {
color:black;
float:left;
margin-right:100px;
}
font.red {
color:red;
}
#centra {
margin-left:auto;
margin-right:auto;
max-width:780px;
}

**francecco** · 24-11-2009, 15:01

praticamente il codice fondamentale da aggiungere era

codice:

* {
margin:0;
padding:0;
}

**francecco** · 24-11-2009, 15:11

ma sei io volessi un cosice più dinamico che si adatti meglio a contenuti in cascata la soluzione precedente non va bene infatti con questo codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Language" content="it">
<link rel="stylesheet" type="text/css" href="css/articolo_style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/articolo_print.css" media="print">

<title>ARTICOLO</title>
</head>
<body>
<div id="header">
	<p id="testata"><font class="black">STANNO</font><font class="red">ARRIVANDO</font></p>
</div>
<div id="centra">
	<div class="inizio">
		<div class="boxrosso">
			<h1>
				ALFA ROMEO
			</h1>
			<h2>
				MiTo Multiair
			</h2>
			

prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			</p>
			<h2>
				MiTo Multiair
			</h2>
			

prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			</p>

		</div>
		<hr>
		<div class="boxrosso">
			<h1>
				BMW
			</h1>
			<h2>
				Serie 320
			</h2>
			

prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			</p>
		</div>
	</div>
</div>
</body>
</html>

ed il seguente css

codice:

* {
margin:0;
padding:0;
}
html {
height:100%;
}
img {
border:medium none;
float:left;
width:80%;
}
h1 {
color:white;
font-family:Verdana,sans-serif;
font-size:16px;
font-weight:800;
margin-top:auto;
}
h2 {
color:black;
font-family:Verdana,sans-serif;
font-size:16px;
font-weight:800;
margin-top:10px;
}
#header {
margin:0 auto;
max-width:780px;
}
#testata {
color:black;
font-family:Verdana,sans-serif;
font-size:34px;
font-weight:500;
margin-right:50px;
}
p {
font-family:verdana,sans-serif;
font-size:12px;
}
div.inizio {
float:left;
height:200px;
width:auto;
}
div.boxrosso {
background-color:red;
height:20px;
margin:10px 0 115px;
width:200px;
}
font.black {
color:black;
float:left;
margin-right:100px;
}
font.red {
color:red;
}
#centra {
margin-left:auto;
margin-right:auto;
max-width:780px;
}

infatti la prima cosa che mi accorgo al volo è questa : *margin:10px 0 115px;* è statico ed io vorrei che si adattasse anche ad altri contenuti... che siano più grandi o più piccoli di 115 px di altezza

**albott** · 24-11-2009, 15:19

Ciao francesco, si quello è statico...se aspetti un attimo te ne faccio uno dinamico che si adatta al contenuto....

**francecco** · 24-11-2009, 15:31

ce ne fosse di gente gentile come te nei forum....
io forse essendo alle prime armi non conosco qualche scorciatoia di esperienza...

**albott** · 24-11-2009, 15:53

Ecco una bozza funzionante..allora ho modificato sia il css che l'html..quindi guardati le differenze che ci sono...
Ora l'altezza dei box varia a seconda del contenuto (quello prova prova prova ecc...)

Ecco l'html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Language" content="it">
<link rel="stylesheet" type="text/css" href="css.css" media="screen">

<title>ARTICOLO</title>
</head>
<body>
<div id="header">
	<p id="testata"><font class="black">STANNO</font><font class="red">ARRIVANDO</font></p>
</div>
<div id="centra">
	<div class="inizio">
    
    <div class="box">
		<div class="boxrosso">
			<h1>
				ALFA ROMEO
			</h1>
            
        </div>
        
			<h2>
				MiTo Multiair
			</h2>
            
            <div class="content">
			

prova testo - prova testo - prova testo
           	   prova testo - prova testo - prova testo
               prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
               prova testo - prova testo - prova testo
           	   prova testo - prova testo - prova testo
               prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			</p>
            
		</div>
        
     </div>
     
		<hr>
        
        
        
     <div class="box">
		<div class="boxrosso">
			<h1>
				BMW
			</h1>
            
        </div>
        
			<h2>
				Serie 320
			</h2>
            
            <div class="content">
			

prova testo - prova testo - prova testo
           	   prova testo - prova testo - prova testo
               prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
               prova testo - prova testo - prova testo
           	   prova testo - prova testo - prova testo
               prova testo - prova testo - prova testo
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			   prova testo - prova testo - prova testo 
			</p>
            
		</div>
        
     </div>
     
	</div>
</div>
</body>
</html>

Qui il css

codice:

@charset "utf-8";
/* CSS Document */

* {
margin:0;
padding:0;
}

html {
height:100%;
}

img {
border:medium none;
float:left;
width:80%;
}

h1 {
color:white;
font-family:Verdana,sans-serif;
font-size:16px;
font-weight:800;
margin-top:auto;
}

h2 {
color:black;
font-family:Verdana,sans-serif;
font-size:16px;
font-weight:800;
margin:10px 0;
}

hr{
margin:10px 0;	
}

#header {
margin:0 auto;
max-width:780px;
}

#testata {
color:black;
font-family:Verdana,sans-serif;
font-size:34px;
font-weight:500;
margin-right:50px;
}

.content{
	height:auto;
	margin:0 0 10px;
	width:auto;
	
}

.box{
	height:auto;
	width:200px;
}

p {
font-family:verdana,sans-serif;
font-size:12px;
}

div.inizio {
float:left;
height:auto;
width:auto;
}

div.boxrosso {
background-color:red;
height:20px;
width:200px;
}

font.black {
color:black;
float:left;
margin-right:100px;
}

font.red {
color:red;
}

#centra {
margin:0 auto;
max-width:780px;
}

Spero ti sia stato d'aiuto..Ciaooo

**francecco** · 24-11-2009, 17:19

speri bene..... mi sei stato di grande aiuto

ma didatticamente a cosa serve *@charset "utf-8";*

lo devo includere in tutti i miei fogli di stile ?

**albott** · 24-11-2009, 17:59

allora con quella riga di codice indichi al browser i tipi di caratteri che troverà nel css...
è meglio se ce lo metti sempre...tanto che ti costa?

ciaooo

Discussione: Problema con i div

Strumenti discussione

Ricerca discussione

Visualizza

Problema con i div

Permessi di invio