28172 sujets

CSS et mise en forme, CSS3

Hello,
Apprès chargement de mes pages et images sur le serveur je n'ai rien que du texte et des liens. je ne suis pas sur de mon css et de ma page index html je joins les deux car il doit y avoir des erreur, les pages sont en construction car parfois dans les codes il y a des vides. Je suis débutant soyez indulgent. Merci pour votre aide.
cordialement.
pintje

-page css.

* {
padding: 0;
margin:0;
font-family:Arial,Sans serif;
}
p {
margin: 0.7em 0;
line-height:1.8em;
}
dl {
margin:1em 0;
}
dt
{
font-weight:bold;
}
dd
{
margin:0.5em;
padding:0;
}
img
{
padding:5px;
background-color:#3f3f3f;
margin:5px;
border:#000 1px solid;
}
img.right {
float: right;
margin:10px 0 0 10px;
}
img.left {
float: left;
margin:0 10px 10px 0;
}
a:link img,
a:visited img,
a:hover img,
a:active img {
border:none;
background:none;
padding:none;
background:url(../img/shadow.gif") no-repeat right bottom);
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}
.clear {
clear:both;
height:20px;
}
fieldset
{
border:0;
}
body
{
background: #171717 url(../img/orange/bg.gif);
margin: 10px;
font: 76%/1.6em arial, sans-serif;
color: #fff;
text-align: center;
}
a
{
text-decoration:none;
}
a.interne:link, a.interne:visited {
color: #000000;
text-decoration:none;
}
a.externe:link, a.externe:visited {
color: #D98621;
text-decoration:none;
}
a.center:link, a.center:visited {
color: #3399CC;
text-decoration:none;
}
a.interne:hover, a.interne:active {
text-decoration:none;
color:#fff;
}
a.externe:hover, a.externe:active {
text-decoration:none;
color:#fff;
}
h1, h2, h3, h4, h5, h6
{
font-family: Arial, Sans Serif;
color:#FF0099;
}

#container {
margin: 0 auto;
padding:0;
width:990px;
position: relative;
text-align: left;
border:1px solid #000;
background:#313131;
}
#navigation {
background-image:url(../img/orange/orange-li.gif);
background-repeat:repeat-x;
background-position:center;
overflow: hidden;
width:990px;
position: relative;
text-align: left;
font-family: Arial, Sans Serif;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
margin: 0 auto;
}
html #navigation {
height: 1%;
}
#navigation ul li {
float: left;
margin: 0px;
list-style-type: none;
}
#navigation ul li a {
border-right:1px solid #1e1e1e;
border-bottom:none;
padding: 9px 15px 9px 15px;
display: block;
font-weight:bold;
color:#000000;
text-decoration: none;
background:#eeeeee;
font-size:13px;
letter-spacing:0px;
background-image:url(../img/orange/orange-li.gif);
background-repeat:repeat-x;
background-position:center;
}
#navigation ul li a:hover,
#navigation ul li a:active,
#navigation ul li.current_page_item a
{
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
color: #fff;
border-right:1px solid #1e1e1e;
border-bottom:none;
font-size:12px;
text-decoration:none;
}
#drop-shadow{
background-image:url(../img/orange/drop-shadow.gif);
background-repeat:repeat-x;
background-position:center;
margin: 0px;
width:202px;
padding-top:2px;
padding-bottom:3px;
}
#header {
clear: both;
margin: 0 auto;
width:990px;
position: relative;
text-align:left;
padding:15px 0px 15px 0px;
color:#FFFFFF;
}
#header h1
{
font-size:35px;
margin:10px 0 0 0px;
font-variant:small-caps;
letter-spacing:0px;
color:#F99B25;
}
#header h1 a {

text-decoration:none;
border:0;
color:#FFFFFF;
}
#header h2
{
margin:5px 0 0 0px;
font-size:1em;
font-weight:normal;
font-family: Arial, Sans Serif;
letter-spacing:0px;

}
#content {

width:980px;
margin:0 auto;
position:relative;
padding-bottom:10px;

}
html #content {

}
#content h4 {
font-size: 1.1em;
margin: 1em 0 0 0;
}
#content h5 {
font-size: 1em;
margin: 1em 0;
}
#content-main ul
{
margin:0 1em;
padding:0 1em;
list-style-image:url(../img/bullet.png);
}
#content-main ul.asides
{
margin:0;
padding:2em;
border-bottom:#000 1px solid;
}
#content ol
{
list-style-type:decimal;
margin:1em;
padding-left:2em;
}
#content-main {
float: left;
width: 560px;
}
html #section-index #content-main {
margin-right: 0px;
}
#content .post
{
padding-left:10px;
}
#content h2,
#content h3
{
font-size: 1.5em;
margin: 1em 0 0;
font-weight:normal;
line-height:1.4em;
letter-spacing:0px;
color: #FF3333;
}
#content .entry
{


}
#content .entry a:link, #content .entry a:visited
{
border-bottom:#66CCFF ;
}
#content .entry a:hover, #content .entry a:active
{
border-bottom:#D98621 1px solid;
}
#content .entry li
{
margin:0 0 0.3em 0;
padding:0;
line-height:1.6em;
}
.footer-area{
overflow: hidden;
width:990px;
position: relative;
text-align: left;
font-family: Arial, Sans Serif;
margin: 0 auto;
padding:0px 0 9px 0;
font-size:12px;
font-weight:bold;
color:#c49400;
text-decoration:none;
}
.footer-area a{
font-size:12px;
font-weight:bold;
border:0px;
color:#c49400;
text-decoration:none;
}

#nav{
width: 200px;
margin-top:15px;
margin-left:2px;
margin-right:5px;
margin-bottom:10px;
overflow:hidden;
float:left;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color:#292929;
}
#nav img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}

#nav UL{
width: 200px;
margin: 0px;
padding: 0px;
display: block;
overflow:hidden;
font-family: Arial, sans-serif;
font-weight:bold;

}
#nav LI{
width: 200px;
margin: 0px;
list-style-type: none;
overflow:hidden;
text-align: left;
}

#nav LI A{
width: 200px;
display: block;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
text-decoration: none;
overflow:hidden;
text-align: left;
border-bottom: 1px solid #000;
background-color:#D98621;
}
#nav LI A:hover{
width: 200px;
text-decoration: none;
display: block;
overflow:hidden;
text-align: left;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
background-color:#2e2e2e;
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
border-bottom: 1px solid #000;
}
#nav-right{
width: 200px;
margin-top:15px;
margin-left:5px;
margin-right:2px;
margin-bottom:10px;
overflow:hidden;
float:right;
position:relative;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color:#292929;
}
#nav-right img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}

#nav-right UL{
width: 200px;
margin: 0px;
padding: 0px;
display: block;
overflow:hidden;
font-family: Arial, sans-serif;
}
#nav-right LI{
width: 200px;
margin: 0px;
list-style-type: none;
overflow:hidden;
text-align: left;
}
#nav-right LI A{
width: 200px;
display: block;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
text-decoration: none;
overflow:hidden;
text-align: left;
border-bottom: 1px solid #000;
background-color:#292929;
}
#nav-right LI A:hover{
width: 200px;
text-decoration: none;
display: block;
overflow:hidden;
text-align: left;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
background-color:#2e2e2e;
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
border-bottom: 1px solid #000;
}
.cat{
width:200px;
margin: 0px;
padding:4px;
overflow:hidden;
border-bottom: 1px solid #000000;
text-align: left;
color:#fff;
font-weight:bold;
background-image:url(../img/orange/cat-box-rep.png);
background-position:top;
background-repeat:repeat-x;
}
#style-switch-theme{
position:absolute;
visibility:visible;
z-index:95;
top:30px;
right:5px;
}
#style-switch{
position:absolute;
visibility:visible;
z-index:99;
top:30px;
right:0px;
display:inline;
}
#style-switch img{
border: 1px solid #000;
padding:1px;
background-color:#ffffff;
background-image:none;
}
#style-switch img:hover{
border: 1px solid #ffffff;
padding:1px;
background-color:#000;
background-image:none;
}
#style-switch a,
style-switch a:active,
style-switch a:visited,
style-switch a:link
style-switch a:hover,{
border-bottom:0px;
margin-right: 0px;
background-image:none;
}
#back-to-top{
position:absolute;
visibility:visible;
z-index:82;
right:15px;
top:7px;
}
#main-image.imgindex{
background:url(../img/orange/titregeneral.jpg) no-repeat center;
width:990px;height:220px;border:1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgvilles{
background:url(../img/orange/titrevilles.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgalkmaar{
background:url(../img/orange/titrealkmaar.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgwijk{
background:url(../img/orange/titrewijkbijduurstede.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgamsterdam{
background:url(../img/orange/titreamsterdam.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglesportsetiles{
background:url(../img/orange/titrelesportsetiles.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgenkhuizen{
background:url(../img/orange/titreenkhuizen.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgterschelling{
background:url(../img/orange/titreterschelling.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imghoorn{
background:url(../img/orange/titrehoorn.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgeau{
background:url(../img/orange/titreeau.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgleplandelta{
background:url(../img/orange/titreleplandelta.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglesmoulins{
background:url(../img/orange/titrelesmoulins.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglespolders{
background:url(../img/orange/titrelespolders.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgactualites{
background:url(../img/orange/titreactualites.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imghistoire{
background:url(../img/orange/titrehistoire.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgartdevivre{
background:url(../img/orange/titreartdevivre.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgclimat{
background:url(../img/orange/titreclimat.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imggeographie{
background:url(../img/orange/titregeographie.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image IMG{
border: 0px;
padding:0px;
margin:0 auto;
}


-Page html


<!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" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Your Site Title -->
<title>LES PAYS BAS</title>
<!-- END TITLE -->
<!-- CSS Style Sheets -->
<link rel="stylesheet" href="css/style.css" type="text/css" href="style.css" media="screen" />
<!-- END CSS Style Sheet -->
</head>
<body id="section-index">
<div id="header">
<!-- Your Site Name -->
<h1></h1>
<!-- END Site Name -->
<!-- Your Site Slogan -->
<h2></h2>
<!-- END Site Slogan -->
</div>
<!-- Top Links -->
<div id="navigation" style="margin-bottom:5px;">
<ul>
<li><a href="index.html">GENERAL</a></li>
<li><a href="pageeau.html" >LA MA&#65533;TRISE DE L'EAU</a></li>
<li><a href="pagevilles.html" >LES VILLES</a></li>
<li><a href="pageports.html" >LES PORTS ET &#65533;LES</a></li>
<li><a href="pageartdevivre.html" >ART DE VIVRE</a></li>
<li><a href="pageactualites.html" >ACTUALITES</a></li>
</ul>
</div>
<!-- END Top Links -->
<!-- Change the banner by replacing the image in: img/orange/orange-banner.jpg -->
<div id="main-image"class="imgindex" style="margin-bottom:5px;"></div>
<!-- END Banner -->
<div id="container">
<div id="content">
<!-- Left Side Menu -->
<div id="nav">
<ul>
<li class="cat" style="border-top: 1px solid #000;">GENERAL</li>
<li><a href="pagegeographie.html"class="interne" >GEOGRAPHIE</a></li>
<li><a href="pageclimat.html"class="interne" >CLIMAT</a></li>
<li><a href="pagehistoire.html"class="interne" >HISTOIRE</a></li>
</ul>
</div>
<!-- END Left Side Menu -->
<!-- Content -->
<div id="content-main">
<!-- Homepage Article -->
<div class="post">
<div class="posttitle">
<h2>Welcome to Your Website</h2>
</div>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
<br />
<br />
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit.</p>
<br />
<br />
<span style="text-align:right;"><a href="index.html"class="center">Read More &#65533;</a></span>
</div>
</div>
<!-- END Homepage Article -->
<!-- Homepage Second Article -->
<div class="post">
<div class="posttitle">
<h2>Second Homepage Article</h2>
</div>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper
laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam.
Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
<br />
<br />
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.
Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at,
ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet,
lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse
cursus velit vel ligula. Mauris elit.</p>
</div>
</div>
<!-- End Homepage Second Article -->
</div>
<!-- END Content -->
<!-- Right Side Menu -->
<div id="nav-right" style="margin-bottom:5px;">
<ul>
<li class="cat" style="border-top: 1px solid #000;">LES PAYS-BAS</li>
<li style="text-align:center"><img src="img/profile.jpg" alt="About Us" />
<br />
Here you can describe what your website is about</li>
<li class="cat" style="border-top: 1px solid #333;">LIENS</li>
<li><a href="index.html"class="externe">Link 1</a></li>
<li><a href="index.html"class="externe">Link 2</a></li>
<li><a href="index.html"class="externe">Link 3</a></li>
<li><a href="index.html"class="externe">Link 4</a></li>
<li><a href="index.html"class="externe">Link 5</a></li>
</ul>
</div>
<!-- END Right Side Menu -->
<!-- Footer -->
</div>
</div>
<div class="footer-area" style="margin-top:5px;"><b><a href="" title="" target="_blank">LES PAYS BAS</a></b>
<div id="back-to-top"><a href="#header">Back to Top</a></div></div>
Copyright &#65533; 2010 - Tous droits r&#65533;serv&#65533;s -::- Ingrid van Oosterom et Christian Roigt - 81290 Labrugui&#65533;re
<!-- END Footer -->
</body>
</html>
Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Ceci dit vu la longueur du code, il serait certainement plus simple de nous fournir une page en ligne, j'ai peur que personne ne se penche sur un tel volume de code sans voir la page. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Smiley bawling Hello
je suis désolé je connais pas trop toute cette technique et j'ai gaffé mon probleme ne sera pas résolu tant pis pour moi cela est trop compliquer c'est pour cela que je demande de l'aide mais je suis toujours surpris par les complications des régles.
cordialement.
le vieux se débrouille.
bien à vous.
Merci
Salut,

Il n'y a rien de grave, ce n'est qu'un petit oubli auquel tu peux remédier, le message que j'ai posté t'explique justement comment mettre ton code en forme.
Ce n'est pas une volonté de compliquer, c'est juste que c'est plus lisible pour ceux qui prendront la peine de t'aider. En demandant de l'aide, le minimum c'est d'aider ceux qui peuvent t'apporter la leur ne crois-tu pas ? Smiley cligne

Sinon concernant ton problème, il n'est pas dit que quelqu'un ne t'apportera pas de solution, seulement le code au kilomètre a tendance à en rebuter plus d'un, moi y compris. C'est pour ça qu'une page en ligne est toujours un peu plus parlante.
Modifié par Mikachu (24 Apr 2010 - 01:06)
Quand je vois ton lien d'appel à la feuille de style :
<link rel="stylesheet" href="[#red]css/style.css[/#]" type="text/css" href="[#red]style.css[/#]" media="screen" />

tu as deux liens href, l'un pointant vers un sous répertoire, l'autre non.

Quel est le bon chemin ?

Une fois ce lien vérifié, il te faudra t'assurer que les images soient bien appelée par rapport à l'emplacement de la feuille de style et non de la page html.
hello
Je te remercie Mikachu pour cette observation sur l'aide qui est légitime.
Merci pour mon problème de code effectivement j'ai fait la correction l'affichage est correct dans Webexpert et navigateur interne mais pas mes pages sur le net.
J'utilise filezilla en ftp et internet explorer8.
je vais tenter pour une page en ligne. Mais avant je vais voir l'aide du forum.
Smiley help
hello

Voici ma page css et page html Smiley url http://www.badongo.com/file/22222281[/url] certaines lignes ne sont pas renseignées car le site est en construction.
Des incohérences oui car je suis totalement débutant en CSS.
merci de votre aide
cordialement Smiley cry
re bonjour
mon lien ne marche pas oups! pourtant j'ai bien copier coller le lien.
je ne m'en sors pas. Smiley bawling
tant pis