EN DIRECT en ligne connexion / inscription
Connexion

Surnom/Pseudo
Mot de Passe :

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

×

Sacré footer ! , page 2

Aller à la page :   12
CowcotLand topic RSS feed Surveiller les réponses de ce sujet
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 à 15:07  Lien permanent
Répondre en citant
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é !
Voir le profil de l'utilisateur Envoyer un message privé » Album Photos
overlife @
Agriculteur
Agriculteur

1593pts

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

Navigateur : n.c.

Hors ligne
Message Posté le: 16 août 2013 à 16:23  Lien permanent
Répondre en citant
Non pas du tout luc-a au contraire c'est plus claire maintenant ! Je commence a comprendre le fonctionnement du float, c'est compliqué quand on commence mais je comprends vite alors ca va ^^

Encore un question luc-a si tu as le temps de repondre, la solution du position:absolute; est elle mauvaise comparativement au float ?

Encore merci beaucoup pour ton aide, tu es mon sauveur Très content

EDIT: je vois un problème avec le float luc-a, ca doit venir de moi mais bon, sur ma page j'ai une marge de chaque coté, et avec le float je peux pas la passer, alors que le pisition:absolute; me permet de me mettre ou je veux sur la page.

edit bis: J'y arrive moins bien avec le float qu'avec le position ^^ Maitenant que je suis en float tout vas bien mon footer est bien en bas, sauf son border qui lui est collé en dessous du header et je sais pas pourquoi Confus
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 à 19:56  Lien permanent
Répondre en citant
Il n'y a pas de solution mauvaise par rapport à d'autres. Tu utilises le float pour placer les éléments dans ta page. Tu utilises "position: absolute;" pour être sûr que tel élément ne bougera pas selon la résolution de l'écran de l'utilisateur.

Peux-tu faire un copier-coller de ton code ? Je vais voir, car là, je ne comprend pas bien ce que tu veux dire, et ton problème peut venir de plusieurs facteurs...

Une chose importante cependant : il ne faut pas oublier de préciser la hauteur de tous tes éléments en CSS. Je te recommande 980px maximum, car tous le monde doit pouvoir voir ton site, et surtout les personnes qui ont une résolution de 1080 px.

S'il te plait, montre moi ton code (HTML et CSS) pour que je puisse t'aider à corriger le problème. Je t'expliquerais tout et si tu veux bien, je modifierais moi-même ton code jusqu'à avoir le rendu désiré.
C'est le meilleur moyen pour moi de t'aider.
Voir le profil de l'utilisateur Envoyer un message privé » Album Photos
overlife @
Agriculteur
Agriculteur

1593pts

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

Navigateur : n.c.

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

1593pts

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

Navigateur : n.c.

Hors ligne
Message Posté le: 16 août 2013 à 22:18  Lien permanent
Répondre en citant
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 Confus

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 Très content
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 Confus
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: 17 août 2013 à 09:07  Lien permanent
Répondre en citant
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.
Voir le profil de l'utilisateur Envoyer un message privé » Album Photos
overlife @
Agriculteur
Agriculteur

1593pts

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

Navigateur : n.c.

Hors ligne
Message Posté le: 19 août 2013 à 02:03  Lien permanent
Répondre en citant
Désolé luc-a j'ai pas eu beaucoup de temps pour me connecté ces jours ci, en tout cas je te remercie beaucoup pour ton aide et tout est plus clair maintenant grace a toi Très content
Je te ferais signe si je coince encore ^^
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: 19 août 2013 à 10:18  Lien permanent
Répondre en citant
Overlife, tout le plaisir est pour moi !!

Je te souhaite bon courage !!
Voir le profil de l'utilisateur Envoyer un message privé » Album Photos
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 Office 2016 imprime page blanche cordobaseb OsLand 5 11 août 2021 à 19:57
Pas de nouveau message Infection de page web sur le test des pâtes thermiques Bobblebubble Amélioration du site 54 24 juillet 2021 à 21:34
Pas de nouveau message Voyez-vous les images sur la page d'accueil sur votre tél ? beubeu Amélioration du site 19 14 janvier 2021 à 10:06
Pas de nouveau message Vend gtx 1070 ti / 250 euros , page 2 batigol Ventes 0 15 décembre 2019 à 09:47
Pas de nouveau message [Suite à achat GPU] - Les drivers (début en page 7) SuunaZ Cartes Graphiques 107 30 octobre 2019 à 08:58