28172 sujets

CSS et mise en forme, CSS3

Empecher un logo de bouger durant zoom d'une page

Bonjour tout le monde,

Je voudrais savoir comment devrais m'y prendre pour que le logo facebook que j'ai mis dans mon header ne bouge pas lorsque je réduit la fenêtre de mon navigateur ou lorsque je zoom la page.
Dans le html j'ai mis le logo dans une div :

<div id="facebook">
<a href="http://www.facebook.com"><IMG src="http://www.digerekiloo.com/images/logo-facebook.png" ></a>
</div>

et dans le css :

#facebook {position: absolute; right: 470px; top: 67px;}

Quelle serait la solution?
Merci par avance...
Salut,

T'aurais pas pus de code pour voir ton problème ?

Pour ton histoire de zoom je crois qu'il faudrait que tu bloque le zoom dans le navigateur, je ne sais plus comment on fait le truc. Il y a je crois une règle css qui permet garder intacte ton image mais je en sais plus, je peux me trompé aussi. D'ailleurs en quoi ça te gêne ce zoom ?

Syntaxe du code que tu as donné :


<img src="http://www.digerekiloo.com/images/logo-facebook.png" />

un alt=" Logo facebook" aurait été bien pour l'accessibilité... http://www.alsacreations.com/astuce/lire/1166-alt-title-images-liens.html
C'est très gênant car le site devient vite illisible. Il n'y a pas que le logo facebook qui pose problème, mon formulaire de recherche aussi et d'autres images.
Je sais qu'il y a la possibilité de maintenir des images sur place même avec une réduction de la fenêtre ou un zoom mais je n'y arrive pas.
Si quelqu'un à une solution pour moi je suis preneur, merci.
Salut,
Comme indiqué par @blond1n, il faudrait mettre plus de code ou même nous donner le lien en ligne.

Je vais supposer que tu n'a pas mis de "position: relative;" sur ton conteneur parent et du coup ta div facebook se positionne part rapport à la fenêtre du navigateur.
Mon CSS


/*HEAD*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; }
a{ text-decoration:none}

body{ text-align:center; font-family:tahoma; font-size:12px; line-height: 1.5;}
#facebook {position: absolute; right: 470px; top: 67px; margin:0 auto;}


#head{ background:url(images/abg.png)repeat-x ;height:83px; min-width:1200px; 
}
    #head #paysage { position:relative; background:url(images/Header.png) top center no-repeat; height:83px;}
    #head #paysage #menu{left:180px;}

   
    
body{ background-image:url(images/boubin.gif); padding:0 0; margin:0;background-size:100%; background-attachment:fixed; background-repeat:no-repeat; background-size: cover;
-webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */}
Mon HTML

<?php
/**
 * @package WordPress
 * @subpackage Classic_Theme
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>


<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

	<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>

	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_get_archives(array('type' => 'monthly', 'format' => 'link')); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
	
</head>

<body <?php body_class(); ?>>


<div id="head">
			<div id="paysage">
				<div id="menu">

					<ul id="manu">
						<li>
							<a href="#">Actualite</a>
						</li>
						<li>
							<a href="#">Musique</a>
						</li>
						<li>
							<a href="#">Videos</a>
						</li>
						<li>
							<a href="#">Rubriques</a>
							<ul>
								<li>
									<a href="#">Actualite</a>
								</li>
								<li>
									<a href="#">Bonus</a>
								</li>
								<li>
									<a href="#">Creativite</a>
								</li>
								<li>
									<a href="#">Lifestyle</a>
								</li>
								<li>
									<a href="#">Musique</a>
								</li>
								<li>
									<a href="#">Videos</a>
								</li>

							</ul>

						<li>
							<a href="#">A propos</a>
						</li>
						<li>
							<a href="#">Contact</a>
						</li>

					</ul>

				</div>
			</div>
		</div>
    
    
  <div id="facebook">
<a href="http://www.facebook.com"><IMG src="http://www.digerekiloo.com/images/logo-facebook.png" ></a>
   
   <SPAN style="position: absolute; right: 400px; top: 65px;">
        <a href="http://www.twitter.com"><IMG src="http://www.digerekiloo.com/images/logo-twitter.png" ></a>
   </span>
</div>
    
<span style="position: absolute; right: 70px; top: 4px;">
    <form id="searchform" method="get" action="<?php bloginfo('url'); ?>">
	<div>
		<input type="text" name="s" id="s" size="15" /><br />
		<input type="submit" value="<?php esc_attr_e('Search'); ?>" />
	</div>
	</form>
</span>


    <img src="http://www.digerekiloo.com/images/logo.png">
            

<div id="main">
    <div id="col21">


Merci de votre aide...
Bon!!! comme personne n'arrive à m'apporter des solutions je cherche par moi même et deviner quoi?? qui cherche trouve!!!
C'est très simple il suffisait juste de le positionner en left au lieu de right et de définir de nouvelles valeurs et le tour est joué.
Merci à ceux qui m'ont répondu.
Sujet clos
Aller à