28172 sujets

CSS et mise en forme, CSS3

[ Résolu] [CSS] Petit problème de position ^^"

Bonjour tout le monde,

J'ai encore un problème au niveau du code CSS:

Je créer mon site internet et je veux qu'apparaissent sur le footer, une image-lien qui redirige vers le Twitter du site et un image-Lien qui redirige vers le Facebook du site.

J'ai donc mis mes images dans ce code xHTML ( il se situe entre la div "corps" et la div footer"
Code : HTML


<div id="ntwitter">

<a href="#"><img src="twittbird.png" alt="Notre twitter"></a>

</div>

<div id="nfacebook">

<a href="#"><img src="facebock.png" alt="Notre Facebook"></a>

</div>



et j'ai tester sur ma page d'accueil le Code CSS:

Code : CSS

#ntwitter a
{
position:absolute;
top:675px;
}

#nfacebook a
{
position:absolute;
top:674px;
left:860px;

}



Résultat: http://www.hostingpics.net/viewer.php?id=303106Sans_titre.png

Cette portion de code me permet de bien positionner mes deux images comme je le veux, mais dès que je rajoute du texte dans le corps, l'image reste a sa position et ne reste pas au contact du footer....

Comment faire pour adapter le Code CSS pour avoir l'effet désiré sachant que mes pages ne font pas toutes la même hauteur ( car elles ont plus ou moins de texte)

Merci d'avance!! Smiley smile


Problème Résolu Par Heyoan, que je remercie!
Modifié par Giome (18 Feb 2010 - 13:32)
Salut,

si j'ai bien compris il faut plutôt faire :
#footer {
	position: relative;
	text-align: center;
}

#ntwitter {
	position: absolute;
	left: 0;
	bottom: 0;
}

#nfacebook {
	position: absolute;
	right: 0;
	bottom: 0;
}
<div id="footer">
	<p>Bla Bla</p>
	<a href="#" id="ntwitter"><img src="twittbird.png" alt="Notre twitter"></a>
	<a href="#" id="nfacebook"><img src="facebock.png" alt="Notre Facebook"></a>
</div>
Il faut que tu mette un position: absolute a la div corps :
#corps{
position: absolute;

et que tu passe les div ntwitter et nfacebook en relative, ce qui aura pour effet de la placer, pas a partir du haut du document, mais du bas du corps, car on a donner a la div corps la propriété position: absolute, ce qui lui donne une position de "bouée", ça donnerait donc:
#ntwitter
{
position:relative;
top:xxx px;/*Ta valeur a la place de xxx*/
}

#nfacebook
{
position:relative;
top:xxx px;/*Ta valeur a la place de xxx*/
left:xxx px;/*Ta valeur a la place de xxx*/

}

Voila, ça devrait mieux marcher !
Pamou
Modifié par pamou (16 Feb 2010 - 19:00)
pamou a écrit :
Il faut que tu mette un position: absolute a la div corps :
#corps{
position: absolute;
Surtout pas car cela sortirait le contenu du flux avec tous les problèmes que cela implique (notamment l'ajustement automatique des autres éléments). Smiley cligne

(Re)lire les mises en garde du Guide de survie du positionnement CSS.
Heyoan j'ai suivit ta démarche donc: ( j'ai modif un peu le left/right pour rapprocher un peu)

#footer {
position: relative;
text-align: center;
}

#ntwitter {
position: absolute;
left: 17px;
bottom:0 ;
}

#nfacebook {
position: absolute;
right: 17px;
bottom: 0;
}

Les deux images sont donc bien placées sur toutes les pages cette fois, mais petit bémol: Bon positionnement par rapport aux bords mais les images ne sont toujours pas "collées" au footer Smiley langue

Sa donne sa ^^ http://www.hostingpics.net/viewer.php?id=407081screen1.png

Help Smiley lol

Merci d'avance!
Euh... le DIV #footer correspondait dans mon code au pied de page ( Smiley biggol ) : celui qui contient "Nous Contacter". C'est le position: relative sur ce DIV qui permet de servir de référence au positionnement absolu.

J'en profite pour te donner le lien vers cet article essentiel : Guide de survie du positionnement CSS.
Voici donc je que j'ai fait:



 <div id="footer">
       <p><a href="mailto:rock69230@hotmail.fr">Nous contacter!</a> . 
            <a href="participer.html">Participez!</a> . <a href="#"> Livre d'Or</a> </p>

       <a href="#" id="ntwitter"><img src="twittbird.png" alt="Notre twitter"></a>
       <a href="#" id="nfacebook"><img src="facebock.png" alt="Notre Facebook"></a>

 </div>


Avec le code CSS que tu m'as fournit:


#footer 
{ 
    position: relative; 
    text-align: center; 
} 
 
#ntwitter 
{ 
    position: absolute; 
    left: 0px; 
    bottom:0px
} 
 
#nfacebook 
{ 
    position: absolute; 
    right: 0px; 
    bottom:0px;
}


Mais le résultat est pas vraiment celui attendu Smiley lol Le Footer est remonté dans le Corps

enfn une image vaux mieux qu'un long discours ^^ : http://www.hostingpics.net/viewer.php?id=576681screen3.png

S.O.S Smiley biggol
Modifié par Giome (17 Feb 2010 - 10:12)
Eh bien je pense qu'il est grand temps de nous montrer le code que tu avais à l'origine et partir de là (l'idéal serait d'ailleurs une page en ligne).
Alors voici Le Code Source complet, en espérant que cela puisse vous aider =)
Je tiens a préciser que le code de la page d'accueil était valide WC avant la modification du CSS.

Voici le code xHTML de la page d'accueil:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>BièreParty!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="forme" href="forme.css" />
   </head>
   
   
   <body>
         
		 <div id="header">
		 
		    <p> <a href="accueil.html"><img src="Bannière2.jpg" alt="Bannière" /></a> </p>
		 
		 </div>
		 
		 
		 
		 <div id="Menu">
		 
		     <ul id="menuh">
			     
				 <li> <a href="accueil.html">Accueil</a> </li>
				 <li> <a href="lesbieres.html">Les Bières</a> </li>
				 <li> <a href="#">WeekBeer!</a> </li>
				 <li> <a href="#">Les Stats'</a> </li>
				 <li> <a href="lactu.html">L'Actu</a> </li>
				 <li> <a href="participer.html">Participer</a> </li>
				 
			 </ul>
			 
		 </div>
		 
		 <div id="corps">
		    
			 <h2> Bienvenue sur BièreParty</h2>
			 
			 <p> Que se soit dans une brasserie, avec des amis, en soirée ou même devant sa télévision en regardant un match de Foot,
                 la Bière est une boisson alcoolisée conviviale qui, par sa grande diversité, satisfait tous les goûts!
                 Avec BièreParty, vous avez accès sur un seul site à un large panel de bière du monde entier triées selon leur couleur, leur fermentation, leur lieu de fabrication, et leur prix moyen.
                 L'Actu et les Stats vous permettront de connaître L'actualité de la Bière dans le monde!
                 Chaque Semaine découvrez une Nouvelle bière de notre sélection dans la rubrique WeekBeer!.
             </p>
              
             <h3 id="bvisite"> Bonne Visite! </h3>
				 

			 
		 <div id="footer">
		 
		    <p><a href="mailto:rock69230@hotmail.fr">Nous contacter!</a> . <a href="participer.html">Participez!</a> . <a href="#"> Livre d'Or</a></p>
		    <a href="#" id="ntwitter"><img src="twittbird.png" alt="Notre twitter"></a>
			<a href="#" id="nfacebook"><img src="facebock.png" alt="Notre Facebook"></a>

		</div>
		 
   
   </body>
   
   
</html>


Voici la Feuille de Style CSS :

#header, h2, #bvisite
{ 
 text-align:center;
}

#corps
{
font-size:0.95em;
margin-left:220px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
width:56%;
margin-top:50px;
background-color:white;
-moz-border-radius:10px;
-webkit-border-radius:10px; 
padding:40px;
padding-bottom:20px
}



h3
{
margin-bottom:50px;
}

html
{
background-color:#492a15 ;
}

#footer
{
text-align:center;
background-color:white;
-moz-border-radius:2px;
-webkit-border-radius:2px; 
font-family:Verdana;
font-size:1.1em
}

#footer a
{
color:#492a15 ;
text-decoration: none; 
}

#footer a:hover
{
color:#ff7f00 ;
text-decoration:none;
}



#Menu 
{ 
margin:0; 
padding: 0; 
list-style: none;
text-align:center;
font-size: 1.4em;
background-color:white;
} 

#menuh li 
{ 
display: inline; 
} 

#menuh li a 
{ 
font-family: Trebuchet MS, Verdana;
padding: 5px 20px; 
margin: 0; 
background: #ff7f00; 
color: #fff; 
border: 1px solid white; 
text-decoration: none; 
-moz-border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
border-radius: 10px 10px 10px 10px;         
-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
-webkit-border-bottom-right-radius: 10px; /* pour Chrome */ 
-webkit-border-bottom-left-radius: 10px; /* pour Chrome */ 
} 

#menuh li a:hover, #menu li a:focus 
{ 
background: #b8da40; 
color: #000; 
} 

#corps h3, #corps p, #corps h2
{
 font-family: Verdana;
}

#corps p
{
text-align:justify;

}

img
{
 border : none; 
}

#corps ul
{
list-style: none;
text-align:center;
}



#footer { 
    position: relative; 
    text-align: center; 
	
} 
 
#ntwitter { 
    position: absolute; 
    left: 0px; 
    bottom:0px
} 
 
#nfacebook { 
    position: absolute; 
    right: 0px; 
	bottom:0px;
}


(Attention: Le feuille de style contient du CSS3 (border-radius) )

En attendant votre réponse Smiley smile

Bonne journée!
Tu n'as pas fermé le DIV #corps avant d'ouvrir le DIV #footer ! En clair il manque </div> avant <div id="footer">

Au passage on gagne beaucoup de temps en validant systématiquement son code. Smiley cligne
Ah >< les erreurs les plus simples sont pas forcément les plus faciles a trouvées.... Merci beaucoup Heyoan! sa marche parfaitement!

Bonne journée!
Giome a écrit :
Ah >< les erreurs les plus simples sont pas forcément les plus faciles a trouvées...
Sauf en validant son code au fur et à mesure. Smiley smile

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Sujet clos
Aller à