Sujet Précédent Sujet Suivant

Problèmr avec position : fixed

Fermé
Html/CSS - Modifié par jordane45 le 22/12/2014 à 12:47
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 - 26 déc. 2014 à 14:50
Voici mon texte html : 
<html>
 
 <head>
 
  <title>L'Entreprise</title>
  
  <link rel="stylesheet" href="Entreprise.css" />
  
 </head>
 
 <body bgcolor="lightblue">
  
  
  <div id="bandeau">
   <img width="100%" height="99px" src="image1.jpg" />
  </div>
    
  <div align="middle" id="nav">
   <a href="Stage.html" title="Stage" target="_blank">Stage</a>
   <a href="Introduction.html" title="Introduction" target="_blank">Introduction</a>
  </div>

  
  <div align="middle" id="menu">
  
  <div id="but">
   <ol>a <ol>
     <li>o</li>
     <li>b</li>
     <li>c.</li>
   </ol>
  </div>
  
  <div title="photo" id="photo" align="right">
   <img style=" align : right; " width="250px" height="250px" src="BureauDeDominique.png" title="Bureau de ma tutrice" id="photo" />
   <figcaption>Bureau de ma <strong>tutrice</strong></figcaption>
  </div>
   
  <div id="société">
   <p>e<br />
   
   <p>u
  </div>
  
  <div id="histoire">
   
   <p>L
  
  </div>
  </div>

</html>

et le CSS : 

@font-face 
{
    font-family: 'ballpark';
    src: url('polices/ballpark.ttf');
}

div#nav
{
 width: 100%;
 height: 55px;
 font-family : 'ballpark';
 font-size : 50px;
 position : fixed;
 background-color : white;
}

div#menu
{
 width:100 %;
 height : 400 px;
 background-color: lightblue;
 text-align : justify;
 border: 1px solid red;
 text-align : justify;
 padding : 12px;
 margin : 60px;
 word-wrap : break-word;
 overflow : auto;
}

div#histoire
{
 width:100 %;
 height : 400 px;
 background-color: lightblue;
 text-align : justify;
 border: 1px solid red;
 text-align : justify;
 padding : 12px;
 margin : 5px;
 word-wrap : break-word;
 overflow : auto;
}

div#société
{
 width: 65%;
 height : 35%;
 background-color: lightblue;
 text-align : justify;
 border: 1px solid red;
 text-align : justify;
 padding : 12px;
 margin : 5px;
 margin-top : 5px;
 word-wrap : break-word;
 overflow : auto;
}

div#but
{
 width: 100%;
 height : 35%;
 background-color: lightblue;
 text-align : justify;
 border: 1px solid red;
 text-align : justify;
 padding : 5px;
 float : top;
 word-wrap : break-word;
 overflow : auto;
}

div#photo
{
 margin: 12px;
 float : right;
}


Le problème est que avec position: fixed; quand je mets sur la photo, ça la redimensionne et moi j'ai pas envie, je veux qu'elle ait encore 100 pour width, 99pixel pour height, et je veux que lorsqu'on descende les deux soit collé.
A voir également:

6 réponses

Réponse 1 / 6
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 1 166
22 déc. 2014 à 14:52
Non c'est pas dur. Tu as juste besoin de te replonger dans le HTML5 et le CSS3 ! :)


Alors, j'ai apporté les modifications assez importantes sur le code html et css.

Déjà, j'ai mis la nav dans la div #bandeau, puis remplacé cette div par la balise header (parce-qu'en fin de compte, ton bandeau sert d'en-tête donc autant utiliser la balise dédiée à ça).

Ensuite, j'ai redéfinis un peu le body pour qu'il prenne toute la page.
Enfin, j'ai enlevé le 
position :fixed;
que tu avais mis au nav, pour le mettre au header en y ajoutant les option adéquates. Ainsi, le header (ex bandeau) prend toute la largeur de la page, et se positionne à 0px du haut de la page par rapport à l'écran.

Pour finir, j'ai mis à la div #menu (qui contien le restant de la page) un margin top de 159px (la hauteur du header) afin qu'elle n'empiète pas en-dessous du header.

Ce qui donne : 

<!DOCTYPE html>
<html> 
	<head> 

		<title>L'Entreprise</title> 
		<link rel="stylesheet" href="global.css" />
		<meta http-equiv="Content-Language" content="fr" />
		<meta charset="utf-8" />
	</head> 
	<body> 
		<header> 
			<img alt="image1" width="100%" height="99px" src="image1.jpg" /> 
			<nav> 
				<a href="Stage.html" title="Stage" target="_blank">Stage</a> 
				<a href="Introduction.html" title="Introduction" target="_blank">Introduction</a> 
			</nav> 
		</header> 

		<div id="menu"> 
			<div id="but"> 
				<ol>
					<li>a</li> 
					<li>o</li> 
					<li>b</li> 
					<li>c</li> 
				</ol> 
			</div> 

			<div id="photo">
				<img width="250px" height="250px" src="BureauDeDominique.png" title="Bureau de ma tutrice" /> 
				<figcaption>Bureau de ma <strong>tutrice</strong></figcaption> 
			</div> 

			<div id="société"> 
				<p>e<br />u</p>
			</div> 

			<div id="histoire"> 
				<p>L</p>
			</div> 
		</div>
	</body>
</html>


@font-face 
{ 
font-family: 'ballpark'; 
src: url('polices/ballpark.ttf'); 
} 

body
{
background-color: lightblue;
padding : 0px;
margin : 0px;
}

header
{
width: 100%;
position: fixed;
    top: 0px;
    z-index: 1;
}
nav 
{
text-align : center;
width: 100%; 
height: 55px; 
font-family : 'ballpark'; 
font-size : 50px;
background-color : white; 
}

#menu 
{
text-align : center;
width:100 %;
height : 400 px;
text-align : justify;
border: 1px solid red;
text-align : justify;
padding : 12px;
margin : 60px;
margin-top : 154px;
word-wrap : break-word;
overflow : auto;
} 

#histoire 
{ 
width:100 %; 
height : 400 px;
text-align : justify; 
border: 1px solid red; 
text-align : justify; 
padding : 12px; 
margin : 5px; 
word-wrap : break-word; 
overflow : auto; 
} 

#société 
{
width: 65%; 
height : 35%;
text-align : justify; 
border: 1px solid red; 
text-align : justify; 
padding : 12px; 
margin : 5px; 
margin-top : 5px; 
word-wrap : break-word; 
overflow : auto; 
} 

#but 
{ 
width: 100%; 
height : 35%;
text-align : justify; 
border: 1px solid red; 
text-align : justify; 
padding : 5px; 
float : top; 
word-wrap : break-word; 
overflow : auto; 
} 

#photo 
{
text-align : right;
margin: 12px; 
float : right; 
}
1
Réponse 2 / 6
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 1 166
Modifié par -L0Lock- le 22/12/2014 à 01:01
Bonjour. J'ai pas pris le temps d'étudier en détail ton code et j'ai envie de dormir... Mais une chose me saute aux yeux : ton code est bourré d'erreurs, du genre ouverture/fermeture de balises, l'utilisation d'atributs inutilisables dans les normes actuelles, etc.

Donc, d'ici mon retour demain (plus tard dans ce jours en fait) ou je regarderais en détail, tu peux lire ces quelques pages :
Conventions et normes de codage
Règles HTML/CSS pour les débutants
Et, si tu ne maîtrises pas le HTML5 et le CSS 3, commence par apprendre. Ca ne sert à rien de perdre du temps à te broyer la tête sur des problèmes si tu n'a même pas les bases. ^^

Et, si tu as le temps d'ici mon retour, tu peux commencer à corriger ton code. L'autocorrection est beaucoup plus instructive que de se faire corriger par un tiers.

Si je vous fait des reproches sur votre post, rendez-vous sur mon profil et lisez la section Devise/Proverbe, ça va vous aider.
0
Réponse 3 / 6
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 1 166
22 déc. 2014 à 12:40
Re! :D
Alors, j'ai corrigé ton code, et en voici les erreurs côté HTML:
► Indentation :
Ton code doit être indenté correctement. Il est question de lisibilité. Tu dois ajouter un cran pour chaque niveau de balise ajouté, vice versa.
► Les commentaires :
Un autre point important, tu dois commenter ton code. Je suppose que pour l'instant, tu sais à quoi sert tel id, telle classe, tel bout de code. Mais dans un mois? Six mois? Un an? C'est impensable. Et pour les personnes extérieures, c'est juste incompréhensible. Moi, je ne comprend pas ton code.
Tout code doit être commenté, afin qu'il soit compréhensible par tous dès la première lecture.
► ouverture et fermeture des balises :
Il faut que tu ouvres et ferme correctement tes balises. Sinon la page ne sera pas interprétée correctement par le navigateur. Par exemple : la balise de paragraphe : <p>Mon texte.</p>
► Le CSS doit être externe ou interne, mais pas les deux :
Tu dois choisir entre mettre le CSS dans un fichier externe ou le mettre directement dans le code html. Mais tu ne dois pas faire les deux en même temps. Le mieux sera toujours un fichier externe, quitte à en faire plusieurs pour les sites complexes. Mais tant que tu fais appel à un fichier CSS, on ne devra jamais voir un attribut "style" dans une balise.
► Mauvais utilisation des balises :
Je vois que des balises comme <strong></strong> sont utilisées sans raison. Ce genre de balises ne sont pas des balises de mise en page, mais de mise en valeur au niveau de l'indexation dans les moteurs de recherche. Ne les utilise pas pour l'interprétation visuelle que leur accorde ton navigateur.
► L'attribut alt :
Toute image doit porter un attribut alt.
► Les attributs de mise en page :
Les attributs de mise en page tels que align ou bgcolor ne sont pas valides. Tu dois te servir de code CSS (dans ton fichier CSS).
► Le nom du fichier CSS :
Toujours dans le but que ton code soit compréhensible, il faut que les fichiers aient un nom sensé. Donc que ton fichier css s'appelle "Entreprise", ça n'a pas de sens. Le nom de chaque fichier doit faire référence à son contenu et/ou à son but. Ton fichier CSS s'occupe de la globalité du CSS, donc on va l'appeler global.css.
Bien choisir le nom des fichiers est valable pour tout. A quoi fait référence le nom "image1"? A rien hormis une image, ce qui n'est pas précis.
► Choix des balises :
Révise tes balises. Les balises <nav> existent, tu n'a pas à créer un id pour remplacer une balise.
► Choix des id :
Une id ne s'utilise qu'une fois dans une page html. Déjà ça.
Mais tu dois aussi les utiliser à bon escient. Pourquoi donner une id "photo" à une image? Le nom n'est pas explicite, et si tu veux un code compréhensible, ce n'est pas en étant si imprécis sur les noms que tu va t'en sortir.
► Je remarque que l'id "bandeau" n'est pas utilisée. Soit tu la supprimes, soit tu l'utilises dans le CSS.


Et maintenant, les erreurs côté CSS :
► Les appels :
Tu n'a pas besoin d'appeler un id et la balise qui la contient. Un id ne s'utilise qu'une-seule fois dans une page, donc mieux vaut ne pas alourdir le code inutilement.
► 
Ne te répète pas :

Tu as déjà assigné la couleur lightblue au corps de la page, tu n'a pas à le refaire pour les balises contenues dans le corps de la page.


Voici donc le code corrigé (et dans une balise code pour que ce soit lisible) : 
<!DOCTYPE html>
<html> 

	<head> 

		<title>L'Entreprise</title> 
		<link rel="stylesheet" href="global.css" />
		<meta http-equiv="Content-Language" content="fr" />
		<meta charset="utf-8" />
	</head> 

	<body> 

		<div id="bandeau"> 
			<img alt="image1" width="100%" height="99px" src="image1.jpg" /> 
		</div> 

		<nav> 
			<a href="Stage.html" title="Stage" target="_blank">Stage</a> 
			<a href="Introduction.html" title="Introduction" target="_blank">Introduction</a> 
		</nav> 

		<div id="menu"> 
			<div id="but"> 
				<ol>
					<li>a</li> 
					<li>o</li> 
					<li>b</li> 
					<li>c</li> 
				</ol> 
			</div> 

			<div id="photo">
				<img width="250px" height="250px" src="BureauDeDominique.png" title="Bureau de ma tutrice" /> 
				<figcaption>Bureau de ma <strong>tutrice</strong></figcaption> 
			</div> 

			<div id="société"> 
				<p>e<br />u</p>
			</div> 

			<div id="histoire"> 
				<p>L</p>
			</div> 
		</div>
	</body>
</html>


@font-face 
{ 
font-family: 'ballpark'; 
src: url('polices/ballpark.ttf'); 
} 

body
{
background-color: lightblue;
}

nav 
{
text-align : center;
width: 100%; 
height: 55px; 
font-family : 'ballpark'; 
font-size : 50px; 
position : fixed; 
background-color : white; 
} 

#menu 
{
text-align : center;
width:100 %;
height : 400 px;
text-align : justify;
border: 1px solid red;
text-align : justify;
padding : 12px;
margin : 60px;
word-wrap : break-word;
overflow : auto;
} 

#histoire 
{ 
width:100 %; 
height : 400 px;
text-align : justify; 
border: 1px solid red; 
text-align : justify; 
padding : 12px; 
margin : 5px; 
word-wrap : break-word; 
overflow : auto; 
} 

#société 
{
width: 65%; 
height : 35%;
text-align : justify; 
border: 1px solid red; 
text-align : justify; 
padding : 12px; 
margin : 5px; 
margin-top : 5px; 
word-wrap : break-word; 
overflow : auto; 
} 

#but 
{ 
width: 100%; 
height : 35%;
text-align : justify; 
border: 1px solid red; 
text-align : justify; 
padding : 5px; 
float : top; 
word-wrap : break-word; 
overflow : auto; 
} 

#photo 
{
text-align : right;
margin: 12px; 
float : right; 
}


Maintenant, réexplique ton problème stp, lui aussi n'est pas compréhensible.

Et je te conseille fortement de lire en entier les pages que je t'ai fourni plus tôt, tu n'a visiblement pas les bases du HTML et du CSS, donc tu n'ira effectivement pas loin sans ça.
0
Réponse 4 / 6
Html/CSS
22 déc. 2014 à 14:24
OK merci, sinon oui je connais mon HTML mais je venais de reprendre ( 1 an 1/2 que je n'en n'avais pas fait ) et en faites j'aimerai que mon bandeau ( avec Stage et Introduction et l'image ) suive la page quand je descende seulement il n'y a que le Stage et Introduction qui suit, l'image se colle à gauche et se redimensionne mal ( mon image doit faire 100 width et 99px ). Je sais c'est un peu dur mias merci.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Html/CSS
Modifié par Html/CSS le 26/12/2014 à 10:51
Clap ! Clap ! Clap !

Merci ! Merci de m'avoir aidé et d'avoir été si courtois, je pense que tu as raison et je me replongerai bien dans les blocs ( article, aside, footer . . . ).
0
Réponse 6 / 6
Html/CSS
Modifié par Html/CSS le 26/12/2014 à 12:28
Merci encore
0
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 1 166
26 déc. 2014 à 14:50
De-rien! Bon courage pour reprendre la course! :)
Et n'oublie pas de marquer ton sujet comme résolu.
0

Discussions similaires

[PYTHON] Récupérer position dans liste
erickvand -
hugo -

12 réponses
Caler une adresse au niveau de la fenêtre d'une enveloppe
®omain -
kent -

15 réponses