28220 sujets

CSS et mise en forme, CSS3

[résolu] L'espace est plus fort que moi !!

Bonjour Smiley biggrin ,
J'ai un p'tit soucis du même ordre (espace entre les blocs !!)
J'voudrais faire un menu à gauche, un titre en haut et les sous-menus en dessous.... et malheureusement, je débute dc je galère...!!

Voici mon design.css : 
<style type="text/css">

body {
font-size : 12px; 
}

* {
margin : 0;
padding: 0;
}

#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-image: url(http://127.0.0.1/chupi5/image/fond.gif);
border-width:medium; 
border-color:#6699CC; 
border-style:double;
}

#menu {
margin: 0px;
padding: 0px;
width: 150px;
height: 600px;
background-image: url(http://www.geocities.com/etude_3c/image/test/menu1.jpg);
float: left;
}

#header {
background-image: url(http://www.geocities.com/etude_3c/image/test/header.jpg);
height: 100px;
margin-left: 150px;
padding: 0px;
}

#sousmenu {
background-image: url(http://www.geocities.com/etude_3c/image/test/sousmenu1.jpg);
height: 50px;
margin-left: 150px;
padding: 0px;
}


#centre {
}

</style>


voici ma page htlm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>
e3c
</title>

<link rel="stylesheet" type="text/css" href="http://www.geocities.com/etude_3c/design/design.css">

<body>

<div id="conteneur">

<div id="menu">
</div>


<div id="header">
</div>

<div id="sousmenu">
</div>

<div id="centre">
</div>

</div>

</body>
</html>


et voici le résultat :
http://www.geocities.com/etude_3c

J'ai un espace entre le menu et les 2 autres blocs que je n'arrive pas à supprimer !!
Merci par avance pour votre aide.... J'pourrais pê faire autre chose de mon we. Smiley murf
Modifié par yahnou (17 Jun 2005 - 17:47)
Excusez moi de ce p'tit raté de débutant sur le forum... J'vais essayer de faire attention à l'avenir....
J'ai bien regarder sur le forum avant d'écrire....

Mais si je met une bordure à la boite "menu", on la verra... Car la couleur de fond de mon bloc "menu" n'est pas uni... C'est une image photoshop qui me servira de menu ensuite (en flash).
Me fais-je pê pas très bien comprendre ?
Les débuts sont difficile en tout cas !!
Et merci qd même....
Tu es tout excusé... mais pas encore complètement Smiley smile

Merci de tenir compte de mes demandes, stp !
dominique a écrit :
Bonjour et bienvenue yahnou Smiley smile

Visiblement tu n'as pas lu les Règles du forum.

- Ce sujet est déjà résolu, et de toute façon, pour chaque question, il faut ouvrir un nouveau sujet. Ton message sera supprimer très vite.

- Tu dois utiliser la balise "Code" pour afficher du code et ainsi contribuer à rendre le forum plus facile à lire à tous.

Merci d'avance de faire le nécessaire Smiley cligne

Modifié par dominique (17 Jun 2005 - 15:43)
J'vais mettre mes progs entre balise Code....
Sinon j'ai pas l'impression que mon problème soit vraiment résolu mais j'avoue avoir un peu de mal à tout comprendre... J'vous assure, j'ai fouillé ds les anciens sujets et je n'ai pas trouvé la p'tite astuce qu'il me faut....

Excusez pour le dérangement Smiley decu

Message edité par jb_gfx
Modifié par jb_gfx (17 Jun 2005 - 16:46)
Tu peux reprendre ton 1er post en l'éditant, pour le mettre dans les balises "codes" au lieu de refaire un post ...
sinon : essaye un "hack" iE déjà cité ailleurs :
dans ta css tu as :

#header {
background-image: url(http://www.geocities.com/etude_3c/image/test/header.jpg);
height: 100px;
margin-left: 150px;
padding: 0px;
}

Ajoute "_margin-left: 150px;" ainsi :

#header {
background-image: url(http://www.geocities.com/etude_3c/image/test/header.jpg);
height: 100px;
margin-left: 150px; [b]_margin-left: 150px;[/b]/*ne sera pris en compte que par iE*/
padding: 0px;
}

et ajuste le nombre de pixels pour que ça colle.
Décidemment, j'enchaine les bourdes !! Smiley confused
Je ne suis pas très familier des forums... Je sais, c'est pas une excuse !!
J'ai déjà tenté de rajouter _margin-left: 150 px mais ça ne change rien ! Smiley decu
Mes images de fond sont parfaitement à la taille de mes blocs pourtant....
Et ce qui est bizarre, c'est qu'entre le bloc "header" et le bloc "sousmenu', il n'y pas d'espace... alors qu'avec le bloc menu, il y a un espace.... Ca vient certainement du "float" !! J'ai lu un autre sujet sur ce problème mais il n'y avait pas de réponse !!
Désolé et merci !!
Ton problème de décallage n'intervient que sous Internet Explorer, un espace de 3 pixels est automatiquement créé sur le bloc suivant un flottant. C'est un bug de ce navigateur. Sur FireFox, Safari, Opera le problème n'apparait pas.

Pas besoin de hack pour corriger ça. A ta place je reverrais plutôt le découpage de ta page. Tu devrais mieux avoir un entete (header) occupant toute la largeur en haut. Puis en DESSOUS placer ton menu lateral et à sa gauche ton contenu.

Pour tes deux colones (menu et contenu) je te conseille d'utiliser la technique des faux colones en l'adaptant à ton graphisme.

Cette technique est bien expliquée ici :

blocs de meme hauteur
Modifié par jb_gfx (17 Jun 2005 - 16:29)
Je n'arrive plus à suivre !!!! Tu as fait 2 post ????
Bon...
Si tu mets "_margin-left: .px", il te faut bien sûr essayer avec autre chose que 150px, puisque cette mesure ne convient pas ... essaye 148, par exemple...
Edit > Jb-gfx > Le problème, c'est qu'il veut adapter sa découpe de page à ses images de fond (elles-même découpées). Ta solution, meilleure effectivement, implique qu'il découpe ses images dans l'autre sens (horizontalement au lieu de verticalement). Ce qui est faisable, je pense avec un bon log d'image (Gimp est très bien...).
Modifié par Macpom (17 Jun 2005 - 16:34)
Merci pour vos réponses..... J'vais modifier la structure de mon site....
Sinon pour répondre à macpom, j'ai réédité mon 1er post avec les balises Code, le 2ème post, je ne sais pas comment le supprimer....
Merci bcp !! Dernière erreur pour moi, je l'espère !!
Ne t'inquiète pas je vais m'occuper de supprimer ton deuxime sujet.

N'oubli pas de ne pas laisser tes messages à l'abandon. Si tu arrive à solutionner ton problème reviens nous en faire part et edite le titre de ton sujet pour y rajouter un [résolu].

Macpom a écrit :
Je n'arrive plus à suivre !!!! Tu as fait 2 post ????
Bon...
Si tu mets "_margin-left: .px", il te faut bien sûr essayer avec autre chose que 150px, puisque cette mesure ne convient pas ... essaye 148, par exemple...
Edit > Jb-gfx > Le problème, c'est qu'il veut adapter sa découpe de page à ses images de fond (elles-même découpées). Ta solution, meilleure effectivement, implique qu'il découpe ses images dans l'autre sens (horizontalement au lieu de verticalement). Ce qui est faisable, je pense avec un bon log d'image (Gimp est très bien...).


Si j'ai bonne mémoire, le problème avec ce bug sous IE c''est que même en reduisant la marge l'espace apparaitra toujours. Cette marge fait 3 pixels (donc il faudrait logiquement ajouter "_margin-left: 147px") mais il n'y a aucun moyen (à ma connaissance) pour la supprimer. Avec ton hack le block ferait 3 pixels de moins en largeur mais serait toujours décallé. Je sais ça parait incroyable mais avec IE rien d'impossible. Smiley smile
Modifié par jb_gfx (17 Jun 2005 - 16:45)
Et bien merci....
J'ai modifié la structure de mes blocs et le découpage de mes fonds d'écran et ça marche !!
Il y a toujours un p'tit décalage mais qui provient uniquement de la précision de mon découpage sur photoshop.
J'vais pouvoir passer un bon we !! Smiley lol

http://www.geocities.com/etude_3c
jb_gfx > Effectivement, ça oblige à jouer avec les couleurs de bordures, que tu mets identiques au fond, que tu "glisses" sous la boîte qui jouxte, et tu remets éventuellement un padding pour replacer d'un pixel ou deux ton image dans un positionnement précis... = bricolage qui se reproduit à chaque situation comparable...
Sujet clos
Aller à