28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai un petit soucie avec mon site Internet : helene-jarry-infographiste.fr

Quand on visualise mon site sur un mobile ou quand on rétrécie la fenêtre de navigation le background-color (violet) de la zone menu et du footer disparait (ou change de couleur en blanc) et du coup on ne voit plus les menus correctement.

J'ai cherché dans le CSS mais je n'ai pas trouvé, quelqu'un pourrait m'aider.

Merci d'avance.

LN
Bonjour Hélene !

Chez moi ca passe très bien a ce niveau la en revanche le footer est gris même en plein écran (1920*1080) Le menu du haut reste bien violet
Bonjour MatthD,

Merci pour ton retour.

Le footer n'est pas de la meme couleur c'est normal (c'est vrai j'ai pas précisé Smiley smile ).
Sinon tu trouveras ci-joint ce que ça fait quand on rétrécie la page.
upload/55674-Capture-de.jpg

le vciolet (header) et le gris (footer) ne couvrent plus la totalité de la page quand tu rétrécie la page et scroll vers la droite.

Merci de ton aide.

Ln
Modifié par Ln4 (09 Aug 2014 - 10:47)
Hello,

Procéder dans l'ordre, et commencer par corriger les erreurs dans le code HTML.
Cela permettra déjà d'y voir plus clair, et peut-être même de résoudre certain souci Smiley cligne
Il faudra sans doute optimiser un peu le code (SEO, toussa) mais c'est un autre débat.
Modérateur
Bonjour,

Le fait est que certains bloc (comme le menu et le slider) on une largeur fixe et d'autre non (les div on par defaut une largeur de 100%).
exemple pour le slider dans screen.css (line8)
.container_12 .grid_12 {
    width: 978px;
}

Les blocs comme le slider vont donc déclencher un slide horizontal lorsque la fenetre à une taille plus petite alors que les autres comme le fond violet vont continuer a garder la largeur de la fenetre.

Deux solutions :
- donner une largeur fixe minimal à ton site tout entier (au conteneur global).
- Faire en sorte d'adapter les élément a largeur fixe avec des largeurs fluides ou des média queries
Merci pour vos réponses.

Je sais me débrouiller en css ou HTML mais pas plus, donc trouver les erreurs toute seule ça va être dure pour moi lol jvais voir ce que je peux faire.

J'ai essayé en mettant un min-width mais ça n'a rien (je l'ai peut être pas mis au bon endroit).
Concernant ta remarque par rapport au slide le problème était le mémé avant que je mette le slide.

Je sais que le site n'est pas en responsive mais j'aimerais juste que le violet reste.

Merci de votre aide
Modérateur
Ln4 a écrit :
Je sais me débrouiller en css ou HTML mais pas plus, donc trouver les erreurs toute seule ça va être dure pour moi lol jvais voir ce que je peux faire.
Ah bah va falloir upgrader ! Smiley lol Bien savoir débuguer ça aide a comprendre et ça fait gagner beaucoup de temps ! Smiley ravi Bon par contre ici ce n'est pas vraiment un bug ou une erreur, c'est un comportement normal. Il va donc falloir upgrader sur la compréhension des comportement des éléments Smiley smile
Tu peux aller faire un tour du coté des articles et tutos Alsa : http://www.alsacreations.com/apprendre/

Ln4 a écrit :
J'ai essayé en mettant un min-width mais ça n'a rien (je l'ai peut être pas mis au bon endroit).
Un min-width:1008px; (taille de ton header) placé sur la div la plus haute <div id="outer">

Ln4 a écrit :
Concernant ta remarque par rapport au slide le problème était le mémé avant que je mette le slide.
Normal ton header aussi à une largeur fixe.

Smiley smile
Modifié par _laurent (03 Sep 2014 - 14:50)
Merci Laurent,

J'ai pu rectifier le problème dans

html {
margin: 0;
padding: 0;
border: 0;
min-width: 1008px;
}


J'ai essayé dans "outer" mais ça a tout fait beuguer !

Pour le reste je vais essayé de m'améliorer !Merci en tout cas
Modifié par Ln4 (03 Sep 2014 - 15:13)
Ln4 a écrit :
Merci pour vos réponses.
Je sais me débrouiller en css ou HTML mais pas plus, donc trouver les erreurs toute seule ça va être dure pour moi lol jvais voir ce que je peux faire.

Au regard des services que tu proposes sur ton site, je trouve cela un peu inquiétant, non ?

Dans ton entête de document, il y a une div qui se ballade, une balise head qui s'ouvre un peu tard, et globalement plein de chose inutile et à supprimer ou à déplacer en fin de document :
<!DOCTYPE html>
<!--[if lt IE 7 ]>	<html lang="en" class="ie6 ie">	<![endif]-->
<!--[if IE 7 ]>	<html lang="en" class="ie7 ie">	<![endif]-->
<!--[if IE 8 ]>	<html lang="en" class="ie8 ie">	<![endif]-->
<!--[if IE 9 ]>	<html lang="en" class="ie9 ie">	<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" prefix="og:  http://ogp.me/ns#">  <!--<![endif]-->
<div id="bordure-vert">
		<div class="bouton-fixe-lien">
			<a href="/contact">Demande de devis</a>
		</div>
	</div>
	<head>
	<!-- General meta information -->
	<title>Hélène Jarry Infographiste Graphiste en Essonne - CV, flyer, catalogue</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- // General meta information -->
	<!-- Load stylesheets -->	
	<link type="text/css" rel="stylesheet" href="http://www.helene-jarry-infographiste.fr/wp-content/themes/mono/css/screen.css" media="screen" />	
		<link rel="stylesheet" type="text/css" media="all" href="http://www.helene-jarry-infographiste.fr/wp-content/themes/mono/style.css" />
	<!-- // Load stylesheets -->
	<!-- Code analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-42131400-1', 'helene-jarry-infographiste.fr');
  ga('require', 'displayfeatures');
  ga('send', 'pageview');
</script>
	<!-- // Code analytics -->
<!-- linkstant -->
<meta name="linkstant" content="192847532" />
<!-- // linkstant -->
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.5.5.3 -  https://yoast.com/wordpress/plugins/seo/  -->
<meta name="description" content="Hélène Jarry Freelance Infographiste Graphiste en Essonne réalise des cv, sites web, logo, catalogues, cartes de visite, flyers en parallèle de ses études."/>
<meta name="keywords" content="helene, jarry, catalogue, infographiste, graphiste, cv personnalisé, cv original, helene jarry, carte de visite, newsletter, print, logo, curriculum vitae personnalisé, curriculum vitae original"/>
<link rel="canonical" href="http://www.helene-jarry-infographiste.fr/" />

Et la longueeee suite....

Bon courage Smiley cligne
Merci pour tes remarques.

Je mets seulement en place les sites sous wordpress, je ne crée pas un site toute seul de a à z. J'aide seulement les personnes à petit budget à avoir un site correcte sans rentrer dans les demandes complexent.

Pour la div
<!DOCTYPE html>
<!--[if lt IE 7 ]>	<html lang="en" class="ie6 ie">	<![endif]-->
<!--[if IE 7 ]>	<html lang="en" class="ie7 ie">	<![endif]-->
<!--[if IE 8 ]>	<html lang="en" class="ie8 ie">	<![endif]-->
<!--[if IE 9 ]>	<html lang="en" class="ie9 ie">	<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" prefix="og:   http://ogp.me/ns#">   <!--<![endif]-->
<div id="bordure-vert">
		<div class="bouton-fixe-lien">
			<a href="/contact">Demande de devis</a>
		</div>
	</div>
	<head>


Je n'ai trouvé que là pour quelle fonctionne pour le moment.

Merci encore