28172 sujets

CSS et mise en forme, CSS3

Css intégration

Bonjour,
je voudrais créer un style.css, j'ai crée les images via photoshop mais au niveau de l'intégration j'y comprends pas grand chose.
Voici à quoi ressemble le template : http://hpics.li/6ba4790
header, 900*220 http://hpics.li/6fbc6a3
footer, 700*39 http://hpics.li/c350b71
menu, 700*50 http://hpics.li/cc5b93a
body, 700*622 http://www.hostingpics.net/viewer.php?id=570100body.png
arrière plan 900*1024 http://hpics.li/b2f8986
ont été créer dans un dossier images.

CODE XHTML :

<!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>Rankiryu</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" href="images/style.css" type="text/css" />
<style type="text/css">
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
}

div#conteneur
{
width: 900px ;
margin: 0 auto ;
text-align: left ;
}
h1#header
{
height: 220px ;
}

pre
{
overflow: auto ;
}


<!--[if IE]>
<style type="text/css">
html pre
{
width: 636px ;
}
</style>
<![endif]-->
</head>

<body>
<div id="conteneur">
<h1 id="header"><a href="accueil.html" title="Rankiryu - Accueil"><span>Rankiryu</span></a></h1>

<ul id="menu">
<li><a href="accueil.html">Accueil</a></li>
<li><a href=forum.html">Forum</a></li>
<li><a href="animes.html">Animes</a></li>
<li><a href="streaming.html">Streaming</a></li>
<li><a href="musiques.html">Musiques</a></li>
</ul>

<div id="contenu">
<h2>Bienvenue sur</h2>
<p>ect....</p>
</div>

<p id="footer">Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko</p>
</div>
</body>
</html>

------------------------------------------------------------------------------------
CODE CSS :


*
{
margin: 0;
padding: 0;
}

body
{
background: none;
color: #000000;
font-family: arial, helvetica, sans-serif;
font-size: 100.1%;
padding: 0px;
/*text-align: center;*/
}


#arrièreplan {
width:900px;
height:1024px;
background: url(arrièreplan.png) no-repeat center;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

#header {
background: url(header.png) no-repeat center;
margin-left:200px;
padding-top:130px;
height:220px;
width:900px;
}

#topmenu {
background: url(menu.png) no-repeat center;
margin:0px;
height:50px;
}

div#topmenu div.moduletable_topmenu table tbody tr td {
padding-top:10px;
padding-left:25px;
}

div#topmenu div.moduletable_topmenu table tbody tr td a.mainlevel{
padding-left:10px;
}

#bodymiddle {
background: url(body.png) no-repeat top;
width:622px;
padding-left:20px;
padding-right:20px;
padding-top:15px;
float:left;
margin-top:10px;
margin-left:10px;
}

#modleft {
width:200px;
clear:both;
float:left;
padding-left:30px;
padding-top:10px;
margin-top:50px;
}

#modright {
width:200px;
float:right;
padding-right:30px;
padding-top:10px;
margin-top:50px;
}

#modfooter {
width:100%;
float:left;
clear:both;

j'ai essayé de copier le css d"un exemple et de le modifier à ma sauce.
je voudrais savoir ce que vous en penser ( même si c'est de la m**** ) mais bon
grâce à vos coms je m'améliorais.
Modifié par rankiryu (17 Oct 2011 - 20:01)
Hello,

Il va falloir que les fonds puissent occuper toute la largeur disponible dans la fenêtre du navigateur, même si cette dernière fait 1600px de large. Donc pour ça:
- Je donnerais la couleur de fond #6999BD à l'élément BODY, et une image de fond de environ 150px de haut (et 10, 20 ou 50 de large) répétée en largeur pour afficher le dégradé en bas de page.
- Il te faudra ensuite un conteneur pour ton en-tête qui prend toute la largeur disponible dans la fenêtre du navigateur, avec sans doute des bordures en #363739 en haut et en bas. Donc un #header de 600px de large, ça me semble pas bon.

Pour le code que tu montres:
- on n'a pas le code HTML correspondant;
- on ne sait pas au juste à quoi correspond chaque image;
- et même si on avait ces éléments, on n'a pas un moteur de rendu de navigateur dans le cerveau donc ça serait mieux d'avoir une page en ligne...

Pas grand chose à dire, donc. Juste que je déconseille les caractères accentués (ou tout caractères hors jeu de caractères ASCII) pour les noms de classes, d'identifiants et pour les noms de fichiers, et qu'aucune de tes images ne se répète en hauteur ou largeur donc il doit y avoir un oubli ou un souci de découpe ou d'optimisation. Ah oui, et les 4 utilisations de la propriété float ont l'air fausses (inutiles ou peu appropriées).
Salut,
serait il possible de supprimer tous ce qui est hors sujet sur mon css parce que là, je n'y pas pas clair dans tous ca.
rankiryu a écrit :
serait il possible de supprimer tous ce qui est hors sujet sur mon css

Heu... supprimer quoi («ce qui est hors sujet sur mon CSS», je comprends pas ce critère) et où (ton code, ton message, mon message...)? Smiley sweatdrop
Bon bha avec le code ( css / html) si dessus bah ça marche pas.
il y des parties du css que je ne comprends pas comme ceci :
#modleft {
width:200px;
clear:both;
float:left;
padding-left:30px;
padding-top:10px;
margin-top:50px;
}

#modright {
width:200px;
float:right;
padding-right:30px;
padding-top:10px;
margin-top:50px;
}

#modfooter {
width:100%;
float:left;

après je ne sais pas quoi faire
Modifié par rankiryu (17 Oct 2011 - 20:04)
À part apprendre les bases de HTML (syntaxe, principaux éléments, sémantique...) et CSS (mise en forme du texte, modèle de boite, positionnement...) je ne vois pas trop ce qu'on peut te conseiller.
Sujet clos
Aller à