petit souci avec mon css

Sujet résolu

31 mars 2006 à 18:08:59

Bonjour.
voila, avec mon css je n'arrive pas a mettre mon #corps bien en haut !

/***************** Le body *****************/
#body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

/***************** La bannière *****************/
#bannière {
height: 100px;
background-image: url(../images/dbz/Fond%20DBZ2.jpg);
background-repeat: no-repeat;
margin-bottom: 10px;
}

/***************** LES MENU *****************/

/**** Le menu d'en haut ****/
#menu_haut{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
padding-bottom: 10px;

}
/**** menu_super de gauche ****/
.super_Gauche{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
float: left;
}

.super_Gauche img{
display: block;
}

.super_Gauche a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}

/**** le super_menu droit ****/

.super_Droite{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
text-align: right;
}

.super_Droite img{
display: block;
}

.super_Droite a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}

/**** MENU TUTORIAL ****/

#menu {
margin: 0 80% 0 0;
padding: 0px;
background-color: #EBEBEB;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.déco_menu {
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.deco_menu h3{
padding: 10px 0px 2px 0px;
}
/***************** LES NEWS *****************/

#corps {
float: right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}

.pré_news {
}

.pré_news h2{

}

.bloc_news {

}

.questions{
color: #0000FF;
text-decoration: underline;
text-indent: 30px;
}
/***************** tout en bas de la page *****************/

#pied_de_page {

}

mon code html =>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Accueil</title>
<link href="Assets/CSS/test.css" rel="stylesheet" type="text/css">
</head>

<body>


<div id="bannière"> </div>


<div id="menu_haut">
<div class="super_Gauche">
<a href="index.html">Accueil</a> | <a href="#">Forum</a> | <a href="#">Livre d'or</a> | <a href="#">Equipe</a>
</div>

<div class="super_Droite"><a href="#">0 message</a> | <a href="#">inscription</a>
</div>
</div>


<div id="menu">
<div class="déco_menu">
<h3> Tutorial : Language </h3>
<ul>
<li><a href="page2.html">site web </a></li>
<li><a href="page2.html">php</a></li>
</ul>
</div>
</div>
<div id="menu">
<h3> Tutorial : Roxorgamers </h3>
<ul>
<li><a href="page2.html">site rg </a></li>
<li><a href="page2.html">forum rg </a></li>
</ul>
</div>


<div id="corps">
<div class="pré_news">
<h2>Bienvenu sur le site de la 7<sup>ème</sup> Compagnie D'aide</h2>

<ul>
<li><strong>Qu'est-ce que c'est que ce site ?</strong> : c'est un site qui a été créé pour aider les débutants, les vrais. Vous voulez <a href="http://www.siteduzero.com/savoirplus.html">en savoir plus sur le Site du Zér0</a> ?</li>
<li><strong>Qui appelle-t-on "les Zér0s" ?</strong> : c'est vous, les visiteurs de ce site. Nous vous donnons ce surnom amical car tous nos cours partent de "Zér0" : aucune connaissance n'est requise pour pouvoir les lire. Vous pouvez <a href="http://www.siteduzero.com/tuto-1-7-officiels.html">voir la liste des cours officiels</a> et la liste des <a href="http://www.siteduzero.com/tuto-1-8-non-officiels.html">cours rédigés par les Zér0s</a>.</li>
<li><strong>Ca coûte combien ?</strong> : tout cela est gratuit. En effet, nous voulons qu'un maximum d'entre vous puisse en profiter.<br>
Pourtant, ce site nous coûte de l'argent (serveur / bande passante), aussi sachez que <a href="http://www.siteduzero.com/aide.html">le Site du Zér0 a besoin de votre aide</a>.</li>
</ul>
<h2>News : </h2>
</div>
<div class="bloc_news">
<h3>Bonjour ! </h3>

<p>Avant de commencer cette news, je voudrais simplement vous signaler qu'un petit incident a eu lieu dans le code du site hier soir. Rien de très grave rassurez-vous, mais en voulant faire des optimisations karamilo a créé plusieurs bugs qui ont plus désoptimisé qu'autre chose . En particulier, le nombre de visiteurs connectés est totalement faux (non on n'a pas 2000 visiteurs en ce moment hélas ), et la liste des membres visualisant un sujet de forum est fausse aussi, elle n'est pas vraiment mise à jour. <br>
Par ailleurs, et c'est plus grave, le serveur reçoit régulièrement trop de requêtes à faire. winzou a réglé cela rapidement comme il a pu, ce qui minimise la casse. Toutefois, ça sera vraiment réglé quand karamilo aura réglé lui-même (kara si tu me lis, tu peux éditer la news pour dire s'il y a du nouveau )</p>
<p>
Ceux-ci ont un point commun : ils reproduisent le site tel qu'il apparaissait dans ses versions précédentes. C'est techniquement un petit exploit, et en tout cas un véritable défi technique qu'ont relevé Oliveure et Havrest, respectivement les auteurs des designs SdZv1 et SdZv2. <br>
Je suis personnellement impressionné par la volonté de ces Zér0s, je ne pensais pas qu'on pouvait mettre tant d'acharnement à vouloir reproduire les designs passés du site. Quoiqu'il en soit, c'est réussi et ça mérite vraiment le coup d'oeil ! </p>
<p>Cela part d'une idée toute bête : les tutos de la section Vos tutos manquaient un peu de visibilité. Nous voulons promouvoir les "bons" tutos que vous rédigez. C'est pourquoi nous avons créé cette fonctionnalité, simple et efficace. <br>
Ce sont les validateurs de tutos qui gèrent cela. Un seul tuto peut être promu "tuto du moment" à la fois. Ils se baseront principalement sur la <span class="souligne">qualité du tuto</span> et essaieront de faire tourner les tutos environ une à deux fois par semaine (il n'y a pas de règle précise à ce niveau).</p>
<p>
Précisons au passage qu'il est inutile d'envoyer un MP aux validateurs pour les supplier de promouvoir votre tuto : quiconque ferait ça verrait l'ensemble de ses tutos immédiatement blacklisté à vie de la section "tuto du moment" <br>
N'essayez donc pas de les soudoyer ils seront impassibles, même avec de l'argent ils refuseront (bon par contre vous avez le droit de me soudoyer moi ) </p>
</div>
</div>

</div>

</body>
</html>

Voila merci beaucoup !

the_warriors

2 avril 2006 à 13:43:04

bonjour.
personne ne pourrais me le dire !!!

alecool

2 avril 2006 à 13:47:29

peut-etre avec un

html{
padding:0px;}
body{
padding:0px;}

il me semble que c'est comme ca que j'ai fait

Linhks

2 avril 2006 à 14:48:28

Salut,
il me semble déjà que tu n'as pas spécifié de taille pour le menu.
Ensuite, je pense qu'il faut que tu enlèves le float:right à ton corps (il n'est pas necessaire le corps doit se placer normalement à droite du menu) et joue avec un margin-left pour bien placer ton corps.
Si cela ne résoud pas le problème pourrais-tu poster un screenshot (ou l'url du site) pour pouvoir comprendre un peu mieux ce qu'il se passe.
Bonne chance.

the_warriors

3 avril 2006 à 19:00:59

bonjour.
alors je mis se que vous avez dit, et j'ai toujour le meme probleme. Apres avoir fait plusieur petit test, j'ai quand meme réussi a bien mettre les 2 (menu + corps).
Mais voila, j'ai un autre souci
tout est bien mis

Mais maintenant dans mon corps tout le texte qui est a coter du menu est tout a droite !!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Accueil</title>
<link href="Assets/CSS/test.css" rel="stylesheet" type="text/css">
</head>

<body>


<div id="bannière"> </div>


<div id="menu_haut">
<div class="super_Gauche">
<a href="index.html">Accueil</a> | <a href="#">Forum</a> | <a href="#">Livre d'or</a> | <a href="#">Equipe</a>
</div>

<div class="super_Droite"><a href="#">0 message</a> | <a href="#">inscription</a>
</div>
</div>


<div id="menu">
<div class="déco_menu">
<h3> Tutorial : Language </h3>
<ul>
<li><a href="page2.html">site web </a></li>
<li><a href="page2.html">php</a></li>
</ul>
</div>
<div class="déco_menu">
<h3> Tutorial : Roxorgamers </h3>
<ul>
<li><a href="page2.html">site rg </a></li>
<li><a href="page2.html">forum rg </a></li>
</ul>
</div>
</div>

<div id="corps">
<div class="pré_news">
<h2>Bienvenu sur le site de la 7<sup>ème</sup> Compagnie D'aide</h2>

<ul>
<li><strong>Qu'est-ce que c'est que ce site ?</strong> : c'est un site qui a été créé pour aider les débutants, les vrais. Vous voulez <a href="http://www.siteduzero.com/savoirplus.html">en savoir plus sur le Site du Zér0</a> ?</li>
<li><strong>Qui appelle-t-on "les Zér0s" ?</strong> : c'est vous, les visiteurs de ce site. Nous vous donnons ce surnom amical car tous nos cours partent de "Zér0" : aucune connaissance n'est requise pour pouvoir les lire. Vous pouvez <a href="http://www.siteduzero.com/tuto-1-7-officiels.html">voir la liste des cours officiels</a> et la liste des <a href="http://www.siteduzero.com/tuto-1-8-non-officiels.html">cours rédigés par les Zér0s</a>.</li>
<li><strong>Ca coûte combien ?</strong> : tout cela est gratuit. En effet, nous voulons qu'un maximum d'entre vous puisse en profiter.<br>
Pourtant, ce site nous coûte de l'argent (serveur / bande passante), aussi sachez que <a href="http://www.siteduzero.com/aide.html">le Site du Zér0 a besoin de votre aide</a>.</li>
</ul>
<h2>News : </h2>
</div>
<div class="bloc_news">
<h3>Bonjour ! </h3>

<p>Avant de commencer cette news, je voudrais simplement vous signaler qu'un petit incident a eu lieu dans le code du site hier soir. Rien de très grave rassurez-vous, mais en voulant faire des optimisations karamilo a créé plusieurs bugs qui ont plus désoptimisé qu'autre chose . En particulier, le nombre de visiteurs connectés est totalement faux (non on n'a pas 2000 visiteurs en ce moment hélas ), et la liste des membres visualisant un sujet de forum est fausse aussi, elle n'est pas vraiment mise à jour. <br>
Par ailleurs, et c'est plus grave, le serveur reçoit régulièrement trop de requêtes à faire. winzou a réglé cela rapidement comme il a pu, ce qui minimise la casse. Toutefois, ça sera vraiment réglé quand karamilo aura réglé lui-même (kara si tu me lis, tu peux éditer la news pour dire s'il y a du nouveau )</p>
<p>
Ceux-ci ont un point commun : ils reproduisent le site tel qu'il apparaissait dans ses versions précédentes. C'est techniquement un petit exploit, et en tout cas un véritable défi technique qu'ont relevé Oliveure et Havrest, respectivement les auteurs des designs SdZv1 et SdZv2. <br>
Je suis personnellement impressionné par la volonté de ces Zér0s, je ne pensais pas qu'on pouvait mettre tant d'acharnement à vouloir reproduire les designs passés du site. Quoiqu'il en soit, c'est réussi et ça mérite vraiment le coup d'oeil ! </p>
<p>Cela part d'une idée toute bête : les tutos de la section Vos tutos manquaient un peu de visibilité. Nous voulons promouvoir les "bons" tutos que vous rédigez. C'est pourquoi nous avons créé cette fonctionnalité, simple et efficace. <br>
Ce sont les validateurs de tutos qui gèrent cela. Un seul tuto peut être promu "tuto du moment" à la fois. Ils se baseront principalement sur la <span class="souligne">qualité du tuto</span> et essaieront de faire tourner les tutos environ une à deux fois par semaine (il n'y a pas de règle précise à ce niveau).</p>
<p>
Précisons au passage qu'il est inutile d'envoyer un MP aux validateurs pour les supplier de promouvoir votre tuto : quiconque ferait ça verrait l'ensemble de ses tutos immédiatement blacklisté à vie de la section "tuto du moment" <br>
N'essayez donc pas de les soudoyer ils seront impassibles, même avec de l'argent ils refuseront (bon par contre vous avez le droit de me soudoyer moi ) </p>
</div>
</div>

</div>

</body>
</html>

/***************** Le body *****************/
#body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

/***************** La bannière *****************/
#bannière {
height: 100px;
background-image: url(../images/dbz/Fond%20DBZ2.jpg);
background-repeat: no-repeat;
margin-bottom: 10px;
}

/***************** LES MENU *****************/

/**** Le menu d'en haut ****/
#menu_haut{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
padding-bottom: 10px;

}
/**** menu_super de gauche ****/
.super_Gauche{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
float: left;
}

.super_Gauche img{
display: block;
}

.super_Gauche a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}

/**** le super_menu droit ****/

.super_Droite{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
text-align: right;
}

.super_Droite img{
display: block;
}

.super_Droite a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}

/**** MENU TUTORIAL ****/

#menu {
float: left;
width: 70%;
}

.déco_menu {
margin: 0 80% 0 0;
padding: 0px;

background-color: #EBEBEB;

border-right: 1px solid #000000;
border-bottom: 1px solid #000000;;
}

.deco_menu h3{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
/***************** LES NEWS *****************/

#corps {
margin-left: 160px;
margin-bottom: 20px;
padding: 5px;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
}

.pré_news {
}

.pré_news h2{

}

.bloc_news {

}

.questions{
color: #0000FF;
text-decoration: underline;
text-indent: 30px;
}
/***************** tout en bas de la page *****************/

#pied_de_page {

}

Pour le lien de mon site => je ne les pas encors mis sur mon site !!
ps: si je ne trouve tjr pas, je le mettrai sur mon ftp, pour que vous le voyer vous meme
Voila, bonne fin de journée

pascall

3 avril 2006 à 19:56:06

c'est la taille de ton menu qui va pas (70% de l'ecran c'est pas beaucoup ?)
mets un width de 150px au menu et à deco_menu

the_warriors

4 avril 2006 à 13:54:35

Bonjour.
je vous remercie grandement pour l'aide que vous m'avez donner (je ne c'est si sa se dit mais bon, c'est le geste qui conte

)

Pourquoi, doit ont mettre un "width" au menu + deco_menu ?

A quoi correspond les 3 dernier définition du style dans Dreamweaver ?

ps : je sais que sa n'a aucun rapport au sujet, mais sa m'embêterais je fait un topic juste pour sa

ET ENCORS MERCI POUR TOUT !!!!

stilobique

4 avril 2006 à 15:17:58

C'est quoi les 3 dernieres définitions dont tu parle ??

Art Station // Blender Lounge

the_warriors

4 avril 2006 à 20:06:17

bonsoir.
- Liste
- Positionnement (je ne voie pas la diference entre sa et Boite)
- Extension

Voila.
bonne soiré