Html/CSS je m'en sors pas !
Résolu/Fermé
A voir également:
- Html/CSS je m'en sors pas !
- Editeur html - Télécharger - HTML
- Html download - Télécharger - HTML
- Image cliquable html ✓ - Forum Réseaux sociaux
- Br html ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
10 réponses
kij_82
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
5 oct. 2009 à 16:41
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 :
Il te reste alors à jouer sur les propriétés CSS de tes DIV pour positionner correctement ces dernières sur la page.
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.
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.
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.
kij_82
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
5 oct. 2009 à 17:45
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.
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.
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;
}
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;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
kij_82
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
6 oct. 2009 à 09:34
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.
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.
kij_82
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
6 oct. 2009 à 11:14
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':
Code du fichier 'style.css' :
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.
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.
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.
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.
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 ?
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 ?
kij_82
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
6 oct. 2009 à 13:25
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 ;)
