Problemes site
Fermé
Yassine78000
Messages postés
43
Date d'inscription
jeudi 16 février 2012
Statut
Membre
Dernière intervention
22 avril 2012
-
21 mars 2012 à 17:34
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 - 22 mars 2012 à 21:56
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 - 22 mars 2012 à 21:56
A voir également:
- Problemes site
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site pour vendre des objets d'occasion - Guide
- Site inaccessible - Guide
4 réponses
Stéphane18
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
132
21 mars 2012 à 20:50
21 mars 2012 à 20:50
Salut, sans plus de détails il sera difficile de te venir en aide, donne au moins le lien du dit site et avec quels navigateur tu rencontre des problèmes.
Yassine78000
Messages postés
43
Date d'inscription
jeudi 16 février 2012
Statut
Membre
Dernière intervention
22 avril 2012
1
22 mars 2012 à 09:58
22 mars 2012 à 09:58
Le liens du site fanpress.fr est les box sont décaler sur le pc de mon amis mes pas sur le miens
tito23
Messages postés
305
Date d'inscription
mardi 10 août 2010
Statut
Membre
Dernière intervention
16 janvier 2013
4
22 mars 2012 à 10:04
22 mars 2012 à 10:04
Tu peux nous mettre une image de ce que tu voudrais obtenir?
tito23
Messages postés
305
Date d'inscription
mardi 10 août 2010
Statut
Membre
Dernière intervention
16 janvier 2013
4
22 mars 2012 à 10:13
22 mars 2012 à 10:13
pour le #menu
#Menu {
background: url('images/Menu.png');
width: 599px;
height: 31px;
margin-top: -8px;
margin-left: 201px;
float: left;
}
Yassine78000
Messages postés
43
Date d'inscription
jeudi 16 février 2012
Statut
Membre
Dernière intervention
22 avril 2012
1
22 mars 2012 à 10:36
22 mars 2012 à 10:36
j'ai une maquette du site je les héberger : https://www.imagup.com/data-recovery-solutions-for-small-businesses-of-san-francisco/ je voudres obtenir sa sur tout les ecran
tito23
Messages postés
305
Date d'inscription
mardi 10 août 2010
Statut
Membre
Dernière intervention
16 janvier 2013
4
22 mars 2012 à 11:10
22 mars 2012 à 11:10
tu utilise déjà firebug?, n'oublie pas de mettre float left, pour le positionnement et clear: both pour retourner à la ligne( après un float: left)
Yassine78000
Messages postés
43
Date d'inscription
jeudi 16 février 2012
Statut
Membre
Dernière intervention
22 avril 2012
1
22 mars 2012 à 11:23
22 mars 2012 à 11:23
dequoi je n'est pas compris tu peut pas juste regarde les erreur dans inspecter l'element est les coriger est me donne le code pleaze.
Stéphane18
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
132
22 mars 2012 à 17:21
22 mars 2012 à 17:21
Salut, ton code n'est vraiment pas propre et tu es partis sur de mauvaise base en plaçant tes blocs avec des marges ce qui le rendra incompatible sur différentes machines, le plus simple serais de tous reprendre à zéro, car corrigé ton code petit à petit ne sert à rien, voici la structure que je propose d'essayer.
Si tu utilises ce code ci-dessous tu devras redimensionner l'image du logo avec les dimensions de 599px de large et 100px de hauteur.
La page index.html
Et la page style.css
Il est possible que quelques erreurs ce soit glissés dans le code, car je suis sur l'ordinateur depuis ce matin est j'ai les yeux qui commencent à fatiguer :)
Si tu utilises ce code ci-dessous tu devras redimensionner l'image du logo avec les dimensions de 599px de large et 100px de hauteur.
La page index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >
<head>
<title>Fanpress</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- fiche de style et favicon-->
<link rel="shortcut icon" href="favicon.ico"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<!--fin des fiches de styles-->
</head>
<body>
<!--contenu global de la page web-->
<div id="global">
<!--contenu du header-->
<div id="header">
<!--bloc contenant le logo et le menu-->
<div id="bloc_droit">
<!-- menu principal -->
<div id="menu_principal">
<div id="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Inscription</a></li>
<li><a href="#">Démonstration</a></li>
<li><a href="#">Partenaires</a></li>
</ul>
</div>
</div>
<!-- fin du menu principal -->
<!--le logo-->
<div id="logo">
</div>
<!--fin du logo-->
</div>
<!--fin du bloc droit-->
<!--bloc gauche-->
<div id="bloc_gauche">
<!--bloc pour inserer du texte-->
<div id="bloc_centre">
<p>Voici ta premiere news :)</p>
<p>Voici la deuxieme news :)</p>
</div>
<!--fin du bloc-->
</div>
<!--fin du bloc gauche-->
</div>
<!--fin du header-->
<!--entre le header et le footer-->
<div id="page">
<!--contenu du centre de la page avec le coter droitr ou gauche-->
<div id="centre">
<!--Le contenu du centre de la page sans le coter droit-->
<div id="texte">
<h1>"Bienvenue sur le site de Fanpress"</h1>
<div class="pousser"> </div>
<p>Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>
<p>Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>
<p>Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>
</div>
<!--fin du texte du centre de la page-->
<!--coter a droite ou a gauche voir dans le dossier .css-->
<div id="coter">
<div class="element_coter">
<h3>Tu peut ajouter un menu</h3>
<ul>
<li><a href="page1.html">Texte de votre lien</a></li>
<li><a href="page2.html">Texte de votre lien</a></li>
<li><a href="page3.html">Texte de votre lien</a></li>
</ul>
</div>
<div class="element_coter">
<h3>Ou alors 1 bloc</h3>
<div class="centrer">
<p>Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="element_coter">
<h3>Un autre bloc</h3>
<div class="centrer">
<p>Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="element_coter">
<h3>Et encore un autre bloc</h3>
<div class="centrer">
<p>Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst.</p>
</div>
</div>
</div>
<!--fin des coter-->
<!--pousse le pied de page en bas-->
<div class="pousser"> </div>
<!--fin de la div-->
</div>
<!--fin du centre et le coter droit ou gauche de la page-->
</div>
<!--fin de la page -->
</div>
<!--fin du contenu global de la page-->
<!--pied de page global-->
<div id="pied-global">
<!--pied-->
<div id="pied">
<p>Copyright (c) 2012 Votre site.com.Tous droits réservés </p>
</div>
<!--fin du pied-->
</div>
<!--fin du pied de page global-->
</body>
</html>
Et la page style.css
/*--------------------------------*/
/*----Paramétre global-----------*/
/*-------------------------------*/
body {
margin: 0px;
padding: 0px;
background: #FFFFFF url("images/fond.png") repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #054A60;
}
h1, h2, h3 , h4 {
margin: 0;
padding: 0;
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #054A60 ;
}
h1 {font-size: 2.1em;}
h2 {font-size: 2em;}
h3 {font-size: 1.3em;}
a {
text-decoration: underline;
color: blue;
}
a:hover {
text-decoration: none;
}
a img{
border: none;
}
/*les proprietes des class*/
.pousser{
clear: both;
}
/*-----------------------------*/
/*---------global-------------*/
/*---------------------------*/
#global {
width: 950px;
margin: 0 auto;
padding: 0;
}
/*----------------------------*/
/*------header--------------*/
/*--------------------------*/
#header {
width: 950px;
height: 166px;
margin: 0px auto;
}
#bloc_droit{
width: 599px;
height: 166px;
float: left;
}
#bloc_gauche{
background: url("images/cadre_news.png") no-repeat;
width: 351px;
height: 166px;
float: right;
}
#bloc_centre{
margin: 35px 5px 10px 10px;
}
/*---------------------------*/
/*-----------le logo---------*/
/*--------------------------*/
#logo {
padding: 0;
margin: 30px 0 0 0;/*La valeur de 30px sert à décaler le logo du menu vers le haut*/
width: 599px;
height: 100px;
float: left;
background: url("images/logo.png") no-repeat;
}
/*-------------------------------*/
/*-----le menu principal---------*/
/*------------------------------*/
#menu_principal{
background: url("images/Menu.png") no-repeat;
display: block;
width: 599px;
height: 32px;
margin: 0;
padding: 0;
font-weight: bold;
}
#menu_principal ul {
margin: 0;
padding:0;
list-style-type:none;
width: 599px;
}
#menu_principal li {
float:left;
margin:0 1px 0 0;
padding: 0;
}
#menu_principal a {
display: block;
width: 122px;
height: 31px;
line-height: 31px;
margin: 0;
padding: 0;
text-align:center;
text-decoration: none;
color:#000000;
}
#menu_principal a:hover {
text-decoration: underline;
}
/*---------------------------------*/
/*------la page centre------------*/
/*--------------------------------*/
#page {
width: 950px;
margin: 0 auto;
margin-top: 30px;
padding: 0;
background-color: #FFFFFF;
}
/*----------------------------------*/
/*------texte centre---------------*/
/*---------------------------------*/
#texte {
float: left;
width: 620px;
margin-top: 30px;
padding: 0 6px 0 6px;
}
#texte p{
color: black;
font-size: 1.1em;
line-height: 140%;
text-align: justify;
}
#texte h1{
text-align: center;
}
/*-----------------------------------*/
/*----------coter-------------------*/
/*----------------------------------*/
#coter {
float: right;
width: 300px;
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
.element_coter
{
background-color: #FFFFFF;
margin-bottom: 25px;/*espace entre les blocs*/
margin-top: 30px;
}
.element_coter h3
{
background: #FFFFFF;
color: #000000;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: left;
height: 20px;
border-bottom: 1px solid black;
}
.element_coter ul
{
list-style-type: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_coter li
{
padding-bottom: 5px;
padding-top: 3px;
}
.element_coter a
{
color: #000000;
}
.element_coter a:hover
{
background-color: #000000;
color: white;
}
.centrer{
text-align: left;
padding: 5px;
}
/*----------------------------------------*/
/*--------pied---------------------------*/
/*---------------------------------------*/
#pied-global {
height: 100px;
margin-top: 45px;
}
#pied {
width: 950px;
height: 100px;
margin: 0 auto;
background: #FFFFFF;
}
#pied p {
margin: 0;
padding: 15px 0 15px 0;
text-align: center;
color: #000000;
}
#pied a {
text-decoration: none;
color: #000000;
}
#pied a:hover{
text-decoration: underline;
}
/*---------------------------------------*/
/*------fin------------------------------*/
/*--------------------------------------*/
Il est possible que quelques erreurs ce soit glissés dans le code, car je suis sur l'ordinateur depuis ce matin est j'ai les yeux qui commencent à fatiguer :)
Yassine78000
Messages postés
43
Date d'inscription
jeudi 16 février 2012
Statut
Membre
Dernière intervention
22 avril 2012
1
22 mars 2012 à 17:57
22 mars 2012 à 17:57
Tu as fait des erreur je ne veut pas sa regarde la maquette en haut en tout cas merci d'avors pris ce temps ;)
Stéphane18
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
132
22 mars 2012 à 21:56
22 mars 2012 à 21:56
Salut, disons que maintenant avec ce code tu parts sur des bases solides en tout cas propre, sinon pour avoir un rendu comme sur l'image il te suffit de revoir les propriétés css par exemple tu peux enlever la couleur de fond du bloc #page et mettre une image de fond sur le bloc #texte:
Tu peux aussi enlever la couleur de fond du bloc #coter et plus encore, enfin ce code est très modulable c'est à toi de l'adapter à tes besoins :)
background: #FFFFFF url("images/fond-centre.png") left top no-repeat;
Tu peux aussi enlever la couleur de fond du bloc #coter et plus encore, enfin ce code est très modulable c'est à toi de l'adapter à tes besoins :)