» più di un solo div dentro box

francescone87 · 15-12-09, 18:17

Ciao a tutti.
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 HTML:

<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_handheld.css" media="handheld">

<title>PROG</title>
</head>
<body>
<div id="centra">
    <div class="inizio">
        <div>
            <h1>06 ANTEPRIMA</h1>
            <blockquote>  
                <p class="rientro">
                    Renault Twingo Spclasser<br>
                    BMW Serie 6 Cabrio<br>
                       Maserati Spyder<br>
                    Volkswaveg Bluesport<br>
                    Le altre novita' in <br>
                    arrivo nei prossimi mesi
                </p>
            </blockquote>
        </div>
        <div>
            <h1>14 NEWS</h1>
            <blockquote>  
               <p class="rientro">
                   Premi alla pubblicità Fiat<br>
                   Lamborgini Gallardo  LP-550 2 Balboni <br>
                   Vovlo XC60 R, Mercedes SLS elettrica<br>
                   Volkswaveg Amarok, Audi e Goodwood
               </p>
            </blockquote>
            <img class="rientro" src="..." alt="pagina 22">
        </div>
        <div>
            <h1>22 NOVITA'</h1>
            <blockquote>  
               <p class="rientro">
                   Citroen C3, BMW X1, Jaguar XJ<br>
                   Peugeot 207, Audi A5 Sportback
               </p>
            </blockquote>
            <h1>34 COVER STORY</h1>
            <blockquote>  
               <p class="rientro" >
                  DR5 i-integrale
               </p>
            </blockquote>
            <h1>46 SPECIALE</h1>
            <blockquote>  
               <p class="rientro">
                   Panoramica sulle auto elettriche
               </p>
            </blockquote>
            <img class="rientro" src=".." alt="pagina 46">
        </div>
        <div>
            <h1>54 PRIMO TEST</h1>
            <blockquote>  
               <p class="rientro">
                   Porsche Panamera<br>
                   Lexus IS 250 C<br>
                   BMW X6 M<br>
                   Seat Exeo ST e Ibiza FR<br>
                   Le altre novita' in <br>
                   arrivo nei prossimi mesi
               </p>
            </blockquote>
        </div>
    </div>
    <div class="inizio">
        <div>
            <h1>66 CONFRONTO</h1>
            <blockquote>  
               <p class="rientro">
                   Citroen C3 Picasso, Kia Soul<br>
                   Toyota Urban Cruiser
               </p>
            </blockquote>
            <h1>81 AUTOSPORT</h1>
            <blockquote>  
               <p class="rientro">
                   Ammiraglie in pista<br>
                   nel campionato superstar
               </p>
            </blockquote>
        </div>
        <div>
            <h1>82 PIT STOP</h1>
            <blockquote>  
               <p class="rientro">
                   Cambio gomme<br>
                   sulla Ford Focus Style Wagon
               </p>
            </blockquote>
            <h1>84 VAN E FURGONI</h1>
            <blockquote>  
               <p class="rientro">
                   Mercedes Sprinter NGT
               </p>
            </blockquote>
            <h1>86 DUE RUOTE</h1>
            <blockquote>  
               <p class="rientro">
                   Aprilia Scarabeo
               </p>
            </blockquote>
            <h1>88 HI TECH</h1>
            <blockquote>  
               <p class="rientro">
                   Tom Tom white Pearl, un navigatore<br>
                   satellitare per lo shopping
               </p>
            </blockquote>
            <h1>93 AUDIOVIDEO</h1>
            <blockquote>  
               <p class="rientro">
                   Un Tour europeo rilancia il vclasseo di Madonna<br>
                   satellitare per lo shopping
               </p>
            </blockquote>
            <h1>95 VIDEOGAMES</h1>
            <blockquote>  
               <p class="rientro">
                   Forza Motosport 3 per la nuova Xbox 360
               </p>
            </blockquote>
        </div>
        <div>
            <img class="rientro" src=".." alt="pagina 54">
            <h1>97 GRIFFE</h1>
            <blockquote>  
               <p class="rientro">
                  Collezione Abarth
               </p>
            </blockquote>
            <h1>98 WEEKEND</h1>
            <blockquote>  
               <p class="rientro">
                   Ferragosto in Piemonte, Lazio e Basilicata
               </p>
            </blockquote>
            <h1>100 FARE SPORT</h1>
            <blockquote>  
               <p class="rientro">
                   Tutto ciò che serve per l'escursionismo alpino
               </p>
            </blockquote>
        </div>
        <div>
            <h1>103 I PREZI DELLE AUTO NUOVE</h1>
            <h1>163 I PREZZI DELL'USATO</h1>
        </div>
    </div>
</div>
</body>
</html>

CSS

Codice HTML:

@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:1px solid black;
}

così facendo mi viene un mini box (che non si vede quasi) in alto alla pagina e tutto il contenuto non mi viene incapsulato nei bordi come io vorrei

pgmedia · 28-12-09, 18:25

Ciao,
è il secondo post in 5 minuti a cui dò la stessa risposta

è bastato inserire:

Codice:

    <div style="clear:both"></div>
</div>
</body>
</html>

Prima della chiusura del div contenitore... fammi sapere!

15-12-09, 18:17	#1 (permalink)
francescone87 User Data di registrazione: Sep 2008 Messaggi: 23	più di un solo div dentro box Ciao a tutti. 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 HTML: <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_handheld.css" media="handheld"> <title>PROG</title> </head> <body> <div id="centra"> <div class="inizio"> <div> <h1>06 ANTEPRIMA</h1> <blockquote> <p class="rientro"> Renault Twingo Spclasser<br> BMW Serie 6 Cabrio<br> Maserati Spyder<br> Volkswaveg Bluesport<br> Le altre novita' in <br> arrivo nei prossimi mesi </p> </blockquote> </div> <div> <h1>14 NEWS</h1> <blockquote> <p class="rientro"> Premi alla pubblicità Fiat<br> Lamborgini Gallardo LP-550 2 Balboni <br> Vovlo XC60 R, Mercedes SLS elettrica<br> Volkswaveg Amarok, Audi e Goodwood </p> </blockquote> <img class="rientro" src="..." alt="pagina 22"> </div> <div> <h1>22 NOVITA'</h1> <blockquote> <p class="rientro"> Citroen C3, BMW X1, Jaguar XJ<br> Peugeot 207, Audi A5 Sportback </p> </blockquote> <h1>34 COVER STORY</h1> <blockquote> <p class="rientro" > DR5 i-integrale </p> </blockquote> <h1>46 SPECIALE</h1> <blockquote> <p class="rientro"> Panoramica sulle auto elettriche </p> </blockquote> <img class="rientro" src=".." alt="pagina 46"> </div> <div> <h1>54 PRIMO TEST</h1> <blockquote> <p class="rientro"> Porsche Panamera<br> Lexus IS 250 C<br> BMW X6 M<br> Seat Exeo ST e Ibiza FR<br> Le altre novita' in <br> arrivo nei prossimi mesi </p> </blockquote> </div> </div> <div class="inizio"> <div> <h1>66 CONFRONTO</h1> <blockquote> <p class="rientro"> Citroen C3 Picasso, Kia Soul<br> Toyota Urban Cruiser </p> </blockquote> <h1>81 AUTOSPORT</h1> <blockquote> <p class="rientro"> Ammiraglie in pista<br> nel campionato superstar </p> </blockquote> </div> <div> <h1>82 PIT STOP</h1> <blockquote> <p class="rientro"> Cambio gomme<br> sulla Ford Focus Style Wagon </p> </blockquote> <h1>84 VAN E FURGONI</h1> <blockquote> <p class="rientro"> Mercedes Sprinter NGT </p> </blockquote> <h1>86 DUE RUOTE</h1> <blockquote> <p class="rientro"> Aprilia Scarabeo </p> </blockquote> <h1>88 HI TECH</h1> <blockquote> <p class="rientro"> Tom Tom white Pearl, un navigatore<br> satellitare per lo shopping </p> </blockquote> <h1>93 AUDIOVIDEO</h1> <blockquote> <p class="rientro"> Un Tour europeo rilancia il vclasseo di Madonna<br> satellitare per lo shopping </p> </blockquote> <h1>95 VIDEOGAMES</h1> <blockquote> <p class="rientro"> Forza Motosport 3 per la nuova Xbox 360 </p> </blockquote> </div> <div> <img class="rientro" src=".." alt="pagina 54"> <h1>97 GRIFFE</h1> <blockquote> <p class="rientro"> Collezione Abarth </p> </blockquote> <h1>98 WEEKEND</h1> <blockquote> <p class="rientro"> Ferragosto in Piemonte, Lazio e Basilicata </p> </blockquote> <h1>100 FARE SPORT</h1> <blockquote> <p class="rientro"> Tutto ciò che serve per l'escursionismo alpino </p> </blockquote> </div> <div> <h1>103 I PREZI DELLE AUTO NUOVE</h1> <h1>163 I PREZZI DELL'USATO</h1> </div> </div> </div> </body> </html> CSS Codice HTML: @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:1px solid black; } così facendo mi viene un mini box (che non si vede quasi) in alto alla pagina e tutto il contenuto non mi viene incapsulato nei bordi come io vorrei
	Ultima modifica di francescone87 : 15-12-09 18:19.

28-12-09, 18:25	#2 (permalink)
pgmedia User Data di registrazione: Feb 2009 Ubicazione: Lucca, Toscana Messaggi: 102	Ciao, è il secondo post in 5 minuti a cui dò la stessa risposta è bastato inserire: Codice: <div style="clear:both"></div> </div> </body> </html> Prima della chiusura del div contenitore... fammi sapere!
	__________________ Eventi a Lucca

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email