Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

[CSS] Problemi con impaginazione

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

[CSS] Problemi con impaginazione

Postdi Xavier » 13/12/06 10:39

Buon giorno a tutti quanti voi!!
Ho un problema con l'impaginazione tramite css.

Di seguito vi mostro il mio css:
Codice: Seleziona tutto
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:
Codice: Seleziona tutto
<?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 explorer 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 fianco al menu a meno che non inserisca una serie di <br> nel div content.

- Il bordo della pagina in explorer 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
Ciò che molti non capiscono è una banalità per altri..
----------------------------------------------------------
Siederò sulla sponda del fiume aspettando che passi il tuo cadavere.
Xavier
Utente Junior
 
Post: 55
Iscritto il: 11/08/06 13:53

Sponsor
 

Postdi archimede » 16/12/06 09:44

1) Non riesco a riprodurre i problemi

2) C'è una chiusura div di troppo

3) Non vedo il div content

Meglio controllare accuratamente il codice prima di postarlo.

Alessandro
archimede
Moderatore
 
Post: 2753
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi Xavier » 27/12/06 11:59

Ho risolto tramite questi script
Codice: Seleziona tutto
/*
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
Codice: Seleziona tutto
<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>
Ciò che molti non capiscono è una banalità per altri..
----------------------------------------------------------
Siederò sulla sponda del fiume aspettando che passi il tuo cadavere.
Xavier
Utente Junior
 
Post: 55
Iscritto il: 11/08/06 13:53


Torna a Programmazione


Topic correlati a "[CSS] Problemi con impaginazione":

alcuni problemi...
Autore: gibo
Forum: Assistenza Hardware
Risposte: 2

Chi c’è in linea

Visitano il forum: Nessuno e 8 ospiti