28172 sujets

CSS et mise en forme, CSS3

Petit casse tête pour webdesigner

Bonjour à tous.

Pour la boite dans laquelle je travaille, je suis en train de revoir la structure des pages web.
Pour offrir un meilleur confort d'utilisation, nous souhaiterions que le conteneur principal de la page soit "responsive". Par contre, pour des raisons pratiques mais également publicitaires, nous devons maintenir une colonne d'environ 300px sur le coté. Pas question donc de fixer tous les width des conteneurs en pourcentage.

Voila la structure que nous souhaiterions donc avoir :

upload/45886-extenddesi.png

Donc :
- Un conteneur principal prenant le maximum de la taille disponible et un maximum.
- Une colonne aillant une taille fixe (disons 300px pour l'exemple) et une couleur de background.
- Que la taille de le backgound de la colonne ne soit pas interrompu si le conteur principal est plus grand et que le contenu de la colonne ne soit hors champs si celle ci est la plus grande.

Autre contrainte imposé par mon chef :
- Ne pas utiliser le principe de la colonne factice (image simulant la colonne).

Pour le moment, je n'ai pas réussi à réunir tous les éléments. Il me manque le troisième point, ce qui m'obligerait à utiliser un bout de code Js pour palier à celà.
Ma structure en l'état utilise un jeu de padding. Le conteneur principal se voit appliquer un padding latéral de la taille de la colonne. La colonne est placée en absolute sur ce vide créé par le padding. Il pourrait paraître risqué d'utiliser les padding mais cette solution a été validé sur les différents navigateurs jusqu'à IE7 et Firefox 3.6. Mais forcement, la colonne étant hors du flux... ça créer des problèmes. Smiley sweatdrop

J'ai pensé sinon à tester des trucs avec les tableaux... mais c'est quand même pas très "propre".

Dans le pire des cas, j'utiliserais une structure de colonne plus classique et fixerait manuellement toute une série de crans "responsives" dans mon css mais le coté fluide du redimensionnement auto est assez fun (c'est ce qui peut être recherché pour le site sur lequel je travaille).

Si vous avez des idées, je suis preneur ! Merci à vous.
Le site n'héberge pas à proprement à parler du texte...
Le mode idéal est le fullscreen mais nous aimerions du coup proposer en mode standard une situation s'en rapprochant le plus, avec évidement les éléments de navigation et d'information en plus.

J'irais voir ton lien ce soir et je débrieferais. Smiley cligne Merci.
Va falloir réviser les bases...


<!doctype html>
<html>
  <head>
    <title>Pub à la con</title>
    <style>
    body {
      margin: 0;
      padding: 0 310px 0 0;
      background: #f0f;
    }
    
    .pub-a-la-con {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      width: 300px;
      background: #ff0;
    }
    </style>
  </head>
  <body>
    123
    <div class="pub-a-la-con">
      456
    </div>
  </body>
</html>


A encadrer par un conteneur si t'en a vraiment besoin (sinon tu stylise <html>).
Modifié par jb_gfx (18 Aug 2012 - 00:58)
jb_gfx a écrit :
Va falloir réviser les bases...
Smiley ravi
Modifié par desire (18 Aug 2012 - 02:09)
Administrateur
Chaoz a écrit :
J'ai pensé sinon à tester des trucs avec les tableaux... mais c'est quand même pas très &quot;propre&quot;.

Si par "tester des trucs avec les tableaux", tu sous-entends utiliser les éléments HTML table, tr et td et par "pas très propre", tu sous-entends "pas sémantique" alors ouais c'est pas sémantique (mais peut quand même être accessible m'enfin s'il y a mieux faut se précipiter dessus Smiley ravi ).
Si par contre tu voulais dire "utiliser display: table, table-row et table-cell" alors ce n'est ni plus ni moins propre que display: block; ou float: left; puisque ce sont des instructions CSS chargées de réaliser une mise en page. Aucun rapport avec la sémantique.

Cette dernière solution fonctionnerait très bien (avec table-layout: fixed; sur l'élément en display: table;) mais sa compatibilité est IE8+ : pour IE7 il faut utiliser les flottants ou display:inline; + hasLayout (=inline-block sur IE6/7) et tant pis pour les pixels pas alignés niveau graphisme, c'est IE7 ...
Sujet clos
Aller à