28172 sujets

CSS et mise en forme, CSS3

Bonjour à la communauté

j'ai deux petits soucis:
-j'ai placé une image dans mon footer qui s'adapte très bien à la largeur des différentes résolutions, cepandant quand l'utilisaeur possède une résolution trop importante, le bas de mon image ne touche plus le bas du navigateur

voici le code du footer:


#footer{
   margin: 0 auto;
   margin-bottom:0px;
   position:relative;
   background: url(http://ns23182.ovh.net/~wp_dsi/wp-content/themes/target/images/bot.jpg) no repeat center;
   background-position: bottom;
   width: 100%
   height: 100%
}




mon second soucis provient de l'image incruté dans le header image normalement cliquable en parmanence pour atteindre la page d'accueil, toute fois le lien n'est actif que lorsqu'on est présent sur la fameuse page d'accueil donc totalement inutile, l'image est bien présente sur toutes les pages mais pas active

voici le code tel qu'il apparait si vous regardez le code source de la page de mon image (code entièrement généré par wordpress:


<div id="logo">
<a height="243" width="1663" dsisi.png"="" images="" target="" themes="" wp-content="" ~wp_dsi="" ns23182.ovh.net=""  http:=""  href="ns23182.ovh.net/~wp_dsi/ <img src="></a>
<a title="Direction du Système d'Information" href="http://ns23182.ovh.net/~wp_dsi">
<img alt="" src="http://ns23182.ovh.net/~wp_dsi/?uamfiletype=attachment&uamgetfile=http://ns23182.ovh.net/~wp_dsi/wp-content/uploads/2012/10/DSIsi1.png">
</a>

Modifié par Antitrox (15 Nov 2012 - 11:20)
voici le code plus approffondit pour l'image du header

<?php if ( ( of_get_option('logo_image') ) != '' ) { ?>
                               <div id="logo"><a href="<?php echo home_url(); ?>" title="<?php bloginfo('description'); ?>"><img src="<?php echo of_get_option('logo_image'); ?>" alt="<?php echo of_get_option('footer_cr'); ?>" /></a></div><!--logo end-->
                <?php } else { ?>
                                              
            <div id="logo2">    <--    <a href="<?php echo home_url(); ?>" title="<?php bloginfo('description'); ?>"><?php bloginfo( 'name' ); ?></a>     -->   </div><!--logo end-->
           
                <?php } ?>

Modifié par Antitrox (15 Nov 2012 - 14:57)
Salut,
juste à la va-vite comme ça, l'ouverture de la balise de lien me semble être mal fermée.

Pour ce qui est de l'image, il est possible que sur les grandes résolutions la taille max de ton image est atteinte. Il faudrait un lien pour avoir un peu plus de détails.
a écrit :
Forbidden

You don't have permission to access /~wp_dsi/ on this server.

Smiley smile
Modifié par Nigel (15 Nov 2012 - 14:06)
ah.... donc pour le moment le site n'est disponible qu'en intranet, ça je savais pas donc voici un screen pour visualiser un peu, en fonction des résolution (la mienne est assez faible sur ce post) la zone blanche sous le bandeau du footer est bien plus importante que sur le screen
upload/47043-screen.JPG
Ah, je comprends. Tu essaies de faire en sorte que ton footer soit toujours collé au bas du navigateur quelque soit la résolution d'écran et le contenu du site.

C'est assez compliqué à faire en css. Il y a plusieurs solutions css mais chacune apporte son lot d'inconvénients. Voici l'une d'entre elles : http://www.sitepoint.com/forums/show...66&postcount=3

Tu peux aussi le faire en js.
Bonjour et merci pour ton intervention mais le lien que tu fournis est mort

j'ai trouvé quelques topic qui semblent identique au moins mais mon cas ce complique légèrement car une partie du footer se trouve (visuellement) à coté de mon menu dans le header

donc si je mets ma div footer en position absolute avec un bottom 0px ma div s'affichant en haut se verra largement déformé

le code concernant l'élément du footer qui apparait ailleurs que dans le footer
(si j'ai fait cette manipulation c'est que niveau administration ça arrangeait les personnes qui vont administrer le site par la suite)

#footer-bar1 {
	margin: -714px 0 0 963px;
	width: 160px;
 	float: left;
	/*padding-right: 20px;*/
	font-family: UniversRegular, Verdana, Geneva, sans-serif;
	font-size: 12px;
}



et je remet mon code du footer

#footer{
	margin: auto auto 0px;
	padding-bottom: 15px;
	position: relative;
	background:  url(http://ns23182.ovh.net/~wp_dsi/wp-content/themes/target/images/bot.jpg) no-repeat center;
	background-position: bottom;
	width: 100%;
	height: 100%;
}


vu que l'images présent en arrière plant dans le footer n'a pas pour vocation à être changé, j'avais pensé rajouter une <div id=footerimg><img src="adresse de l'images"/></div>

avec ce petit code en css

#footerimg{
	margin: auto auto 0px;
	width: 100%;
	height: 100%;
	position: absolute;
	background-position: center no-repeat;
}


mais mon image n'apparaissait pas...... je suis pas sur du tout de la façon dont j'ai écrit background-position: center no-repeat;
alors pour faire les choses "bien" j'ai un header.php et un footer.php on est d'accord que la logique veut que dans le footer.php on code exclusivement les éléments présents dans le footer toute fois avec le thème wp que j'utilise la seule façon de rajouter des widgets administrable est de les placer dans 4 barres disponible dans le footer (faut pas chercher à comprendre cette logique...)
ou alors il aurait fallu que je rajouter du php pour créer plus de champs administrables dans la partie wp_admin mais je ne sais pas faire ça (je ne suis pas développeur)

j'ai donc inséré dans le footerbar1 mon widjet image et j'ai du lui mettre des coordonnées sacrément négative pour le caler ou je le souhaitais


#footer-bar1 {
	margin: -714px 0 0 963px;
	width: 160px;
 	float: left;
	/*padding-right: 20px;*/
	font-family: UniversRegular, Verdana, Geneva, sans-serif;
	font-size: 12px;
}


et je me demande si le fait d'avoir demandé à l'ensemble de mon footer d'etre en margin-bottom:0px ne rentre pas en conflit avec le fait de placer un élément du footer en margin-top:-714px ?
le truc c'est que sur toutes mes pages ça fonctionne très bien sauf pour la page d'accueil...
Le margin-bottom:0px n'influe pas sur le margin-top donc pas de soucis de conflit.

L'image du footer, c'est bien juste la vague bleu qu'on voit en bas de page ?
alors comment elle peut se retrouver au niveau de ton menu ? ^^

Bref, teste avec la technique que je t'ai linké ou vois pour utiliser du js et tiens-nous au courant.
image du footer présent dans le header ----> image blanche états des services situé à droite du menu


#footer-bar1 {
	margin: -714px 0 0 963px;
	width: 160px;
 	float: left;
	/*padding-right: 20px;*/
	font-family: UniversRegular, Verdana, Geneva, sans-serif;
	font-size: 12px;
}



image d'arière plan du footer -----> vague bleu


#footer{
	margin: auto auto 0px;
	padding-bottom: 15px;
	position: relative;
	background:  url(http://ns23182.ovh.net/~wp_dsi/wp-content/themes/target/images/bot.jpg) no-repeat center;
	background-position: bottom;
	width: 100%;
	height: 100%;
}