[CSS/HTML] Bordures et feuilles de style...[une dernière question]

Bordures et feuilles de style...[une dernière question] [CSS/HTML] - HTML/CSS - Programmation

Marsh Posté le 06-06-2003 à 14:05:41    

Bonjour ! (excusez ma newbitude, je découvre les feuilles de style :/)
J'essaye de refaire la mise en page de mon site (  http://aulin.free.fr/v2 )
Toute l'interface est contenue dans un tableau, et il faudrait que ça n'affiche que certaines bordures de certaines cases pour que ça fasse un cadre noir a l'intérieur du tableau.
 
Donc pour cela, j'ai défini les types de cases dans une feuille de style ( http://aulin.free.fr/bordures.css ).  
 
Cependant, voyez le résultat : les bordures ne se touchent pas, alors que cellspacing et cellpadding sont à 0... Comment cela se fait-il ?  [:gnub]
 
[edit : d'ailleurs, la grande image de gauche devrait toucher la bordure noire, en théorie... non ?]


Message édité par Gnub le 06-06-2003 à 23:11:39
Reply

Marsh Posté le 06-06-2003 à 14:05:41   

Reply

Marsh Posté le 06-06-2003 à 14:20:17    

Tu n'as pas besoin d'un tableau pour ça.
 
Definis un DIV sur lequel tu appliques :
 

border: 1px solid black;


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-06-2003 à 14:24:48    

et surtout, cellpadding et cellspacing ne sont pas des propriétés CSS.

Reply

Marsh Posté le 06-06-2003 à 14:28:04    

gm_superstar a écrit :

Tu n'as pas besoin d'un tableau pour ça.
 
Definis un DIV sur lequel tu appliques :
 

border: 1px solid black;




 
merci, je vais regarder ça :) mais avec ça, je vais pouvoir mettre des images de part et d'autre du cadre en question ?

Reply

Marsh Posté le 06-06-2003 à 14:35:04    

Ben tu fais un truc dans ce style :
 

<div id="principal">
  <img src="img_accueil_1.jpg" height="480" width="123" alt="Accueil" />
  <div id="accueil">
...
  </div>
</div>


 
Tu fixes la taille du premier DIV et tu le centres comme indiqué dans la FAQ.
 
L'image tu lui donnes la propriété CSS "float: left;"
 
Et le deuxième DIV, tu lui donnes une marge à gauche de la largeur de l'image et tu lui appliques la bordure que j'ai donné en haut.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-06-2003 à 14:37:29    

ok je comprends mieux :) merci beaucoup :)

Reply

Marsh Posté le 06-06-2003 à 15:47:20    

pour positionner l'image de l'email, celle qui est tout a droite, je lui ai mis "float : right" dans la feuille de style, mais elle s'obstine a rester en dessous de la div "accueil", alors que j'aimerai qu'elle se mette a coté  [:gnub]

Reply

Marsh Posté le 06-06-2003 à 15:55:11    

Ca ne marche pas du tout avec Mozilla. Mets des unités à tes longueurs.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-06-2003 à 15:56:27    

ok.  je met px après chaque nombre alors :)

Reply

Marsh Posté le 06-06-2003 à 16:02:31    

Pour ton problème d'image, essaye de mettre le <a> en flottant et non pas l'image et place le dans le code avant le DIV navigation.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-06-2003 à 16:02:31   

Reply

Marsh Posté le 06-06-2003 à 16:11:35    

ça a l'air de marcher :) merci pour tout tes conseils.
 
Par contre, j'ai l'impression qu'il reste une légère marge entre  les images et la div navigation. Est ce qu'il y a un moyen de l'enlever complètement, ou c'est un bug dû au navigateur ?

Reply

Marsh Posté le 06-06-2003 à 16:57:32    

Mmmm bizarre... Avec Mozilla il n'y a pas ce décalage.
 
Bon rajoute ceci au tout début de ton document :
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 
(ça résoud le problème avec IE)
 
Et puis comme ça tu pourras vérifier ta page au validateur : http://validator.w3c.org/
 
 
Un dernier conseil : vire la balise <center>. C'est très moche et complètement dépassé.
 
Ajoute ceci à div.principal :
 

margin-left: auto;
margin-right: auto;


 
et à body :
 

text-align: center;


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-06-2003 à 17:21:46    

voila c'est mis a jour. Pour enlever ces marges (ça ne part toujours pas, je suis sous IE6), je peux peut être essayer de les mettre en positionement absolu ?  :??:

Reply

Marsh Posté le 06-06-2003 à 17:42:23    

Bon, vire "margin-left: 123px" et ajoute "float: left;" à div.navigation. C'est un bug de IE je ne vois pas d'autre explication :/
 
Edit: tu peux virer le "border: none" de l'autre DIV, par défaut un DIV n'a pas de bordure :o


Message édité par gm_superstar le 06-06-2003 à 17:43:00

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-06-2003 à 19:55:37    

yaisse, ça marche impec  :love:  
comme il y avais toujours la marge du coté droit, j'ai mis un float:left au lien pour l'email, et dans le index.htm, je l'ai plaçé après le div "navigation". Comme ça, toutes les marges sont disparue; un grand merçi :)
 
J'épluche la FAQ, j'apprends tout plein de choses  [:gnub]

Reply

Marsh Posté le 06-06-2003 à 22:49:18    

une dernière ptite question... dans la div "navigation", ce serait possible d'afficher une seconde page html, sans passer par les frames et les iframes ?  [:gnub] (si j'ai bien compris, les iframes ne sont pas particulièrement compatible avec les navigateurs autres qu'IE...)
[edit : d'ailleurs je viens d'essayer de mettre un frameset dans la div en question, ça n'a pas l'air de marcher  :sweat: ]


Message édité par Gnub le 06-06-2003 à 22:54:26
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed