EN DIRECT en ligne connexion / inscription
Connexion

Surnom/Pseudo
Mot de Passe :

[ Vous avez perdu votre mot de pass ? | Devenir membre ]

×

Sacré footer !

Aller à la page : 12  
CowcotLand topic RSS feed Surveiller les réponses de ce sujet
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 12:34  Lien permanent
Répondre en citant
Coucou à tous,

J'enchaine les post sur l'html, et oui c'est ca que de débuter Très content

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 Confus
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
nainno @
Cowcot Team
Cowcot Team

6713pts

Inscrit le: 27 juillet 2010
Age: 35
Messages: 2163
Localisation: Nantes
Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 13:06  Lien permanent
Répondre en citant
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.
Voir le profil de l'utilisateur Envoyer un message privé » Album Photos » Google Map
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 13:48  Lien permanent
Répondre en citant
En relative il ce colle sous le titre, donc meme pas en bas de l'ecran cette fois ci Confus
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 13:55  Lien permanent
Répondre en citant
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 ?
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
maptiviou @
Fermier
Fermier

5770pts

Inscrit le: 28 mars 2012
Messages: 2739

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 13:57  Lien permanent
Répondre en citant
Et entre les balises :

<footer>
<div id="footer">
</div>
</footer>

Ça donne quoi?
Voir le profil de l'utilisateur Envoyer un message privé
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 14:08  Lien permanent
Répondre en citant
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
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
maptiviou @
Fermier
Fermier

5770pts

Inscrit le: 28 mars 2012
Messages: 2739

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 14:29  Lien permanent
Répondre en citant
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".
Voir le profil de l'utilisateur Envoyer un message privé
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 14:44  Lien permanent
Répondre en citant
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 ?
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
Luc-A @
Métayer
Métayer

4310pts

Inscrit le: 24 juin 2013
Messages: 603

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 16:31  Lien permanent
Répondre en citant
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 !
Voir le profil de l'utilisateur Envoyer un message privé » Album Photos
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 17:58  Lien permanent
Répondre en citant
Luc A je te remercie ! j'ai essayer ce que tu m as conseillé et c'est tout a fait satisfaisant Très content
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;
}
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 18:21  Lien permanent
Répondre en citant
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.
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
Luc-A @
Métayer
Métayer

4310pts

Inscrit le: 24 juin 2013
Messages: 603

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 21:13  Lien permanent
Répondre en citant
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é !
Voir le profil de l'utilisateur Envoyer un message privé » Album Photos
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 15 août 2013 à 21:58  Lien permanent
Répondre en citant
D'accord merci luc-a c'est un peu plus claire maintenant.
Mais concrètement comment je fais pour placer mes objet ?
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
Luc-A @
Métayer
Métayer

4310pts

Inscrit le: 24 juin 2013
Messages: 603

Navigateur : n.c.

Hors ligne
Message Posté le: 16 août 2013 à 08:14  Lien permanent
Répondre en citant
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.
Voir le profil de l'utilisateur Envoyer un message privé » Album Photos
overlife @
Agriculteur
Agriculteur

1593pts

Inscrit le: 07 juin 2013
Age: 28
Messages: 482

Navigateur : n.c.

Hors ligne
Message Posté le: 16 août 2013 à 13:03  Lien permanent
Répondre en citant
Merci beaucoup luc-a, oui tu ma vraiment aider là parcque je galère encore un peu vu que c'est le debut Confus

Encore une petite question Très content 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 Très content
Voir le profil de l'utilisateur Envoyer un message privé » Google Map
Aller à la page : 12  
Sauter vers: 
Surveiller les réponses de ce sujet CowcotLand topic RSS feed  

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
Pas de nouveau message ce n'est pas le mien mais c'est du sacré travail tripleX Mods 11 17 mai 2005 à 12:06