Probléme Html


akamaru
 Share

Messages recommandés

Salut à tous

Je sais pas si mon poste à sa place ici

mais je tente quand même.

Donc voila pour l'école je doit faire un site.

Le voici

http://fseu.free.fr/site/site.html

Le probléme c'est que je vien de remarquer que dans les résolutions inférieur a 1024 mon bloque droite "image" rentre dans le bloque du mileu.

J'ai cherché et j'ai pas trouvé comment résoudre ce probléme.

Je pense que jai fais une bétise dans le css

body

{

width: 750px;

margin-top: 20px;

margin-bottom: 20px;

background-image: url("images/fond.jpg");

}

#en_tete

{

width: 750px;

height: 153px;

background-image: url("images/banniere.jpg");

background-repeat: no-repeat;

margin-bottom: 10px;

margin-left: 100px;

border: 2px solid green;

}

#corps

{

height:1280px;

margin-left:100px;

margin-bottom: 20px;

padding: 6px;

color: #4C4E4F;

background-color: #a6b689;

background-repeat: repeat-x;

border: 2px solid green;

font-family: "Trebuchet MS", Georgia, serif;

}

#corps h1

{

color: green;

text-align: center;

font-family: ,Arial, "Arial Black", "Times New Roman", Times, serif;

}

#corps h2

{

height: 30px;

background-repeat: no-repeat;

padding-left: 30px;

color: green;

text-align: left;

font-family: ,Arial, "Arial Black", "Times New Roman", Times, serif;

}

#images_accueil

{

background-color: #a6b689;

position: absolute;

right: 5px;

top: 250px;

width:350px;

height:1250px;

border: 2px solid green;

padding:15px;

margin-right:90px;

margin-bottom: 50px;

text-align: center;

}

#images_accueil h1

{

color: green;

text-align: center;

font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

padding-left: 30px;

}

#images

{

}

.navigation {margin: 15px;}

.navigation a {

color: #FFFFFF;

font: normal 1.1em serif;

line-height: 40px;

margin-left: 215px;

text-decoration: none;

}

.imageflottante

{

float: left;

font-size: 3em;

font-family: Arial, Georgia, "Times New Roman", Times, serif;

font-weight: bold;

margin-right: 15px

}

#pied_de_page

{

padding: 5px;

margin-left:100px;

text-align: center;

color: #;

background-color: #a6b689;

background-image: url("images/");

background-repeat: repeat-x;

border: 2px solid green;

}

ul

{

list-style-image: url("images/boutton.gif");

}

a

{

color: blue;

text-decoration: none;

}

a:hover

{

text-decoration: underline;

}

list-style-image: url("images/boutton.gif");

Si vous avez une solution je suis preneur.

Merci d'avance

Lien vers le commentaire
Partager sur d'autres sites

Ceci est un problème que tu peux régler en utilisant du CSS !

Effectivement "le site du zero" est géniale pour débuter, tu apprendra même qu'il est plus avantageux d'utiliser du php, voir même y intégrer Mysql qui c'est... ^_^

Modifié par seb117
Lien vers le commentaire
Partager sur d'autres sites

Merci pour vos réponses

Ceci est un problème que tu peux régler en utilisant du CSS !

J'utilise déja du css mais mal

Calcul:

750+100+350+90=1290px

Oui éfféctivement mais n'y à t il pas un moyen pour que la page s'adapte à la résolution(en restant dans le html).

Lien vers le commentaire
Partager sur d'autres sites

tu pourrais faire une fiche CSS pour les utilisateurs avec resolution de plus de 1024, et une fiche pour les moins de 1024...

et ensuite tu geres ca en javascript.

Tu récupère la resolution de l'utilisateur, et ensuite, tu inclus la feuille de style CSS qui faut en fonction.

<script langage="JavaScript">if(screen.width<1024) //Si la resolution est inférieure à 1024{document.write("<LINK rel=stylesheet type=\"text/css\" href=\"style_moins_1024.css\">\n");}else  //Sinon si supérieure à 1024{document.write("<LINK rel=stylesheet type=\"text/css\" href=\"style_plus_1024.css\">\n");}</script>

Ca fait longtemps que j'ai pas touché au JavaScript, donc j'suis pas sur du code que j'viens d'écrire, mais ca doit etre ca, j'ai pas testé

Modifié par Plopy
Lien vers le commentaire
Partager sur d'autres sites

Commence par bien configurer ta balise body (qui englobe tous ton code html)

body{   	width: 1200px;	margin: auto; 	margin-top: 20px;	margin-bottom: 20px;      	border: 2px solid; /* affiche le cadre */   	background-image: url("images/fond.jpg");}

Modifié par erwan2004
Lien vers le commentaire
Partager sur d'autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
 Share