mettere più di un solo div dentro box con bordo

**francecco** · 16-12-2009, 00:56

Ho una pagina con diversi box fatti con div ma che non hanno un border.
Avevo pensato di incapsulare tutto il contenuto della pagina in un div id="centra" che mi centra il contenuto e soprattutto mi mette un bordo esterno a tutto il contenuto. Il codice è il seguente :

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/indice_style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/indice_print.css" media="print">
<link rel="stylesheet" type="text/css" href="css/indice_style.css" media="handheld">

<title>PROGETTO - T.I.A - INDICE</title>
</head>
<body>
<div id="centra">
	<div class="inizio">
		<div>
			<h1><span class="stampainvisibile">06</span> ANTEPRIMA</h1>
			<blockquote>  
				<p class="rientro">
					Renault Twingo Spclasser

				    BMW Serie 6 Cabrio

			   	    Maserati Spyder

				    Volkswaveg Bluesport

					Le altre novita' in 

					arrivo nei prossimi mesi
				</p>
			</blockquote>
		</div>
		<div>
			<h1><span class="stampainvisibile">14</span> NEWS</h1>
			<blockquote>  
			   <p class="rientro">
				   Premi alla pubblicità Fiat

				   Lamborgini Gallardo LP-550 2 Balboni 

				   Vovlo XC60 R, Mercedes SLS elettrica

				   Volkswaveg Amarok, Audi e Goodwood
			   </p>
			</blockquote>
			[img]images/indice/img1.JPG[/img]
		</div>
		<div>
			<h1><span class="stampainvisibile">22</span> NOVITA'</h1>
			<blockquote>  
			   <p class="rientro">
				   Citroen C3, BMW X1, Jaguar XJ

				   Peugeot 207, Audi A5 Sportback
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">34</span> COVER STORY</h1>
			<blockquote>  
			   <p class="rientro" >
				  DR5 i-integrale
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">46</span> SPECIALE</h1>
			<blockquote>  
			   <p class="rientro">
				   Panoramica sulle auto elettriche
			   </p>
			</blockquote>
			[img]images/indice/img2.JPG[/img]
		</div>
		<div>
			<h1><span class="stampainvisibile">54</span> PRIMO TEST</h1>
			<blockquote>  
			   <p class="rientro">
				   Porsche Panamera

				   Lexus IS 250 C

				   BMW X6 M

				   Seat Exeo ST e Ibiza FR

				   Le altre novita' in 

				   arrivo nei prossimi mesi
			   </p>
			</blockquote>
		</div>
	</div>
	<div class="inizio">
		<div>
			<h1><span class="stampainvisibile">66</span> CONFRONTO</h1>
			<blockquote>  
			   <p class="rientro">
				   Citroen C3 Picasso, Kia Soul

				   Toyota Urban Cruiser
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">81</span> AUTOSPORT</h1>
			<blockquote>  
			   <p class="rientro">
				   Ammiraglie in pista

				   nel campionato superstar
			   </p>
			</blockquote>
		</div>
		<div>
			<h1><span class="stampainvisibile">82</span> PIT STOP</h1>
			<blockquote>  
			   <p class="rientro">
				   Cambio gomme

				   sulla Ford Focus Style Wagon
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">84</span> VAN E FURGONI</h1>
			<blockquote>  
			   <p class="rientro">
				   Mercedes Sprinter NGT
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">86</span> DUE RUOTE</h1>
			<blockquote>  
			   <p class="rientro">
				   Aprilia Scarabeo
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">88</span> HI TECH</h1>
			<blockquote>  
			   <p class="rientro">
				   Tom Tom white Pearl, un navigatore

				   satellitare per lo shopping
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">93</span> AUDIOVIDEO</h1>
			<blockquote>  
			   <p class="rientro">
				   Un Tour europeo rilancia il vclasseo di Madonna

				   satellitare per lo shopping
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">95</span> VIDEOGAMES</h1>
			<blockquote>  
			   <p class="rientro">
				   Forza Motosport 3 per la nuova Xbox 360
			   </p>
			</blockquote>
		</div>
		<div>
			[img]images/indice/img3.JPG[/img]
			<h1><span class="stampainvisibile">97</span> GRIFFE</h1>
			<blockquote>  
			   <p class="rientro">
				  Collezione Abarth
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">98</span> WEEKEND</h1>
			<blockquote>  
			   <p class="rientro">
				   Ferragosto in Piemonte, Lazio e Basilicata
			   </p>
			</blockquote>
			<h1><span class="stampainvisibile">100</span> FARE SPORT</h1>
			<blockquote>  
			   <p class="rientro">
				   Tutto ciò che serve per l'escursionismo alpino
			   </p>
			</blockquote>
		</div>
		<div>
			<h1><span class="stampainvisibile">103</span> I PREZI DELLE AUTO NUOVE</h1>
			<h1><span class="stampainvisibile">163</span> I PREZZI DELL'USATO</h1>
		</div>
	</div>
</div>
</body>
</html>

CSS

codice:

@charset "utf-8";
* {
	margin:0;
	padding:0;
}
html {
	height:100%;
}
img {
	border:none;
	width:100%;
}
h1 {
	color:red;
	font-family:Verdana,sans-serif;
	font-size:16px;
	font-weight:800;
	margin-top:10px;
}
p {
	font-family:verdana,sans-serif;
	font-size:12px;
	font-weight:800;
 	text-align:justify;
}
div.inizio {
	float:left;
	height:auto;
	width:auto;
	margin-right:60px;
}
.rientro
{
	margin-left:30px;
}
#centra
{
	margin:0 auto;
	max-width:760px;
	border:4px solid green;
}

a:link
{
	text-decoration: none;
	color:red;
}
a:visited 
{
	color:red;
}
a:active 
{	
	color:red;
}
a:hover 
{
	color:red;
}
.stampainvisibile
{
}

**francecco** · 21-12-2009, 22:58

nessuno nessuno ?

**Mich_** · 22-12-2009, 09:53

Anzitutto noto che ci sono usi non semantici dei tag HTML. Questo normalmente porta problemi nella sistemazione dei CSS.
I <blockquote> non servono per indentare, ne` per spaziare i blocchi: servono per una citazione lunga.

E dalla tua descrizionie non si capisce il problema: spieghi cosa hai fatto, ma non cosa ottieni invece.
Probabilmente per questo nessuno risponde.
E vado alla cieca nella riposta.

Non vedo la formattazione per gli oggetti html e body: se non definisci la loro larghezza, non ha senso centrare un blocco al loro interno.

Prova ad aggiungere in testa al tuo CSS:

codice:

html, body {
  width: 100%;
}

**francecco** · 22-12-2009, 16:08

ciao ho provato a fare i cambiamenti che mi hai detto , aggiundento

Codice PHP:


html, body {   width: 100%; }

e togliendo i blockquote, ma il risultato è rimasto lo stesso....
se non si è capito , vorrei che il div più esterno chiamato "centra racchiuda tutta la pagina con un bordo verde" rimanendo l'allineamento centrato

**Mich_** · 22-12-2009, 16:34

vorrei che il div più esterno chiamato "centra racchiuda tutta la pagina con un bordo verde" rimanendo l'allineamento centrato

Sono tre richieste:
1. il div "centra racchiuda tutta la pagina
2. con bordo verde
3. rimanendo centrato

Con il codice postato riesci gia` ad ottenerne qualcuna?

Per"centrato" intendi solo in orizzontale o vuoi anche la centratura verticale? (il codice cambia molto nei due casi)

**francecco** · 22-12-2009, 16:49

grazie per l'attenzione mich:

ho provato a fare questo cambiamento

codice:

#centra
{
        max-width:760px;
	border:4px solid green;
	position:absolute;
	margin:auto; 
        width:auto;
}

adesso sembra funzionare se non fosse che perdo l'allineamento orizzontale...quello verticale non mi interessa

**Mich_** · 22-12-2009, 17:03

Se usi il posizionamento assoluto i margini non servono.
Ma se non devi centrare in vert, non ti serve dare posizionamento assoluto (che ha delle controindicazioni notevoli).
Comunque ci sono due metodi base per centrare: una con i margini automatici ed una con i posizionamenti assoluti.

Per centrare con i margini si fa:

codice:

html, body {
  width: 100%;
  text-align: center;    /* se si vuole che funzioni anche in IE quirks mode */
}
#centra {
  margin: 0 auto;
  text-align: left;      /* per controbilanciare quello fuori */
  background: blue;    /* o il colore che vuoi - solo per le prove */
}

Poi puoi aggiungere anche i bordi, ma quelli escono oltre la larghezza del #centra (nei browser standard), per cui devi avere gli 8 px di spazio orizz. in piu`, se vuoi mettere bordi di 4 px.

Ma ti consiglio di fare un passo alla volta.
Ho inserito uno sfondo, che serve solo per vedere se effettivamente il #centra sta in centro al body.

**francecco** · 22-12-2009, 17:35

così facendo ho aggiunto lo sfondo blu ma mi centra tutto a sx..

codice:

@charset "utf-8";
* {
	margin:0;
	padding:0;
}
body,html{
	height:100%;
	width: 100%; 
	text-align: center;    /* se si vuole che funzioni anche in IE quirks mode */

}
img {
	border:none;
	width:100%;
}
h1 {
	color:red;
	font-family:Verdana,sans-serif;
	font-size:16px;
	font-weight:800;
	margin-top:10px;
}
p {
	font-family:verdana,sans-serif;
	font-size:12px;
	font-weight:800;
 	text-align:justify;
}
div.inizio {
	float:left;
	height:auto;
	width:auto;
	margin-right:60px;
}
.rientro
{
	margin-left:30px;
}
#centra
{    
	border:4px solid green;
	position:absolute;
    margin: 0 auto;
    text-align: left;      /* per controbilanciare quello fuori */
    background: blue;    /* o il colore che vuoi - solo per le prove */
}

a:link
{
	text-decoration: none;
	color:red;
}
a:visited 
{
	color:red;
}
a:active 
{	
	color:red;
}
a:hover 
{
	color:red;
}
.stampainvisibile
{
}

se tolgo il position:absolute mi centra nel centro ma perdo il riquadro e lo sfondo blu, sto provando con firefox 3.5

**Mich_** · 22-12-2009, 18:07

Non devi usare i posizionamenti. L'alternativa e` cambiare modo di allineare/centrare, ma non credo che hai una dimestichezza sufficiente con i CSS per buttarti in una delle cose piu` complesse che ci sono (con vari effetti collaterali).

se tolgo il position:absolute mi centra nel centro ma perdo il riquadro e lo sfondo blu, sto provando con firefox 3.5

Allora potrebbe essere un problema di clear.
Prova ad aggiungere, subito prima del </div> del blocco #centra:

codice:

<div class="clear1"> &amp;nbsp; </div>

E nel CSS:
.clear1 {
  clear: both;
  width: 100%;
  height: 2px;
  color: red;
  line-height: 1px;   /* questo serve solo per correggere un baco di IE */
}

Dovrebbe metterti una riga rossa, ma dovrebbe anche far espandere il div in tutta la sua lunghezza.

Se funziona, puoi togliere il colore, e anche usare quanto consigliato in questo thread: [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float; ma prima occorre verificare che sia quello il problema, e il codice di cui sopra serve proprio per tale verifica

**francecco** · 22-12-2009, 18:31

ho fatto come hai detto ma non vedo ne la riga rossa ne qualche miglioramento...rmane centrato tutto a sx....il codice quindi rimane uguale a quello prima con solo la modifica che mi hai detto

Discussione: mettere più di un solo div dentro box con bordo

Strumenti discussione

Ricerca discussione

Visualizza

mettere più di un solo div dentro box con bordo

Permessi di invio