28172 sujets

CSS et mise en forme, CSS3

Bonjour !

Après ma dernière contribution où j'ai eu une réponse rapide (merci encore !), j'ai un petit souci de positionnement entre ma colonne latérale de navigation, mon formulaire de recherche et mon pied de page.

J'ai préférer fixer le menu et laisser de l'espace pour le défiler. J'ai donc aussi fixé le formulaire de recherche.

Par contre, j'aimerais qu'il n'y ait pas ce vide entre le pied de page et le formulaire quel que soit la taille du contenu de la page ! Est-ce possible ?

Une petite image pour mieux repérer le problème :

http://i103.photobucket.com/albums/m149/TGV70/ecran1.jpg

Code HTML :

<div class="navigation_lateral">

		<ul class="navigation"> 
    <li><a href="#" title="Aller à la page 1">Accueil</a></li> 
    
    <li><a href="#" title="Aller à la page 1">Derrière le viseur</a></li> 
 
    <li class="toggleSubMenu"><span>Photos ferroviaires</span> 
        <ul class="subMenu"> 
            <li><a href="#" title="Aller à la page 2.1">Ligne BLV-LUR</a></li> 
 
            <li><a href="#" title="Aller à la page 2.2">Ligne PE-MSE</a></li> 
            <li><a href="#" title="Aller à la page 2.3">Ligne DN-BFT</a></li> 
            <li><a href="#" title="Aller à la page 2.3">Artsy</a></li>
 
        </ul> 
    </li> 
    <li class="toggleSubMenu"><span>Reportages ferroviaires</span> 
        <ul class="subMenu"> 
 
            <li><a href="#" title="Aller à la page 3.1">Adieu au 4300 R&C</a></li> 
            <li><a href="#" title="Aller à la page 3.2">Remplacement d'un pont</a></li> 
 
        </ul> 
    </li> 
    
    <li class="toggleSubMenu"><span>Photos nature</span> 
        <ul class="subMenu"> 
            <li><a href="#" title="Aller à la page 3.1">Faune</a></li> 
            <li><a href="#" title="Aller à la page 3.2">Flore</a></li> 
            <li><a href="#" title="Aller à la page 3.2">Paysages</a></li> 
        </ul> 
    </li> 
    
    <li class="toggleSubMenu"><span>Photos en ville</span> 
        <ul class="subMenu"> 
            <li><a href="#" title="Aller à la page 3.1">Architecture</a></li> 
            <li><a href="#" title="Aller à la page 3.2">Les gens</a></li> 
            <li><a href="#" title="Aller à la page 3.2">Ambiances</a></li> 
        </ul> 
    </li>
    
    <li><a href="#" title="Aller à la page 4">Photos inclassables</a></li> 
    <li><a href="#" title="Aller à la page 4">Bafouille du chef</a></li>
    <li><a href="#" title="Aller à la page 4">Sites amis</a></li>
</ul>

		
    
   </div><!--#navigation-->
	
		<div id=form_recherche>
    #FORMULAIRE_RECHERCHE
    </div>
		
	[(#REM) Pied de page ]
	<INCLURE{fond=inc-pied}{skel=#SQUELETTE}>


Et le CSS parallèle :

.navigation_lateral { display: block; position: absolute; height: 370px; width: 205px; margin-top: 50px; overflow: hidden; background: #994B1D; }
#extra { bfloat: left; clear: left; width: 30%; margin-top: 1em; overflow: hidden; }
#form_recherche { width: 205px; margin-top: 300px; background: #994B1D; }

#pied { margin-top: 90%; background: #994B1D; display: block; position: center; clear: both; width: 100%; margin: 0; padding: 0.40em 0; border-top: 1px solid #B0D373; text-align: center; font-size: 0.90em; }
#pied img { vertical-align: middle; }


Merci d'avance à tous et longue vis à Alsa Smiley biggrin !
++
Modifié par TGV70 (25 Jul 2009 - 15:21)
Tiens, alsa dort la nuit maintenant, c'est nouveau ? :lol:
Petit up original (enfin on essaye Smiley biggol )

Merci d'avance pour votre aide !
++
Modifié par TGV70 (25 Jul 2009 - 15:21)