Bonjour,
Je suis en train de coder le design de mon site web, je l'ai presque terminé mais plusieurs problèmes de positionnement pose probleme.
Le design voulu :
http://blind-game.net/designsite.jpg
Le site codé avec les problemes :
http://blind-game.net/anglais/
Voici les problèmes :
- Dans le menu de droite, je n'arrive pas à positionner le pont collé a la bordure du bas du menu, j'aimerais faire pareil avec une autre image sur le haut du menu
- Dans le footer, je n'arrive pas à placer l'image underground collé a la bordure du bas du footer, malgré les fonctions permettant de centrer et déplacé vers le bas le texte "Texte du footer" cela ne marche pas.
Voici les codes css et xhtml de ce design :
Voilà merci de m'indiquer le code ou la marche à suivre pour régler ces problèmes. Si vous avez des conseils pour améliorer ce design (au niveau graphique ou de codage) n'hésitez pas.
Merci d'avance.
Modifié par wadol (28 Apr 2011 - 23:44)
Je suis en train de coder le design de mon site web, je l'ai presque terminé mais plusieurs problèmes de positionnement pose probleme.
Le design voulu :
http://blind-game.net/designsite.jpg
Le site codé avec les problemes :
http://blind-game.net/anglais/
Voici les problèmes :
- Dans le menu de droite, je n'arrive pas à positionner le pont collé a la bordure du bas du menu, j'aimerais faire pareil avec une autre image sur le haut du menu
- Dans le footer, je n'arrive pas à placer l'image underground collé a la bordure du bas du footer, malgré les fonctions permettant de centrer et déplacé vers le bas le texte "Texte du footer" cela ne marche pas.
Voici les codes css et xhtml de ce design :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>SpeakEnglish.fr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<div id="en_tete">
<span class="menu">Accueil Cours Livre d’or Forum Blog</span>
</div>
<br />
<div id="cadre_un">
<span class="cravate"></span>
<span class="drapeau"></span>
<div class="texte_cadre_un">Bienvenu</div></div>
<br />
<div id="corps">
<div class="titre">Titre 1</div>
<div class="poster">Test</div>
<div class="article">Vous vous souvenez que, pour décaler un peu le titre, on avait utilisé dans un chapitre de la partie II la propriété text-indent. Ici, margin-left semble donner le même résultat...
Visuellement le résultat est le même, certes. Si vous mettez une bordure, vous verrez une petite différence : la bordure de gauche est décalée avec un margin-left, alors que ce n'est pas le cas avec text-indent.
En pratique, je vous conseille de n'utiliser le text-indent que sur des paragraphes, pour décaler la première ligne. Le reste du temps, jouez avec les margin et les padding pour placer comme bon vous semble vos blocks.</div>
</div>
<div class="menudroite">
Teeest
<div class="pont"></div>
</div></div>
<div class="fermer"></div>
<div id="bas"><span class="texte_bas">Texte du footer</span>
<span class="underground"></span>
<span class="tel"></span>
</div>
</body>
</html>
*{ margin:0;padding:0;}
a img{border:0}
#en_tete
{
width: 100%;
height: 86px;
background-image: url("img_d_jpg/header.jpg");
background-repeat: no-repeat;
margin-top: 10px;
}
.menu
{
float: right;
word-spacing: 30px;
margin-top: 20px;
}
#cadre_un
{
border-top: 2px solid #f2ecea;
border-bottom: 2px solid #f2ecea;
background-color: #f9f9f9;
height: 129px;
font-size: 1.2em;
}
.texte_cadre_un
{
color:#d1c9c6;
text-align: center;
margin-top: 60px;
}
.cravate
{
width: 121px;
height: 114px;
background-image: url("img_d_jpg/cravate.png");
background-repeat: no-repeat;
float: left;
}
.drapeau
{
width: 139px;
height: 129px;
background-image: url("img_d_jpg/drapeau.png");
background-repeat: no-repeat;
float: right;
}
#corps
{
width: 60%;
float:left;
margin-left: 20px;
}
.menudroite
{
color:#d1c9c6;
float: right;
width: 33%;
border-top: 2px solid #f2ecea;
border-bottom: 2px solid #f2ecea;
border-left: 2px solid #f2ecea;
height: 500px;
padding:15px;
background-color: #f9f9f9;
margin-bottom: 20px;
}
.pont
{
width: 277px;
height: 170px;
background-image: url("img_d_jpg/pont.png");
background-repeat: no-repeat;
float: bottom;
}
.titre
{
text-indent: 30px;
font-size: 2.2em;
font-weight: bolder;
text-decoration: underline;
text-transform: uppercase ;
font-family: Tevegraphy, "Trajan Pro", serif;
}
.article
{
text-align: justify;
}
.poster
{
border-top: 2px solid #f2ecea;
border-bottom: 2px solid #f2ecea;
font-family: "Trajan Pro", serif;
font-size: 1.2em;
}
.fermer
{
clear: both;
}
#bas
{
border-top: 2px solid #f2ecea;
background-color: #f9f9f9;
height: 240px;
float: bottom;
padding: 20px;
margin-top: 20px;
color:#d1c9c6;
}
.underground
{
width: 184px;
height: 179px;
background-image: url("img_d_jpg/underground.png");
background-repeat: no-repeat;
float: left;
float: bottom;
}
.tel
{
width: 96px;
height: 228px;
background-image: url("img_d_jpg/tel.png");
background-repeat: no-repeat;
float: right;
margin-right: 3px;
margin-bottom: 3px;
}
.texte_bas
{
color:#d1c9c6;
float: center;
margin-top: 120px;
}
Voilà merci de m'indiquer le code ou la marche à suivre pour régler ces problèmes. Si vous avez des conseils pour améliorer ce design (au niveau graphique ou de codage) n'hésitez pas.
Merci d'avance.
Modifié par wadol (28 Apr 2011 - 23:44)