"coller" une partie du design au reste

28 juin 2006 à 11:45:22

salut, j'ai enfin presque réussi a coder mon premier design, il me reste juste un probleme : le bloc du texte et des lien ne sont pas collés juste en dessous du header et de la barre pour les liens principaux, il y a un espace entre et je n'ai pas spécifié de margin-bottom sous le header. j'ai remarqué que quand je change le padding pour le bloc de texte il se colle (mai pa les liens) par contre alors la il est décollé du footer! merci d'avance, le code xhtml est tout ce qu'il y a de plus basique et voici le CSS :

Citation : Jun-Fan

body
{
width: 862px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

/* L'en-tête */

#en_tete
{
width: 862px;
height: 156px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
}

#lien_principaux
{
width: 862px;
height: 28px;
background-image: url("images/lien-principaux.jpg");
}

/* Le menu */

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

.element_menu
{
background-image: url("images/bloc-lien.jpg");
background-repeat: no-repeat;
height: 217px;
margin-bottom: 10px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: #B3B3B3;
font-family: Comic Sans MS, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
padding: 5px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: red;
}

.element_menu a:hover
{
color: red;
}

/* Le corps de la page */

#corps
{
width: 693px;
height: 807px;
margin-left: 169px;
padding: 0px;
background-image: url("images/bloc-principal.jpg");
background-repeat: no-repeat;
}

#footer
{

width: 693px;
height: 40px;
margin-left: 169px ;
background-image: url("images/footer.jpg");
}

jp949

28 juin 2006 à 14:21:54

et dans ton header et ta speedbar qu'est-ce qu'il y a ? ul, p, hn

Jun-Fan

28 juin 2006 à 14:31:23

tout est la, il n'y a rien de plus, rien ne spécifie qu'il doit y avoir un espace la et je ne comprend pas pouruqoi il apparaît!

Yu-meyio

28 juin 2006 à 15:19:02

Bonjours pourrais tu aussi me donner ton code xhtml comme ca je peux voir ou est la faute la perso je vois rien ton code et bien fais mais peut etre quand look la page et retouchant tes mesures je pourrais mieux t'aider

atly

28 juin 2006 à 15:20:04

Faut voir le code HTML, oui.

Sinon, tu peux essayer la super glu.

Jun-Fan

28 juin 2006 à 15:22:58

lol oui, si la superglu marchait...
bref voila le code HTML :

Citation : Jun-Fan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>_-=::TuTo-TrickZ::=-_</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style2.css" />
</head>

<body>

<div id="en_tete">

</div>

<div id= "lien_principaux">
</div>

<div id="menu">
<div class="element_menu">
<h3></h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3></h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>

<div id="corps">
<h1>TuTo-TrickZ</h1>

<p>
Bienvenue<br />
Ce site est le premier site en français à vous proposerblablabla... <br />
apprendre.
</p>
</div>

<div id="footer">
All right reserved
</div>

</body>
</html>

atly

28 juin 2006 à 15:25:13

Oui, c'est bien ça.
Vire le margin de .element_menu h3 et de #corps h1.

Sinon, les éléments vides, c'est pas top.

Jun-Fan

28 juin 2006 à 15:52:06

merci pour les bloc lien c'est bon maintenant

par contre y'a rien de spécifié pour le #corps h1, a moins que tu parles du padding : 0px; dans #corps que j'ai déjà remplacé par : padding-left : 15px; mais ca change rien

atly

28 juin 2006 à 15:56:34

Tu as les styles intégrés par défaut du navigateur, qui spécifient un style aux éléments par défaut.

C'est tout

jp949

28 juin 2006 à 16:02:23

on te dit de mettre les marges des elemnts que tu inclus dans tes cadres a 0 que ce soit h1 ou h3 ou ul ou p

atly

28 juin 2006 à 16:05:20

Non, pas tous. Seulement les marges éléments adjacents aux bordures inférieures et supérieures du bloc dans ton cas.

Jun-Fan

28 juin 2006 à 20:00:00

euh je comprends pas tout ce que vous racontez la mais j'ai effacer tout les texte et les effets et maintenant c'est bon, je pense que ca ira en écrivant le texte merci