problema con i css e layout

salve ho un problema con i css ho creato, un layout a tre colonne però mi si visualizza uno scrollbar in automatico che vorrei levare e la pagina non occupa tutto lo schermo,n.b. io ho una risoluzione schermo di 1024x860

inviato 8 anni fa
mela
mela
1
X 0 X

1 - scrollbar orizzontale o verticale?

2 - IE o Firefox?

3 - puoi postare il css e la pagina?

risposto 8 anni fa
LonelyWolf
X 0 X

è orizzontale credo di aver trovato l'errore riguardante lo scrollbar si trova nel css, perciò ti posto quello va bene?

eccolo:

*stili per il layout fisso con altezza minima*/ html, body{margin: 0;padding:0;height:100%;}

body{font-family: arial,sans-serif;font-size: 76%;text-align: center;

background-color:yellow;}

div#extra{position: absolute; top: 80px; right: 0;

    width: 200px;\width:300px;w\idth:170px;padding: 60em 5px}

div#content{margin:0 auto;padding: 1em 20px;

     background-color: #00ff33; color: #000;text-align:center}

div#footer{text-align:center; padding: 20px 0;

    background-color: #ff6600; color: #000}

    background-color: #00ff33; color: #000;text-align:center;}

/*stili generici, su header e footer*/

div#header{background-color:#C36;color: #ff0000}

h1, h2{margin: 0;padding:0}

h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}

h2{color: #0033ff; font-size: 1.5em}

div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/

div#navigation{background-color:#ff33ff}

div#content{padding: 1em 1em 5em}

/*stili per la navigazione*/

div#navigation ul{margin: 0;padding: 0; list-style-type: none;}

div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/

div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}

div#navigation a:hover{color: #fff;text-decoration: underline}

div#navigation a#activelink{color: #033;text-decoration: none}

risposto 8 anni fa
mela
mela
1
X 0 X

La scrollbar non è un errore, semplicemente il contenuto va oltre le dimensioni disponibili quindi il browser ce la mette.

Per ovviare a questo "problema" bisogna controllare i contenuti e non sempre è possibile.

Dal css comunque non capisco dove stanno le 3 colonne e soprattutto è incasinato e sicuramente non viene interpretato correttamente: dichiari più volte lo stesso elemento con proprietà differenti.

risposto 8 anni fa
LonelyWolf
X 0 X

ok ti metto anche la pagina web:

<html>

<head>

<title>Layout a due colonne con float</title>

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

</head>

<body>

<div id="container">

    <div id="header">

        <h1>CORSO WEB-DEVELOPER ANNO 2007-2009</h1>

         <h2> in collaborazione con l'assori e la knowk s.r.l.

    </div>

    <div id="navigation">

        <ul>

            <li><a href="#">HOME</a></li>

            <li><a href="#">NEWS </a></li>

        </ul>

    </div>

    <div id="content">

        <h2>MATERIE CORSO WEB-DEVELOPER</h2>

        <p>Il corso della durata di due anni ha previsto le seguenti materie:<br>

        html, css, flash mx,  dreamweaver mx, fireworxs mx, mysql, php,<br>

        apache,javascript, e xml, inglese, cultura d'impresa,<br>

        <em>cultura dell' ambiente</em> i moduli per la patente europea, iis.</p>

        <p>Ora vedremo per sommi capi, come è stata progettata questa pagina web:</p>

        <p>Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti.

        Strutturare logicamente i contenuti di una pagina, creare un template (modello)

        e pensare che tutti i contenuti di un sito saranno facilmente inseribili da subito

        e in futuri aggiornamenti e mantenimenti del sito, è una fase fondamentale.

        Vediamo le principali sezioni logiche di un sito web:</p>

        <ul>

       <p><li>L' header (testata)</li><br>

       <li>La navigazione (menù)</li><br>

       <li>Il footer (pie' di pagina)</li><br>

      <li>La sezione extra (sottesa o assente)</li><br>

      </ul>

        </p>

    </div>

    <div id="footer"> sito ideato da: Mazziotti Alessandra <a href="mailto:web.mazziotti@assori.it">

   Contattami

 </a>

   </div>

</div>

</body>

</html>

a me come visualizzazione finale nn mi sebra tanto incasinata. vedi se adesso puoi capirci di più

risposto 8 anni fa
mela
mela
1
X 0 X

Ho potuto vederla solo ora, il mio schermo è 1024 x 768.

Cosa si vede:

I colori con IE sono diversi rispetto a firefox.

L'unica barra di scorrimento che vedo la mette IE per il verticale, firefox nulla, ma questo lo sanno tutti (forse IE 7 l'ha risolto)

Con IE i caratteri sono più grandi rispetto a firefox.

Tecnicamente:

Manca il doctype e la codifica dei caratteri (accentate non si vedono corrette)

Non hai chiuso il tag <h2>

Hai aperto un paragrafo all'interno di un <ul> e l'hai chiuso all'esterno

Non si mette <br> dopo una chiusura di un elemento di lista <li></li>

Fatte le dovute correzioni:

Con IE la barra non c'è più.

Edit:

Se i <br> tra gli elementi della lista ti servivano solo per distanziarli, ti consiglio di usare le proprietà margin/padding nel css.

risposto 8 anni fa
LonelyWolf
modificato 8 anni fa
X 0 X

ok grazie

risposto 8 anni fa
mela
mela
1
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda