Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133

    Nuovi div in un layout fluido

    Sto andando in tilt a causa di un paio di div!
    ho un layout fluido a due colonne, una per il menu con misure fisse e l'altra per i contenuti della pagina.
    sopra queste c'è un header.
    tutto è in un contenitore quindi il css è così :

    codice HTML:
    .main { margin-left:10px; margin-right:10px; background-color:#eee; overflow:hidden; color:#666; text-align:center; margin-top:20px; }
    .content {overflow:hidden; padding-bottom:10px;}
    .colonna1 {width:256px;float:left;margin-left:10px;margin-top:10px;}
    .colonna2 {margin-left:280px; padding-top:40px;margin-right:10px;margin-top:10px;padding-bottom:20px;}
    
    .header {height:150px;overflow:hidden;text-align:left;}
    l'html è così :
    codice HTML:
     <div class="main">
    <div class="header">
    <img src="logo.jpg" width="130" height="130" /></div>
    <div class="content">
    <div class="colonna1">
    
    MENU..........
    MENU...............
    </div>
    <div class="colonna2">
    
    TESTI / IMMAGINI ......
    
    </div>
    </div>
    <div class="footer"></div>
    </div>
    ma dopo aver fatto questo ho bisogno di inserire alcuni div che mi stanno dando problemi:

    1) nel Header devo avere il logo posizionato in alto a sinistra e un altro div con del testo (un titolo) centrato a tutta pagina che rispetti il layout fluido.
    2) nella colonna 2 devo inserire due div allineati, uno per un testo, l'altro per una foto che siano centrati nel div che li contiene (colonna2).
    da ieri cerco una soluzione ma ottenendo pesimi risultati

    mi date una mano?!

  2. #2
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133
    ho risolto per l' Header in modo molto semplice in questo modo
    codice:
    <div class="headerLogo"><img src="logo.jpg"  width="130" height="130" /></div>
    
    <div class="titolo"><h1>Titolo</h1></div>
    ma non riesco ancora per i due div che devo inserire nella colonna 2, tutti i codici che uso non danno il giusto risultato

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,691
    nella colonna 2 devo inserire due div allineati, uno per un testo, l'altro per una foto che siano centrati nel div che li contiene (colonna2).
    Non capisco. In che modo devono essere allineati?
    I due div hanno dimensioni fisse?

    Puoi precisare meglio magari con un'immagine d'esempio?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #4
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133
    Sono riuscito a risolvere, sicuramente avresti trovato un modo migliore del mio.
    Dato che lo scopo finale era allineare un'immagine ad un testo ho fatto semplicemente così

    codice:
    .media {float: right;margin-left:50px;}
    e

    codice:
    <p><img src="immagine.jpg" class="media" /> testo testo testo.........
    grazie!

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,691
    Bene, l'importante è che tu sia riuscito a risolvere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Tag per questa discussione

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 © 2024 vBulletin Solutions, Inc. All rights reserved.