Problema con DIV uno sotto l'altro

**dyd87** · 15-04-2012, 15:26

Salve ragazzi

Ho un problema con la disposizione dei div di questo sito: http://testarea.freehostingcloud.com/

Questo è il mio CSS:

codice:

root { 
    display: block;
}

body{
    margin: 0 0 0 0;
    background-image:url("../Immagini/sfondo2.png");
    font-family:Arial;
}

#wrapper{
    margin-right: auto;
    margin-left:auto;
    margin-top:0px;
    height: 100%;
    width: 792px;
    background-color:red;
}

#header{
    height: 234px;
    width: 792px;
    background-image:url("../Immagini/logo.png");
}

#menu
{
    height: 20px;
    width:792px;
    margin-bottom: 10px;
}

#slideshow{
    height: 200px;
    width: 792px;
    margin-top:0px;
}

#content{
    padding-top:5px;
    height: auto;
    width: 792px;
    margin-top:0px;

}

h1{
    color: #9a6219;
    font-family: Arial;
}

#footer
{
    height: 50px;
    width: 792px;
    background-color:blue;

}

li{
    list-style-type: none;
    float:left;
    margin-right:20px;
    vertical-align:middle;
    color: #9a6219;
}

#contacts{
    text-align:right;
    float:right;
    margin-right: 5px;
}

ul{
    padding-left:0px;
}

a{
    text-decoration:none;
    font-family: Arial;
    color: #9a6219;
}

a:hover{
    color:#461c00;
}


/* Css SLIDESHOW */

img.slide{
	display:none;
	border:0;
	height:200px;
	width:792px;
	top:0;
	left:0;
	margin:0px auto;
}

/* Form contatti */

/* form 3 */

	#form3{
		margin:1em 0;
                margin-top:0px;
/*		background:url(../Immagini/formcontatti/form_bg.jpg) no-repeat 0 0;*/
		width:542px;
		height:364px; /* fixed size (envelope graphic) */
		overflow:hidden;
		}
	#form3 h3{display:none;}
	#form3 fieldset{
		margin:0;
		padding:0;
		border:none;
		float:left;
		display:inline;
		width:200px;
		margin-left:34px;
		padding-top:80px;
		}
	#form3 fieldset.last{
		width:254px;
		margin-left:17px;
		}
	#form3 legend{display:none;}
	#form3 p{margin:.5em 0;}
	#form3 label{display:block;}
	#form3 input, #form3 textarea{
		width:192px;
		border:1px solid #ddd;
/*		background:#fff url(../Immagini/formcontatti/form_input.gif) repeat-x;*/
		padding:3px;
		}
	#form3 textarea{
		width:246px;
		height:200px;
		overflow:auto;
		}
	#form3 p.submit{
		margin:0 34px;
		clear:both;
		position:relative;
		}
	#form3 button{
		padding:0;
		position:absolute;
		left:0;
		top:-3.5em;
		width:95px;
		height:36px;
		text-indent:-8000px;
		overflow:hidden;
		border:none;
		background:url(../Immagini/formcontatti/form_button.gif) no-repeat 0 0;
		color:#fff;
		cursor:pointer;
		}

/* // form 3 */

E questa la index:

codice:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" href="css/style.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

        <script type="text/javascript" src="js/slideS.js"></script>

        <script src="galleria/galleria-1.2.7.min.js"></script>
        <link type="text/css" rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
        <script type="text/javascript" src="galleria/themes/classic/galleria.classic.min.js"></script>

        <link href="css/adipoli.css" rel="stylesheet" type="text/css"/>

        <script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

        <title>Equus</title>
    </head>
    <body>
        <div id="contacts">

            [img]Immagini/fb.png[/img][img]Immagini/skype.png[/img][img]Immagini/mail.png[/img]
            <script>
                //                $('#fb').adipoli({
                //                    'startEffect' : 'normal',
                //                    'hoverEffect' : 'popout',
                //                    'popOutShadow': 0
                //                });
            </script>
        </div>
        <div id="wrapper">

            <div id="header">
            </div>
            <div id="menu">
                <ul>[*]HOME[*][img]Immagini/cavallo.png[/img][*]I CAVALLI[*][img]Immagini/cavallo.png[/img][*]GUESTBOOK[*][img]Immagini/cavallo.png[/img][*]GALLERIA[*][img]Immagini/cavallo.png[/img][*]CHI SIAMO[*][img]Immagini/cavallo.png[/img][*]CONTATTI[/list]
            </div>
            <div style="text-align:center;margin-bottom:5px">[img]Immagini/linea.png[/img]</div>
            <div id="slideshow">
                <?php foreach (glob("gallery/*.jpg") as $filename) {
                ?>
                    [img]gallery/<?php echo basename($filename); ?>[/img]
                <?php
                }
                ?>
            </div>
            <div style="text-align:center;margin-top:5px;margin-bottom:5px">[img]Immagini/linea.png[/img]</div>
            <div id="content">

                <?php
                if (isset($_GET['page'])) {

                    $page = $_GET['page'];

                    if (file_exists('' . $page . '.php')) {
                        include('' . $page . '.php');
                    } else {
                        echo "Quello che stavi cercando non si trova qui!";
                    }
                }
                ?>

            </div>
            <div id="footer">

            </div>
        </div>
    </body>
</html>

Come si vede, ho evidenziato il mio div contenitore (Wrapper) in rosso.
La mia pagina prevede quel contenitore centrale con all'interno tutti gli altri. Il problema è che il div content rispetta lo stile del wrapper, rimanendo al centro, ma sembra "esterno" a quest'ultimo (si noti anche il footer fuori dal wrapper, evidenziato in blu).
Cosa potrebbe essere?

Nella pagina "Galleria" ho inserito una gallery in jquery ma non credo possa esser quello a dare problemi, visto che lo fa con qualunque altra pagina.

Il problema sorge quando inserisco form, div o strutture "block", invece del classico testo ("inline").

Grazie mille

**dyd87** · 15-04-2012, 16:09

Ho tolto le proprietà "position" da Slideshow e img.slide, anche perchè erano inutili.
Il problema persiste però.

**Prill** · 15-04-2012, 16:13

Hai dei float, hai provato a fare un clear dopo gli elementi flottanti?

**dyd87** · 15-04-2012, 16:18

Originariamente inviato da Prill
Hai dei float, hai provato a fare un clear dopo gli elementi flottanti?

Dove dovrei farlo precisamente?
Ho comunque tolto gli elementi floattanti per fare una prova e la situazione è la stessa.

**Prill** · 15-04-2012, 16:24

Il menu e il div contacts nella tua pagina hanno un float, dopo di essi dovresti interromperlo. Puoi mettere on line la pagina semplificata così da vedere il problema su un codice ristretto?

**dyd87** · 15-04-2012, 16:41

Originariamente inviato da Prill
Il menu e il div contacts nella tua pagina hanno un float, dopo di essi dovresti interromperlo. Puoi mettere on line la pagina semplificata così da vedere il problema su un codice ristretto?

Quindi la "clear:both" direttamente nei div subito dopo quelli da te indicati?

**Prill** · 15-04-2012, 16:44

Sì, prova

**dyd87** · 15-04-2012, 16:50

Originariamente inviato da Prill
Sì, prova

Fatto, non cambia nulla (giusto la posizione dei contatti in alto): http://testarea.freehostingcloud.com/index.php

EDIT: Se vedi, andando su Contatti fa la stessa cosa.

Comunque una versione più semplificata non c'è, ti copio la index con alcune cose tolte:

codice:

<body>
        <div id="contacts">

            [img]Immagini/fb.png[/img][img]Immagini/skype.png[/img][img]Immagini/mail.png[/img]
            <script>
                //                $('#fb').adipoli({
                //                    'startEffect' : 'normal',
                //                    'hoverEffect' : 'popout',
                //                    'popOutShadow': 0
                //                });
            </script>
        </div>
        <div id="wrapper">

            <div id="header">
            </div>
            <div id="menu">
                <ul>[*]HOME[*][img]Immagini/cavallo.png[/img][*]I CAVALLI[*][img]Immagini/cavallo.png[/img][*]GUESTBOOK[*][img]Immagini/cavallo.png[/img][*]GALLERIA[*][img]Immagini/cavallo.png[/img][*]CHI SIAMO[*][img]Immagini/cavallo.png[/img][*]CONTATTI[/list]
            </div>
            <div style="text-align:center;margin-bottom:5px;clear:both">[img]Immagini/linea.png[/img]</div>
            <div id="slideshow">
                <?php foreach (glob("gallery/*.jpg") as $filename) {
                ?>
                    [img]gallery/<?php echo basename($filename); ?>[/img]
                <?php
                }
                ?>
            </div>
            <div style="text-align:center;margin-top:5px;margin-bottom:5px">[img]Immagini/linea.png[/img]</div>
            <div id="content">

                /*CODICE PHP PER INSERIRE LA PAGINA*/

            </div>
            <div id="footer">

            </div>
        </div>

    </body>
</html>

Ho messo il clear:both nel Wrapper e nel DIV subito dopo il menù.

**dyd87** · 15-04-2012, 17:18

Dovrei ottenere una cosa del genere, con al posto di "pagina" Contatti o Galleria o ecc..ecc...
Pensavo fosse facile da ottenere.

**Prill** · 15-04-2012, 17:35

Ho copiato e incollato il codice dalla tua pagina, semplicemente messo un Doctype completo e il wrapper va a terminare giusto dopo il footer. Temo di non aver capito qual è il problema che lamentavi. Fra l'altro tu hai un'altezza del 100% sul wrapper, di cui il browser non può tener conto se non la imposti anche su html e body

Discussione: Problema con DIV uno sotto l'altro

Strumenti discussione

Ricerca discussione

Visualizza

Problema con DIV uno sotto l'altro

Permessi di invio