Micro.Info • Consulter le sujet - CSS : Colonne qui s'adapte toutes seules

Consulter les messages sans réponse | Consulter les sujets actifs

Index du forum » Informatique » Programmation

Le fuseau horaire est UTC-5 heures [Heure d’été]

CSS : Colonne qui s'adapte toutes seules

Modérateur: Membres de 640kb

Page 1 sur 1

[ 9 message(s) ]

Sujet précédent | Sujet suivant

Auteur

Message

Monrake

Sujet du message: CSS : Colonne qui s'adapte toutes seules

Publié: 28 Mars 2006, 12:26

Référence

Inscription : 06 Jan 2002, 22:38
Message(s) : 5949
Localisation : Quebec

Voilà, j'ai un problème en CSS qui me gosse pas mal. Vous pouvez voir le site tel qu'il est en ce moment (à regarder sous FF, l'adaptation à IE est pas encore faite): http://www.aqairsestduquebec.com/Dev/index1.php

Mon problème est que les barres bleu à gauche et à droite ne suivent pas la haute du centre. Même chose pour mon div qui gere le menu et la section partenaire. Je voudrais que le tout s'adapte à la hauteur du div centrale pour suivre le tout. J'ai fait pas mal de test mais rien de concluant. Étrange, sous Opera, le menu et la section partenaire suivent bien le Div centrale.

Voici le code de la page :

Code :

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>AQAIRS</title>
<link rel="stylesheet" href="Images/Look/style.css" />
</head>
<body>

<div id="container">
   <div id="gauche"></div>
  <div id="droite"></div>
  
  <div id="top">
    <div id="logo"> </div>
     <div id="admin"> 
       <form name="frmLogrin" action="/Admin/valideraccess.php" method="post">
       <div class="clearfix">
           <label><b>Administration du Site</b></label>
      </div>
      <div class="clearfix">
           <input type="text" name="login" size='15'>
          <input type="text" name="pass" size='15'>
          <a href="#" onclick="envoit;" class="bouton"><img src="Images/Look/okoff.jpg" alt=""></a>
      </div>
      <div class="clearfix">
           <label1>utilisateur</label>
          <label2>mot de passe</label>
      </div>
      </form>
    </div>
    <div id="tophead"> </div>
    </div>
  <div id="header"> </div>
  <div id="bashead"> </div>
  <div id="menu">
     <a href="accueil.php"><div id="acceuil">ACCUEIL</div></a>
    <a href="membre.php"><div id="membres">MEMBRES</div></a>
    <a href="calendrier.php"><div id="calendrier">CALENDRIER</div></a>
    <a href="photos.php"><div id="photos">PHOTOS</div></a>
    <a href=""><div id="forum">FORUM</div></a>
    <a href="commanditaires.php"><div id="commanditaires">COMMANDITAIRES</div></a>
    <a href="liens.php"><div id="liens">LIENS</div></a>
    <a href="coordonnées.php"><div id="coordonnees">COORDONNÉES</div></a>
    <div id="vide"></div>
  </div>
  <div id="separation"></div>
  <div id="contenu"> Text de la section centrale ici.</div>
  <div id="partenaire"> </div>
  <div id="footer"> </div>
</div>

</body>
</html>

Et voici le CSS :

Code :

BODY
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    FONT-FAMILY: Arial;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    PADDING-TOP: 0px;
    BACKGROUND-COLOR: CCCCCC;
    TEXT-ALIGN: center;
}

DIV#container
{
      DISPLAY: block;   
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px auto;
    WIDTH: 801px;
    BACKGROUND-COLOR: white;
}

DIV#gauche
{
    float: left;
    DISPLAY: block;
    BACKGROUND-IMAGE: url(../Look/fond_01.gif);
    WIDTH: 44px;
      min-HEIGHT: 597px;
    BACKGROUND-COLOR: white;
}

DIV#droite
{
    float: right;
    DISPLAY: block;
    BACKGROUND-IMAGE: url(../Look/fond_02.gif);
    WIDTH: 54px;
      min-HEIGHT: 597px;
    BACKGROUND-COLOR: white;
}

DIV#top
{
      DISPLAY: block;
    HEIGHT: 71px;  
    WIDTH: 751px; 
    BACKGROUND-COLOR: white;
}

DIV#logo
{
    DISPLAY: block;
    float : left;
    BACKGROUND-IMAGE: url(../Look/logo.gif);
    BACKGROUND-REPEAT: no-repeat;
    WIDTH: 277px;
    HEIGHT: 88px;
    BACKGROUND-COLOR: white;
}

DIV#admin
{
    DISPLAY: block;
    float : right;
    TEXT-ALIGN: left;
    WIDTH: 426px;
    HEIGHT: 65px;
    MARGIN-TOP: 10px;
    COLOR: #07325F;
    BACKGROUND-COLOR: white;
}

DIV#admin form label 
{
   width: 120px;
  color: 990000;
}

DIV#admin form label1 
{
   width: 120px;
  color: 07325F;
}

DIV#admin form label2 
{
   width: 120px;
  color: 07325F;
  padding: 0px 62px;
}

DIV#admin div.clearfix 
{
   DISPLAY: block;
  float:left;
  border-top : 1px;
  solid: #CCC;
  padding : 2px 0px 0px 100px;
}

DIV#admin div.clearfix a.bouton
{

  text-decoration: none;
  PADDING-top:: 5px;
  MARGIN : 0px;
}

DIV#tophead
{
    DISPLAY: block;
    float: right;
    TEXT-ALIGN: right;
    BACKGROUND-IMAGE: url(../Look/tophead.gif);
    BACKGROUND-REPEAT: no-repeat;
    WIDTH: 426px;
    HEIGHT: 13px;
    MARGIN-RIGHT: 0px;
    PADDING-RIGHT: 0px;
    BACKGROUND-COLOR: white;
}

DIV#header
{
    DISPLAY: block;
    BACKGROUND-IMAGE: url(../Look/header.jpg);
    WIDTH: 703px;
    HEIGHT: 106px;
    float : left;
    BACKGROUND-COLOR: white;
    
}

DIV#bashead
{
    DISPLAY: block;
    float: left;
    BACKGROUND-IMAGE: url(../Look/bashead.gif);
    BACKGROUND-REPEAT: no-repeat;
    WIDTH: 703px;
    HEIGHT: 9px;
    BACKGROUND-COLOR: white;
}

DIV#menu
{
    DISPLAY: block;
    float: left;
    WIDTH: 145px;
    HEIGHT: 395px;
    MARGIN-LEFT: -1px;
    MARGIN-TOP: -1px;
    COLOR: white;
    Text-Align : left;
    

}

DIV#vide
{
    DISPLAY: block;
    float: left;
    WIDTH: 129px;
    HEIGHT: 32px;
    BACKGROUND-IMAGE: url(../Look/off.gif);
    BACKGROUND-REPEAT: no-repeat;
    MARGIN-TOP: -1px;
    PADDING-LEFT: 16px;
    PADDING-TOP: 13px;
}

DIV#menu A
{
      DISPLAY: block;
    float: left;
    WIDTH: 129px;
    HEIGHT: 32px;
      color: white;
    TEXT-DECORATION: none;
    BACKGROUND-IMAGE: url(../Look/off.gif);
    BACKGROUND-REPEAT: no-repeat;
    PADDING-LEFT: 16px;
    PADDING-TOP: 13px;
    MARGIN-TOP: -1px;
}

DIV#menu A:visited
{
    TEXT-DECORATION: none;
    color: white;
    
}

DIV#menu A:link
{
    TEXT-DECORATION: none;
    color: white;
    
}

DIV#menu A:active
{
    TEXT-DECORATION: none;
    color: white;
}

DIV#menu A:hover 
{
    DISPLAY: block;
    float: left;
    WIDTH: 129px;
    HEIGHT: 32px;
      color: white;
    TEXT-DECORATION: none;
    BACKGROUND-IMAGE: url(../Look/over.gif);
    BACKGROUND-REPEAT: no-repeat;
    PADDING-LEFT: 16px;
    PADDING-TOP: 13px;
    MARGIN-TOP: -1px;
}

DIV#separation
{
      DISPLAY: block;
    float: left;
    WIDTH: 28px;
    MIN-HEIGHT: 394px;
    MAX-HEIGHT: 100%;
    BACKGROUND-COLOR: white;
}

DIV#contenu
{
    DISPLAY: block;
    float: left;
    WIDTH: 397px;
    MIN-HEIGHT: 394px;
    MAX-HEIGHT: 100%;
      color: black;
    BACKGROUND-IMAGE: url(../Look/contenu.jpg);
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: white;
}

DIV#partenaire
{
    DISPLAY: block;
    float: left;
    WIDTH: 134px;
    MIN-HEIGHT: 394px;
    MAX-HEIGHT: 100%;
      color: white;
    BACKGROUND-IMAGE: url(../Look/partenaire.jpg);
    BACKGROUND-REPEAT: no-repeat;
    MARGIN-TOP: -9px

}

DIV#footer
{
    DISPLAY: block;
    float: left;
    WIDTH: 801px;
    HEIGHT: 100px;
     BACKGROUND-color: blue;
    MARGIN-TOP: -5px;

}

Si vous avez la solution ou un bon site qui me permettrait de la trouver, sa m'éviterait de casser quelques choses

Edit : j'ai modifié l'adresse pour voir le site : http://www.aqairsestduquebec.com/dev/index1.php

_________________
Herakles Informatique Inc
Collaborateur pour HardGamers

Haut

Nicolas Ross

Sujet du message:

Publié: 28 Mars 2006, 13:19

Administrateur

Inscription : 10 Déc 2001, 17:54
Message(s) : 1947
Localisation : Saint-Émile

Je n'ai pas de solution vite comme ça, mais juste une expérience personnel qui viens entre autre du site de Micro.Info. En remontant la dernière version du site, je voulais éviter d'utiliser des tables, et utiliser unniquement des divs et du css.

Ma conclusion a été que c'est chiant à faire pour ce que ça apporte. Oui, je suis d'accord que c'est cool, c'est l'fun, c'est hot. Mais pour du positionnement, c'est tout le temps pas évident d'aligner correctement sous toutes les plateformes...

Donc, tout les sites sur les quelles je travaille sont fait de manière classique avec des tables, mais avec une utilisation juditieuse des css...

_________________
Nicolas Ross
Administrateur du site Micro.Info,
Ingénieur, CyberCat

Dans la plupart des pays la vente de choses nocives, comme des drogues, est interdite.
Alors pourquoi les gens peuvent vendre les logiciels de Microsoft et rester impunis ?

Haut

Monrake

Sujet du message:

Publié: 28 Mars 2006, 16:22

Référence

Inscription : 06 Jan 2002, 22:38
Message(s) : 5949
Localisation : Quebec

Ouais, je sais mais je pensais pouvoir le faire uniquement en CSS mais je pense ben que je vais faire un mélange des deux si sa continue. Mais si jamais quelqu'un à une solution, se serait apprécié

_________________
Herakles Informatique Inc
Collaborateur pour HardGamers

Haut

DolGuldur

Sujet du message:

Publié: 29 Mars 2006, 16:04

Régulier

Inscription : 14 Mars 2002, 13:44
Message(s) : 436

Un bon exemple en CSS ici:
http://www.pixy.cz/blogg/clanky/css-3col-layout/

Haut

pounk

Sujet du message:

Publié: 01 Avr 2006, 17:59

Petit nouveau

Inscription : 01 Avr 2006, 17:40
Message(s) : 5
Localisation : Victoriaville

hein ? quoi ? chiant à faire ? apporte rien ? lol

bon, premièrement on sauve énormément de temps pour par exemple mettre à jour le site internet (on n'a qu'à changer le .css pour changer entièrement le design du site), pour ce qui est d'être chiant, c'est subjectif, une fois que l'on connais le css, c'est beaucoup plus simple selon moi de faire un site en css qu'avec des tableaux.. tk, je ne vois pas en quoi c'est plus simple avec des tableaux..

apart de ça, le site devient accessible pour les personnes non voyante, plus facilement utilisable pour les navigateurs comme links (oui, c'est très utilile quand on a des problèmes avec X.org par exemple) et le code est tellement plus lisible et facile à modifier..

pour ton problème, je t'aiderais bien s'il n'y aurait pas de The page cannot be found...

tk, pour t'aider:
http://alsacreations.com
http://pompage.net
http://pompage.net/pompe/cssdezero-1 (bon article pour débuter)

et pourquoi ne pas utiliser les tableaux: http://openweb.eu.org/articles/problemes_tableaux/

Haut

Monrake

Sujet du message:

Publié: 02 Avr 2006, 02:45

Référence

Inscription : 06 Jan 2002, 22:38
Message(s) : 5949
Localisation : Quebec

Mon problème était surtout que je devais imbriqué presque 6 colonnes entre elle qui devait toutes s'adapter les unes par rapports aux autres. En réalité, le problème du CSS présentement, c'est qu'aucun navigateur ne le gere pareil.

_________________
Herakles Informatique Inc
Collaborateur pour HardGamers

Haut

Jump

Sujet du message:

Publié: 02 Avr 2006, 11:32

Référence

Inscription : 07 Jan 2002, 00:24
Message(s) : 5834

Je suis totallement d'accord. Le jour ou les navigateurs vont implanter le css 1 comme du monde ça va être mieux. Mais là ils font tous à leur tête et implante ce qui leur plait comme ça leur plait. C'est peut-être les standards qui ne sont pas assez biens définis.

Chose certaine, dire que changer uniquement le css permet de modifier complètement l'apparence du site comme on le veut c'est une lubie. Pour arriver à implanter un design fonctionnel sur les principaux navigateur il faut souvent imbriquer les divs d'une manière spécifique et ça risque fortement de devoir être refait en même temps que le css si on change trop la disposition des éléments sur le site. Même si modifier que le css permettait de faire n'importe quoi, bien ça ne se fait pas en 10 secondes.

Ceci étant dit, j'essais d'utiliser le css autant que possible en autant que ça ne demande pas d'utiliser des hacks et tout pleins d'artifices pour avoir un rendu comparable sur les différents browsers.

Haut

Monrake

Sujet du message:

Publié: 02 Avr 2006, 13:38

Référence

Inscription : 06 Jan 2002, 22:38
Message(s) : 5949
Localisation : Quebec

Ce que je trouve le plus fous avec les normes du CSS, c'est que IE7 ne les suporteront pas tous, il y a certaines fonctions qui ont décidé de ne pas supporter donc ce ne peut pas aider à faire en sorte qu'ils puissent être correctement exploité.

_________________
Herakles Informatique Inc
Collaborateur pour HardGamers

Haut

pounk

Sujet du message:

Publié: 02 Avr 2006, 18:09

Petit nouveau

Inscription : 01 Avr 2006, 17:40
Message(s) : 5
Localisation : Victoriaville

selon moi, ce n'est qu'une question d'habitude, une fois que l'on sait aproximativement ce qui passe et ne passe pas sur ie, on peut faire des sites en utilisant le css qui seront identique sur tout les navigateurs sans vraiment utiliser de hacks et se casser la tête..tk, moi je trouves plus facile maintenir un code avec des div et du css.

Haut

Page 1 sur 1

[ 9 message(s) ]

Index du forum » Informatique » Programmation

Le fuseau horaire est UTC-5 heures [Heure d’été]

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité

Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum