Html/CSS je m'en sors pas !

Résolu/Fermé
eltotos - 5 oct. 2009 à 15:39
 eltotos - 6 oct. 2009 à 13:30
Bonjour,
Je débute en html/CSS et j'ai quelques questions à vous poser,
j'ai suivi un tutoriel sur un site pour créer mon site internet, mais voilà j'ai détecté quelques problèmes. Mon plan du site est :
-Un Menu à gauche
-Une bannière en haut
-Un corps au milieu
-Un pied de page en bas
jusqu'à là pas de soucis :p.
C'est après que ça se complique, sur mon site j'aimerai incorporer des photos sur le "background" mais c'est là où je bug complet, quand je diminue la taille de ma fenêtre internet, les photos se décalent, et elles se retrouvent carrément sous le Menu (donc on la voit plus en partie). Je pense avoir localisé le problème, c'est que j'ai mis la photo dans le corps, donc j'en suis arrivé à cette conclusion : il faudrait que j'ai UN SEUL fond pour le corps, la bannière, le menu et le pied de page, et enfait avec paint faire un montage pour tout empiler. Mais savez-vous comment faire ? (taille de l'image, code html/CSS.. ?)
En gros, quand je diminue la taille de la fenêtre, au lieu d'avoir les deux barres (celle d'en bas pour faire défiler la page de droite à gauche et celle de droite pour faire défiler de haut en bas), ça "compresse" la page et donc ça fait passer les photos sous le menu => photos à moitié bouffées.
Merci pour vos futures réponses :)
à bientôt
A voir également:

10 réponses

kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
5 oct. 2009 à 16:41
Bonjour,

Plutôt que de mettre un découpage d'image (qui ne résoudra surement pas ton problème d'ailleurs), tu ferais mieux je pense de mettre ton image en fond (propriété de BODY), et de positionner tes 4 parties dans des DIV de la manière suivante :

-------------------------------------
| bannière ............................. |
-------------------------------------
| menu | ...content................. |
| menu | ...............................|
| menu | ...............................|
| menu | ...............................|
-------------------------------------
| pied de page .......................|
------------------------------------

Ce qui dans le code de ta page revient à positionner comme suite les DIV :
<div id="ban" class="ban"></div>
<div id="menu" class="menu"></div>
<div id="content" class="content"></div>
<div id="pied" class="pied"></div>


Il te reste alors à jouer sur les propriétés CSS de tes DIV pour positionner correctement ces dernières sur la page.
0
Re-bonjour,
si j'ai bien compris ton message, c'est exactement ça que j'ai fait...
Il n'y a pas un schéma sur le net, où il y a tout marqué en détail ? Parce que en essayant de bidouiller j'ai supprimé la moitié de mon code html et je sais plus par où commencer. Je rappelle : ce que je veux faire, c'est mettre une image en background, sans qu'elle soit à moitié rognée par le menu, la bannière ou autre chose, qu'elle occupe tout l'espace de la fenêtre internet (sur plein écran comme sur 1px/1px) et que quand je diminue la taille de cette fenêtre, les images ne se compressent pas, mais qu'il y ait les 2 barres de défilement (celles décrites au dessus) pour voir l'intégralité de la page.
Merci et désolé de mon "noobisme" :s.
0
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
5 oct. 2009 à 17:45
Pour commencer je dirai qu'il faut que tu fasse simple, juste pour positionner correctement tes éléments sur ta page.

Je te propose donc de me poster ton code HTML (le squelette, je ne veux pas du contenu sinon on ne s'en sortira pas), ainsi que ton CSS qui va avec. Ceci pour voir ce qui ne vas pas par rapport à ce que tu as fait.
0
Re-re-bonjour :D,
tout d'abord merci de ton aide ^^,
alors voilà mon squelette html :
<head>
<title>
<meta blablablabla>
</head>
<body>
<div id="menu">
<div class="element_menu">
</div>
</div>
</body>
</html>

squelette css:
body


{
background-color: #16163c;
background-image: url("Fond bleu.jpg");
background-repeat: no-repeat;
background-position: top right;
border: no-border;
margin-bottom: 0px;
}

{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("Fond bleu.jpg");
}

#en_tete
{
width: 720px;
height: 80px;
background-image: url("images/banniere.jpg");
background-repeat: no-repeat;
background-position: center;
margin-bottom: 20px;
}

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #16163c;
background-image: no-image;
background-repeat: no-repeat;
border: no-border;
margin-bottom: 20px;
}

les éléments du menus (pas nécessaires je pense)

#corps
{
margin-left: 140px;
margin-bottom: 20px;
margin-top: 290px;
padding: 5px;

color: #B3B3B3;
background-color: #16163c;
background-image: url("oméo guitare.jpg");
background-repeat: no-repeat;
background-position: right;
}


border: no-border;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
6 oct. 2009 à 09:34
Bon, donc on peut dire du premier coup d'oeil que tu n'as pas fait comme je l'ai dit plus haut, du moins pas exactement, même si l'idée est là.
Je posterai une modification lorsque j'en aurai le temps dans la journée, d'ici là essai de voir si tu peux le faire par toi même.
0
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
6 oct. 2009 à 11:14
Voilà un exemple :

Tu as trois fichier dans un dossier :
- une image nommée "image.jpg"
- une page HTML
- un fichier CSS style

Code du fichier 'index.html':
<html>
<head>
	<title>Sample</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>

<!-- Top bar -->
<div id="global" class="global">

<div id="top" class="top">
	<center><b>Ceci est la bannière</b></center>
</div>
<!-- Menu bar on the left -->
<div id="menu" class="menu">
	<b>Ici le menu</b>
</div>
<!-- Content on the right -->
<div id="content" class="content">
	<b>Le contenu</b>
</div>
<!-- Bottom of the page -->
<div id="bottom" class="bottom">
	<center><b>Et le bas de page</b></center>
</div>

</div>

</body>
</html>


Code du fichier 'style.css' :

.top{
	width:600px;
	height:50px;
	margin-top: 10px;

}

.menu{
	width:200px;
	height:500px;
	float:left;

}

.content{
	width:400px;
	height:500px;
	margin-left:200px;

}

.bottom{
	width:600px;
	height:50px;
	display:block;
	margin-bottom: 10px;

}

.global{
	width:600px;
	height:600px;
	background-image: url(./image.jpg);
	background-repeat: repeat;
}


Cet exemple a été fait rapidement sous FireFox, à toi d'adapter si le comportement n'est pas le même sous IE ^^
Tu peux te servir de cet exemple pour essayer de faire ce que tu souhaites.
0
Merci d'avoir pris le temps de répondre :).
Alors j'ai carrément copié/collé tes codes (en remplacant les noms des images et fichiers CSS bien évidemment), mais le fond est toujours blanc :/ (j'ai aussi firefox). J'essaye encore et toujours de chercher sur le net mais ce problème n'arrive qu'à moi apparemment :/ (ou je suis encore plus abruti que les autres peut être :p). J'ai essayé de bidouiller aussi un peu mais bon le résultat est encore pire que celui de base...
à bientôt.
0
Ah si c'est bon !! je vois l'image ! (j'ai oublié les guillemets dans la parenthèse pour l'url de l'image)
Mais le problème c'est qu'elle n'occupe pas tout l'espace de la fenêtre comme je le souhaite..., c'est à dire qu'il y a mon image et l'autre moitié de la page est blanche.
Il y a un moyen pour l'étendre ?
0
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
6 oct. 2009 à 13:25
Oui, il faut que tu apprenne les propriétés CSS et ce qu'elle font et que tu modifies ce que je t'ai donné en conséquence puisqu'il s'agissait d'un exemple ;)
0
Ah okok, bon je vais chercher tout ça alors :) merci pour tout !
Bon surf.
0