akamaru

Probléme Html

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

Partager ce message


Lien vers message
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

Partager ce message


Lien vers message
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).

Partager ce message


Lien vers message
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

Partager ce message


Lien vers message
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

Partager ce message


Lien vers message
Partager sur d'autres sites

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

Modifié par Miles Prower

Partager ce message


Lien vers message
Partager sur d'autres sites

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

Je vais testé pour le java.

Partager ce message


Lien vers message
Partager sur d'autres sites

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

Partager ce message


Lien vers message
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