[Site Web] Problème codage design

Des Trous Blanc

Sujet résolu

17 septembre 2006 à 15:38:13

Bonjour à tous.

Voilà je viens de finir un nouveau design qui serait extensible en largeur et en hauteur.
Photo du design sous Photoshop
http://fiches-bac.goldzoneweb.info/design/

Seulement comme vous pouvez le constater il y a des trous blancs et je ne sais comment les enlevez

.

Je mets le code correspondant à ce petit bout de code :

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fiches-Bac.tk -- Création </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="css.css" />
</head>

<body>
<table border="0" height="100%" width="100%">
<tr>
<td class="haut_gauche" height="51" width="40">
</td>

<td class="haut_fond">
</td>

<td class="haut_droit" height="51" width="36">
</td>
</tr>

css.css

BODY
{
margin-left: 15%;
margin-right: 15%;
}

.haut_gauche
{
background-image: url("images/l_03.gif");
height: 51px;
width: 40px;
background-repeat:no-repeat;
margin-left: 5px;
}

.haut_droit
{
background-image: url("images/l_05.gif");
height: 51px;
width: 36px;
background-repeat:no-repeat;
}

.haut_fond
{
background-image: url("images/k_05.gif");
}

J'espère que vous pourrez m'aidez.

Merci D'avance pour votre futur aide :-°

.

Creatik

Asphator

17 septembre 2006 à 16:08:30

Hum, je ne sais pas trop

essai de rajouter un :
- margin:0px; à hauteur fond
- margin-right:0px; à hauteur_gauche
- margin-left:0px; à hauteur_droit

Only limits are ours...

Creatik

17 septembre 2006 à 16:16:14

Nan ça ne marche toujours pas personne n'a une autre idée

Gastasse

17 septembre 2006 à 17:05:34

Salut

Moi j'ais quasiment le même problème pour mon site ! donc si quelqu'un aurait une solution ca pourrait dépanner deux personne

Merci

Creatik

17 septembre 2006 à 17:49:25

Tippex_66

17 septembre 2006 à 22:11:55

Bonjour, moi aussi j'ai un petit peu le même genre de problème, donc autant éviter de créer un nouveau post. Voila ce que ca donne :
screenshot
Pour info, j'ai utilisé des div auquels j'ai supprimé toutes les marges possibles et imaginables. Sous internet Explorer, j'ai ce même décalage avec en plus une répétition du fond entre la bannière et la barre de liens. Voila si vous pouviez nous aider ... :euh:

gawen

17 septembre 2006 à 22:15:24

Ton screenshot ne marche pas :-°

muse_stream

18 septembre 2006 à 12:45:49

Bonjour !

Etant dans la même situation fort angoissante, je me joins aux pauvres petits "zéros" perdus !

Il me semble avoir supprimé toutes les marges possibles et imaginables... en vain !
J'ai tenté les positionnements absolu et relatif : pas mieux, ou encore le z-index pour tenter de "poser" le block important sur celui de dessous et... rien ! Sniff, je suis sur le point de craquer !

Ce qui est curieux c'est qu'à l'horizontale, coller les blocks l'un à l'autre ne pose pas de problème. Est-ce lié à la propriété float left ?

Rassurez-moi, ça va bien finir par marcher ?!

Bref, au bord de la crise de nerfs, je remets mon sors entre vos mains !
En voici donc l'illustration la plus basique :

- la capture : Image utilisateur

- la page : http://users.skynet.be/denebokab/zero.html

- le code css :

#menu
{
width:160px;
height:1200px;
background-color:yellow;
float:left;
border:none;
margin:0px;
margin-right:0px;
margin-left:0px;
}

#corps
{
background-color:green;
height:1200px;
border:none;
margin:0px 0px 0px 0px;

}

J'ai aussi essayé un truc dans le genre :

#header
{
width:780px;
height:120px;
background-color:white;
border:none;
margin:auto;
margin:0px;
}

#menu
{
width:160px;
height:1200px;
background-color:yellow;
float:left;
border:none;
z-index:10;
margin:0px;
margin-right:0px;
margin-left:0px;
}

#corps
{
background-color:green;
height:1200px;
overflow:visible;
visibility:visible;
border:none;
position:absolute;
top:120px;
left:160px;
margin:0px 0px 0px 0px;
z-index:20;
clear:both;
}

Mais là, je perds carrément le "corps"...

Bref, un tout grand merci d'avance ! ;-)

Ahhhh ! Là, je peux le dire : "j'ai bon" !

J'ai trouvé la solution à mon problème... essayer voir si ça marche avec le votre... Dans mon cas, ce n'était que 2 blocks l'un à la suite de l'autre, le premier incluant la propriété float valeur left.
En laissant le 2ème block faire comme bon lui semblait avec les dimensions que je lui imposais, je ne parvenais pas à les accoler. Là après pas mal de recherches et finalement du chippotage "en solo" devant l'écran de mon ordi, voilà la solution de ce cas de figure sous IE :

Simplement ajouter un float:right; à ce que je désigne comme le corps de ma page ! Corps dont j'attendais qu'il s'accole naturellement à mon menu float:left;.
Un peu dégoûté que ça m'ait pris 3h... Enfin, je veux croire que cette màj permettra d'obtenir au final un meilleur résultats qu'avec les frames que j'avais jusque là l'habitude d'utiliser.

Enfin, je vais tout de suite modérer mon enthousiasme : voilà UNE solution.
Merci à vous et si par hasard, quelqu'un a quelque chose à rajouter à cette façon de faire ou si quelqu'un sait m'expliquer pour les lignes de code css ci-dessus ne fonctionnaient pas comme attendues, je l'en remercie d'avance...

Monde de Merde : indignez-vous !

Creatik

18 septembre 2006 à 17:55:34

??.
{
border-collapse: collapse;
}

applique ce code à la table en question via un class="??" dans le HTML!

Voilà sujet résolu, je ne remercie personne vu que j'ai trouver tout seul

!!

Creatik