28172 sujets

CSS et mise en forme, CSS3

[Probleme] Intégration Xhtml/css d'un design extensible

Bonjour j'ai un souci, je n'arrive pas a integrer un design que j'ai crée.

Voila le design que j'ai fait: http://www.mabart.fr.nf/test/design.jpg
et j'ai ceci: http://www.mabart.fr.nf/test/index.html

Voici mon 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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>TouchAttitude - A Way Of Life</title>
<style type="text/css" media="screen">
 @import 'style.css';
</style>
</head>
<body>

<!--<<<< mainbar block contenu gauche  >>>>-->
<div id="mainbar">
 
 <!--< En-tete Header >-->
 <div id="header">
  <!-- Titre -->
  <h1><a href="index.html">Techno-ard</a></h1>
  
  <!-- Speedbar menu horizontal -->
  <p id="speedbar">
   | <a href="#">accueil</a> |
   <a href="#">Photos</a> |
   <a href="#">Relooking</a> |
   <a href="#">Contact</a> |
  </p>
 </div><!-- end #header ---> 
 
 
 <!--< Content contenu >-->
  <div id="content">
  
   <div class="post">
    <p class="avatar"><img src="img/avatar.jpg" alt="avatar" /></p>
      <blockquote class="postentry">
       <p class="postdate">25/02/09</p>
       <h2><a href="#">Titre de l' Article ...</a></h2>
       <p class="p1">
       In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante.
       </p>
       <p class="readmore"><a href="#">Lire l'article complet >></a></p>
      </blockquote>
   </div>
   
   <div class="post">
    <p class="avatar"><img src="img/avatar.jpg" alt="avatar" /></p>
      <blockquote class="postentry">
       <p class="postdate">25/02/09</p>
       <h2><a href="#">Titre de la News</a></h2>
       <pre>
 In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare,

nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante.

In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor,

sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante.

In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor.

In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante.        
       </pre>
       <p class="p1">
       In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante.
       </p>
       <p class="readmore"><a href="#">Lire l'article complet >></a></p>
      </blockquote>
   </div>   
   
  </div><!--end #content  -->
</div><!-- end #mainbar -->


<!--<<< Sidebar block menu droit  >>>>-->
<div id="sidebar">

 <h2>Articles Récents</h2>
     <ul>
        <li>* <a href="#">accueil</a></li>  
        <li>* <a href="#">forum</a></li> 
        <li>* <a href="#">download</a></li> 
        <li>* <a href="#">favoris</a></li> 
        <li>* <a href="#">à propos</a></li> 
        <li>* <a href="#">contact</a></li>       
     </ul> 
     
 <h2>Photos Récentes</h2>
     <ul>
        <li>* <a href="#">accueil</a></li>  
        <li>* <a href="#">forum</a></li> 
        <li>* <a href="#">download</a></li> 
        <li>* <a href="#">favoris</a></li> 
        <li>* <a href="#">à propos</a></li> 
        <li>* <a href="#">contact</a></li>       
     </ul> 
     
 <h2>Commentaires Récents</h2>
     <ul>
        <li>* <a href="#">accueil</a></li>  
        <li>* <a href="#">forum</a></li> 
        <li>* <a href="#">download</a></li> 
        <li>* <a href="#">favoris</a></li> 
        <li>* <a href="#">à propos</a></li> 
        <li>* <a href="#">contact</a></li>       
     </ul>   
     
     <p id="contact">
      <a href="#"><img src="img/gwp.jpg" alt="contact" /></a>
     </p>       
</div><!-- end #sidebar -->

 <hr class="clear">
 
<!--< Footer >-->
<div id="footer">
  <p id="copyright">
   Copyright: 2009 <a href="#">TouchAttitude.com/</a> Global Web Project Production &copy;<br />
  </p>
  <p id="diz">
   <img src="img/dandc.jpg" alt="design et codage" />
  </p>
</div><!-- End #footer -->
</body>
</html>


et mon code css:


*{padding:0; margin:0;	list-style: none;}
html{background:#2e2c2d url(img/html.jpg)repeat-x 0 100%; }
body {background: url(img/body.jpg) repeat-x;color:#dadada;font: 70% Arial,sans-serif;padding:0 7.5% 0 3%;}

a {color:#999;text-decoration: none;}
a:hover, a:active, a:focus {color: #26b5ff;text-decoration: underline;}
a img {border: 0;}
pre {font-size:1.2em;margin:10px 2.5%;overflow:hidden;line-height:10px}
.clear{visibility:hidden; clear:both}





/* Layout structure
-------------------------------------------------------- */
#mainbar{width:78%; float:left; background: url(img/mainbar.jpg) no-repeat 0 184px #000;}

#header{background:url(img/header.jpg) no-repeat 107px 0;height:183px;}

#content{background:url(img/content.png) repeat-x;padding:40px 2.5% 50px 4%;border-left:1px solid #2f3123;border-right:1px solid #2f3123;}

#sidebar{width:17.5%; float:right; background:url(img/sidebar.jpg) repeat-x #fdfdfd;border-left:1px solid #999;color:#111; font-family:"Lucida Grande", sans-serif;padding:144px 0 15px;}

#footer{height:51px;position:relative;}











/* Contenu
-------------------------------------------------------- */

/****  Header ****/
#header h1{font-size:0;padding-left:105px;}
#header h1 a{display:block;width:300px;height:140px;text-indent:-5000px;}
#header #speedbar{background:url(img/speedbar.png); height:45px;font-size:1.8em;line-height:45px; text-transform:capitalize;color:#949494;padding-left:8%;}
#header #speedbar a{padding:0 1%;color:#ccc;font-size:0.8em;}





/***** Content *****/
#content .post{margin-bottom:60px;}
#content .post .avatar{width:190px;float:right;padding-top:50px;text-align:center;}
#content .post .avatar img{max-width:100%;}
#content .post .postentry{margin-right:200px;}
#content .post .postdate{font-size:1em;margin-bottom:8px;padding-left:15%; text-decoration:underline;color:#999}
#content .post h2{background:url(img/postitle.png) no-repeat 100% 100%; padding-bottom:1px;font-size:1.3em;font-weight:normal;text-align:right;margin:0 15% 15px 0}
#content .post h2 a{color:#075e7f;}
#content .post .p1{padding: 3px 1.5%; font-size:1.1em}
#content .post .readmore{padding:8px 1.5%;text-align:right; t}
#content .post .readmore a{color:#c80000; text-decoration:underline}
#content .post a:hover{color:#FC0}




/***** Sidebar *****/
#sidebar h2{font-size:2.3em;font-weight:normal;text-align:center;padding:5px 0;background:#e4e4e4;}
#sidebar ul{padding:15px 1% 30px 10%;text-transform:capitalize}
#sidebar ul li{padding:2px 0;font-weight:bold}
#sidebar ul li a{color:#111;margin:0 0 0 3px;}
#sidebar ul li a:hover{color:#39C}
#sidebar #contact{padding-top:60px;}
#sidebar #contact img{max-width:100%;}



/***** Footer *****/
#footer #copyright{padding:10px 25% 0 0;text-align:center;color:#999;line-height:16px;}
#footer #diz{position:absolute;right:0;top:0;font-size:0;}
#footer #diz img{max-height:51px;}



Merci d'avance pour l'aide que vous pourrez m'apporter afin que je puisse réussir a finir l'intégration de mon design.
Modifié par funkyfresh (24 Feb 2009 - 20:32)
Ca semble en bonne voie ... et le design à de l'esprit j'aime bien Smiley lol

Par contre, évite d'utiliser des id pour t'es div ... il vaut mieux les garders pour ton dev ensuite, passe par des class ça sera aussi bien ...
Le CSS porte bien son nom => Cascading style sheet !

Style en cascade, donc essaie d'en jouer Smiley smile
Modifié par Thibow (18 Feb 2009 - 09:29)
Thibow a écrit :
Par contre, évite d'utiliser des id pour t'es div ... il vaut mieux les garders pour ton dev ensuite
Smiley eek
Bon sinon funkyfresh,

Pour ce type de design, je verrais bien une mise en page qui occupe toujours toute la hauteur de la fenêtre avec le pied de page collé en bas. Tu commenceras par lire le tuto Design XHTML/CSS complet avec 2 colonnes de même hauteur pour comprendre les mécanismes d'une telle technique.

En gros, tu vas devoir :

1°) Utiliser la méthode des colonnes factices pour simuler une hauteur 100% de la colonne de droite (l'image de fond sur #tout),
div#tout {
background:transparent url(img/fond_site.png) repeat-y;}

2°) Faire en sorte que le conteneur global occupe toute la hauteur de la fenêtre :
html, body {
height:100%;}

div#tout {
position:relative; /*pour placer le footer*/
min-height:100%;}

/**** Pour IE6 via les commentaires conditionnels *****/

div#tout {
height:100%;}

3°) Positionner absolument le footer en bas de la fenêtre + un padding-bottom sur #corps pour éviter que le pied de page et le contenu ne se superposent.
div#footer {
position:absolute;
bottom:0;
left:0; }

#corps {
padding-bottom:...px; /* > hauteur du footer */}

Tu peux commencer par ça. Ensuite on verra pour faire répéter les images de fond de l'entête et du footer sur toute la largeur du site.

Bon courage Smiley smile
Merci beaucoup, j'ai résolu mes quelques soucis maintenant j'aimerais faire répéter le noir de l'entête et regler le souci du menu vertical. Et aussi comment faire pour mon menu horizontal?
quand je lui met un margin left il se décale mais les liens s'espace aussi
Peut tu m'aider.

Merci d'avance

:edit: J'ai mis a jour les données du site
Modifié par funkyfresh (18 Feb 2009 - 11:44)
funkyfresh a écrit :
maintenant j'aimerais faire répéter le noir de l'entête
Peut tu m'aider.
Pas avant que tu ai débuggé ton site Smiley ohwell

- Les éléments partent dans tous les sens, il faut centrer tout ça,
- L'image que tu répètes sur toute la hauteur n'est pas correcte (l'image de fond doit simuler la colonne de droite ET le contenu),
- Les différences d'affichages entre IE & FF sont trop nombreuses,
- La feuille de styles est surchargée, épure-la un maximum en ne gardant que les éléments essentielles à la mise en page.

Au boulot !

EDIT :
Il faudrait également que tu utilises un Reset CSS pour homogénéiser le rendu des styles par défaut entre les navigateurs. Deux articles à étudier :
- La technique du Reset CSS,
- Une feuille de styles de base pour bien démarrer vos projets.

Et je dois dire que ça :
html, body {
height: 100%;
margin:0;
background :#2e2d2d;
background:#2e2d2d url(images/background_repeat.gif) repeat-y 50% 0; }
C'est très moche...

Oh... en fait pas plus moche qu'un menu en float:right / margin-top:-10% / margin-right:17%...

Pourquoi abuses-tu tellement des marges négatives (presque une dizaine pour 150 lignes de code), dont certaines fixées en pourcentage ? Tu n'en as pas besoin...

Un conseil, refais entièrement le tuto que je t'ai donné dans mon premier post, puis recommence ton site de 0 (en faisant comme si l'entête et le pied de page n'étaient pas fluides = gabarit avec une largeur fixe et centré horizontalement).
Modifié par BeliG (18 Feb 2009 - 12:20)
Up, mon souci n'est toujours pas réglé.
Quelqu'un pourrait-il m'aider?
Merci d'avance

je n'arrive vraiment pas a faire l'intégration

:edit: j'ai mis a jour mon ftp j'ai recommencé tout mon codage
Modifié par funkyfresh (23 Feb 2009 - 13:55)
Re,

1°) Je t'ai fait une remarque sur les styles que tu attribues à <body> et <html>. Tu n'en as pas tenu compte le problème est toujours là.

Si tu écris ça :
html, body { 
height: 100%;
margin: 0;
background: #2e2d2d url(images/background_repeat.gif) repeat-y 50% 0; }
La couleur d'arrière-plan et l'image qui se répète vont se faire sur <html> et sur <body>.

2°) La marge de #sidebar est toujours fixée en pourcentage, pourquoi ?

3°) Les articles sur les Reset CSS que je t'ai donné, tu les as lu ?
BeliG a écrit :
Il faudrait également que tu utilises un Reset CSS pour homogénéiser le rendu des styles par défaut entre les navigateurs.

4°) Et enfin :
BeliG a écrit :
Un conseil, refais entièrement le tuto que je t'ai donné dans mon premier post, puis recommence ton site de 0 (en faisant comme si l'entête et le pied de page n'étaient pas fluides = gabarit avec une largeur fixe et centré horizontalement).

Deux options te sont proposées :

- Tu attends que quelqu'un d'autre s'intéresse à ton sujet, reprenne ton code, le corrige et te donne une solution toute faite,
- Tu essayes d'avancer en tenant compte de mes remarques et en posant des questions précises si tu as un problème.

En plus t'es étudiant, me sors pas l'excuse du "j'ai pas le temps". Smiley cligne

"À toi d'jouer !" (Yugioh, maître Intégrateur front-end niveau 64)

EDIT :
27 erreurs XHTML Smiley ohwell
Modifié par BeliG (24 Feb 2009 - 10:35)
Merci de ta réponse, en fait je ne suis pas assez fort, pour la sidebar mon pourcentage sert a la placer sur le menu en blanc (je ne voit pas d'autres manières de le faire).
Mais je ne désire pas du tout faire une largeur fixe l'élégance de mon design se retrouverait chamboulé.
OUi j'ai lu les articles sur le reset css mais je ne comprends pas.

Merci pour tes conseils.
funkyfresh a écrit :
Mais je ne désire pas du tout faire une largeur fixe l'élégance de mon design se retrouverait chamboulé.
J'ai jamais dit que c'était définitif...
J'ai effectué pas mal de changement mais il reste encore des erreurs.
J'ai mis a jour les fichiers.
Modifié par funkyfresh (24 Feb 2009 - 20:33)
Sujet clos
Aller à