Probléme Html

[akamaru]

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

[erwan2004]

Salut

Calcul:

750+100+350+90=1290px

Je e conseil d'aller faire un tour sur http://www.siteduzero.com car ta programmation est un peu chelou .

Modifié le 7 janvier 2008 par erwan2004

[seb117]

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é le 8 janvier 2008 par seb117

[akamaru]

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).

[Plopy]

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é le 8 janvier 2008 par Plopy

[erwan2004]

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é le 8 janvier 2008 par erwan2004

[Miles Prower]

Ça coince en effet pas mal sur mon Eee (800x480) :lol:

Modifié le 8 janvier 2008 par Miles Prower

[akamaru]

Merci beaucoup pour vos réponses ca m'aide bien.

Je vais testé pour le java.

[Thomas95]

sinon essai de mettre tes valeurs en % sa pourrait marché et sa t'éviterai d'avoir 2 versions différentes de page