- Accueil
- Forums
- Développement
- Php/javascript/html
- Sacré footer !
Sacré footer !
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 12:34 
Coucou à tous,
J'enchaine les post sur l'html, et oui c'est ca que de débuter
Et cette fois-ci c'est à cause de ce fichu footer, je vous explique et vous montre ce qui cloche et que j'arrive pas à regler:
Voila ! Le footer, comme sur la troisième photo, ce mets en bas de l'ecran et pas en bas de la page ! Donc dès que l'on baisse la page il est superposé a mon article.
Quelqu'un aurais une idée ou alors un problème dans mes code ?
Je vous en supplie je ne trouve pas de solutions
J'enchaine les post sur l'html, et oui c'est ca que de débuter
Et cette fois-ci c'est à cause de ce fichu footer, je vous explique et vous montre ce qui cloche et que j'arrive pas à regler:
Voila ! Le footer, comme sur la troisième photo, ce mets en bas de l'ecran et pas en bas de la page ! Donc dès que l'on baisse la page il est superposé a mon article.
Quelqu'un aurais une idée ou alors un problème dans mes code ?
Je vous en supplie je ne trouve pas de solutions
0 pour,0
nainno @
Cowcot Team
6830pts
Inscrit le: 27 juillet 2010
Age: 38
Messages: 2193
Localisation: Nantes
Navigateur : n.c.
Hors ligne
Cowcot Team
6830pts
Inscrit le: 27 juillet 2010
Age: 38
Messages: 2193
Localisation: Nantes
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 13:06
changes leposition : absolute en relative et retentes
Two weeks of no pope: baby cured of HIV, breath test for cancer, salt water found on moon of Jupiter. Day one with pope: Google Reader dies.
Two weeks of no pope: baby cured of HIV, breath test for cancer, salt water found on moon of Jupiter. Day one with pope: Google Reader dies.
0 pour,0
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 13:48
En relative il ce colle sous le titre, donc meme pas en bas de l'ecran cette fois ci
0 pour,0
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 13:55
ha ! J'ai réussis a le coller en bas avec un "margin-top: 95%;" mais je suis pas sur que cette technique soit très conventionnelle si ?
0 pour,0
Posté le: 15 août 2013 à 13:57
Et entre les balises :
<footer>
<div id="footer">
</div>
</footer>
Ça donne quoi?
<footer>
<div id="footer">
</div>
</footer>
Ça donne quoi?
0 pour,0
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 14:08
Au début j'vais tout en <header>, <nav>, <article>, <footer> et ca marchait pas non plus donc je me suis dit que le "<div>" marcherais peut être mieux comme un "block" mais nan aucunes différences
0 pour,0
Posté le: 15 août 2013 à 14:29
bizarre car le <footer> est sensé être reconnu comme balise de bas de page au même titre que le <header>.
EDIT : <footer> ne serait reconnu que par l'HTML5 d'après ce que je viens de lire.
Sinon, pour faire plus propre et enlever le "margin-top", essaie de mettre "position:fixed".
EDIT : <footer> ne serait reconnu que par l'HTML5 d'après ce que je viens de lire.
Sinon, pour faire plus propre et enlever le "margin-top", essaie de mettre "position:fixed".
0 pour,0
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 14:44
Oui mais avec un fixed il suis ton défilement d'ecran et ce n'est pas vraiment un vrai footer si?
edit: mais sur les pages web comment font les webmasters ? a l'aide de javascript ?
edit: mais sur les pages web comment font les webmasters ? a l'aide de javascript ?
0 pour,0
Posté le: 15 août 2013 à 16:31
Salut overlife !
Pour que nous puissions t'aider correctement, tu devrais mettre ton code directement dans le message, et pas en photo, et surtout le mettre intégralement. Il arrive parfois qu'un élément "gène" un autre élément et que celui-ci se place mal dans la page.
As-tu appris ce qu'est un commentaire en CSS ? Si c'est le cas, je te suggère de mettre tous tes position : absolute, relative ou fixed en commentaires. Comme ça, ils ne seront plus prix en compte et tu pourras voir le résultat.
En fait, je pense que sans la balise position pour chaque élément, tu pourras obtenir le résultat désiré.
Tiens-moi au courant !
Pour que nous puissions t'aider correctement, tu devrais mettre ton code directement dans le message, et pas en photo, et surtout le mettre intégralement. Il arrive parfois qu'un élément "gène" un autre élément et que celui-ci se place mal dans la page.
As-tu appris ce qu'est un commentaire en CSS ? Si c'est le cas, je te suggère de mettre tous tes position : absolute, relative ou fixed en commentaires. Comme ça, ils ne seront plus prix en compte et tu pourras voir le résultat.
En fait, je pense que sans la balise position pour chaque élément, tu pourras obtenir le résultat désiré.
Tiens-moi au courant !
0 pour,0
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 17:58
Luc A je te remercie ! j'ai essayer ce que tu m as conseillé et c'est tout a fait satisfaisant
Je mets quand même le code pour voir si vous pouvez me dire ce qui cloche :
/*structure_principale*/
body
{
height:100%;
font-family: 'ambleregular', serif;
background-image: url("background.jpg");
}
header
{
background-color: black;
border-bottom: 5px groove rgb(0,0,186);
border-top: 5px groove rgb(0,0,186);
color:blue;
border-radius: 10px;
} #nav
{
margin-top: 20px;
position:fixed;
left: 0px;
border-right: 2px groove rgb(0,0,186);
border-left: 2px groove rgb(0,0,186);
/*width: 20%;
height: 40%;*/
background-color: black;
border-radius: 20px;
} #article
{
margin-top: 20px;
color: blue;
/*position: absolute;
right: 200px;
top: 250px;*/
border: 2px groove rgb(0,0,186);
border-radius: 20px;
/*width: 60%;
height: 350px;*/
background-color: black;
padding: 10px;
} #news
{
margin-top: 20px;
color: blue;
/*position: absolute;
right: 200px;
top: 640px;*/
border: 2px groove rgb(0,0,186);
border-radius: 20px;
/*width: 60%;
height: 35%;*/
background-color: black;
padding: 10px;
}
footer
{
margin-top: 95%;
/*width: 50%;
position: relative;
bottom: 100%;
left: 25%;*/
clear: both;
border-top: 5px groove rgb(0,0,186);
border-bottom: 5px groove rgb(0,0,186);
background-color: black;
border-radius: 10px;
text-align: center;
} #block_page
{
width: 900px;
margin: auto;
}
.lol
{
background-color: rgb(0,0,186);
border: 5px groove blue;
border-radius: 10px;
}
Je mets quand même le code pour voir si vous pouvez me dire ce qui cloche :
/*structure_principale*/
body
{
height:100%;
font-family: 'ambleregular', serif;
background-image: url("background.jpg");
}
header
{
background-color: black;
border-bottom: 5px groove rgb(0,0,186);
border-top: 5px groove rgb(0,0,186);
color:blue;
border-radius: 10px;
} #nav
{
margin-top: 20px;
position:fixed;
left: 0px;
border-right: 2px groove rgb(0,0,186);
border-left: 2px groove rgb(0,0,186);
/*width: 20%;
height: 40%;*/
background-color: black;
border-radius: 20px;
} #article
{
margin-top: 20px;
color: blue;
/*position: absolute;
right: 200px;
top: 250px;*/
border: 2px groove rgb(0,0,186);
border-radius: 20px;
/*width: 60%;
height: 350px;*/
background-color: black;
padding: 10px;
} #news
{
margin-top: 20px;
color: blue;
/*position: absolute;
right: 200px;
top: 640px;*/
border: 2px groove rgb(0,0,186);
border-radius: 20px;
/*width: 60%;
height: 35%;*/
background-color: black;
padding: 10px;
}
footer
{
margin-top: 95%;
/*width: 50%;
position: relative;
bottom: 100%;
left: 25%;*/
clear: both;
border-top: 5px groove rgb(0,0,186);
border-bottom: 5px groove rgb(0,0,186);
background-color: black;
border-radius: 10px;
text-align: center;
} #block_page
{
width: 900px;
margin: auto;
}
.lol
{
background-color: rgb(0,0,186);
border: 5px groove blue;
border-radius: 10px;
}
0 pour,0
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 18:21
J'ai l'impression que c'est le: #news
{
margin-top: 20px;
margin-bottom: 50px;
color: blue;
/*position: absolute;
right: 200px;
top: 640px;*/
border: 2px groove rgb(0,0,186);
border-radius: 20px;
width: 60%;
height: 35%;
background-color: black;
padding: 10px;
}
Quand j'enlève le commentaire sur la position, le footer ce colle a l'article.
{
margin-top: 20px;
margin-bottom: 50px;
color: blue;
/*position: absolute;
right: 200px;
top: 640px;*/
border: 2px groove rgb(0,0,186);
border-radius: 20px;
width: 60%;
height: 35%;
background-color: black;
padding: 10px;
}
Quand j'enlève le commentaire sur la position, le footer ce colle a l'article.
0 pour,0
Posté le: 15 août 2013 à 21:13
Overlife, je vais tâcher de t'expliquer ce qui s'est passé.
En CSS, il ne faut utiliser la propriété "position" que si celle-ci est présente dans TOUS LES ÉLÉMENTS HTML.
En fait, on utilise l'élément "position" pour déterminer une position qui doit apparaitre à tel endroit. Par exemple, lorsque tu vas sur une site Internet pour t'inscrire (forum), que tu as un règlement qui s'affiche au milieu de la page. On va utiliser "position: absolute" car le règlement doit apparaitre au milieu de la page. MAIS, grâce à la propriété "z-index", celui-ci apparait au dessus des autres, c'est une superposition, et les éléments sous l'élément superposé seront cachés.
Pour z-index, il s'utilise avec des nombre :
"z-index: 5;"
Plus le nombre est grand, et plus l'élément auquel il se rapporte sera prioritaire dans l'ordre d'affichage.
J'espère t'avoir aidé !
En CSS, il ne faut utiliser la propriété "position" que si celle-ci est présente dans TOUS LES ÉLÉMENTS HTML.
En fait, on utilise l'élément "position" pour déterminer une position qui doit apparaitre à tel endroit. Par exemple, lorsque tu vas sur une site Internet pour t'inscrire (forum), que tu as un règlement qui s'affiche au milieu de la page. On va utiliser "position: absolute" car le règlement doit apparaitre au milieu de la page. MAIS, grâce à la propriété "z-index", celui-ci apparait au dessus des autres, c'est une superposition, et les éléments sous l'élément superposé seront cachés.
Pour z-index, il s'utilise avec des nombre :
"z-index: 5;"
Plus le nombre est grand, et plus l'élément auquel il se rapporte sera prioritaire dans l'ordre d'affichage.
J'espère t'avoir aidé !
0 pour,0
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 15 août 2013 à 21:58
D'accord merci luc-a c'est un peu plus claire maintenant.
Mais concrètement comment je fais pour placer mes objet ?
Mais concrètement comment je fais pour placer mes objet ?
0 pour,0
Posté le: 16 août 2013 à 08:14
Bonjour Overlife !
Attention à ton vocabulaire : un objet n'est pas un élément HTML !! C'est important si tu veux apprendre Javascript, PHP ou un autre langage de programmation.
En fait, l'ordinateur va lire ton code de façon linéaire puis va l'interpréter. C'est là que tu obtiens le contenu de ton site sur Wampserver ou Internet.
Donc, les éléments HTML apparaissent en général les uns à la suite des autres. Attention cependant de ne pas oublier de définir les tailles de ces éléments, à savoir la largueur (width) et la hauteur (height). Je te recommande d'utiliser les pixels comme unité de mesure.
Si tu veux superposé un élément, il faut utiliser "z-index".
Si tu veux qu'un élément oit à gauche (comme un menu), il faut utiliser "float: left;" Le flottant, ou "float" est une propriété CSS qui te permet de mettre un élément à gauche ou à droite d'une page.
Je vais te donner un exemple plus concret avec un menu.
Si tu veux un menu horizontal, c'est-à-dire sur une seule ligne, tu devras appliquer " float: left" à chaque élément de ce menu :
HTML
<ul>
<li class="sousmenu">
</li>
<li class="sousmenu">
</li>
<li class="sousmenu">
</li>
</ul>
CSS
.sousmenu{
float: left;
}
Si tu veux avoir un menu vertical, c'est-à-dire sur une seule colonne, tu devras appliquer "float: left;" à l'élément global du menu :
HTML
<ul class="sousmenu">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
CSS
.sousmenu{
float: left;
}
Tu peux faire cela pour chaque élément HTML, par exemple sur les paragraphes <p></p> comme pour faire les colonnes d'un journal.
J'espère avoir répondu à ta question.
Attention à ton vocabulaire : un objet n'est pas un élément HTML !! C'est important si tu veux apprendre Javascript, PHP ou un autre langage de programmation.
En fait, l'ordinateur va lire ton code de façon linéaire puis va l'interpréter. C'est là que tu obtiens le contenu de ton site sur Wampserver ou Internet.
Donc, les éléments HTML apparaissent en général les uns à la suite des autres. Attention cependant de ne pas oublier de définir les tailles de ces éléments, à savoir la largueur (width) et la hauteur (height). Je te recommande d'utiliser les pixels comme unité de mesure.
Si tu veux superposé un élément, il faut utiliser "z-index".
Si tu veux qu'un élément oit à gauche (comme un menu), il faut utiliser "float: left;" Le flottant, ou "float" est une propriété CSS qui te permet de mettre un élément à gauche ou à droite d'une page.
Je vais te donner un exemple plus concret avec un menu.
Si tu veux un menu horizontal, c'est-à-dire sur une seule ligne, tu devras appliquer " float: left" à chaque élément de ce menu :
HTML
<ul>
<li class="sousmenu">
</li>
<li class="sousmenu">
</li>
<li class="sousmenu">
</li>
</ul>
CSS
.sousmenu{
float: left;
}
Si tu veux avoir un menu vertical, c'est-à-dire sur une seule colonne, tu devras appliquer "float: left;" à l'élément global du menu :
HTML
<ul class="sousmenu">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
CSS
.sousmenu{
float: left;
}
Tu peux faire cela pour chaque élément HTML, par exemple sur les paragraphes <p></p> comme pour faire les colonnes d'un journal.
J'espère avoir répondu à ta question.
0 pour,0
overlife @
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.
Hors ligne
Posté le: 16 août 2013 à 13:03
Merci beaucoup luc-a, oui tu ma vraiment aider là parcque je galère encore un peu vu que c'est le debut
Encore une petite question Une idée du plan:
-Comment je fais pour plcer mes images dans le cas 1 ? avec display: inline-block pour faire du un a coté de l'autre ?
- Et comment je centre mon image dans le cas 2 ? En float middle ? ( le float ce fait a partir de la div ou de la page ?
Encore merci pour ton aide luc-a c'est sympa de m'aider un peu
Encore une petite question
Une idée du plan:
-Comment je fais pour plcer mes images dans le cas 1 ? avec display: inline-block pour faire du un a coté de l'autre ?
- Et comment je centre mon image dans le cas 2 ? En float middle ? ( le float ce fait a partir de la div ou de la page ?
Encore merci pour ton aide luc-a c'est sympa de m'aider un peu
0 pour,0
- Accueil
- Forums
- Développement
- Php/javascript/html
- Sacré footer !
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
Sujets similaires |
|||||
| Sujet | Auteur | Forum | Réponses | Posté le | |
|---|---|---|---|---|---|
 |
ce n'est pas le mien mais c'est du sacré travail | tripleX | Mods | 11 | 17 mai 2005 à 12:06 |
- 14:36 Des faux SSD Samsung 1080 Pro à 15.8 Go/sec en circulaltion sur le net
- 14:26 ZALMAN ALPHA2 A36, un watercooling AIO pas cher et complet !
- 12:17 Que donnerait le jeu Metal Gear 2: Solid Snake en 3D ?
- 12:15 De la simple GDDR6 18 Gbps pour les futures RX 8000 RDNA4 d'AMD ?
- 12:04 ASUS annonce l'arrivée du PG39WCDM, un écran OLED 1440p avec un panorama aussi large qu'un 32 pouces.
- 12:04 HP annonce un nouvel écran UHD avec Thunderbolt 4 et client KVM.
- 11:34 AOC accompagne les professionnels de la création avec la série Graphic Pro U3 : le nec plus ultra pour des couleurs éclatantes.
- 11:26 Quelques screenshots pour le retardataire The Wolf Among Us 2 !
- 10:53 Les ventes du printemps : Windows 10 à 13 euros, Windows 11 à 19 euros
- 10:50 Cyberpunk 2077 se sublime en 8K avec le mod Ultra+ Path Tracing
Plantages aléatoires v2 [ CPU, Cartes mères, RAM ]
Spouny il y a 43 minutes.
Flight Simulator 2020 (Performance in-game) [ Jeux pc ]
Mick996 il y a 11 heures.
Test alimentation DAGGER PRO : du SFX ATX 3.0 au TOP [ Alimentations ]
mantidor il y a 14 heures.
[VDS] GIGABYTE GeForce RTX 2060 WINDFORCE OC 6G [ Ventes ]
CharlyLourson il y a 16 heures.
Perte débit watercooling [ Watercooling ]
azureus il y a 2 jours.
Vos jeux du moment [ GameLand ]
Sapinsympa il y a 2 jours.- NEED: le topic des acheteurs compulsifs 2024 [ Le poulailler ]
Sapinsympa il y a 2 jours. 
Insatisfaction du jour 2024 [ Le poulailler ]
cordobaseb il y a 2 jours.
Core i5-13400F VS Core i5-13500, lequel est le meilleur e... [ CPU, Cartes mères, RAM ]
SebastienD il y a 2 jours.
Choix de ma carte mère [ Composants ]
Bedouille69 il y a 2 jours.- Tous les forums