Problème de mise en page
supersupersuperohsuper
Messages postés
4
Statut
Membre
-
supersupersuperohsuper Messages postés 4 Statut Membre -
supersupersuperohsuper Messages postés 4 Statut Membre -
Bonjour,
Je dois pour les cours creer un site, donc j'ai choisi de faire un site perso.
Tout s'est bien passé, quand je charge la page html depuis mon ordi, tout marche, la mise en page est parfaite, mais quand je charge la page en ligne, la mise en page est toute foireuse...
J'ai de bonnes raisons de penser que cela vient d'un code CSS puisque quand je l'enlève du dossier sur mon ordi, j'obtiens le même foirage que sur internet.
L'hôte en question est Hostinger.
Merci pour votre aide
Je dois pour les cours creer un site, donc j'ai choisi de faire un site perso.
Tout s'est bien passé, quand je charge la page html depuis mon ordi, tout marche, la mise en page est parfaite, mais quand je charge la page en ligne, la mise en page est toute foireuse...
J'ai de bonnes raisons de penser que cela vient d'un code CSS puisque quand je l'enlève du dossier sur mon ordi, j'obtiens le même foirage que sur internet.
L'hôte en question est Hostinger.
Merci pour votre aide
A voir également:
- Problème de mise en page
- Mise en forme conditionnelle excel - Guide
- Impossible de supprimer une page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Mettre google en page d'accueil - Guide
5 réponses
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 */
}
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
