PDA

Visualizza versione completa : [CSS] Problemi con impaginazione


knightOfDoom
13-12-2006, 10.33.25
Buon giorno a tutti quanti voi!!
Ho un problema con l'impaginazione tramite css.

Di seguito vi mostro il mio css:

html,body{
margin: 0;
padding:0
}

body{
font-family: arial,sans-serif;
font-size: 12px;
text-align: center
}

div#footer{
background: #FFFFFF;
text-align: center;
padding: 12em 0 0 0;
}

div#container{
position:relative;
width: 760px;
margin: 0 auto;
text-align: left;
/*border-left: 1px solid #36c;
border-right: 1px solid #36c;*/
border: solid;
border-width: 1px;
border-color: #36c;
background-color: white;
}

/*stili generici, su header e footer*/
div#header{
height: 80px;
background-color:#FFFFFF;
color: #ff0;
text-align: center;
}

div#navigation{
width: 100px;
float: left;
text-align: left;
text-decoration: none;
border-right: 1px solid #36c;
padding: 1 0 1 2em;
}

div#content{
/*margin-right: 13em;
*/padding: 1em;
background-color: #fff
}


/*----------------------------------------------------------------------------*/
/*Stili per la navigazione */
/*----------------------------------------------------------------------------*/
div#navigation ul{
margin: 0 0 20px;
padding: 0;
list-style-type: none
}

div#navigation ul a{
display:block;
width: 90px;
color: #0066CC;
font-weight:bold;
text-decoration: none
}

div#navigation ul a:hover{
background-color: #ffcb31;
color: #0066CC;
display:block;
line-height:14px;
padding-left:5px;
}

div#navigation ul a#activelink{
color: #0066CC;
text-decoration: none
}

quando lo utilizzo in una pagina, di seguito vi mostro un esempio di pagina:
<?php
//attivo la sessione
session_start();
?>

<html>
<head>
<title>LogIn</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

</head>

<body>

<div id = "container">
<div id = "header">

<table border = "0" align="center">
<tr>
<td><img class = "contenitore" src="immagini/banner.jpg"></td>
</tr>
</table>

</div>

<div id="navigation">
<ul>
<li><a id="activelink" href="#">Home</a></li>
<li><a href="#">Pillole</a></li>
<li><a href="#">Contenuti</a></li>
<li><a href="#">Grafica</a></li>
<li><a href="#">Linguaggi</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Contenuti</a></li>
<li><a href="#">Grafica</a></li>
<li><a href="#">Linguaggi</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Software</a></li>
</ul>
</div>

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

<table border = "0" align="center">
<tr>
<td><img class = "contenitore" src="immagini/downpage.jpg"></td>
</tr>
</table>

</div>



</div>

</body>
</html>

Questa mi da problemi in visualizzazione. Ossia:
- In explore funziona tutto alla perfezione l'immagine di testa e quella di piede mi si visualizzano una in cima e l'altra alla fine del documento, mentre in firefox questa mi viene spostata di vianco al menu a meno che non inserisca una serie di <br> nel div content.

- Il bordo della pagina in explore viene visualizzato correttamente, mentre in firefox, viene visualizzato fin sotto alla immagine di testa e poi mi taglia il menu.

ora mi chiedo come mai no funziona, qualcuno mi sa dare una mano??

come faccio a far si che se aggiungo qualche cosa collegamento al menu, anche la pagina e il relativo bordo attorno a tutta la pagina mi viene visualizzato e si allunghi automaticamente..

sperando di essere stato abbastanza chiara ..

ringrazio anticipatamente

knightOfDoom
27-12-2006, 11.49.16
Scusate.. per l'attesa ma il codice questo ..

/*
STILE DEDICATO ALL'IMPAGINAZIONE DELLA PAGINA
PIU I VARI STILI PER LA NAVIGAZIONE
*/

html,body{
margin:0;
padding:0;
}

body{
font: 12px arial,sans-serif;
text-align:center;
}

div#header{
height: 67px;
color: #79B30B;
background-image: url(../immagini/banner.jpg);
}

/*
FORMATAZIONE DI LAYOUT
*/
div#container{
text-align:left;
}

div#navigation{
background: #FFFFFF;
}

div#footer{
height: 25px;
background-image: url(../immagini/downpage.jpg);
}

/*
STILI DI LAYOUT 2 di 2
*/
div#header{
margin-top: 10px;
width : 100%;
}

div#container{
width:750px;
margin:0 auto;
border: solid;
border-width: 1px;
border-color: #36c;
background-color: white;
}

div#content_index{
float:center;
width:750px;
}

div#content{
float:right;
width:570px;
}

div#navigation{
float:left;
width:167px;
padding-left: 5px;
}

div#footer{
clear:both;
width:100%;
margin-bottom: 10px;
}

/*----------------------------------------------------------------------------*/
/*Stili per la navigazione */
/*----------------------------------------------------------------------------*/
div#navigation ul{
margin: 0 0 20px;
list-style-type: none;
padding-left: 5px;
}

div#navigation ul a{
display : block;
width: 155px;
padding-left: 5px;
}

div#navigation ul a:hover{
display : block;
width: 155px;
background-color: #ffcb31;
padding-left: 5px;
border : 1px solid #c00;
}

div#navigation ul a#activelink{
color: #0066CC;
text-decoration: none;
}

.textfot{
font: 9px arial,sans-serif;
background-color: #ffcb31;
text-decoration: none;
color: #0066CC;
float : left;
margin-top : 20px;
margin-bottom: 0px;
margin-left: 0px;
height : auto;
}

con la relativa pagina html

html>

<head>
<title>LogIn</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="template/impaginazione.css">
<link rel="stylesheet" type="text/css" href="template/input.css">
<link rel="stylesheet" type="text/css" href="template/varie.css">

</head>

<body>
<div id="container">
<div id="header">
</div>
<div id="wratter">
<div id="content_index">
</div>
</div>
<div id="footer">
</div>
</div>

</body>
</html>

knightOfDoom
27-12-2006, 11.50.11
Ho risolto con il codice sopra.. =)