28173 sujets

CSS et mise en forme, CSS3

[résolu] Votre stratégie d'application pour cette charte

Besoin de conseils

Je dois passer cette mise en page en html, et bien éviemment avec CSS (sans tableaux).

Mon problème numéro 1 concerne les blocs avec "bordure" arrondie.

J'ai consulter un nombre incroyable de méthode permettant cela de manière plus ou moins propre.

Quelle serait votre méthode, stratégie de développement pour un tel design. J'ai déja développer pas mal de chartes en CSS, mais en général, elles restaient dans un contexte "typé CSS".

Merci d'avance.
Modifié par dew (31 Aug 2010 - 11:04)
Salut,
a écrit :
Je dois passer cette mise en page en html, et bien éviemment avec CSS (sans tableaux).

CSS n'est pas contradictoire avec les tableaux si c'est ce que tu signifiais.
Les tableaux doivent seulement être utilisés à bonne escient : pour des données tabulaires ou d'autres cas plus spécifiques que l'utilisation des div ne permet pas).

Aprés désolé mais ce n'est pas à quelqu'un de ce forum de faire ton boulot.
La méthode c'est à toi de la trouver, il faut le plus souvent possible savoir faire ses propres choix sans dépendre de l'autre, et puis comme on dit on est jamais mieux servi que par soi-même. Smiley cligne
Modifié par Hermann (01 Feb 2006 - 12:11)
Bonjour

==>DVWB2

Pour le global
j'envisagerais 4 images pour les angles avec le motif arrondis au dedans.
Une épaisseur de bordure pour les traits verticaux et horizontaux

Pour le menu un div un ul des li et des images de fonds bords arrondis et un peu de patience.

Pour le conteneur idem que pour le global avec deux div au dedans.

Je pense qu'avec les tutos d'alsacreations tu devrais y arriver sans peine.

@+ Smiley cligne
Modifié par dew (31 Aug 2010 - 11:04)
Supeer, merci des infos... Désolé pour l'image, je la remettrai sous peu. Sinon, je profite de mes premiers tests pour pauser une nouvelle question.

ça fait un moment que j'ai plus trop touché CSS, et voila un problème tout con.

Dans ma page, un bloc de test.

<div class="monBloc"></div>

CSS file:

.monBloc {
height:9px;
width:300px;
}

Et bien vous me croirez si vous voulez, mais sur IE, la hauteur du bloc n'est pas prise en compte !!!

J'ai fais des recherches, et à part mettre les margin et padding à 0, je vois pas trop pourquoi il prendrait pas en compte la hauteur.

Pour info, IE prend en compte le Height uniquement à partir de 30px environ.
Mon pseudo fait des edonkeys, heu des emule pardon ?

Pour la mise en page CSS c'est la même difficulté que la mise en page en tableau : on fait un joli dessin sur photoshop en manipulant ses calques avec son crayon graphique mais dés qu'il s'agit de mettre ça dans le tableau aie aie aie. Souvent on fini par faire des coupes fraîches avec des bidouilles de partout et bien pour les CSS c'est la même chose.

Globalement en ce qui me concerne, j'utilise toujours les mêmes gabarits (ceux d'alsacréation bien sûr), simplement j'improvise avec. Par exemple pour une mise en page vraiment graphique que je n'arrivait pas à insérer, j'ai jonglé avec l'image telle quelle en la mettant en background et en calant les paragraphes dessus tout en faisant en sorte que cela fonctionne dans tous les navigateurs, et c'est réussit !

Il faut savoir ce qui relève du graphisme pure et qui n'apporte rien au contenu (à mettre en CSS notament les appels d'images de background) et ce qui illustre le propos (à mettre en dur dans le code). J'utilise selon la méthode de Zeldman deux répertoires pour cela : i/ pour les images en dur et d/ pour les images relevant du design.

Une bonne maîtrise de ce que veut dire Cascad Style Sheet permet de venir à bout de toute les difficultés car contrairement à la mise en page en tableau, on peu manier au pixel près tous les éléments ce qui nécessite certe un bon apprentisage du CSS mais permet une liberté que l'on a absolument pas en tableau.

Sans compter la satisfaction du travail bien fait !

Pour les cadres arrondis une méthode est simple : celle d'alscréation bien sûr (ou celle d'un livre étonnant que tu peux trouver à cette adresse : http://www.amazon.fr/exec/obidos/ASIN/2212115709/alsacreations-21/171-4540955-0661020
)

Merci de remettre le lien sur ton image au moins une semaine le temps que le topic soit clos, c'est désagréable de ne pas savoir de quoi l'on parle...
Modifié par Samuel Berg (02 Feb 2006 - 09:47)
Alors voila l'état d'avancement.

(en haut, aperçu sous IE, et en bas FF)

http://img132.imageshack.us/img132/8366/test5sp.gif

Le css :

#globalBlock {
  top:50px;
  left:100px;
  width: 804px;
  position:relative;
}
#globalBlock .topLeft { 
  float:left;
  width:9px;
  height:9px;
  background-image: url("../images/g_top_left.gif"); 
  background-repeat:no-repeat;
  overflow:hidden;
}
#globalBlock .topCenter { 
  float:left;
  width:786px;
  height:2px ;
  background-image: url("../images/g_border_x.gif"); 
  background-repeat:repeat-x;
  overflow:hidden;  
}
#globalBlock .topRight { 
  float:right;
  width:9px;
  height:9px;
  top: 0px; 
  right: 0px; 
  background-image: url("../images/g_top_right.gif"); 
  background-repeat:no-repeat;  
  overflow:hidden;
}
#globalBlock .content {
  float:left;
  width:804 !important;
  border:0px;
  background-image: url("../images/g_border_center.gif"); 
  background-repeat:repeat-y;    
}
#globalBlock .bottomLeft { 
  float:left;
  width:9px;
  height:9px;
  bottom:0px; 
  left:0px;
  background-image: url("../images/g_bottom_left.gif"); 
  background-repeat:no-repeat;  
  overflow:hidden;  
}
#globalBlock .bottomCenter {
  float:left;
  height:9px;
  width:786px;
  background-image: url("../images/g_border_x.gif");
  background-repeat:repeat-x;
  background-position:bottom;
  overflow:hidden;
}
#globalBlock .bottomRight { 
  float:right;
  width:9px;
  height:9px; 
  background-image: url("../images/g_bottom_right.gif"); 
  background-repeat:no-repeat;  
  overflow:hidden;
}


Le doc html:

  <body>
    <div id="globalBlock">
      <div class="topLeft"></div>
      <div class="topCenter"></div>
      <div class="topRight"></div>
      <div class="content">
        
<p>Lorem ipsum dolor sit amet consectetuer neque pharetra arcu wisi ut. Adipiscing at Nunc sagittis sed tempus vitae hac non sollicitudin ut. Sem ante tincidunt nibh Quisque velit turpis molestie facilisi fringilla Sed. Dolor elit lacus Lorem wisi id quis Nunc justo diam enim. Nunc a Ut pellentesque pretium metus Nam Morbi Praesent Quisque congue. Hendrerit dictum odio In Curabitur quis a ligula at.</p>
<p>Sapien urna et tortor orci pharetra tincidunt Phasellus justo sagittis elit. Nulla lobortis id mollis at adipiscing lacinia nulla pretium senectus Vestibulum. Egestas vitae mauris elit at nisl nunc velit pede Lorem netus. Malesuada ipsum et Pellentesque vitae Pellentesque consequat et ligula massa penatibus. Nam Phasellus Sed Quisque mauris justo interdum Sed tempor Quisque vitae. Vitae pretium sem.</p>
<p>Nibh vitae augue et elit mauris quis lobortis Aenean quis et. Scelerisque platea Nam Vestibulum libero gravida tristique Morbi vestibulum eget pretium. Tincidunt et justo In ipsum nulla Fusce pretium nibh amet consectetuer. Praesent Vestibulum consectetuer In Quisque orci dolor et vitae ut dolor. Nec ligula ut augue quam id a arcu Pellentesque.</p>
<p>In sapien leo sit interdum quam Sed accumsan id lorem tellus. Quis elit vitae vel consectetuer augue id a Nullam id dui. Pellentesque ut risus adipiscing dolor auctor urna rhoncus turpis in risus. Felis amet Quisque et risus aliquam interdum dolor libero turpis quis. Tempus id ac pede libero sit elit quis Nam ac elit. Nunc tempor tincidunt.</p>

          
      </div>
      <div class="bottomLeft"></div>
      <div class="bottomCenter"></div>
      <div class="bottomRight"></div>                              
    </div>
  </body>


Je ne comprends pas, le bas de la diV bottomCenter est masqué sous IE...
Modifié par dew (31 Aug 2010 - 11:04)
Mouais peu de réacton aux divers post qui t'ont été adressé, ça donne pas trop envi de te répondre.
Hermann, si tu pourrais m'éclairer, j'ai dû mal à identifier les post auxquels je n'ai pas répondu...

Et c'est clair qu'avec des posts comme le tiens, on a encore moins envie de réponde.
Bonjour,

Le post de Samuel Berg qui est très détaillé, peut-être ...

As-tu résolu ton problème d'affichage dans IE (la hauteur qui n'est pas prise en compte) ?
Modifié par EricLB (02 Feb 2006 - 13:59)
Bonjour,

Hélas non. Je ne comprends pas. IE me bouffe la bas de ma DIV. Il me semble que mon code est hyper simple...
Modifié par dew (31 Aug 2010 - 11:04)
Magnifique, le font-size a tout reglé. Merci pour les articles également.

Allucinant que ce soit cette propriété qui change tout. Je vais pouvoire enfin commencer à bosser sur cette charte...
a écrit :
Hermann, si tu pourrais m'éclairer, j'ai dû mal à identifier les post auxquels je n'ai pas répondu...
Et c'est clair qu'avec des posts comme le tiens, on a encore moins envie de réponde.


Pfff Samuel Berg et le miens! Enfin on va pas en faire un drame...
T'as oublié de mettre la mention Résolu.
Stop !!!

Résolu ? encore une tite question, mais là, ça devient philosophique...

Si jamais, ça tient mieux sur IE que sur FF (bref, tout va bien Smiley biggol ). Pour finir, je mettrais des tableaux dans tous les sens.

Besoin de conseils de PRO pour ce qui est de la gestion des 2 conteneurs principaux. Un des soucis est la colonne de droite devant être tout le temps identique à celle de gauche.

Bref, critiquez moi ce code au max, et si il y a des conseils, c'est encore mieux.

Merci d'avance les gens.
Modifié par dew (31 Aug 2010 - 11:04)
Ok, j'ai besoin de vos critiques en ce qui concerne le mise en place des colonnes internes.

Et également de conseils afin de régler le cadre général (qui est ok sur IE mais pas sur FF).
Modifié par dew (31 Aug 2010 - 11:04)
Salut à tous !

bon j'arrive un peu après la bataille mais quand je vois du code dans le genre de ce qui suit je peux pas m'empécher de réagir Smiley smile Cf le code de ta page de test Samuel :


<div id="globalBloc">
      <div class="topLeft"></div>
      <div class="topCenter"></div>
      <div class="topRight"></div>
      <div class="content">
        <div id="pGenBloc">
          <div class="pTopLeft"></div>
          <div class="pTopRight"></div>
            <div class="pGenContent">              
              <div id="content">
                <div id="colLeft">
                  <div id="menu2Head"></div> .......


Je crois que tu as gagné le concours de balises ouvertes pour rien ... tout le monde semble oublier que le montage par CSS est fait pour justement éviter d'avoir du code HTML inutile.

Même s'il est vrai que pour monter des cadres arrondis ca peut être une vraie galère si ces cadres doivent s'étendre sur toute la largeur d'un écran, il n'en est rien quand on travail en largeur fixe, et encore moins lorsqu'on travail en largeur et hauteur fixe.

Donc si c'est le cas pour ton site, ce qui en a l'air, tu peux plutot utiliser une simple image de fond dans UN simple div, plutot que 2 images pour faire les coins et placée dans 3 div, dans le genre de :


<div class="bottomLeft"></div>
<div class="bottomCenter"></div>
<div class="bottomRight"></div>


Tu gagnera en poids et en respect de sémantique Smiley cligne Donc selon moi il y a trés largement moyen d'économiser du code sur ton montage !

Bon courage !
Sujet clos
Aller à