Ciao, sto cercando in tutti i modi di allineare due div container all'interno di una pagina, ma non ci riesco.
Come faccio?
Praticamente il secondo container si sovrappone al primo.
Io vorrei una riga di separazione tra i due container e avere il secondo container delle stesse dimensioni e nella stessa posizione del primo....
In più ho notato delle differenze di visualizzazione tra i tre browser: Firefox, Google Chrome e Internet Explorer...
Grazie mille!
CODICE HTML:
<!DOCTYPE html>
<html lang="it-IT">
<head>
<link rel="stylesheet" type="text/css" href="galleria.css" media="screen" />
<meta charset="UTF-8">
<title> Stop alla violenza sulle donne - Home </title>
<meta name="description" content="Associazione Nazionale Volontarie: Stop alla violenza sulle donne, aiuta da anni le donne vittime di violenza e i loro bambini proteggendoli e lottando al loro fianco" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, Javascript">
</head>
<body>
<div id="container">
<div style="float: left;"> <img src="immagini/logo.jpg" width="300" height="147"/> </div>
<div style="float: right"> <img src="immagini/se sei vittima.jpg" width="576" height="147"/> </div>
<div style="clear:both;"> </div>
<div id="menu">
<ul>
<li><a href="sitomio_donne.html">HOME</a><li>
<li><a href="pagina2.html">CHI SIAMO</a><li>
<li><a href="pagina3.html">CENTRI ANTIVIOLENZA</a><li>
<li><a href="pagina4.html">AREA STAMPA</a><li>
<li><a href="pagina5.html">INIZIATIVE</a><li>
<li><a href="donne_galleria.html">GALLERIA</a><li>
<li><a href="donne_contatti.html">CONTATTI</a><li>
</ul>
</div>
<br>
<iframe width="400" height="207" src="https://www.youtube.com/embed/3ecSRnhW19M" frameborder="0" allowfullscreen></iframe>
<div style="float: right"> <h1 style="color: purple;">RICONOSCERE LA VIOLENZA </h1>
<ul>
<li style="color: black;">Se hai vissuto...</li>
<li style="color: black;">Se pensi che un'amica...</li>
<li style="color: black;">Sei sei un operatore...</li>
</ul>
</div>
<br><br>
<div style="float: right;"> <img src="immagini/VIOLENZA.jpg" width="182" height="219"/> </div>
<div style="float: right;"> <img src="immagini/violenza-sulle-donne1.jpg" width="260" height="219"/> </div>
<iframe width="400" height="207" src="https://www.youtube.com/embed/8S9x-3VJWV0" frameborder="0" allowfullscreen></iframe>
<br><br>
<div id="container1">
<div style="float: left;"> <iframe width="333" height="200" src="https://www.youtube.com/embed/7atuHjuBeAA" frameborder="0" allowfullscreen></iframe> </div>
<div style="float: right;"> <iframe width="333" height="200" src="https://www.youtube.com/embed/vCWlbkzwk2Q" frameborder="0" allowfullscreen></iframe> </div>
</div>
<div id="container2"> <h3>
<div class="sin">STOP ALLA VIOLENZA SU DONNE<br>Via Barletta, 102 - 10136 Torino<br>Tel. 011.56.11.20.74<br>Email.stopviolenzadonne@alice.i t </div>
<div class="cen">SOSTIENICI<br>5x1000<br>Dona ora<br>Percorsi </div>
<div class="des">LE NOSTRE SEDI<br>Roma - Via G.Mazzini, 73<br>Verona - Via S.Toscana, 1<br>Napoli - Via Adriano, 80 </div>
</h3>
</div>
</body>
</html>
CODICE CSS:
CSS
@charset "utf-8";
body, html{
height: 100%;
margin: 0;
padding: 0;
}
#container {
width:1152px;
height:864px;
margin: 20px auto 20px auto;
padding:20px;
background: #fdd6d9;
color: #000000;
}
h1 {
color: #000000;
font: 18px Helvetica, Arial, sans-serif;
}
li {color: #FFEAEB;}
@media print {
h1 {color: #000000;}
}
#menu ul {
width:1152px;
padding:0;
margin:0 auto;
display:block;
list-style-type:none;
}
#menu li {
display:inline;
}
#menu a {
color:#fff;
text-align:justify;
text-decoration:none;
background:#a0a0a0;
padding:2px 30px;
border-right:1px solid #ffffff;
}
#menu a:hover {
background:#fdd6d9;
}
#container1 {
width:1152px;
height:864px;
margin: 20px auto 20px auto;
padding:20px;
background: #fdd6d9;
color: #000000;
}
<br><br>
#container2 {
border: 1px solid;
border-color: white;
width: 1152px;
height:150px;
margin: 0 auto;
vertical-align: middle;
background: #fdd6d9;
}
h3 {
text-align: justify;
font-family: 18px Helvetica, Arial, sans-serif;
font-size: normal;
font-style: normal;
}
.sin
{
margin:0%;
padding:0%;
width:30%;
float:left;
background-color: #fdd6d9;
text-align: center;
}
.cen
{
margin:0%;
padding:0%;
width:30%;
background-color: #fdd6d9;
text-align: center;
float:left;
}
.des
{
margin:0%;
padding:0%;
width:30%;
background-color: #fdd6d9;
float: left;
text-align:center;
}
Rispondi quotando