eliminare spazio vuoto tra due <div>

24-11-2011, 18.26.53

Ciao a tutti...
sono alle prime armi e sto cercando di creare un sito sempli però ho un problema.
guardate qua: http://www.crescendofansub.altervista.org/
come faccio ad eliminare quegli spazi vuoti???
Ho usato questi codici... c'è qualcosa da aggiungere ai CSS???
Vi ringrazio in anticipo

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Crescendo</title>

<style type="text/css">



html,body{

    margin:0; 

    padding: 0;

    height: 100%;

    text-align:center

}

 div#container{

     position: relative; 

     height:100%;

}



 div#head{



}

 div#content{

     text-align:left;

     margin: auto;



}

 div#footer{

     position:absolute;

     bottom: 10;

     width: 100%;

} 



</style>

</head>



<body class="crescendo" background="Immagini/Sfondo.png">

    <div id="container" style="width:900">

        <div id="head" style="width:900">

        <img src="Immagini/headp.png" vspace="20"  />

        </div>        

        <div id="content" style="width:900px">

            <div id="top">    

            <img src="Immagini/top.png" />

            </div>

            <div id"sinistra" style="width:700px; background:url(Immagini/sinistra.png)">

                <p> prova <br /> provaprova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br />prova <br /></p>

            </div>

            <div id="footer">

                <img src="Immagini/foot.png" />

            </div>

        </div>

    </div>

</body>

</html>

**karl94** · 24-11-2011, 19.07.52

Se ciò che ti serve è un riquadro con gli angoli arrotondati, non usare queste tecniche antiquate, ma usa la proprietà CSS3 border-radius.

24-11-2011, 19.56.51

e questo come risolverebbe il problema???

**radiodelmomento** · 24-11-2011, 21.10.38

Originalmente inviato da crescendofansub

e questo come risolverebbe il problema?

Ti stava dando un consiglio.
Comunque il div serve a fare spazio tra due testi. Se non vuoi mandare a capo il testo allora utilizza span.

Originalmente inviato da HTML.it

Il tag (elemento) <div> è usato per definire una sezione del documento. Non ha nessuna funzione di formattazione sul testo. è invece una specie di contenitore per gli altri elementi (titoli, paragrafi, immagini):

Ciao!

24-11-2011, 22.28.16

Ma sono io che non mi so spiegare???
vedete quel coso arancione coi bordi bianchi???
è diviso in tre parti con uno spazio in mezzo... come si elimina questo spazio???

**karl94** · 24-11-2011, 22.48.31

La soluzione che ti ho proposto risolve il problema, elimina inoltre tutti quei div inutili e rende il codice molto più pulito e leggibile, nonché semanticamente corretto:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT">
	<head>
		<title>Crescendo</title>
		<style type="text/css">
			html, body{
				margin: 0; 
				padding: 0;
				background-image: url(Immagini/Sfondo.png);
			}
			
			#container{
				width: 900px;
				margin: 0 auto;
			}
			
			#sinistra{
				width: 700px;
			}
			
			#head{
				text-align: center;
			}
			
			#content{
				background-color: #FABB8E;
				border-radius: 20px;
				border: 10px solid #FFF;
			}
		</style>
	</head>
	<body class="crescendo">
			<div id="container">
					<div id="head">
						<img src="Immagini/headp.png" alt="" />
					</div>
					<div id="content">
							<div id="sinistra">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut suscipit nisi. Morbi feugiat lobortis elit, vel scelerisque est euismod at. Pellentesque condimentum libero ut augue accumsan non tincidunt elit facilisis. Maecenas iaculis feugiat arcu id ultrices. Praesent blandit elit quis ipsum rutrum sagittis bibendum leo mattis. Nam condimentum ante in lorem iaculis laoreet. Integer at velit nulla, quis malesuada diam. Nam non enim vel velit bibendum suscipit sit amet vitae nisi. Nunc mollis arcu quis enim aliquet ultrices posuere eu neque. Fusce mollis lobortis nibh, at laoreet purus hendrerit a. Duis lectus nibh, pharetra sit amet faucibus ac, venenatis vitae dolor. Morbi vehicula, eros et tempus imperdiet, risus augue elementum ante, sit amet rutrum eros ligula eget ligula. Phasellus tincidunt, velit sed vestibulum feugiat, enim leo dignissim est, ut sollicitudin neque arcu vitae dolor. Etiam non enim sit amet arcu rutrum adipiscing. In placerat varius elit, eu pretium purus sodales non. Etiam sollicitudin enim nec risus volutpat non congue turpis dapibus.</p>
									<p>Praesent tempus faucibus nulla et mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat augue vitae nunc pretium et tincidunt ligula consequat. Aliquam metus tortor, iaculis et porttitor eget, malesuada nec lectus. Curabitur auctor, quam nec suscipit dapibus, felis massa tempus mauris, et ornare diam velit a diam. Aenean commodo rutrum leo a pellentesque. In condimentum erat sit amet tortor volutpat commodo. Quisque consectetur vestibulum arcu eget ullamcorper. In accumsan bibendum mi non facilisis. Proin sed lacus orci, sed interdum est. Aenean feugiat, est vitae placerat suscipit, lacus purus porta libero, sed porta elit erat sed justo. Quisque at eleifend ipsum. Phasellus auctor pharetra magna et sollicitudin. Fusce nisl lorem, mattis vitae condimentum in, interdum fermentum purus.</p>
									<p>Suspendisse potenti. Nunc eget aliquet mauris. Sed ac metus justo, et molestie turpis. Nulla sed elit ac nisl vulputate sollicitudin eget a metus. Donec a venenatis eros. Praesent rutrum, mauris ac vulputate gravida, velit metus hendrerit lectus, vitae fringilla dolor risus adipiscing libero. Cras ut pharetra mi. Morbi ultricies adipiscing sapien vitae hendrerit. Nullam mollis, massa sed porttitor sodales, massa lectus blandit tortor, aliquam malesuada mauris ipsum at risus. Ut est orci, viverra a hendrerit in, ornare quis odio.</p>
									<p>Donec dui dui, fringilla semper sagittis quis, lobortis non mi. Sed tempus porttitor est, auctor tincidunt neque accumsan nec. Donec a nisl nunc. Integer pulvinar risus sit amet massa aliquet suscipit. Sed dignissim, leo vitae ultricies facilisis, magna felis dapibus orci, vitae aliquam sem leo dapibus nisl. Proin neque diam, aliquam sed adipiscing at, ornare rutrum diam. Sed turpis massa, pretium ac egestas quis, iaculis nec dui. Pellentesque aliquet dolor at lacus scelerisque mollis. Aliquam consequat ligula non enim dignissim blandit. Suspendisse aliquam dignissim libero, ut sagittis nibh tincidunt sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dictum tristique luctus.</p>
							</div>
					</div>
			</div>
	</body>
</html>

25-11-2011, 14.55.21

Grazie Karl...
comunque scusa ma fino ad adesso ho usato solo i codici HTML e mettevo tutto con posizione assoluta e le distanze con i pixel... solo adesso sto cominciando ad usare i CSS...
comunque non mi è ancora chiaro cosa c'entri lo span...
Inoltre questa è solo una prova... poi dovrei fare due colonne divise di due colori diversi... posso usare lo stesso metodo???

**karl94** · 25-11-2011, 16.19.52

Se ti serve qualche guida qui ne trovi alcune: http://forum.it.altervista.org/html-...-iniziare.html

25-11-2011, 20.12.14

Ok... grazie per l'aiuto...
ho provato a fare anche la seconda colonna ed è andato tutto bene

Discussione: eliminare spazio vuoto tra due <div>

LinkBack

Strumenti discussione

Display

eliminare spazio vuoto tra due <div>

Regole di scrittura