28172 sujets

CSS et mise en forme, CSS3

Problème gestion des dimensions

Bonjour à toutes et à tous,
je suis un petit nouveau dans le vaste et bucolique monde de la programmation web, et je suis en train de réaliser un site (enfin en tout cas c'est censé s'en approcher) en HTML5/CSS3.

J'avance à (très) petits pas, et arrive à des résultats plus ou moins satisfaisants, mais voilà, mon gros problème c'est un foutu problème de gestion des dimensions.

J'explique, j'ai fait un menu horizontale de type barre unicolor grise avec les mes onglets de catégorie. Sur mozilla firefox ca marche très bien (enfin en tout cas quand la fenêtre web est ouverte en grand écran) par contre sur IE ca me zappe mon onglet "contact" et je sais pas trop quoi faire pour y remédier.
Idem sous firefox et chrome quand je réduis la taille de la fenêtre j'ai l'impression que le contenu essaye de se réajuster mais ça donne un résultat épouvantable : des catégories qui disparaissent, les images se mettent les unes au dessus des autres...

Si une âme charitable veut bien jeter un coup d'oeil à mon CSS ci dessous et me diagnostiquer le problème je lui en serai redevable Smiley smile
(sachant que j'ai bien conscience que pour des développeurs expérimentés, l'organisation de mon css doit être à vomir Smiley lol )

body 
{
  background-image:url(images/fond10.png);
  background-size: 100% 100%;
}
.couleurgrise
{
    color: grey;
    text-shadow: 2px 2px 4px grey;
}
.couleurgrise
{
 font-size: 35px;
}
.couleurgrise
{
text-align: center;
}
.couleurgrise2
{
    color: grey;
}
.couleurgrise2
{
 font-size: 30px
}
.couleurgrise2
{
text-align: center;
}
p 
{
   width: 92%;
   border: none;
   text-align: justify;
   padding: 5px;
   margin: 30px; 
}

#cssmenu 
{ 
  width: auto;
  height: 27px;
  margin: 0;
  padding: 0;
  background: grey url(bg-bubplastic.gif) top left repeat-x;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul li {
  float: left;
  margin: 0;
  padding: 0;
  background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}
#cssmenu ul li a {
  display: block;
  height: 27px;
  padding-left: 35px;
  float: left;
  text-transform: uppercase;
  font-family: arial, helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 14px;
  color: white;
  text-decoration: none;
}
#cssmenu ul li a span {
  display: block;
  float: left;
  height: 22px;
  padding-top: 5px;
  padding-right: 35px;
  background: transparent url(bg-bubplastic-button.gif) top right no-repeat;
  cursor: pointer;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  background: transparent url(bg-bubplastic-h-gray.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,
#cssmenu ul li.active a span {
  background: transparent url(bg-bubplastic-h-gray.gif) top right no-repeat;
}
nav 
{
margin-left: auto;
margin-right: auto;
width: 64%;
}
nav
{
    box-shadow: 6px 6px 6px grey;
}

nav a:hover
{
	text-decoration: underline;
    color: white;
    border-bottom: 3px solid #4d4d4d;
}
body
{
text-align: center;

}
article
{
margin:30px 220px 0px 220px;
text-align: justify;
font-family: verdana, arial, 'microsoft sans serif', arial, sans-serif;
font-size: 13px;
}

img
 {
margin:0px 60px 0px 60px;
}

footer
{
background: #808080;
margin:252px 220px 0px 220px;
color: white;
font-family: arial, helvetica, 'microsoft sans serif', arial, sans-serif;
font-size: 13px;
box-shadow: 6px 6px 6px grey;
}



Merci d'avance !
Pourrais tu aussi nous mettre un bout de ton code html ? ça aiderai a cibler sur quels éléments tu a appliqué tes styles Smiley smile
Pas de problème, je vous mets même le code HTML en entier, il est pas long. Merci de t'y intéresser en tout cas Smiley smile (en tout y'a 5 pages sur le site, toutes ont exactement la même structure)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		 <link rel="stylesheet" href="style.css" />
        <title></title>
		<link rel="shortcut icon" type="image/png" href="images/favicon2.png" />
    </head>
    <body>
	<h1 class="couleurgrise"></h1>
	<nav>
	<div id='cssmenu'>
	<ul>
		<li class='active'><a href='index.html'><span>Accueil</span></a></li>
		<li><a href='projet.html'><span>Le projet</span></a></li>
		<li><a href='voyageur.html'><span>Le voyageur</span></a></li>
		<li><a href='ballade.html'><span>Ballade au bout du monde</span></a></li>
		<li class='last'><a href='contact.html'><span>Contact</span></a></li>
	</ul>
	</div>
	</nav>
	<article>
	<p>blablabla blobloblo blablabla blobloblo blablabla blobloblo blablabla blobloblo</p>
	<p>blablabla blobloblo blablabla blobloblo blablabla blobloblo blablabla blobloblo </p>
	<section>
    <p><img src="images/montagnes.png" alt="Dessin de montagne" /><img src="images/voyage.png" alt="Dessin de voyage" /><img src="images/africa.png" alt="Dessin de Afrique" /></p>
	</section>
	<p>blablabla blobloblo blablabla blobloblo blablabla blobloblo blablabla blobloblo</p>

	</article>
	
    </body>
	
	<footer>
	, tous droits résérvés
	</footer>
</html>

Modifié par Archy (30 Aug 2013 - 23:06)
Tu peux mettre ton code sur jsfiddle stp ?

Pour quel version d'IE ça déconne sévère ?
NB : sur IE les tags HTML5 type "article" ne fonctionne pas, il ne sait même pas ce que c'est.
Faudrait vérifier les versions d'IE

Ton contenu de la nav est réajusté car tu as mis la valeur en %, du coups qd tu redimensionnes ta fenêtre il recalcule la valeur avec le %.
Je pense que si tu mets une valeurs en PX, le bloc ne bougera pas
Par rapport a IE et au HTML5, pour qu'il reconnaisse les balise il faut que tu rajoute le code suivant dans ta balise <head></head>

<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Pourquoi mettre un span dans tes liens ? Je n'en vois pas l'interet !

Pour le reste je regarde tout ça plus tard mais essaye deja de mettre le code dans le head, ça pourrait peut etre aider Smiley smile
Merci pour vos réponses Smiley smile

Par rapport à la version d'IE j'ai testé sur du IE10 et en fait le seul problème vient vraiment du fait qu'un de mes onglets de mon menu est juste zappé (comme si il y avait un manque de place). Velvet, même en rajoutant le code dans le head, toujours le même problème pour IE10.
(alors en fait en augmentant la taille de mon menu horizontale de 850px à 870px, l'onglet "contact" apparaît sous IE... cherchons à comprendre... Par contre du coup sous Firefox c'est pas hyper esthétique puisque la barre de soulignement ne va pas jusqu'au bout du menu...)

J'ai changé la valeur du nav pour la mettre en px et non en %, maintenant ça me fait plus un menu sans queue ni tête quand on modifie la taille de la fenêtre, mais ça reste hyper laid (le menu conserve sa taille est déborde sur les marges de mon background).
Je crois que j'ai un sérieux problème par rapport à la gestion des proportions, quand le site est ouvert sur une fenêtre au max il est très bien (enfin tout est relatif) mais dès lors qu'on commence à vouloir réduire la fenêtre c'est la débandade...

Pour les <span> je le confesse j'ai un peu volé le menu sur un tuto de création donc je me suis pas trop préoccupé de ce qu'il contenait.

Quand je mets mon code html dans jsFiddle ça me donne ces infos :
No need for the HTML tag, it's already in the output.
No need for the META tags.
No need for the HEAD tag, it's already in the output.
For external CSS files use the Resources panel on the left.

Je sais pas si c'est ce qui fallait que je récupère ?

Désolé du pavé, et merci de vos contributions, c'est pas évident tout ça quand on commence.
Comme je te l'ai dis plus haut, ta nav est redimensionné automatiquement car tu as mis une valeur en %.

Pour la corriger, soit tu utilises une valeur en px, soit tu utilises les @media-queries.

Pour ce qui est du jsfiddle, tu dois mettre uniquement dans la partie HTML ce qui se trouve entre <body> blablabla </body> rien d'autre.
Si tu as du js tu le met dans la partie JS, mais pour ton problème il n'y en a pas besoin.
Tu as une partie également pour mettre ton .CSS qui est vers la droite

Pas besoin de t'excuser, on débute tous un jour, quand j'ai commencé j'étais persuadé qui fallait 2 images pour changer un lien de couleur au survol... Smiley lol

Je te laisse découvrir mon portfolio si tu veux voir l'évolution
Modifié par artsx (22 Aug 2013 - 15:25)
Merci de la réponse !
Je suis allé voir ton portfolio, très sympa, j'espère un jour arriver moi aussi à pouvoir réaliser ce genre de choses Smiley eek
Mon site avance, je suis en train de le passer en ligne, sauf qu'aujourd'hui j'ai été confronté à un dilemme de débutant assez ennuyeux.
Je m'extasiais devant mon premier travail html/css quand je me suis rendu compte que j'avais mis toutes les valeurs en px sans me soucier de ce que ça aurait donné sur une autre machine que la mienne (nom de nom...). Ni une ni deux je me rappelle qu'il faut privilégier le pourcentage, et me voilà parti dans un travail interminable, passer toutes les valeurs px en %. Et c'est seulement à la fin de ce travail et après avoir obtenu un rendu a peu près équivalent (sur mon pc en tout cas) que je me suis rappelé qu'il y avait pas de % mais qu'on parlait d'Em (et meeeerde). Alors je viens (encore) à vous aujourd'hui pour savoir si c'est grave d'utiliser des % et pas d'Em ? (toujours ces questions de proportions, de gestion des tailles...).

Et comme si ça suffisait pas pour une raison que j'ignore absolument, IE a recommencé à faire des siennes alors que tout allait bien.
Capture d'écran à l'appui :

Avec Firefox :
upload/51197-Capture1.PNG

Avec IE :
upload/51197-Capture2.PNG

Je vous mets le html et le css :

<!DOCTYPE html>
<html>
    <head>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
        <meta charset="utf-8" />
		 <link rel="stylesheet" href="style.css" />
        <title></title>
		<link rel="shortcut icon" type="image/png" href="images/favicon2.png" />
		<link href='http://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
    </head>
    <body>
	
	<h1 class="couleurgrise"></h1>
	<nav>
	<div id='cssmenu'>
	<ul>
		<li class='active'><a href='index.html'><span>Accueil</span></a></li>
		<li><a href='projet.html'><span>Le projet</span></a></li>
		<li><a href='voyageur.html'><span>Le voyageur</span></a></li>
		<li><a href='ballade.html'><span>Ballade au bout du monde</span></a></li>
		<li class='last'><a href='contact.html'><span>Contact</span></a></li>
	</ul>
	</div>
	</nav>
	<article>
	<h1 class='couleurgrise2'>Welcome !</h1>
	<p>blabla bla bla bla.</p>
	<p><img src="images/montagnes.png" alt="Dessin de montagne" /><img src="images/voyage.png" alt="Dessin de voyage" /><img src="images/africa.png" alt="Dessin de Afrique" /></p>
	<p> blablablab balbal</p>
	<section>
	</section>
	<p>blabalbal bala</p>
	<p class="bonnevisite">blablablab</p>
	</article>
	
    </body>
	
	<footer>
	 tous droits résérvés | 2013
	</footer>
</html>



body 
{
  background-image:url(images/fond5.png);
  background-size: 100% 100%;
}
@font-face 
{
    font-family: 'Quicksand';
    src: url('typo/quicksand-regular.otf');
}

.couleurgrise
{
 font-family: 'Megrim', cursive;
 font-size: 270%;
 color: grey;
 text-shadow: 2px 2px 4px grey;
 text-align: center;
}

.couleurgrise2
{
font-family: 'Shadows Into Light', cursive;
color: grey;
font-size: 265%;
text-align: center;
}
.couleurgrise3
{
font-family: 'Shadows Into Light', cursive;
color: white;
font-size: 180%;
text-align: center;
margin:0px 0px 0px 0px;
}
.couleurgrise4
{
font-family: 'Shadows Into Light', cursive;
color: #464646;
font-size: 150%;
text-align: center;
}
.bonnevisite
{
text-align: center;
}
p 
{
   width: 92%;
   border: none;
   text-align: justify;
   padding: 1%;
   margin: 1% 0% 0% 3%; 
}

#cssmenu 
{ 
  width: auto;
  height: 32px;
  margin: 0;
  padding: 0;
  background: grey url(bg-bubplastic.gif) top left repeat-x;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul li {
  float: left;
  margin: 0;
  padding: 0;
  background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}
#cssmenu ul li a {
  display: block;
  height: 27px;
  padding-left: 23%;
  float: left;
  text-transform: uppercase;
  font-family: 'Shadows Into Light', arial, helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 116%;
  color: white;
  text-decoration: none;
}
#cssmenu ul li a span {
  display: block;
  float: left;
  height: 22px;
  padding-top: 0px;
  padding-right: 23%;
  background: transparent url(bg-bubplastic-button.gif) top right no-repeat;
  cursor: pointer;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  background: transparent url(bg-bubplastic-h-gray.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,
#cssmenu ul li.active a span {
  background: transparent url(bg-bubplastic-h-gray.gif) top right no-repeat;
}
nav 
{
margin-left: auto;
margin-right: auto;
width: 65.4%;
}
nav
{
    box-shadow: 6px 6px 6px #1a1a1a;
}

nav a:hover
{
	text-decoration: underline;
    color: white;
    border-bottom: 5px solid white;
}
body
{
text-align: center;

}
article
{
margin: 0% 16% 0% 16%;
text-align: justify;
font-family: quicksand, verdana, arial, 'microsoft sans serif', arial, sans-serif;
font-size: 96%;
}

img
 {
margin:0% 7% 0% 7%;
}

footer
{
background: #808080;
margin: 4% 18% 0% 18%;
color: white;
font-family: 'Shadows Into Light', arial, helvetica, 'microsoft sans serif', arial, sans-serif;
font-size: 115%;
box-shadow: 6px 6px 6px #1a1a1a;
}
aside
{
    position: relative;
    width: 25%;
    background-color: grey;
    box-shadow: 6px 6px 6px #1a1a1a;
    border-radius: 5px;
    padding: 2%;
    color: white;
    font-size: 95%;
	margin:0% 1% 0% 1%;
}
.flottant
{
float: right;
}
.mapmonde
 {
margin:0% 0% 0% 23%;
}


Merci à tous ceux qui voudraient éclairer ma chandelle de newbie Smiley decu
Modifié par Archy (30 Aug 2013 - 23:07)
Saloute, je pense que ce que tu fais niveau % peu être dangereux surtout sur des margin / padding etc..
Selon la taille des écrans tu peux avoir des rendus totalement différents.
Il n'y a rien de grave a utiliser des PX ou EM ou % en soit.
Tout dépend ce qu'on souhaite faire au final.

Mais sinon en règle général ce qu'on fait (en tout cas moi, mais y a plein d'école différent et contre exemple, c'est la ou on se sent le plus à l'aise pour travailler et surtout maintenir le site qui compte) pour utiliser des % c'est uniquement pour des conteneurs.
Pour exemple : 
<div class="conteneur">
     <div class="conteneur-gauche">
           <p> blablabla</p>
     </div>
     <div class="conteneur-droite">
           <p> blablabla</p>
     </div>
</div>


CSS : 
.conteneur{
    width:990px;
    margin:0 auto;/* pour centrer le bloc */
}
.conteneur-gauche{
    width:70%;/* le bloc prendra 70% du .conteneur */
    float:left;
}
.conteneur-droite{
    width:30%;
    float:left;
}


A savoir que si tu rajoutes des margin/padding au conteneur gauche/droite faut ajuster les %.

Ensuite vient le côté responsive ou on ajuste avec les media queries de cette façon : 
@media (max-width: 1024px){
    .conteneur{width:720px;}
}


Ce qu'on fait ici c'est qu'on lui indique que si un ecran a pour largeur maximum de 1024px, alors tu me met le .conteneur à la largeur de 720px; comme tes blocs gauche/droite sont en %, ils s'ajusteront automatiquement.

Ensuite pour ton soucis d'IE je pense qu'il faudrait que tu tente de réduire tes padding-left/right que tu as mis en %.
Passe déjà ses valeurs en PX ou EM comme ça tu seras sur que ton menu ne bougera pas selon les différents écran / navigateurs.
A mon avis si tu regardes ton site sur un mobile il doit pas être très jolie à voir.

Bon courage, hésite pas si tu as besoin d'aide Smiley cligne
Sujet clos
Aller à