Débutant en html/css, problème dans le code. NEED PETIT GENIE !
Bonjour,
Je suis débutant en html/css et je dois faire un site web pour un cours seulement la personne de mon équipe qui se charge du design a fait un modèle très élaboré et je n'arrive pas à le retranscrire ...
Pourriez-vous regarder le code et me dire ce qui ne va pas ou tout simplement corriger le css (je pense que le problème se situe là) ?
Ca me permettrait d'avancer d'un pas de géant pour le reste de l'élaboration de mon site, je pense que je rate quelque chose.
Voici ce à quoi je dois arriver :
http://data.imagup.com/11/1147218541.jpg
Et voici le code (simpliste pour l'instant) de ma page HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Burning Feet Festival - Accueil</title>
<link href="styles/accueil.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header">Bannière
<div id="menu">Menu</div>
</div>
<div id="content">
<div id="topcontent">
<div id="topleftcontent">Jquery</div>
<div id="toprightcontent">Call to Action</div>
</div>
<div id="middlecontent">
<div id="leftcontent">Gauche</div>
<div id="centercontent">Centre</div>
<div id="rightcontent">Droite</div>
</div>
</div>
<div id="footer">Contactez nous</div>
</div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
body, h1, h2, h3, li, p, ul, ol {
margin: 0px;
padding: 0px;
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #06F;
background-image: url(../images/oizfz.jpg);
}
#wrapper {
width: 940px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
#wrapper #header {
background-image: url(../images/6147879080_978d1d898a_b.jpeg);
background-repeat: no-repeat;
height: 150px;
width: 940px;
}
#wrapper #header #menu {
background-image: url(../images/oizfz.jpg);
height: 30px;
width: 625px;
margin-top: 60px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 315px;
}
#wrapper #content {
height: 745px;
width: 940px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
#wrapper #content #topcontent {
height: 300px;
width: 940px;
margin-top: 0px;
margin-right: 0px;
margin-bottom:15px;
margin-left: 0px;
}
#wrapper #content #topcontent #topleftcontent {
background-image: url(../images/1300740060_gold.jpeg);
background-repeat: repeat;
height: 300px;
width: 620px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper #content #topcontent #toprightcontent {
background-image: url(../images/1300740060_gold.jpeg);
background-repeat: repeat;
height: 300px;
width: 300px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper #content #middlecontent {
height: 430px;
width: 940px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper #content #middlecontent #leftcontent {
background-image: url(images/1300740060_gold.jpeg);
background-repeat: repeat;
height: 300px;
width: 430px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper #content #middlecontent #centercontent {
background-image: url(images/1300740060_gold.jpeg);
background-repeat: repeat;
height: 300px;
width: 430px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper #content #middlecontent #rightcontent {
background-image: url(images/1300740060_gold.jpeg);
background-repeat: repeat;
height: 300px;
width: 430px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper #footer {
background-image: url(../images/1300740060_gold.jpeg);
background-repeat: repeat;
height: 200px;
width: 940px;
}
par Tendancebordelique,
Pour être plus précis (quand même), j'arrive sans problème à inclure le menu dans la bannière (appellé "header" dans le code, désolé) comme représenté dans l'image.
Par contre les différents items comme "banner/call to action et les 3 boxcontent" ne font que se suivre l'une après l'autre de haut en bas suivant le code.
Je n'arrive pas à inclure le "call to action" (toprightcontent dans le code) à droite de "Banner" (topleftcontent) et pareil pour les 3 "middlecontent" ...
par Tendancebordelique,
Salut,
div est un élément de type block, il occupe toute la place disponible et repousse donc ce qui suit en dessous. C'est le comportement par défaut attendu.
Tu ne donnes pas beaucoup d'infos sur des contraintes éventuelles, donc dans le flou regarde du côté de float et table-cell et vois ce qui te convient le mieux.
par boulaneige [modérateur],
Le mauvais goût a son droit autant que le bon goût [Friedrich Nietzsche]
Je suis d'accord avec toi mais si l'on suit cette logique (que j'ai bien intégré) ça ne semble tout de même pas marcher.
Je m'explique :
Je crée un div pour le contenu du dessus (comme sur l'image dans le premier message avec le "call to action" et le "banner rottator")
<div id="topcontent'></div>
A laquelle je donne 940px de largeur et 300px de hauteur.
Dans celle ci je crée deux div: <div id="topleftcontent"></div> et <div id="toprightcontent"></div>.
Je donne à "topleftcontent" 620 de largeur et 300 de hauteur et un margin-right de 20px.
Je donne à "toprightcontent" 300 de largeur et 300 de hauteur et pas de margin.
Etant donné que ces deux div se trouvent dans "topcontent" qui a une taille délimitée : pourquoi "topleftcontent" et "toprightcontent" ne se mettent pas l'un à côté de l'autre pour justement remplir tout l'espace disponible dans "topcontent" ?
Ou alors je rate quelque chose, j'ai sûrement mal interprété la logique des div. Mais bizarrement, cela semble marcher avec le menu incorporé dans le header ! (J'ai fait exactement pareil qu'au dessus mis à part qu'il n'y a qu'un div "menu" dans la div "header" alors que dans le cas cité au dessus il y a deux div dans une)
Où se situe le problème ? :(
par Tendancebordelique,
Effectivement, il va falloir que tu te familiarises avec les notions de type block et inline (pour les plus courants).
Que tu donnes une largeur fixe ou pas à un élément div, il reste de type block et repousse automatiquement les éléments suivant derrière lui.
Je t'invite à réviser les bases essentielles : http://www.siteduzero.com/tutoriel-3-13558-le-modele-de-boite.html
par boulaneige [modérateur],
Le mauvais goût a son droit autant que le bon goût [Friedrich Nietzsche]