[FIREFOX] Non mi centra gli elementi con il foglio di style

**dies** · 23-10-2005, 20:29

Ciao raga,

come da topic

questo è il foglio di stile

Codice PHP:


    <style type="text/css">

        html,body{

            margin:0;

            padding:0;

            text-align:center;

        }

        body{background: #fff url(./image/bgb.jpg) fixed repeat-x top;text-align:center}

        #container {

            text-align:center;

            width: 760px;

            \width: 780px;

            w\idth: 760px;

            margin: 0px 0px;

            padding: 0px 0px;

        }



        #content {

            text-align:center;

            padding: 0px 0px;



        }



        #footer {

            text-align:center;

            clear: both;

            padding: 5px;

            margin: 0px 0px;

        }

        a:link {

        font:bold 12px Georgia, Times, serif, Verdana;

        color: #990000;

        text-decoration: none;

        }



        a:visited{

        font:bold 12px Georgia, Times, serif, Verdana;

        color: #990000;

        text-decoration: none;

        }

        a:hover {

        font:bold 12px Georgia, Times, serif, Verdana;

        color: #000000;

        text-decoration: none;

        }

    </style>

con firefox gli elementi della pagina non sono allineati centralmente

aiuto

dies

**LuigiNasto** · 23-10-2005, 23:13

Ciao,

hai provato ad impostare in #container

margin: auto;
position: relative;

Non vorrei averti detto una stupidaggine, ma ho avuto un problema simile al tue 2 giorni fa e con queste impostazione mi centra gli elementi sia con FireFox che con Explorer ed Opera.

Fammi sapere!

Luigi

**webus** · 24-10-2005, 00:53

dies,
non avendo visto la pagina non so di preciso che elementi vuoi centrare. Assumo comunque si tratti di elenti block, come div, table etc.

Fai attenzione che text-align:center si riferisce UNICAMENTE ad elementi inline (come testo e immagini), NON ad elementi block.

Se tu vedi gli elementi centrati con Explorer è perchè Explorer ha una interpretazione INCORRETTA dell'attributo.

Il modo giusto per centrare gli elementi block sarebbe, come ha già indicato anche Luigi, usare il margin: auto, che però, sfortunatamente, Explorer non supporta(!).

Il workaround quindi è:

body {
text-align: center /* centriamo gli elementi block per Explorer */
}

#container {
margin: 0 auto; /* centriamo i block per gli standard compliant */
text-align:left; /* riallineiamo tutto a sinistra */
width: 728px;
}

<body>
<div id="container">
tutta la pagina qui dentro
...
</div>
</body>

ciao!
}

**dies** · 31-10-2005, 21:42

ragazzi ho provato i vostri suggerimenti.... ma non FF non vuole centrare gli elementi.

ecco il codice intero... vi prego datemi un calcio in culo.. che non sto più uscendo...

VVoVe:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>



<head>

<title>Tabella a righe alterne con classi</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<meta name="generator" content="HAPedit 3.0">

<style type="text/css">



body{font-family: arial,sans-serif; font-size:10px; text-align: center /* centriamo gli elementi block per Explorer */ }

table{width:75%; margin-bottom: 20px;border: 1px solid #999;border-collapse: collapse}

tfoot td,thead th{background-color: #cff}

table td{padding: 2px 5px;border:1px solid #999}

table.righealterne td{border-width: 0 1px}

table.colonnealterne td{border-width: 1px 0}

table.righealterne tr.alterna td{background-color: #eee}

table.colonnealterne td.alterna{background-color: #eee}



/*body{font-family: arial,sans-serif}

/*table{border: 1px solid #ccc;border-collapse: collapse;margin-bottom: 30px}

/*td{padding: 2px 5px}

/*tfoot td,thead th{background-color: #cff}

/*table.righealterne tr.alterna td{background-color: #ffc}*/



#container { 

margin: 0 auto; /* centriamo i block per gli standard compliant */ 

text-align:center; /* riallineiamo tutto a sinistra */ 

} 



a{color:#000080}



</style>

<script type="text/javascript">

onload=ColoraRighe;



function ColoraRighe(){

var tabelle=document.getElementsByTagName("table");

for(i=0;i<tabelle.length;i++){

    if(tabelle[i].className.indexOf("righealterne")>=0){

        trs=tabelle[i].tBodies[0].rows;

        for(j=1;j<trs.length;j+=2)

            trs[j].className="alterna";

        }

    }

}

</script>

</head>

<body>

<div id="container">

<table class="righealterne">

  <caption></caption>

  <thead> 

  <tr> 

    <th>[img]./image/ita.gif[/img]</th>

    <th>[img]./image/eng.gif[/img]</th>

    <th>[img]image/fra.gif[/img]</th>

    <th>[img]./image/esp.gif[/img]</th>

    <th>[img]./image/dutch.gif[/img]</th>

    <th></th>

  </tr>

  </thead> <tfoot> 

  <tr> 

    <td>Footer 1</td>

    <td>Footer 2</td>

    <td>Footer 3</td>

    <td>Footer 4</td>

    <td>Footer 5</td>

    <td>Footer 6</td>

  </tr>

  </tfoot> <tbody> 

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

   <tr> 

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  </tbody> 

</table>

</div>

</body>

</html>

grazie

dies

**edy72** · 31-10-2005, 22:39

credo che nel tuo caso la soluzione più semplice sia specificare una larghezza per #container:

codice:

#container {width: 75%;
margin: 0 auto; 
/* centriamo i block per gli standard compliant */ 
text-align:left; 
/* riallineiamo tutto a sinistra */ 
}

e poi re-impostare la larghezza della tabella al 100% altrimenti ti verrebbe troppo stretta:

codice:

table{width:100%;
 margin-bottom: 20px;
border: 1px solid #999;
border-collapse: collapse}

ciao!!

**dies** · 01-11-2005, 12:50

ok, grazie mille edy72

grazie a te ho capito il suggerimento che mi aveva dato webus.

alla prox

dies

Discussione: [FIREFOX] Non mi centra gli elementi con il foglio di style

Strumenti discussione

Ricerca discussione

Visualizza

[FIREFOX] Non mi centra gli elementi con il foglio di style

larghezza container

Permessi di invio