Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    [CSS] Precisazioni varie sul posizionamento

    Un paio di domande sui CSS e il posizionamento dei Div.
    Li sto studiando da ieri quindi perdonatemi eventuali sviste o ignoranze.

    Sto cercando di capire come creare layout fluidi, in modo che restino tali anche ridimensionando il browser o cambiando risoluzione.

    1) I problemi principali sono quando dei div che ho impostato con float:left e dei quali ho specificato le dimensioni in percentuale (tipo width:20%), se ridimensiono la finestra questi fanno lo stesso fino ad un certo punto, e poi quello più a destra cade giù e va a capo.

    2) Altro problema è quando appunto specifico delle dimensioni in percentuale e queste non tornano.
    Per esempio ho un div Main largo il 90% della pagina, contenente un div Banner largo il 100% (del Main), e sotto due div affiancati, la cui somma delle larghezze (sempre in percentuale) teoricamente dovrebbe fare 100.
    Invece di tornare ed essere larghi uguali, uno dei due div sotto mi vanno a capo perchè troppo grandi, quando invece, teoricamente, sommati dovrebbero occupare lo stesso spazio del div Banner sopra.
    Ho provato a togliere anche i bordi, per vedere se quelli venivano visti 'in più' alla larghezza indicata, ma non ho risolto.

    I due problemi riguardano il codice qua sotto (è un esempio preso da HTML.it):
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Prova</title>
    </head>
    
    <style type="text/css">
    body {
    margin:0;
    background-color:#EEEEEE;
    color: #000000;
    }
    div {
    font: normal 10px Verdana;
    }
    #Main {
    width: 90%;
    }
    #Top {
    text-align:left;
    background-color:#000000;
    color: #FFFFFF;
    font-weight:bold;
    padding: 3px;
    border: solid 1px #000000;
    }
    #Logo
    {
        text-align: Left;
        background-color: #FFCC00;
        float: Left; 
    	margin-rigth: auto;
        width: 35%;
        padding: 25px;
        border-left: Solid 1px #000000;
    }
    #Ricerca {
    text-align:center;
    background-color: #FFCC00;
    width: 58%;
    margin-left: auto;
    border-right: Solid 1px #000000;
    padding: 25px;
    }
    #Menu_oriz {
    text-align:left;
    background-color: #336699;
    color: #FFFFFF;
    font-weight:bold;
    padding: 3px;
    border: solid 1px #000000;
    }
    #Menu_sx, #Menu_dx {
    background-color: #FFCC00;
    float:left;
    width: 20%;
    padding: 3px;
    border-bottom: solid 1px #000000;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    }
    #Corpo {
    background-color:#FFFFFF;
    width: 58%;
    padding: 3px;
    float: left;
    border-bottom: solid 1px #000000;
    }
    </style>
    
    <body>
    <div align="center">
    <div id="Main">
    	<div id="Top">... Benvenuto ...</div>
    	<div id="Logo">Immagine</div>
    	<div id="Ricerca"> Cerca </div>
    	<div id="Menu_oriz">Menu</div>
    	<div id="Menu_sx">Menu di sinistra</div>
    	<div id="Corpo">Corpo della pagina</div>
    	<div id="Menu_dx">Menu di destra</div>
    </div>
    </div>
    </body>
    </html>


    3) Semplice domanda niubba: i riferimenti tra div in base a cosa vanno?
    Mi spiego meglio: se metto due div accanto o uno sopra l'altro, il secondo da dove viene iniziato a 'disegnare'. Attacca l'angolo destro in basso del primo a quello sinistro alto del secondo? O altro?

    4) Ho infine una prova dove ho un problema che non mi spiego.
    Ho un layout con un box contenitore e 3 box messi in colonna uno sopra l'altro (un banner, un menu e un corpo).
    Vorrei però lasciare 30 pixel di margin in basso tra il corpo e il box contenitore.
    Ma se imposto margin-bottom: 30px nel CSS questo non fa niente (anche se in Dreamweaver si vede correttamente).
    Se invece aggiungo anche solo un pixel di padding-bottom al box contenitore allora magicamente mi vengono mostrati anche i 30 pixel di margin del corpo.

    Non riesco proprio a spiegarmi questo comportamento



    Sarei felice se poteste rispondere a queste domande

    Grazie a tutti!!

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Quasi tutte le domande si riferiscono al box-model (vedi la relativa sezione nei tutorial).

    Anzitutto devi essere cosciente che il box-model di IE e` diverso da quello del W3C e di tutti gli altri browser.

    Per il W3C la larghezza di un box e` data da:
    margin + border + padding + width + padding + border + margin
    Se usi percentruali, queste si riferiscono alla larghezza del blocco che contiene quello in questione.
    Quindi due blocchi larghi 50% non ci stanno, a meno che margini, padding e bordi non siano messi a zero.

    Per l'ultima domanda, potrebbe essere un bug del tuo browser. Prova con un altro browser.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Originariamente inviato da Mich_
    Quasi tutte le domande si riferiscono al box-model (vedi la relativa sezione nei tutorial).

    Anzitutto devi essere cosciente che il box-model di IE e` diverso da quello del W3C e di tutti gli altri browser.
    Sì purtroppo lo so
    C'è un articolo che spiega TUTTE le differenze, in modo da saper prima cosa correggere?
    Per il W3C la larghezza di un box e` data da:
    margin + border + padding + width + padding + border + margin
    Se usi percentruali, queste si riferiscono alla larghezza del blocco che contiene quello in questione.
    Quindi due blocchi larghi 50% non ci stanno, a meno che margini, padding e bordi non siano messi a zero.
    E com'è possibile conciliare le unità di misura diverse? Visto che magari la larghezza la specifico in percentuale, mentre i bordi li specifco in pixel.
    O il calcolo deve andare 'a caso'?

    Per l'ultima domanda, potrebbe essere un bug del tuo browser. Prova con un altro browser.
    Ho provato sia con FireFox che con Opera. Niente.
    Su Internet Explorer ivnvece si vede correttamente

    Qualche idea?

    PS - Comunque quando esce il CSS3? Ho letto che lì si può impostare come si vuole l'ultilizzo di WIDTH. E questo metodo è abbastanza fuori dalla mia logica. Mi troverei sicuramente meglio se potessi definire una larghezza complessiva....

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Originariamente inviato da pictor
    C'è un articolo che spiega TUTTE le differenze, in modo da saper prima cosa correggere?
    Io non ne conosco. Ho pero` visto dei siti che affrontano i vari hack per IE. Puoi iniziare da constile, e poi vedere anche gli altri: i riferimenti tra i "link utili" (sezione layout).

    E com'è possibile conciliare le unità di misura diverse? Visto che magari la larghezza la specifico in percentuale, mentre i bordi li specifco in pixel.
    O il calcolo deve andare 'a caso'?
    Mi sa che devi andare "secondo dimensioni ragionevoli": cioe` in una pag larga 500-700px i 5-7px di bordi e margni rappresentano l'1% - cerca di stare un po' largo.


    Ho provato sia con FireFox che con Opera. Niente.
    Su Internet Explorer ivnvece si vede correttamente
    Allroa l'errore e` tuo. Non avendo il codice non si puo` dire dove e perche`.

    PS - Comunque quando esce il CSS3? Ho letto che lì si può impostare come si vuole l'ultilizzo di WIDTH. E questo metodo è abbastanza fuori dalla mia logica. Mi troverei sicuramente meglio se potessi definire una larghezza complessiva....
    Anche uscisse domani, non e` supportato dai browser: quindi passeranno alcuni anni prima di poterlo usare. Ho letto anch'io che ci sara` una misura che lavora un po' come il box-model di IE.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Originariamente inviato da Mich_
    Mi sa che devi andare "secondo dimensioni ragionevoli": cioe` in una pag larga 500-700px i 5-7px di bordi e margni rappresentano l'1% - cerca di stare un po' largo.
    Noioso
    Andrebbe perfezionato....

    Allroa l'errore e` tuo. Non avendo il codice non si puo` dire dove e perche`.
    Beh il codice HTML è questo:
    codice:
    <body>
    <div id="page">
      <div id="corpo">
    	<div id="banner">sdfsdfsdf</div>
    	<div id="menu">
    		  <div align="center"></div></a>
    		  <div>Home Page</div>
    		  <div> | </div>
    		  <div>Download</div>
    		  <div> | </div>
    		  <div>Gallery</div>
    		  <div> | </div>
    		  <div>Chat</div>
    		  <div> | </div>
    		  <div>Contatti</div>
    	</div>
    	<div id="testo">
    		Blablabla 
    
    	  -
    
    	 Bla bla bla
    	   
    
    	    bla bla.</p>
    	  
    
    
    	bla bla bla.
    
    	  </p>
    	</div>
      </div>
    </div>
    </body>
    Il CSS è questo:
    codice:
    html,body {
    margin:0;
    padding:0;
    width:100%;
    background-color: #EBEBEB;
    }
    #page {
    background-color:#868686;
    }
    #corpo {
    background-color:#C0C0C0;
    width:700px;
    margin-left:auto;
    margin-right:auto;
    }
    #banner {
    background-color: #FFFFCC;
    border: medium solid #FFFF66;
    }
    #menu {
    margin: auto;
    width:90%;
    background-color: #EBEBEB;
    height: 35px;
    border: medium solid #FFFFFF;
    border-bottom: medium solid #DFDFDF;
    border-bottom-width:thick;
    border-right-width:thick;
    border-right: medium solid #DFDFDF;
    }
    #menu div {
    display: inline;
    }
    #testo {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    width: 85%;
    border-top-color:#C0C0C0;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    line-height: 20px;
    color: #000000;
    background-color:#FAFAFA;
    border: medium solid #FFFFFF;
    }
    C'è qualche errore?
    Purtroppo non ho ancora molta dimestichezza e faccio fatica a trovarli
    Anche uscisse domani, non e` supportato dai browser: quindi passeranno alcuni anni prima di poterlo usare. Ho letto anch'io che ci sara` una misura che lavora un po' come il box-model di IE.
    Addirittura anni?
    Almeno da Opera e FireFox mi aspetto un supporto in pochi mesi ..... è impossibile?
    Il CSS1 e il CSS2 quanto ci hanno messo per affermarsi, a livello di supporto dei principali browser?

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    CSS1 e` vecchio; CSS2 del 1999, mi pare; supportati seriamente da Netscape6/Mozilla

    Anche se ora lo sviluppo e` piu` veloce, e anche se alcuni browser usciranno entro pochi mesi dalla pubblicazione di una bozza ragionevole; occorre attendere che ci sia un congruo numero di utenti che sostituiscono il browser. Ecco perche` penso ad un paio di anni.


    Nel tuo codice ci sono alcuni problemi:
    1. Usi tag non semanticamente corretti: le liste si fanno con i tag <ul> e[*].
    2. Usi tag inutili (per spaziare/mettere bordi si usano i CSS, non i <div>.
    3. Ci sono errori di sintassi (errato innestamento dei tag)
    4. Ci sono tag vuoti (i browser possono no visualizzarli per nulla).
    5. I paragrafi si fanno con il tag

    ; i
    dovrebbero essere usati solo in rare circostanze.


    Nelle raccolte (vedi "link utili" sezione menu) ci sono vari menu gia` pronti, da cui puoi prendere spunto.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    Originariamente inviato da Mich_
    Nel tuo codice ci sono alcuni problemi:
    1. Usi tag non semanticamente corretti: le liste si fanno con i tag <ul> e[*].
    2. Usi tag inutili (per spaziare/mettere bordi si usano i CSS, non i <div>.
    Questi nel menu vero?
    Ho scritto velocemente e con i[*] mi andava a capo, così ho scritto quel codice.
    Ma non è su quello che mi volevo focalizzare. L'ho scritto a casaccio.
    3. Ci sono errori di sintassi (errato innestamento dei tag)
    Errori di nidificazione? Cosa intendi? E dove?
    4. Ci sono tag vuoti (i browser possono no visualizzarli per nulla).
    Provvedo
    5. I paragrafi si fanno con il tag

    ; i
    dovrebbero essere usati solo in rare circostanze.
    Non lo sapevo. Come mai si preferiscono i

    ai
    ?

    Nelle raccolte (vedi "link utili" sezione menu) ci sono vari menu gia` pronti, da cui puoi prendere spunto.
    Sì qualcosa ho già visto. Solo che sono un macello di link da vedere e mi ci vuole tempo

    Grazie.

  8. #8
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Originariamente inviato da pictor
    Questi nel menu vero?
    Ho scritto velocemente e con i[*] mi andava a capo, così ho scritto quel codice.
    Anche con i <div> va a capo se non specifichi il float nel CSS.
    Ma non è su quello che mi volevo focalizzare. L'ho scritto a casaccio.
    Errori di nidificazione? Cosa intendi? E dove?Provvedo
    <div align="center"></div></a>

    Non lo sapevo. Come mai si preferiscono i

    ai
    ?
    E` questione di semantica. Se vai a capo vuol dire che il paragrafo e` finito.

    Sì qualcosa ho già visto. Solo che sono un macello di link da vedere e mi ci vuole tempo

    Grazie.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  9. #9
    Originariamente inviato da Mich_
    Anche con i <div> va a capo se non specifichi il float nel CSS.
    Sì ma appunto io li voglio uno accanto all'altro i[*] ma mi vanno a capo. Io NON voglio che vadano a capo. Per questo ho usato i div.
    <div align="center"></div></a>
    Un errore (non mio) del codice che avevo copiato

    E` questione di semantica. Se vai a capo vuol dire che il paragrafo e` finito.
    Ma non muore nessuno se metto un
    vero?

  10. #10
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Originariamente inviato da pictor
    Sì ma appunto io li voglio uno accanto all'altro i[*] ma mi vanno a capo. Io NON voglio che vadano a capo. Per questo ho usato i div.
    I[*] seguono la stessa regola: per farli sistemare uno accanto all'altro devi specificare il float.

    Un errore (non mio) del codice che avevo copiato
    Che puo` portare effetti deleteri; i browser seri seguono gli standard, mentre IE "interpreta" e visualizza qualcosa sempre.


    Ma non muore nessuno se metto un
    vero?
    No, non muore nessuno. Ma se usi i tag secondo il significato semantico e` piu` semplice sistemare i CSS.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.