Discussion :

[Arn°oO]

Bonjour,

Je ne suis pas développeur CSS mais je tente de m'y former depuis quelques jours...
Cependant j'ai un problème pour afficher des bandes de couleurs.
Ci joint, le site de référence:

http://www.infodim.eu/ofis/htdocs/maps.php

Les deux bandes en haut en noir et jaune s'arrêtent dès que le texte s'arrête. Mon souhait est qu'elles continuent tout du long de l'écran.

Dans mon CSS, j'ai deux éléments pour paramétrer les deux bandes.
Comment faut-il modifier les choses?

Mon CSS:

#title
{
background-color: #FFD400;
position: absolute;
top: 9px;
left: 163px;
right: 4px;
height: 29px;
padding-left: 18px;
padding-top: 5px;
color: #FFFFFF;
font-size: 1.7em;
font-weight: bold;

text-align:center;
font-size: 1.7em;
font-weight: bolder;
vertical-align:middle;
color:#FFD400;

background-repeat: no-repeat;
background-position: right;
}

#subtitle {
text-align:center;
font-size: 1.2em;
font-weight: bolder;
vertical-align:middle;
top: 44px;
height: 23px;

background-color: #000000;
position: absolute;
top: 44px;
left: 163px;
right: 4px;
height: 23px;
padding-left: 18px;
padding-top: 5px;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;

}

Je modifie également un fichier .tpl pour paraméter la mise en page.

Merci pour toute information.

Arno

[Invité]

Essaie de modifier la taille derrière ta ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

left :

Normalement, avec ça, tu devrais pouvoir ramener les deux barres sur la gauche.

[Arn°oO]

Ok pour la gauche, ca me pose pas de problème.
Ce que je souhaite c'est que les deux barres continuent sur la droite jusqu'à la fenêtre...

Merci encore.
Arno

[pop_up]

Est ce que le plus simple pour toi ne serai pas de mettre en image de fond sur ta cellule concernée de ton tableau "topbanner" ce double filet ?

Sinon, je pense que tu devrais sérieusement revoir la structure de ta page. De grosses différences entre IE6, FF3 et safari4 (j'ai que ça sur mon poste)

Tu utilises des tableaux partout alors que beaucoup (voir même tous si on s'y connait) peuvent être supprimés.

Je te laisse juge de la situation

[Arn°oO]

N'étant pas développeur Web /CSS, je suis très ouvert. Je ne maîtrise pas assez le sujet pour avoir un avis très critique mais sur ce que j'ai compris...

Est ce que le plus simple pour toi ne serai pas de mettre en image de fond sur ta cellule concernée de ton tableau "topbanner" ce double filet ?

Je vois en théorie ce que tu veux dire mais quelques directions me seront nécessaires pour le .css


Pour info, je voudrais avoir à peu près ce qui est présent ici
http://plan.epfl.ch/
comme bandeaux en haut...

Merci
Arno

[GihefBey]

Bonjour,

Pour que "que les deux barres continuent sur la droite jusqu'à la fenêtre", supprime les marges par défaut de la page.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
html, body {
  margin : 0;
  padding : 0;
  }

Et, éventuellement, celles que tu aurais appliquées au tableau.

Le lien n'accepte pas l'attribut alt. Il devrait être dans un <td>.
La structure des tableaux est erronée.

-

[pop_up]

Pour reprendre ta structure tel quel, ton problème est que ton titre et ton soutitre sont dans des <td> différent que tu t'embete a positionner en absolue l'un au dessus de l'autre.

A ta place, et pour garder une structure cohérente, je referai la mise en fore de ton entête. Je te fais une ébauche en simplifiant un peu le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table id="topbanner" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td id="logo">
          <img src="maps.php_fichiers/ofis.jpg" alt="Ãñáöåßï ôçò ÂñåôïíéêÞò Ãëþóóáò" border="0">
      </td>
      <td>
            <div id="title" nowrap="nowrap">Äõíáìéêïß ×Üñôåò ôùí ìáèçìáôþí âñåôïíéêþí óôç Ãáëëßá </div>
            <div id="subtitle" nowrap="nowrap">Äõíáìéêïß ×Üñôåò ôùí ìáèçìáôþí âñåôïíéêþí óôç Ãáëëßá </div>
      </td>
       <td width="1%" align="right">
          <table>
              .....
          </table>
  </td>
</tr>
</table>

Avec une structure comme celle-ci, tu devrais y arriver en refaisant tes style pour title et subtitle. Oubli les position absolue.

Ainsi ta structure est plus cohérente car tu as une cellule à gauche avec ton logo dedans, une autre au milieu avec ton titre et ton sous titre qui sont dans des div (ainsi ça ne fait pas une structure bancale à ton tableau en mettant 2 <td> l'un en dessous de l'autre) puis une dernière cellule avec les liens de traduction je crois.

[Arn°oO]

J'ai des cellpading et des margin-left et margin-right

Mais j'ai pas tout compris dans ce que tu me dis
Arno

[pop_up]

Pour simplifier, actuellement tu as ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<td id="title" nowrap="nowrap">Δυναμικοί Χάρτες των μαθηματών βρετονικών στη Γαλλία </td>
<td id="subtitle" nowrap="nowrap">Δυναμικοί Χάρτες των μαθηματών βρετονικών στη Γαλλία </td>

Je te conseille de tout mettre dans un seul <td></td> comme je te l'ai mis dans le code de mon autre post et de refaire tes classes title et subtitle