Problème de mise en page
Fermé
supersupersuperohsuper
Messages postés
4
Date d'inscription
vendredi 25 janvier 2013
Statut
Membre
Dernière intervention
25 janvier 2013
-
25 janv. 2013 à 13:09
supersupersuperohsuper Messages postés 4 Date d'inscription vendredi 25 janvier 2013 Statut Membre Dernière intervention 25 janvier 2013 - 25 janv. 2013 à 14:15
supersupersuperohsuper Messages postés 4 Date d'inscription vendredi 25 janvier 2013 Statut Membre Dernière intervention 25 janvier 2013 - 25 janv. 2013 à 14:15
A voir également:
- Problème de mise en page
- Supprimer une page word - Guide
- Mise en forme conditionnelle excel - Guide
- Word numéro de page 1/2 - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
5 réponses
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 566
25 janv. 2013 à 13:11
25 janv. 2013 à 13:11
A mon avis le problème vient du chemin vers le css en question.
Comment déclares-tu ton css ?
Comment déclares-tu ton css ?
Dracknard
Messages postés
493
Date d'inscription
mercredi 16 janvier 2013
Statut
Membre
Dernière intervention
4 mai 2015
116
25 janv. 2013 à 13:11
25 janv. 2013 à 13:11
Bonjour,
Peux tu nous mettre tes code html et css?
Peux tu nous mettre tes code html et css?
supersupersuperohsuper
Messages postés
4
Date d'inscription
vendredi 25 janvier 2013
Statut
Membre
Dernière intervention
25 janvier 2013
25 janv. 2013 à 13:16
25 janv. 2013 à 13:16
Ok, je vous mets que le début du code html car le reste est juste lourd et on y parle plus de CSS (le début c'est juste un javascript pour un bouton "j'ai de la chance" quelque part sur le site)
<head>
<script Language="Javascript">
<!--
function LienAuHasard()
{
Url = new Array;
Url[0] = "DexterEN.html";
Url[1] = "GreekEN.html";
Url[2] = "AmericanHorrorStoryEN.html";
Url[3] = "AktamanniskorEN.html";
ChoixLien = Math.floor(Math.random() * Url.length);
window.location=(Url[ChoixLien]);
}
//-->
</script>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TPCSS.css" />
<script type="text/javascript" src="java.js"></script>
<title>Super-Les-Séries</title>
</head>
Quand à mon code CSS le voici, mais à vrai dire je le comprends pas vraiment, c'est mon binôme qui l'a fait ou pris sur internet, tout ce que je sais c'est que sans ce code, plus rien ne marche
/* Eléments principaux de la page */
body
{
background: url('images/fond2.png');
color: #181818;
}
#bloc_page
{
width: 1000px;
margin: auto;
}
section h1, footer h1, nav a
{
font-family: Dayrom, serif;
font-weight: normal;
text-transform: uppercase;
}
/* Header */
header
{
background: url('images/ligne.png') repeat-x bottom;
}
#titre_principal
{
display: inline-block;
}
header h1
{
font-size: 2.5em;
font-weight: normal;
}
#logo, header h1
{
display: inline-block;
margin-bottom: 0px;
}
header h2
{
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
}
/* Navigation */
nav
{
display: inline-block;
width: 1000px;
text-align: center;
}
nav ul
{
list-style-type: none;
}
nav li
{
display: inline-block;
margin-right: 15px;
}
nav a
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
}
nav a:hover
{
color: #760001;
border-bottom: 3px solid #760001;
}
/* Bannière */
#banniere_image
{
margin-top: 15px;
height: 200px;
border-radius: 5px;
background: url('images/seriepremiere.png') no-repeat;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px;
}
#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgba(24,24,24,0.8);
color: white;
font-size: 0.8em;
}
.bouton_rouge
{
display: inline-block;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url('images/fond_degraderouge.png') repeat-x;
border: 1px solid #760001;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
}
.bouton_rouge img
{
border: 0;
}
/* Corps */
article, aside, connexion
{
display: inline-block;
vertical-align: top;
text-align: justify;
}
article
{
width: 710px;
margin-right: 15px;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
article p
{
font-size: 0.8em;
}
connexion
{
position: relative;
width: 235px;
background-color: #0f78ef;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 0.9em;
}
aside
{
position: relative;
width: 235px;
background-color: #0f78ef;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 0.9em;
}
aside
{
text-align: center;
}
/* Footer */
footer
{
margin-top: 15px;
height: 3px;
border-radius: 5px;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px;
background: url('images/ligne.png') repeat-x;
}
footer p, footer ul
{
font-size: 0.8em;
}
footer h1
{
font-size: 1.1em;
}
#fren, #fondecran, #liens
{
display: inline-block;
vertical-align: top;
}
#fren
{
width: 28%;
}
#fondecran
{
width: 35%;
}
#liens
{
width: 31%;
}
#fondecran img
{
border: 1px solid #181818;
margin-right: 2px;
}
#liens ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
list-style-image: url('images/ico_liensexterne.png');
padding-left: 2px;
}
#liens a
{
text-decoration: none;
color: #760001;
}
/*menu deroulant*/
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : center;
}
#menu
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #000; /* couleur de fond */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 144px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000; /* On passe le texte en noir... */
background: #fff; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
<head>
<script Language="Javascript">
<!--
function LienAuHasard()
{
Url = new Array;
Url[0] = "DexterEN.html";
Url[1] = "GreekEN.html";
Url[2] = "AmericanHorrorStoryEN.html";
Url[3] = "AktamanniskorEN.html";
ChoixLien = Math.floor(Math.random() * Url.length);
window.location=(Url[ChoixLien]);
}
//-->
</script>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TPCSS.css" />
<script type="text/javascript" src="java.js"></script>
<title>Super-Les-Séries</title>
</head>
Quand à mon code CSS le voici, mais à vrai dire je le comprends pas vraiment, c'est mon binôme qui l'a fait ou pris sur internet, tout ce que je sais c'est que sans ce code, plus rien ne marche
/* Eléments principaux de la page */
body
{
background: url('images/fond2.png');
color: #181818;
}
#bloc_page
{
width: 1000px;
margin: auto;
}
section h1, footer h1, nav a
{
font-family: Dayrom, serif;
font-weight: normal;
text-transform: uppercase;
}
/* Header */
header
{
background: url('images/ligne.png') repeat-x bottom;
}
#titre_principal
{
display: inline-block;
}
header h1
{
font-size: 2.5em;
font-weight: normal;
}
#logo, header h1
{
display: inline-block;
margin-bottom: 0px;
}
header h2
{
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
}
/* Navigation */
nav
{
display: inline-block;
width: 1000px;
text-align: center;
}
nav ul
{
list-style-type: none;
}
nav li
{
display: inline-block;
margin-right: 15px;
}
nav a
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
}
nav a:hover
{
color: #760001;
border-bottom: 3px solid #760001;
}
/* Bannière */
#banniere_image
{
margin-top: 15px;
height: 200px;
border-radius: 5px;
background: url('images/seriepremiere.png') no-repeat;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px;
}
#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgba(24,24,24,0.8);
color: white;
font-size: 0.8em;
}
.bouton_rouge
{
display: inline-block;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url('images/fond_degraderouge.png') repeat-x;
border: 1px solid #760001;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
}
.bouton_rouge img
{
border: 0;
}
/* Corps */
article, aside, connexion
{
display: inline-block;
vertical-align: top;
text-align: justify;
}
article
{
width: 710px;
margin-right: 15px;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
article p
{
font-size: 0.8em;
}
connexion
{
position: relative;
width: 235px;
background-color: #0f78ef;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 0.9em;
}
aside
{
position: relative;
width: 235px;
background-color: #0f78ef;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 0.9em;
}
aside
{
text-align: center;
}
/* Footer */
footer
{
margin-top: 15px;
height: 3px;
border-radius: 5px;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px;
background: url('images/ligne.png') repeat-x;
}
footer p, footer ul
{
font-size: 0.8em;
}
footer h1
{
font-size: 1.1em;
}
#fren, #fondecran, #liens
{
display: inline-block;
vertical-align: top;
}
#fren
{
width: 28%;
}
#fondecran
{
width: 35%;
}
#liens
{
width: 31%;
}
#fondecran img
{
border: 1px solid #181818;
margin-right: 2px;
}
#liens ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
list-style-image: url('images/ico_liensexterne.png');
padding-left: 2px;
}
#liens a
{
text-decoration: none;
color: #760001;
}
/*menu deroulant*/
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : center;
}
#menu
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #000; /* couleur de fond */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 144px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000; /* On passe le texte en noir... */
background: #fff; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
Dracknard
Messages postés
493
Date d'inscription
mercredi 16 janvier 2013
Statut
Membre
Dernière intervention
4 mai 2015
116
25 janv. 2013 à 13:30
25 janv. 2013 à 13:30
merci pour les codes.
questions con avant que je regarde sérieusement tes codes :
- ton fichier css "en ligne" s'appel bien : TPCSS.css?
- ton fichier css "en ligne" est il au même niveau que ta page html? (exemple dans le même dossier)
questions con avant que je regarde sérieusement tes codes :
- ton fichier css "en ligne" s'appel bien : TPCSS.css?
- ton fichier css "en ligne" est il au même niveau que ta page html? (exemple dans le même dossier)
supersupersuperohsuper
Messages postés
4
Date d'inscription
vendredi 25 janvier 2013
Statut
Membre
Dernière intervention
25 janvier 2013
25 janv. 2013 à 14:04
25 janv. 2013 à 14:04
Oui, tout a gardé le même nom et est resté au même niveau. Il n'y a que les images du site qui sont dans un dossier en niveau inférieur.
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 566
25 janv. 2013 à 14:07
25 janv. 2013 à 14:07
vérifie bien la casse dans le nom du fichier, si le fichier s'appelle TPCSS.css dans ton fichier html, il doit être écrit exactement de la même façon, même l'extension, si une seule majuscule ou minuscule diffère, ça ne fonctionnera plus.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
supersupersuperohsuper
Messages postés
4
Date d'inscription
vendredi 25 janvier 2013
Statut
Membre
Dernière intervention
25 janvier 2013
25 janv. 2013 à 14:15
25 janv. 2013 à 14:15
Génial ! Merci beaucoup thebishop et toi aussi dracknard car au final j'avais mal vérifié, effectivement l'extension étaiit en majuscule sur le fichier et pas dans le code !
Merci beaucoup pour votre aide !
Merci beaucoup pour votre aide !
