A voir également:
- Problemes site
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
4 réponses
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.
Tu peux nous mettre une image de ce que tu voudrais obtenir?
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
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 :)
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 :)