• V
    Super User •

    Barra Laterale con css

    Ragazzi volevo creare una barra laterale con un css e metterci uno sfondo.

    Ho creato questa pagina, ma l'immagine resta minuscola mentre è molto lunga. Perchè?

    studioghibliessential.it/prova/provabarra.html

    Ho usato il codice css:

    [html]body {
    background-color: #D8EAFA;
    font: normal 13px "Comic Sans MS", Geneva, Arial, Helvetica, sans-serif;
    color: black;
    text-align: justify;
    margin: 0; padding: 0;}

    #barra {
    float: left;
    width: 101px;
    background-image: url(immagine-sfondo_barra.jpg);
    background-repeat: repeat-y;
    }

    #contenitore {padding-bottom: 5px; margin-left: 121px; margin-right: 20px; margin-top: 12px;}
    [/html]

    E poi nel foglio ho scritto:

    <div id="barra">
    </div>

    <div id="contenitore">
    testo
    </div>

    Dove sbaglio?

    Su FF addiritura neanche si vede l'inizio della barra disegnata.

    La barra vorrei che venisse lunga e si ripeta come per la pagina

    studioghibliessential.it/prova/provalink2.html

    😞 :(): :mmm:

    0
  • T
    User Attivo •

    Io con opera la vedo bene.
    Non so cosa intendi tu per piccola, ma a me sembra molto ben fatta.
    ricontrolla con i diversi browser.

    Se ancora da problemi, io proverei a mettere le due colonne in un contenitore più grande. Potrebbe essere una soluzione.

    0
  • M
    User Attivo •

    scusa ma il bg non lo puoi dare al body?

    background:#D8EAFA url(immagine-sfondo_barra.jpg) 0 0 repeat-y;

    e poi la tua barra è separata dal testo, quindi se non gli dai un'altezza lei rimane li...potresti dare il bg al contenitore del testo e poi ti spazi il contenuto tramite padding... no?

    0
  • G
    Bannato User Attivo •

    Io utilizzo Mozilla e si vede bene...che errore ti darebbe?

    0
  • K
    Super User •

    Fai così:

    • Togli il div con id="barra".
    • Sostituisci le proprietà "margin-left" e "margin-top" del conteiner con "padding-left" e "padding-top".
    • Aggiungi all'elemento Container l'attributo "background:url(immagine-sfondo_barra.jpg) repeat-y left top; Dimmi se funziona :bagno:
    0
  • B
    User •

    Se il <div id="barra"> lo lasci vuoto e nel css non ne specifichi l' altezza firefox proprio non te lo fa vedere (prova a inserire anche 1 solo carattere e capirai).

    Come ti hanno già suggerito sarebbe meglio mettere l' immagine come sfondo al body o al contenitore

    @Vampiretta said:

    #barra {
    float: left;
    width: 101px;
    background-image: url(immagine-sfondo_barra.jpg);
    background-repeat: repeat-y;
    }

    <div id="barra">
    </div>

    Su FF addiritura neanche si vede l'inizio della barra disegnata.

    😞 :(): :mmm:

    0
  • V
    Super User •

    Dunque il problema è un po' comlesso, ci avevo provato da sola ma faccio prima a spiegarvi tutto quello che c'è dietro, scusatemi.

    Ora i problemi sono:

    1. per chi ha una risoluzione molto grande finisce che la barra laterale si ripete sia a destra che a sinistra

    2. al body non posso dare margini e padding perchè altrienti la funzione di lightbox di visualizzazione dell'immagine mi sposta l'immagine visualizzata con quel sistema verso sinistra e non la metta più centrata

    Ho fatto un po' di prove visto che ho capito meglio la diffrenza tra padding e margin. Credo di aver risolto.

    Ho messo la barra come sfondo ripetuto solo verticalmente nel body.
    Poi nel contenitore ho messo lo sfondo a ghirigori (nella pagina di prova sarà arancione così lo vedete meglio) e ho settato bene margini e padding.

    A me si vede bene sia con IE, FF e Opera.

    E' ok no?

    www. studioghibliessential.it/prova/provalink2.html

    Grazie cmq a tutti per le dritte e imput continui! 😉

    0
  • B
    User •

    per evitare che la barra si ripeta anche a destra dovresti mettere nel body background-position:left

    0
  • V
    Super User •

    @berry said:

    per evitare che la barra si ripeta anche a destra dovresti mettere nel body background-position:left
    Ok, ma te la vedi ripetuta?

    0
  • B
    User •

    Io la vedo solo a sinistra con una risoluzione di 1280 x 1024

    @Vampiretta said:

    Ora i problemi sono:

    1. per chi ha una risoluzione molto grande finisce che la barra laterale si ripete sia a destra che a sinistra
    0
  • V
    Super User •

    No Berry la pagina ora è sistemata! :yuppi:Per quello la vedi bene!

    0
  • V
    Super User •

    Ragazzi mi è rimasto un problema.
    Ho ottenuto quello che volevo ma non riesco a settare il guestbook fornitomi da dreambook nel modo come setto le mie pagine.

    Il guestbook è formato da 6 pagine che devo modificare a piacimento.

    Vi segno il codice delle 6 pagine. Io ci devo aggiundere il codice css

    [html]body {
    background-color: #D8EAFA;
    background-image: url(immagine-sfondo_barra.jpg);
    background-repeat: repeat-y;
    font: normal 13px "Comic Sans MS", Geneva, Arial, Helvetica, sans-serif;
    color: black;
    text-align: center;
    margin: 0; padding: 0;
    cursor: url(cursore_makkuro.cur), auto;}
    #contenitore {background-image: url(immagine-sfondomini.jpg);
    background-repeat: repeat;
    margin-left: 101px; padding-left: 21px;
    margin-right: 0; padding-right: 20px;
    margin-top: 0; padding-top: 12px;
    margin-bottom: 0; padding-bottom: 5px;}[/html]

    e fin qui tutto ok.

    Poi però devo aggiungere nelle pagine il codice html
    [html]<div id="contenitore"></div>[/html]

    Solo che se lo aggiungo a tutte le pagine viene fuori un macello.

    Questi sono i codici delle pagine così come me li da da correggere Dreambook. Mi dite come e dove devo mettere il contenitore? 😢

    Pagina BOTTOM
    [html]<body>
    <center>
    <br>
    <div align="center"><img src="http://www." alt="" border="0" vspace="7"></div>
    [
    <a href="http://">Firma il Guestbook</a>
    |
    <a href="--url--">--title--</a>
    ]
    <br>
    <br>
    </center>
    </body>[/html]

    Pagina ENTRY
    [html]<body>
    <table width=80%>
    {{name}}
    <tr>
    <td width=20% align=right><font style="font-size: 14px; color: #004AB5; font-weight: bold;">Nome:</font></td>
    <td><font style="font-size: 13px; color: black;">[[name]]</font></td>
    </tr>
    {{/name}}
    {{mail}}
    <tr>
    <td width=20% align=right><font style="font-size: 14px; color:; font-weight: bold;">E-mail:</font></td>
    <td><font style="font-size: 13px; color: black;"><a href="mailto:[[mail]]">[[mail]]</a></font></td>
    </tr>
    {{/mail}}
    {{citt}}
    <tr>
    <td width=20% align=right><font style="font-size: 14px; color:; font-weight: bold;">Città:</font></td>
    <td><font style="font-size: 13px; color: black;">[[citt]]</font></td>
    </tr>
    {{/citt}}
    {{url}}
    <tr>
    <td width=20% align=right><font style="font-size: 15px; color:; font-weight: bold;">Home Page:</font></td>
    <td><font style="font-size: 13px; color: black;"><a href="]" target="top">]</a></font></td>
    </tr>
    {{/url}}
    {{comments}}
    <tr>
    <td valign=top align=right width=20%><font style="font-size: 14px; color:; font-weight: bold;">Commenti:</font></td><td><font style="font-size: 13px; color: black;">[[comments]]</font></td>
    </tr>{{/comments}}
    </table>
    <div align="center"><font style="font-size: 11px; color: black;">[[date]]</font></div>
    </html>[/html]

    Pagina SEPARATOR
    [html]<br>
    <div align="center"><img src=http://www alt="" border="0" vspace="7"></div>
    <div class="topnews"><img src=http://www alt="" border="0"> <a href="#Top">Top</a></div>[/html]

    Pagina SIGN:

    [html]<title>Dreambook - --title--</title>

    <body>

    <p></p>
    <center>
    <font size="+3" color="B60022">Guestbook</font>
    <br>

    <font face="Comic Sans MS" size="-2">Sign my <a href=http://www target="top">Dreambook</a>!</font>
    <p></p>
    <font style="font-size: 14px; color:; font-weight: bold;">Firma il Guestbook per commentare quanto hai letto e visto!</font>
    <p>
    ==signform==
    <p></p>
    <div align="center"><img src="http://www" alt="" border="0" vspace="7"></div>
    [
    <a href="http://">Leggi il Guestbook</a>
    |
    <a href="--url--">--title--</a>
    ]
    <div align="center"><img src="http://www" alt="" border="0" vspace="7"></div>
    </center>[/html]

    Pagina SIGNED
    [html]<head>
    <title>--title--'s Dreambook</title>
    <body>
    <p></p>
    <center>
    <font size="+3" color="B60022">Guestbook</font>
    </center>
    <p></p>
    <div align="center"><font style="font-size: 18px; color:;">Grazie per aver firmato il Guestbook!</font>
    <p></p>
    <br>
    <img src=http://www" width="156" height="102" alt=""></div>
    <p></p>
    <br>
    <br>
    <center>
    <div align="center"><img src="http://www" alt="" border="0" vspace="7"></div>
    [
    <a href="http://">Leggi il Guestbook</a>
    |
    <a href="--url--">--title--</a>
    ]
    <div align="center"><img src="http://www" alt="" border="0" vspace="7"></div>
    </center>
    [/html]

    Pagina TOP
    [html]
    <title>--title--'s Dreambook</title>
    <body>
    <center>
    <font size="+3" color="#B60022">Leggi il Guestbook</font>
    <br>
    <br>
    <font face="Comic Sans MS" size="-2">
    Welcome to <a href=http://www target="top">Dreambook</a>, a
    nifty new free service from: <br>
    <a href="http://www/" target="top">New Dream Network</a>,
    <a href="http://www/" target="top">Dreamhost</a>,
    and <a href="http://www" target="top">Dreamservers</a>!</font>
    <p></p>
    <b><a href="http://www"><u><font color="Green">Firma il Guestbook</font></u></a> per commentare quanto hai letto e visto!</b>
    <br>
    <br>
    <div align="center"><img src="http://www" alt="" border="0" vspace="7"></div>
    </center>
    [/html]

    0
Effettua l'accesso per rispondere