• S
    User Newbie •

    Problema ripetizione sfondo in verticale

    Ciao a tutti, questo è il mio primo Topic, e ahimè sono qui a chiedere aiuto.

    Allora, non saprei come spiegarmi ma spero di riuscirci... sto creando un Layout per un mio futuro portfolio, ma ho dei problemi strani in fase di montaggio. Inanzitutto vi lascio Html/Css che ho fatto almeno avete qualcosa di tangibile da poter vedere 😃

    Html

    <html>

<head>
    <title>Shanky Portfolio</title>
<style type="text/css">
</style>
<link rel="stylesheet" href="style.css" type="text/css" />    
</head>

<body>
<div id="container">

    <div id="header">
        <div class="logo"><img src="Images/header_left.png" title="Shanky Portfolio" /></div><div class="header_menu"><img src="Images/header_right.png" title="Introduzione" /></div>
    </div>

    <div id="navigazione">
        <div class="nav_left"></div>
            <div class="nav_center">
            </div>
        <div class="nav_right"></div>
    </div>

    <div id="content_tot">    
        <div id="menu">
            <div class="menu_top"></div>
                <div class="menu_center"><br><br><br><br><br><br><br><br><br><br><br></div>
            <div class="menu_bottom"></div>    
        </div>
        
        <div id="contenuto">
            <div class="banner"><img src="Images/banner.png" title="Banner Pubblicitario" /></div>
        </div>
    </div>
        
</div>        
</body>

</html>
```**CSS
**```
    body {
margin: 0;
font-family: "Champagne & Limousines Thick", Tahoma, serif;
font-size: 14px;
color: #000;
background: #afaeae;
}

    #container {
margin: auto;
width: 900px;
}

    #header {
height: 100px;
background: #dadada;    
}

    .logo {
float: left;    
}

    .header_menu {
float: right;    
}

    #navigazione {
clear: both;
height: 65px;    
}

    .nav_left {
height: 65px;
width: 70px;
float: left;
background: url(Images/nav_left.gif) no-repeat;    
}

    .nav_center {
height: 65px;
width: 760px;
float: left;
background: url(Images/nav_center.gif) repeat-x;    
}

    .nav_right {
height: 65px;
width: 70px;
float: right;
background: url(Images/nav_right.png) no-repeat;    
}

    #content_tot {
width: 900px;
background: url(Images/container.png) repeat-y top;  
}

    #menu {
width: 175px;    
float: right;
margin-top: -15px;    
}

    .menu_top {
height: 15px;
width: 175px;
background: url(Images/menu_top.gif) no-repeat;    
}

    .menu_center {
width: 175px;
background: url(Images/menu_center.gif) repeat-y;    
}

    .menu_bottom {
height: 15px;
width: 175px;
background: url(Images/menu_bottom.png) no-repeat;    
}

    #contenuto {
float: right;
padding-left: 30px;
width: 695px;    
}

    .banner {
text-align: center;    
}
```Ecco qua tutto quello che ho fatto fino ad ora. Il problema sorge all'inizio del **<div id="content_tot">** ovvero il contenuto immediatamente sotto la barra di navigazione. Come potrete notare, a quel ID ho assegnato uno sfondo grande tutto il layout che si ripeti verticalmente basandosi sul contenuto al suo interno... o almeno credevo! Invece non ne vuole sapere di ripetersi anzi, non appare proprio... mentre se imposto un'altezza al ID allora appare e si ripete. Non mi capacitò di questo :(): cioè, all'interno di questo <div> c'è un'altro <div> quello del menù in cui ho impostato dei **br** appunto per provare, ma niente, lo sfondo non esce e il Layout mi rimane così: **i40.tinypic.com/2u6fkwl.png **ignorando completamente i br all'interno del menù e l'immagine "banner space" messa tramite HTML. Non mi era mai capitato questo genere di problema.

Quindi mi sono rivolto a voi che siete sicuramente più esperti di me, ah, accetto anche metodi che stravolgano tutto xD l'importante è che riesca a creare questo "container" che si ripeti in base al contenuto.

Grazie in Anticipo =)
    0
  • K
    Super User •

    Ciao Shanky e benvenuto/a nel forum di GT,

    Il problema sta sul contenitore con id "content_tot".
    Dagli un "overflow:hidden;" in modo che gli oggetti interni in float possano essere "visti" e quindi permettere al contenitore-padre di ripetere il proprio sfondo per tutta la lunghezza data dagli elementi interni.

    Occhio a due dettagli in primis:

    1. manca il Doctype
    2. Il font "champagne" non potranno vederlo gli altri se non installato sul loro sistema il che è difficilmente probabile
    0
  • S
    User Newbie •

    Ti ringrazio tantissimo Karedas, avrei da porgerti una domanda in merito.

    Ieri notte dopo aver lanciato questo post, ho "sbrichettato" ancora un pò, e ne sono venuto fuori impostando al id "content_tot" un **"float: left" **potresti spiegarmi perchè come mai fa così? Cioè, ha bisogno di un overflow o di un float per far si che legga correttamente il suo interno, ma questo perchè gli elementi al suo interno, hanno dei float? Bho, se riesci a delucidarmi te ne sarei grato 😃

    PS: Quei 2 problemi lo so, il Doctype lo metto sempre alla fine, ancora sono allo scheletro del Layout. Mentre il font, sto usando quello perchè voglio sperimentare il @font_face.

    0
  • K
    Super User •

    Bè il risultato è lo stesso, la differenza è che ogni contenitore in float esce dal normale flusso del documento e per questo il proprio contenitore-padre deve essere anche lui un elemento in float.

    Il problema sta che in questo modo c'è da inserire alla fine (subito dopo la chiusura dell'elemento floattante) un oggetto "vuoto" (ad esempio un div aperto e chiuso) che abbia come proprietà le seguenti:

    width:100%;
clear:both;

```Inoltre l'elemento "padre" ha spesso bisogno di dimensioni fisse per quanto riguarda la width, altrimenti rischia di fare un pò a modo suo.

Questo è un valido metodo per evitare che il resto della pagina html non "senta" la presenza dell'elemento in float sopracitato.

Con overflow eviti tutto questo, unica cosa è quella di stare attento ad oggetti con position "absolute", posti all'interno del contenitore padre. Questo perchè **l'overflow:hidden** simula praticamente l'uso della MASCHERA nei classici photoshop o programmi grafici di sorta.


Mi scuso comunque per l'inesattezza ma è un argomento complesso anche per me, più facile nella pratica che nella teoria.
Vediamo in caso se qualcuno riesce ad essere più tecnico :)
    0
  • S
    User Newbie •

    Non scusarti, sei stato più che chiaro 😃

    Praticamente, in parole povere è un questione semplice, avendo dei Float all'interno i quali interrompono il normale flusso della pagina, per essere letti anche chi li contiene ha bisogno del float. Credo sia da intendere in questo modo, o sbaglio?

    Poi si, serviranno tutti gli accorgimenti del caso, per far si che la pagina riprenda il suo flusso, grazie davvero, mi hai risolto molti dubbi a riguardo 🙂

    0
Effettua l'accesso per rispondere