Salut à tous !
Bon alors je précise dès le départ : je suis super ultra débutante donc je risque de poser des questions qui pourraient vous paraître ridicules, mais... c'est pas grave, j'essaye d'apprendre !!
Alors voilà : pour apprendre un design en xhtml et css, j'ai essayé de reproduire votre tutoriel "Design XHTML/CSS complet avec 2 colonnes de même hauteur" (http://www.alsacreations.com/tuto/lire/564-Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur.html)
Ca m'a permis d'avoir une première approche (j'ai déjà créé un site web, mais avec la technique des tableaux, donc là les positions sont un système tout nouveau pour moi...), et d'apprendre déjà quelques petites choses, mais je suis encore vachement dans le flou.
Bref pour le moment j'ai quelques petits soucis pour terminer le tuto...
D'abord, moi j'ai pas de ligne verte verticale pour la séparation entre mon contenu et mon menu, sauriez-vous où j'ai fait une erreur ?
Voici mon code html :
Ma feuille CSS "main" :
Ma feuille CSS "Menu" :
Mon CSS "ie.css" :
Mon autre problème, c'est le footer... Il n'est toujours pas bien placé (IE ou Firefox, même chose), il est un peu trop haut... J'ai dû faire une erreur quelque part, mais je ne vois pas ! Est-ce que vous sauriez me guider ?
Merci beaucoup pour votre aide précieuse, promis je vais essayer de m'améliorer
A bientôt,
Linoa
Modifié par Linoa (03 Mar 2009 - 22:30)
Bon alors je précise dès le départ : je suis super ultra débutante donc je risque de poser des questions qui pourraient vous paraître ridicules, mais... c'est pas grave, j'essaye d'apprendre !!
Alors voilà : pour apprendre un design en xhtml et css, j'ai essayé de reproduire votre tutoriel "Design XHTML/CSS complet avec 2 colonnes de même hauteur" (http://www.alsacreations.com/tuto/lire/564-Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur.html)
Ca m'a permis d'avoir une première approche (j'ai déjà créé un site web, mais avec la technique des tableaux, donc là les positions sont un système tout nouveau pour moi...), et d'apprendre déjà quelques petites choses, mais je suis encore vachement dans le flou.
Bref pour le moment j'ai quelques petits soucis pour terminer le tuto...
D'abord, moi j'ai pas de ligne verte verticale pour la séparation entre mon contenu et mon menu, sauriez-vous où j'ai fait une erreur ?
Voici mon code 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" xml:lang="fr" lang="fr">
<head>
<title>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/menu.css" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
</head>
<body>
<div id="global">
<div id="header">
<h1>2cols4u</h1>
</div>
<div id="center">
<div id="content">
<h2>Etape 1 : le code XHTML</h2>
<p>Vous trouverez ci-dessous le code de la page HTML que vous êtes en train de lire. Et oui, malgré l'absence de feuille de style, la page est déjà lisible ! Les liens fonctionnent, les titres sont mis en évidence, les listes structurées, etc.</p>
<p>La page est divisée horizontalement en trois parties distinctes :</p>
<ol>
<li>l'en-tête (identifié par "<em>header</em>"), destiné à accueillir la bannière et éventuellement une devise ou slogan.</li>
<li>la partie centrale ("<em>center</em>", bien vu !) contiendra les deux colonnes qui nous intéressent. Elle comprend donc elle-même 2 zones distinctes (les divisions <em>sidebar</em> et <em>content</em>).</li>
<li>le pied de page ("<em>footer</em>") comprend diverses informations que l'on souhaite afficher discrètement sur toutes les pages, en général des mentions de copyright ou les coordonnées & références de la société ...</li>
</ol>
</div>
<div id="sidebar">
<h3>Navigation</h3>
<ul id="menu">
<li><a href="./" title="Introduction">Introduction</a></li>
<li><a href="etape1.html" title="Première étape : le code (X)HTML">Etape 1</a></li>
<li><a href="etape2.html" title="Deuxième étape : le positionnement">Etape 2</a></li>
<li><a href="etape3.html" title="Troisiéme étape : couleurs & images de fond">Etape 3</a></li>
<li><a href="etape4.html" title="Quatrième étape : le menu">Etape 4</a></li>
<li><a href="etape5.html" title="Cinquième étape : titres & liens">Etape 5</a></li>
<li><a href="etape6.html" title="Sixième étape : ajustements pour IE">Etape 6</a></li>
</ul>
<h3>Brèves</h3>
<p>Pourquoi j'aime les standards du W3C ? Pour <a href="http://openweb.eu.org/articles/pourquoi_standards/" title="Openweb : Pourquoi les standards du W3C">ça</a></p>
<h3>Liens</h3>
<ul>
<li><a href="http://www.alsacreations.com" title="AlsacréationS apprendre XHTML, les CSS et les standards W3C de la conception Web">Alsacréations</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Je suis un pied de page. Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.</p>
</div>
</div>
</body>
</html>Ma feuille CSS "main" :
html, body
{
height: 100%;
margin: 0;
}
html {
background: #ddd url(img/fond.png);
}
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: justify ;
font: 90% "Trebuchet MS", sans-serif ;
background: #ffffff ;
}
div#global
{
height: 100%;
width: 750px;
padding: 0 10px;
margin: 0 auto;
position: relative;
padding: 0 10px;
background: url(img/global.png) center repeat-y;
}
div#header
{
background: #7fcf2e url(img/header.jpg) no-repeat;
color: #fff;
height: 201px;
position: relative;
}
div#header h1
{
margin: 0;
position: absolute;
bottom: 10px;
left: 30px;
font: 3em Georgia, serif;
}
div#center
{
padding-bottom: 50px;
overflow: auto;
}
div#footer
{
position: absolute;
width: 100%;
bottom: 0;
background: #7fcf2e url(img/footer.png) repeat-x;
color: #fff;
}
div#footer p
{
margin: 2px 0;
font-size: 0.9em;
}
div#sidebar h3, div#footer p, div#sidebar p
{
padding: 0 10px;
}
div#content
{
float: right;
width: 530px;
margin-left: 10px;
}
div#content h2
{
padding-left: 35px;
background: #fff url(img/titre.png) left center no-repeat;
color: #6c0;
}
div#content h3
{
color: #c00;
font-variant: small-caps;
}
div#sidebar
{
float: left;
width: 200px;
}
a
{
color: #6c0;
font-weight: bold;
}
a:hover
{
color: #c00;
}Ma feuille CSS "Menu" :
ul#menu
{
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li a
{
display: block;
height: 30px;
line-height: 30px;
background: url(img/fond_lien.png) no-repeat left top;
padding-left: 35px;
margin: 2px 0;
border-bottom: 1px solid #7fcf2e;
color: #390;
font: small-caps 1.1em/30px Georgia,serif;
text-decoration: none;
}
ul#menu li a:hover
{
background-position: left bottom;
color: #c30;
}Mon CSS "ie.css" :
/* CSS Document */
#global{
height: 100%;
}
#center {
overflow: visible;
height: 1%;
}
#content, #sidebar {
margin-top: 15px;
}
#global {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/img/global.png", sizingMethod="scale");
}
#global {
position: static;
}
a, pre {
position: relative;
}
body {
position: relative;
}Mon autre problème, c'est le footer... Il n'est toujours pas bien placé (IE ou Firefox, même chose), il est un peu trop haut... J'ai dû faire une erreur quelque part, mais je ne vois pas ! Est-ce que vous sauriez me guider ?
Merci beaucoup pour votre aide précieuse, promis je vais essayer de m'améliorer
A bientôt,
Linoa
Modifié par Linoa (03 Mar 2009 - 22:30)
