problema impaginazione div e css

**timberwolf** · 09-08-2012, 16:25

ragazzi ho un semplicissimo layout di una pagina web che sto sviluppando, ma non riesco ad allineare i div come vorrei io.. il problema principale consiste nel fatto che il container per qualche motivo che non so, non contiene i div al suo interno ma soltanto l'header e diconseguenza l'impaginazione é sbagliata..

Qui il file css:

codice:

body
{
height: 100%;
width: 100%;
background-color: #FFFFFF;
font: 14px Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 14px;
border-style: solid;
border-width: 1px;
background-color: #FFFFFF;
}

#container
{
float: center;
margin: 20px auto;
width: 1000px;
border-style: solid;
border-width: 1px;
background-color: #FFFFFF;
}

#header{
float: left;
background: url(../logo/logo.png) no-repeat;
height: 150px;
width: 1000px;
border-style:solid;
border-width:1px;
}

#menu_sx{
float: left;
margin-top: 10px;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 10px;
width: 180px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #FFFFFF;
}

#menu_sx ul{
list-style: none;
padding-left: 10px;
}


#page{
float: left;
width: 760px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 0px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #FFFFFF;
padding-left: 30px;
}

#footer
{
float:left;
width: 1000px;
height: 50px;
padding-left: 30px;
margin-left: 20px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #FFFFFF;
}

qui la pagina html

codice:

<?php

include ("include/check_session.php");

?>

<html>

<head>
<title>Amministrazione</title>
<link href="css/css_admin.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="container">

<div id="header"></div>

<div id="menu_sx">

<?php

include("include/menu_admin.html");

?>

</div>

<div id="page">



 CONTENUTO </p>

</div>

</div>

<div id="footer">

FOOTER</p></div>

</body>
</html>

**Vincent.Zeno** · 09-08-2012, 16:28

posta il codice HTML prodotto, quello php non ci interessa

**timberwolf** · 09-08-2012, 17:25

il codice html é quello che ho postato, ci sono solo due include php, ma il codice html é quello.. cmq lo riposto togliendo gli include php

codice:

<html>

<head>
<title>Amministrazione</title>
<link href="css/css_admin.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="container">

<div id="header"></div>

<div id="menu_sx">
<ul>[*]Sez. Articoli[*]Sez. Computer[*]Sez. Generi[*]<a href="#">Sez. Generi Gioco<a>[*]Sez. Libs[*]Sez. Lingue[*]Sez. Manifesto[*]Sez. News[*]Sez. OS[*]Sez. Recensioni[*]Sez. Sw House[*]Sez. Utenti[*]Uscita[/list]
</div>

<div id="page">



 CONTENUTO </p>

</div>

</div>

<div id="footer">

FOOTER</p></div>

</body>
</html>

questo il codice css:

codice:

body
{
height: 100%;
width: 100%;
background-color: #FFFFFF;
font: 14px Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 14px;
border-style: solid;
border-width: 1px;
background-color: #FFFFFF;
}

#container
{
float: center;
margin: 20px auto;
width: 1000px;
border-style: solid;
border-width: 1px;
background-color: #FFFFFF;
}

#header{
float: left;
background: url(../logo/logo.png) no-repeat;
height: 150px;
width: 1000px;
border-style:solid;
border-width:1px;
}

#menu_sx{
float: left;
margin-top: 10px;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 10px;
width: 180px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #FFFFFF;
}

#menu_sx ul{
list-style: none;
padding-left: 10px;
}


#page{
float: left;
width: 760px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 0px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #FFFFFF;
padding-left: 30px;
}

#footer
{
float:left;
width: 1000px;
height: 50px;
padding-left: 30px;
margin-left: 20px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #FFFFFF;
}

**timberwolf** · 09-08-2012, 17:26

questo é cio che esce quando clicco su visualizza sorgente in firefox:

codice:

<html>

<head>
<title>Amministrazione</title>
<link href="css/css_admin.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="container">

<div id="header"></div>

<div id="menu_sx">

<ul>[*]Sez. Articoli[*]Sez. Computer[*]Sez. Generi[*]<a href="#">Sez. Generi Gioco<a>[*]Sez. Libs[*]Sez. Lingue[*]Sez. Manifesto[*]Sez. News[*]Sez. OS[*]Sez. Recensioni[*]Sez. Sw House[*]Sez. Utenti[*]Uscita[/list]
</div>

<div id="page">



 CONTENUTO </p>

</div>

</div>

<div id="footer">

FOOTER</p></div>

</body>
</html>

**Vincent.Zeno** · 09-08-2012, 17:34

a parte l'inesistenza di center come valore per float...
sembra sia il solito problema del contenitore padre che contiene elementi flottati:
in questo caso il padre deve avere una dimensione anche in altezza

sposto su css dove saranno più precisi (dopo che avrò corretto i tag per il codice da PHP a CODE)

edit: inoltre cerca di usare un doctype: almeno così dici al browser che regole seguire

**ac_socmel** · 09-08-2012, 18:35

http://forum.html.it/forum/showthrea...readid=1518106

**timberwolf** · 11-08-2012, 14:21

grazie per le dritte ed i consigli

allora aggiorno il codice postandovi il nuovo e vi aggiorno sulla situazione. Praticamente ho due problemi:

1) tenere la pagina o meglio il contenitore centrato sia su IE9 che sugli altri browser
2) tenere i div float all'interno di un contenitore

Per riuscire a centrare la mia pagina anche su IE9 (perché il problema si presenta solo lì, il classico effetto bandiera, come viene chiamato nel web) ho seguito la guida postata qui ed ho risolto, grazie mille!

Per il secondo problema, succede che per non far scappare i div float all'esterno del contenitore, ho letto varie guide in rete, devo mettere un "float:left" nel div contenitore, solo che questo "trucchetto", funziona perché mi mette i div affiancati e non a capo e soprattutto me li mette all'interno del div contenitore ma va in conflitto con il metodo precedente per centrare la pagina e quindi mi ritrovo con il classico effetto bandiera su tutti i browser... come posso fare?

ecco i codici html e css:

codice:

body
{
background-color: #FFFFFF;
font: 14px Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 14px;
border-style: solid;
border-width: 1px;
background-color: #FFFFFF;
}

img
{
border-style: solid;
border-width: 0px;
}

#container_0		/* PER INTERNET EXPLORER 9 */
{
text-align: center;	/* PER INTERNET EXPLORER 9 */
}

#container
{
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
width: 1000px;
border-style: solid;
border-width: 1px;
background-color: #FFFFFF;
}

#header{
background: url(../logo/logo.png) no-repeat;
height: 150px;
width: 1000px;
border-style:solid;
border-width:1px;
}

#menu_sx{
float: left;
margin-top: 10px;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 10px;
width: 180px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #FFFFFF;
}

#menu_sx ul{
list-style: none;
padding-left: 10px;
}


#page{
float: left;
width: 500px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 0px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #FFFFFF;
padding-left: 30px;
}

pagina html:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Amministrazione</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/css_admin.css" media="screen" />
</head>

<body>

<div id="container_0">

<div id="container">

<div id="header"></div>

<div id="menu_sx">

<?php include("include/menu_admin.html"); ?>

</div> 

<div id="page">

 CONTENUTO </p> </div> 

</div> 

</div> 

</body>
</html>

Discussione: problema impaginazione div e css

Strumenti discussione

Ricerca discussione

Visualizza

problema impaginazione div e css

Permessi di invio