Pbs de fond bleu dans entete. Help me

Question

oleum

8 May 2006 à 09:15

Bonjour,
J'essais d'apprendre a faire un site, alors j'ai pris un template gratos et j'essais de le modifier pour comprendre. Et la je comprend pas pourquoi j'ai du bleu qui apparait derriere mon titre1.... allors voici de code Xhtml siuvie du css .

<!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>Or so they call it</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all" />
</head>

<body>
<div id="header_wrapper">
<div id="header">
<h1>titre1</h1>
<h2>Titre2</h2>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="page2.html">page2</a></li>
<li class="active"><a href="test.html">test</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="body">
<div class="right">
<h3>Drupal Menu</h3>
<div class="menu">
<div id="Login" class="RightContents">
<h5>Identifiant</h5>
<input name="LoginId" id="LoginId" />
<h5>Password</h5>
<input name="Password" id="Password" type="password" />
<input name="LoginSubmit" id="LoginSubmit" type="submit" value="Login" />
</div>
<ul>
<li class="leaf"><a href="#">my account</a></li>
<li class="collapsed"><a href="#">create content</a></li>
<li class="expanded"><a href="#" class="active">administer</a>
<ul>

<li class="leaf"><a href="#">access control</a></li>
<li class="leaf"><a href="#">...</a></li>
<li class="expanded"><a href="#" class="active">settings</a>
<ul>
<li class="leaf"><a href="#">pagination</a></li>
<li class="leaf"><a href="#">pathauto</a></li>
</ul>
</li>
<li class="collapsed"><a href="#">store</a></li>
<li class="leaf"><a href="#">...</a></li>
<li class="leaf"><a href="#">help</a></li>
</ul>
</li>
<li class="leaf"><a href="logout">log out</a></li>
</ul>
</div>
</div>
<div class="left">
<h3>More Layouts</h3>
<div class="content">
<ul class="links">
<li><a href="3col-left.html">Double Left</a></li>
<li><a href="3col-right.html">Double Right</a></li>
</ul>
</div>
<h3>Links</h3>
<div class="content">
<ul class="links">
<li><a href="http://aaron.ganschow.us/">Aaron Ganschow</a></li>
<li><a href="http://www.wildleaf.net/">Wildleaf</a></li>
<li><a href="http://www.sxc.hu/">stock.xchng</a></li>
</ul>
</div>
</div>
<div class="main">
<h1>BLABLABLA TITRE</h1>
<div class="indent">
<h2> Comments </h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus arcu. Pellentesque urna. Pellentesque justo. Nulla malesuada sapien. Aliquam at odio. Sed metus velit, convallis at, volutpat a, eleifend a, arcu. Etiam elit sapien, pretium et, ullamcorper eu, commodo quis, libero. Praesent sollicitudin. Vivamus laoreet. Sed convallis elit eget sapien. Curabitur.
</p>
<h2> Nimes </h2>
<p>
<h3> More Lorem </h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus arcu. Pellentesque urna. Pellentesque justo. Nulla malesuada sapien. Aliquam at odio. Sed metus velit, convallis at, volutpat a, eleifend a, arcu. Etiam elit sapien, pretium et, ullamcorper eu, commodo quis, libero. Praesent sollicitudin. Vivamus laoreet. Sed convallis elit eget sapien. Curabitur.
</p>
<div class="indent">
<h4> More Lorem </h4>
<p>
Sed metus velit, convallis at, volutpat a, eleifend a, arcu. Etiam elit sapien, pretium et, ullamcorper eu, commodo quis, libero. Praesent sollicitudin. Vivamus laoreet. Sed convallis elit eget sapien. Curabitur.
</p>
</div>
</div>
</div>
</div>
<div id="footer">
© Copyright <a href="mailto:ad-mail.com">www.com</a> 2006<br />
Designed by Aaron Ganschow</a>
</div>
</div>
</body>
</html>

et voici le css

body
{
margin: 0;
padding: 0;
background: #FFF;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
}

#header_wrapper
{
width: 100%;
margin: 0 auto;
border-width: 0 2px;
border-style: solid;
border-color: white;
padding: 0;
background: white url(../images/header_repeat2.jpg) top right repeat-x;
}

#header
{
width: 100%;
margin: 0;
padding: 0;
height: 193px;
background: url(../images/t4.jpg) top left no-repeat;
}

#header h1
{
font-size: 3em;
color: black;
text-align: right;
margin: 0;
padding: 10px 20px 0 0;
height: 45px;
border-bottom: none;
font-variant:small-caps;
}

#header h2
{
font-size: 1.15em;
color: #242424;
text-align: right;
margin: 0;
padding: 0 20px 0 0;
height: 39px;
}

#menu
{

float: right;
margin: 38px 0 0 0;
padding: 0 20px;
height: 60px;
display: block;
}

#menu li
{
display: block;
text-align: center;
float: left;
list-style: none;

}

#menu li a
{
background-image: url(../images/no img.jpg);
color: black;
text-decoration: none;
font-weight: 700;
display: block;
width: 110px;
height: 25px;
margin: 33px 0 0 0;
padding: 5px 0 0 0;
background-position: 0 30px;
border: 0;
}

#menu li.active a,#menu li.active a:hover
{
color: red;
margin: 3px 0 26px 0;
padding: 6px 0 0 0;
height: 22px;
background-position: 0 0;
}

#menu li a:hover
{
background-position: 0 60px;
}

#body
{
width: 100%;
background-color: #C0C0C9;
border-width: 0 2px;
border-style: solid;
border-color: #930;
margin: 0 auto;
padding: 10px 0;
}

.left, .right
{
color:#759EB7;
width: 155px;
float: left;
margin: 0 0 0 5px;
}

.right
{
float: right;
margin: 0 5px 0 0;
}

.main
{
color: black;
width: auto;
margin: 0 175px;
}

.double-left
{
margin-left: 335px;
margin-right: 5px;
}

.double-right
{
margin-right: 335px;
margin-left: 5px;
}

.no-left
{
margin-left: 5px;
}

.no-right
{
margin-right: 5px;
}

#footer
{
clear: both;
background: #476D85;
border-width: 1px 0;
border-color: #C5C5C5;
border-style: solid;
margin: 20px auto 10px auto;
vertical-align: middle;
text-align: center;
padding: 10px 0;
font-weight: 700;
color: #C5C5C5;
}

#footer a
{
color: #C5C5C5;
}

.indent
{
margin-left: 10px;
}

ul.links, .menu ul
{
margin: 0;
padding: 0;
}

ul.links li, .menu ul li
{
list-style-type: none;
margin: 0;
padding: 0;
}

ul.links li a, .menu ul li a
{
display: block;
padding: 3px;
margin: 1px;
line-height: 1.1em;
height: 1.5em;
}

ul.links li a:hover, .menu ul li a:hover
{
color: #C5C5C5;
background-color: #476D85;
}

.menu ul li a
{
border: 0;
}

.menu ul li ul
{
margin-left: 15px;
}

li.collapsed, li.expanded
{
font-weight: 700;
}

li.leaf
{
font-weight: 400;
}

h1, h2, h3, h4, h5, h6
{
margin: 5px 0 0 0;
padding: 0;
}

h1
{
border-bottom: 1px solid;

}

p
{
margin-top: .5em;
}

.right h3, .left h3
{
color: white;
font-size: 1.7em;
margin: 5px 0 0 0;
padding: 5px;
border-width: 0 0 1px 0;
border-style: solid;
border-color: red;
}

a
{
text-decoration: none;
border-bottom: 1px dotted;
color: #EEE;
}

form
{
margin: 0;
padding: 0;
}

form input, form textarea, form select
{
color: #FFF;
background-color: #476D85;
border: 1px solid;
margin: 5px;
}

form label
{
color: #759EB7;
display: block;
width: 120px;
}

form input[type="password"]
{
color: #476D85;
border-color: #FFF;
}

blockquote {
margin: 5px;
background: transparent url(../images/quote.gif) left top no-repeat;
padding: 4px;
padding-left: 45px;
border: 2px dotted #476D85;
}

blockquote Smiley cite

:after {
content: "Quote from: " attr(cite);
display: block;
border-top: 1px solid #999;
color: #999;
margin: 1em 0 0;
padding: .5em 0 0;
font-size: .8em;
font-weight: bold;
}

dt
{
font-weight: bold;
font-size: 1.05em;
color: #ad4c21;
}

dd
{
margin-left: 15px;
}

#middle-column
{
float: left;
width: 57.5%;
padding: 0em 0.6em 0em 0.7em;
background-color: rgb(255,255,255);
color: rgb(100,100,100);
line-height: 1.3em;
font-size: 1.2em;
}

.middle-column-left {
float: left;
width: 47.75%;
}

.middle-column-right {
float: right;
width: 47.75%;
}

Voila, j'espere que ca va pas trop faire chier comme question
Merci d'avance

oleum

8 May 2006 à 09:34

alors j'ai essayé d'effacer les class css et de les remettres petit a petit pour voir sur quoi chaque 'paragraphe' agissait. mais pas moyen de trouver d'ou sort ce bleu derriere les titres 1 et 2. Si qq un pouvait m'eclairer je suis preneur!!!! J'ai passé énormément de temps pour comprendre un peu la structure en bidouillant comme je pouvais ma la je rame carrément. J'arrive a modifier quelques couleurs, taille et police mais je comprend pas un dizième de cette class css. Est ce qu'il n'y aurait pas des bugs ou erreurs dedans? Elle me semble très lourde. est ce que ca parait justifier?
Bon bah merci d'avance, j'espere que le code n'est pas trop lourd pour qu'on puisse m'aider un peu.

gege71

8 May 2006 à 13:37

Salut

J’ai testé ton code avec IE FF OP et je n'ai pas de bleu sous titre 1 & 2

Ton problème vient d'ailleurs

A+

oleum

8 May 2006 à 22:20

ok merci du tuyau.
Pour toi derriere titre 1 et titre 2 (en haut a gauche) le fond est blanc? Je vais voir ca!!!! Je comprend pas trop mais je vais le tester dès ce soir sur la makina d'un pote et vais voir ca. Comment puis je mettre un fond en filigrane derriere mon titre sans en modifier l'apparence?

Sinon si je peux me permettre une grosse question au passage:
Comment puis je mettre une image a coté du texte (genre photo de soirées ou autres) dans le corp de la page avec du texte (descriptif) aligné, qui commence au meme niveau que le haut de la photo (photo avec commentaire a coté et en dessous).
J'arrive a mettre une image dans le corp avec du texte en dessous mais avec du texte a coté de l'image le texte ne s'aligne pas sur le haut de la photo.
Si une bonne ame pouvait me filler un coup de patte... au moins m'eguiller...Je suis tout ouie.
Merci encore au faite d'avoir pris le temps de tester le code.

gege71

8 May 2006 à 22:35

float est ton ami

A+

oleum

9 May 2006 à 09:43

cad? Je ne comprend pas!

Ralfman68

9 May 2006 à 11:59

Salut !
Tu prends ton image que tu affiches en flottante (float:left ou right, au choix),
puis tu écris tes paragraphes ou ta ligne et elle se casera à coté de l'image.
Finition avec ajustement des margin-padding.
Smiley smile

oleum

10 May 2006 à 00:27

Merci , excellent.
Je teste ca dessuite.

Sujet clos

CSS et mise en forme, CSS3

Pbs de fond bleu dans entete. Help me