28172 sujets

CSS et mise en forme, CSS3

Mot qui bouge lorsqu'on fait un zoom(résolu)

Bonjour,

J'aimerais savoir pourquoi quand on fait un zoom sur la page,le mot Master bouge. Cela veut dire donc que si l'écran est plus grand, il sera quelque part ailleurs...

Quelqu'un pourrait m'aider ?
Modifié par alesson (24 Oct 2010 - 21:13)
Positionnes ton bloc #branding en relatif et repositionne les bloc qu'il contient et qui sont en absolus en conséquent. Ça devrait résoudre ton problème.
si je mets une position relative à la balise

<div role="banner" id="branding">

je serai obligé de mettre un top négatif(-51px) à mon logo. Est-ce qu'on pourrait éviter ces marges négatives ?

Merci en tout cas
je ne comprends pas, pourquoi tu as deux div. un div pour master et un div pour larp. 


<div id="branding">
<span>Master</span>
<h1>LARP</h1>
</div>



#branding {position: relative}
#branding span {position: absolute; top: 30px; right:80px; font:...., color : ....}
#branding h1 {position: absolute; top: 30px; right:20px; font: ...., color:...}


C'est pas le sujet mais tu devrais mettre ton h1 sur "Lettre appliquées à la redaction pro" plutôt que sur "Larp" ca aurait plus de poids niveau référencement.
Je me suis posé la même question par rapport le h1. Je suis en train de corriger ça. Merci !

J'ai deux divs, car comme tu peux voir le Master a un style différent. C'était la demande du groupe qui voulait le mot master un tout petit peu plus petit.
oui mais regarde le code que j'ai mis, en utilisant les imbrications en css, tu n'as pas besoin de multiplier les divs.
regarde ce que j'ai comme code 

<?php

?><!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />

<title><?php

	/*

	 * Print the <title> tag based on what is being viewed.

	 */

	global $page, $paged;



	wp_title( '|', true, 'right' );



	// Add the blog name.

	bloginfo( 'name' );



	// Add the blog description for the home/front page.

	$site_description = get_bloginfo( 'description', 'display' );

	if ( $site_description && ( is_home() || is_front_page() ) )

		echo " | $site_description";



	// Add a page number if necessary:

	if ( $paged >= 2 || $page >= 2 )

		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );



	?></title>

<link  href="//fonts.googleapis.com/css?family=Vollkorn:regular,italic,bold,bolditalic&subset=latin" rel="stylesheet" type="text/css" >

<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="http://plumes-larp.fr/wp-content/themes/twentyten/ie.css" />

<![endif]-->

<?php

	/* We add some JavaScript to pages with the comment form

	 * to support sites with threaded comments (when in use).

	 */

	if ( is_singular() && get_option( 'thread_comments' ) )

		wp_enqueue_script( 'comment-reply' );



	/* Always have wp_head() just before the closing </head>

	 * tag of your theme, or you will break many plugins, which

	 * generally use this hook to add elements to <head> such

	 * as styles, scripts, and meta tags.

	 */

	wp_head();

?>

</head>



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

<div id="wrapper" class="hfeed">


	<div id="header">

		<div id="masthead">

			<div id="branding" role="banner">
			<a href="<?php echo get_option('home'); ?>/"><img class="logo" src="http://plumes-larp.fr/wp-content/uploads/2010/10/LARP3_trait.jpg"/></a>
			<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1': 'div'; ?>

				<<?php echo $heading_tag; ?> id="site-title">

					<span>

						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

					</span>

				</<?php echo $heading_tag; ?>>

				<div id="site-description"><?php bloginfo( 'description' ); ?>

</div>

<div class="master"> Master</div>

							<?php

					// Check if this is a post or page, if it has a thumbnail, and if it's a big one

					if ( is_singular() &&

							has_post_thumbnail( $post->ID ) &&

							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&

							$image[1] >= HEADER_IMAGE_WIDTH ) :

						// Houston, we have a new header image!

						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );

					else : ?>

						<?php endif; ?>

			</div><!-- #branding -->



			<div id="access" role="navigation">

			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>

				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>

				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>

				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

			</div><!-- #access -->

		</div><!-- #masthead -->

	</div><!-- #header -->
        


	<div id="main">
J'ai règlé les balises h1 et h2. J'ai mis larp en tant que h2. Cependant, ça pose un problème si je laisse deux balises différentes pour master et LARP ?
dans ce cas mets laa description de site en h1 : 



<div id="site-description"><h1><?php bloginfo( 'description' ); ?> </h1></div>

et tu enleves le h1 sur l'autre div
ça pose un problème si je laisse deux balises différentes pour master et LARP ?

ça s'affiche bien chez toi ?
chez moi ca fonctionne sous ie7, ie8, chrome, safari et firefox 3
j'ai que sous ie6 qu'il y a un probleme avec la hauteur du div "Larp"
Sujet clos
Aller à