Sacré footer ! , page 2
Luc-A @ Métayer
4310pts
Inscrit le: 24 juin 2013
Messages: 603
Navigateur : n.c.Hors ligne
Posté le: 16 août 2013 à 15:07
Overlife, tout le plaisir est pour moi.
En découvrant ce plan, je comprend pourquoi tu as du mal à placer tes éléments dans la page.
Je vais répondre à tes questions dans l'ordre.
Pour tes images, et comme je te l'ai expliqué précédemment, il faut que tu utilises "float: left;" MAIS toutes tes images doivent être insérées dans un <div></div> qui sera placé là où tu le désire.
Si tu met "float: left;" à ton <nav> je pense que le reste devrais se placer correctement.
Pour ton image au centre, il faut que tu saches que "float: middle;" n'existe pas. Il y a cependant deux solutions :
Tu peux mettre ton image en "float: left;" mais tu devras utiliser padding pour éloigner l'image et la mettre au centre de la div. Pour calculer le padding-left :
(largueur div - largueur image ) / 2.
Tu devras faire de même pour la hauteur et pour padding-top.
Cela suppose que tu connaisses la hauteur et la largueur exacte de ton <div></div> et que ces deux valeurs ne changent pas.
L'autre solution, et tu n'en es pas encore là est d'utiliser Javascript. Avec ce langage et ses bibliothèque (JQuery), tu peux très facilement centrer un élément, même si la largueur et la hauteur de ce dernier est variable.
Pour répondre à ta dernière question, le float est interprété à partir de l'élément parent. Je sais que c'est peut-être un peu tôt, mais c'est important de connaitre ces notions, car elles t'aideront énormément, même pour du HTML et CSS : élément parent, élément enfant et héritage.
<html> est un élément parent
<div> est un élément enfant
<title> et sont des éléments enfants de <div> et petits-enfants de <html>.
C'est comme pour les probabilités. Chaque élément enfant hérite des propriétés de leurs éléments parents, sauf si ces mêmes propriétés sont redéfinies.
J'espère ne pas t'avoir embrouillé !
overlife @ Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.Hors ligne
overlife @ Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.Hors ligne
Posté le: 16 août 2013 à 20:54
/*structure_principale*/
body
{
height:100%;
font-family: constantia, serif;
background-image: url("background.jpg");
}
#block_page
{
width: 900px;
margin: auto;
}
/*HEADER*/
header
{
font-size: 0.8em;
padding-left: 5px;
padding-right: 5px;
background-color: black;
border-bottom: 5px groove rgb(0,0,186);
border-top: 5px groove rgb(0,0,186);
color:blue;
border-radius: 10px;
}
.titre
{
display: inline-block;
vertical-align: 200%;
padding-left: 10px;
}
#logo_gamepaper
{
padding-left: 20px;
} #fin_titre
{
padding-left: 50px;
}
/*FIN HEADER*/
/*NAV*/
nav
{
position: fixed;
left: 0px;
color: black;
padding-left: 0px;
margin-top: 20px;
border-right: 2px groove rgb(0,0,186);
border-left: 2px groove rgb(0,0,186);
width: 250px;
height: 225px;
background-color: black;
border-radius: 20px;
clear: both;
}
.lol
{
font-weight: bold;
margin-left: 0px;
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: black;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.starcraft
{
font-weight: bold;
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: black;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.tes
{
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: black;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.wow
{
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: black;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.diablo
{
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: black;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
/*FIN NAV*/
/*ARTICLE*/ #article
{
/*position: absolute;
left:300px;
top: 200px;*/
float: right;
margin-right: 130px;
margin-top: 40px;
padding-left: 10px;
color: blue;
border: 2px groove rgb(0,0,186);
border-radius: 20px;
width: 650px;
height: 310px;
background-color: black;
} #coup_coeur
{
border: 2px groove blue;
float: center;
margin-left: 120px;
} #info_coup_coeur
{
float: center;
margin-left: 120px
}
/*FIN ARTICLE*/
/*NEWS*/ #news
{
/*position: absolute;
left: 300px;
top: 550px;*/
float:right;
margin-right: 130px;
margin-top: 20px;
margin-bottom: 50px;
padding-left: 10px;
color: blue;
border: 2px groove rgb(0,0,186);
border-radius: 20px;
width: 650px;
height: 375px;
background-color: black;
padding: 10px;
} #news1
{
padding: 5px;
border: 1px groove blue;
} #news2
{
padding: 5px;
border: 1px groove blue;
} #news3
{
padding: 5px;
border: 1px groove blue;
} #news4
{
padding: 5px;
border: 1px groove blue;
} #news5
{
padding: 5px;
border: 1px groove blue;
} #news6
{
padding: 5px;
border: 1px groove blue;
}
/*FIN NEWS*/
/*FOOTER*/
footer
{
float: bottom;
margin-left: 25%;
width: 50%;
margin-top: 100%;
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;
}
/*FIN FOOTER*/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>GamePaper- Wallpaper HD</title>
<link rel="stylesheet" href="structure_principale.css"/>
<link rel="stylesheet" href="font_face.css"/>
</head>
<body>
<div id="block_page">
<header>
<h1 class="titre"> Tout l'univers du jeu vidéo</h1> <h1 class="titre" id="fin_titre">en Wallpaper HD</h1>
</header>
<nav>
<ul>
<li>Diablo</li>
</br>
<li>League of Legends</li>
</br>
<li>Starcraft</li>
</br>
<li>The elder Scrolls</li>
</br>
<li>World of Warcraft</li>
</ul>
</nav>
<article id="article">
<p>Coup de coeur du moment :</p>
<figcaption id="info_coup_coeur">Starcraft_Hyperion 1920x1080p</figcaption>
</article>
<article id="news">
<p> News </p>
</article>
<footer>
Me contacter
</footer>
</div>
</body>
Voila luc-a, j'espère que tu vas réussir a voir ce qui va pas, mais pour l'instant j'aime bien ce que ca donne.
Luc-A @ Métayer
4310pts
Inscrit le: 24 juin 2013
Messages: 603
Navigateur : n.c.Hors ligne
Posté le: 16 août 2013 à 21:51
/*structure_principale*/
body
{
height:100%;
font-family: constantia, serif;
background-image: url("background.jpg");
}
#block_page
{
width: 900px;
margin: auto;
}
/*HEADER*/
header
{
font-size: 0.8em;
padding-left: 5px;
padding-right: 5px;
background-color: black;
border-bottom: 5px solid rgb(0,0,186);
border-top: 5px solid rgb(0,0,186);
color:blue;
border-radius: 10px;
}
.titre
{
display: inline-block;
vertical-align: 200%;
padding-left: 10px;
}
#logo_gamepaper
{
padding-left: 20px;
} #fin_titre
{
padding-left: 50px;
}
/*FIN HEADER*/
/*NAV*/
nav
{
position: fixed;
left: 0px;
color: blue;
padding-left: 0px;
margin: 20px 0px 0px 50px;
border-right: 2px groove rgb(0,0,186);
border-left: 2px groove rgb(0,0,186);
width: 250px;
height: 225px;
background-color: black;
border-radius: 20px;
clear: both;
}
.lol
{
font-weight: bold;
margin-left: 0px;
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: blue;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.starcraft
{
font-weight: bold;
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: blue;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.tes
{
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: blue;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.wow
{
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: blue;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.diablo
{
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: blue;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
/*FIN NAV*/
/*ARTICLE*/ #article
{
/*position: absolute;
left:300px;
top: 200px;*/
float: right;
margin-right: 130px;
margin-top: 40px;
padding-left: 10px;
color: blue;
border: 2px groove rgb(0,0,186);
border-radius: 20px;
width: 650px;
height: 310px;
background-color: black;
} #coup_coeur
{
border: 2px groove blue;
float: center;
margin-left: 120px;
} #info_coup_coeur
{
float: center;
margin-left: 120px
}
/*FIN ARTICLE*/
/*NEWS*/ #news
{
/*position: absolute;
left: 300px;
top: 550px;*/
float:right;
margin-right: 130px;
margin-top: 20px;
margin-bottom: 50px;
padding-left: 10px;
color: blue;
border: 2px groove rgb(0,0,186);
border-radius: 20px;
width: 650px;
height: 375px;
background-color: black;
padding: 10px;
} #news1
{
padding: 5px;
border: 1px groove blue;
} #news2
{
padding: 5px;
border: 1px groove blue;
} #news3
{
padding: 5px;
border: 1px groove blue;
} #news4
{
padding: 5px;
border: 1px groove blue;
} #news5
{
padding: 5px;
border: 1px groove blue;
} #news6
{
padding: 5px;
border: 1px groove blue;
}
/*FIN NEWS*/
/*FOOTER*/
footer
{
float: bottom;
margin-left: 25%;
width: 50%;
margin-top: 100%;
border-top: 5px solid rgb(0,0,186);
border-bottom: 5px solid rgb(0,0,186);
background-color: black;
border-radius: 10px;
text-align: center;
}
/*FIN FOOTER*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8"/>
<title>GamePaper- Wallpaper HD</title>
<link rel="stylesheet" href="structure_principale.css"/>
<link rel="stylesheet" href="font_face.css"/>
</head>
<body>
<div id="block_page">
<header>
<h1 class="titre"> Tout l'univers du jeu vidéo</h1> logo GamePaper<h1 class="titre" id="fin_titre">en Wallpaper HD</h1>
</header>
<nav>
<ul>
<li>Diablo</li>
</br>
<li>League of Legends</li>
</br>
<li>Starcraft</li>
</br>
<li>The elder Scrolls</li>
</br>
<li>World of Warcraft</li>
</ul>
</nav>
<article id="article">
<p>Coup de coeur du moment :</p>
wallpaper coup de coeur
<figcaption id="info_coup_coeur">Starcraft_Hyperion 1920x1080p</figcaption>
</article>
<article id="news">
<p> News </p>
news
news
news
news
news
news
</article>
<footer>
Me contacter
</footer>
</div>
</body>
Luc-A @ Métayer
4310pts
Inscrit le: 24 juin 2013
Messages: 603
Navigateur : n.c.Hors ligne
Posté le: 16 août 2013 à 22:03
Overlife, je t'ai envoyé le code un peu modifié. Maintenant, voici les explications.
Pour le menu à gauche qui touchait le bord gauche, tu as confondu margin et padding. margin sert pour les marges extérieures, tandis que padding sert pour les marges intérieures. Donc, dans le fichier CSS, pour le <nav>, j'ai juste modifié "margin: 20px 0px 0px 50px;"
Pour tes bordures en bas, c'est le style de bordure que tu as choisi qui ne convient pas. Personnellement, je ne connaissais pas "groove". J'ai changé pour "solid". J'espère avoir bien compris ton problème avec ton border (dans ton edit bis).
Quelques conseils cependant :
Tu as fait en CSS des classes avec chacun des jeux, mais tu n'as pas utilisé ces classes en HTML. De fait, tu ne peux pas voir le résultat de ce que tu as fait, et je te suggère d'essayer, afin de pouvoir corriger maintenant.
Tu n'as pas compris cette histoire d'héritage. Tu as fait une classe avec chaque jeu. Or, pour la plupart des propriété que tu as décrites, tu peux procéder de la manière suivante :
.nav li
{
font-weight: bold;
background-color: rgb(3,40,190);
border: 5px groove rgb(14,13,90);
border-radius: 10px;
color: blue;
text-decoration: none;
padding: 2px 15px 2px 15px;
}
.nav li signifie toutes les balises li de la classe <nav>
J'ai pris la liberté de changé la couleur de police des jeux en bleu, car je ne voyais rien. J'espère que cela ne va pas t'offenser.
Une dernière chose. Tu veux utiliser du noir pour le fond. Pourquoi pas, mais je te suggère de prendre une autre couleur que le bleu. En fait, tes bordures ont eu une couleur déclinée (c'est-à-dire deux couleurs pour une même bordure). C'est peut-être pour cela que le rendu ne faisait pas bien.
Si tu as des questions, n'hésite pas !
overlife @ Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.Hors ligne
Posté le: 16 août 2013 à 22:18
Luc-a j'ai pas très bien compris le passage ou tu dis que j'ai fais des classes en css mais pas utilisé en html, et donc je sais pas très bien ce que tu veux que je fasse
Oui, je vais repenser tout le thème de ma page tu as raison, et de toute facon ca correspond pas a ce que j'attend a la fin.
Et merci beaucoup pour le .nav li luc-a je savais pas du tout que c'était possible en tout cas ca facilite bien la vie
On peut faire la même chose ou du style avec les
news1,news2,news3.... ?
EDIT: Une question qui me trottine dans la tête depuis que j'ai commencé le html et le css luc-a, a non même deux !
-Tout les séparateurs et autre petits trucs que tu trouve dans les site, genre bouton, icone facebook et tout ca, tu les trouve ou ? Oo
-Ensuite, les menus déroulants et autre gadgets c'est du javascript pas du html si ?
Heureusement que tu es la
Luc-A @ Métayer
4310pts
Inscrit le: 24 juin 2013
Messages: 603
Navigateur : n.c.Hors ligne
Posté le: 17 août 2013 à 09:07
Overlife, je suis désolé de mettre mal exprimé. Lorsque tu fais une classe en CSS :
.diablo
{
ton code
}
Tu dois attribuer cette classe à un élément HTML. Sinon, la classe CSS ne sert à rien.
pour le .nav li, tu peux faire la même chose avec ce que tu veux, même avec html. Mais n'oublie pas la notions d'héritage. Par exemple, si tu met :
html
{
color : black;
}
Tout ton texte sera noir, et tu ne pourra pas le changer, même pour les titres.
Pour les news, tu met :
.news #news1, .news #news2, .news #news3
{
ton code
}
Mais s'il n'y a pas de différence entre news1, news2 et news3 tu peux mettre : #news
{
et enlever chaque chiffre après news.
}
Pour le bouton like de facebook, tu le trouve sur le site de facebook. Tu devras tout d'abord inscrire ton site sur facebook pour ensuite récupérer le code.
Si tu veux des images facebook, tu peux les rechercher sur google. Attention aux dimensions de l'image, tu seras surement obligé de redimensionner tes images.
Pour les boutons plus généraux, comme valider, tu dois les faire toi même avec un style CSS bien défini
.button
{
ton code
}
Pour les menus déroulants, tu peux le faire en CSS ou Javascript et non en HTML. HTML ne te sert qu'à afficher ce que tu veux, et CSS te sert à faire la mise en page. Plus simplement, HTML set pour le fond, CSS sert pour la forme.
Exemple de menu déroulant en CSS:
HTML
<ul class="menu"> ton menu
<li class="sousmenu">sous menu 1</li>
<li class="sousmenu">sous menu 2</li>
<li class="sousmenu">sous menu 3</li>
</ul>
CSS
.sousmenu
{
display: none;
}
.menu:hover .sousmenu
{
display: block;
}
.menu:hover .sousmenu signifie : lorsque uin élément appartenant à la classe menu est survolé par la souris (hover), les éléments appartenant à la classe sousmenu sont visibles.
J'espère avoir répondu à tes questions.
overlife @ Agriculteur
1593pts
Inscrit le: 07 juin 2013
Age: 30
Messages: 482
Navigateur : n.c.Hors ligne
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