Aller au contenu

Sujets conseillés

Posté

Bonjour,

Pour mon nouveau site je viens de créer 3 calques, un sur la longeur du haut, le deuxième sur la gauche et le reste à droite.

Mon probleme c'est que mon logo est inseré sur le calque gauche, et il est plus grand que le calque en largeur donc ie me le place le calque en bas de la page, aucun probleme sous FF.

J'aimerais que la partie qui dépasse de calque gauche soit visible sur les calques de droite.

Merci

<édité par Sébastien, merci de veiller à l'orthographe quand on poste !>

Posté

ci-joint mon code

<html>

<head>
<style text="css">

body{margin:0; padding:0;}
#gauche{background-color:3d6db7;width:20%;height:100%;}
#haut{float:right;background-color:3d6db7;width:80%;height:20%;}
#page{float:right;background-color:yellow;width:80%;height:80%;}


#menu ul li a{height:1,6em;background-color:yellow;border-style:outset;list-style-type:none;display:block;test-decoration:none;}
#menu :hover{margin-left:15%;widht:15%;height:5%;background-image:url(fond2.jpg)}



</style>


</head>

<Body>

<div id="haut">


</div>



<div id="page">




</div>


<div id="gauche">
 <img src="handicap0.jpg" width="226px" height="229px"/>





 <div id="menu">
 <ul>

 <li><a href ="#">Smenu 1 </a></li>
 <li><a href ="#">Smenu 2 </a> </li>
 <li> <a href ="#">Smenu 3 </a></li>
 <li><a href ="#">Smenu 4 </a></li>

 </ul>
 </div>

</div>


       






















</body>




</html>

Posté

salut.

1) dans ton code petit probleme avec <style type="text/css">

2)IE ajoute par default des marges principalement sur les flottants tu dois donc diminuer la largeur de #page d'environ 1%.

3) si tu veux faire apparaitre un element qui deborde la propriete overflow:visible; sur #gauche doit le permettre

Posté
1) dans ton code petit probleme avec <style type="text/css">

c'est a dire ?

2)IE ajoute par default des marges principalement sur les flottants tu dois donc diminuer la largeur de #page d'environ 1%.

salut.

ok,

3) si tu veux faire apparaitre un element qui deborde la propriete overflow:visible; sur #gauche doit le permettre
Posté

j'ai apporté quelques modification j'ai enlevé certains float.

#gauche{float:left;background-color:3d6db7;width:20%;height:100%;}
#haut{background-color:3d6db7;width:100%;height:20%;}

par contre tout a l'ai bien à la bonne place mais j'ai une espace entre le calque gauche et haut et gauche et page pourtant j'ai préciser dans body{margin:0 et padding:0}

http://cjoint.com/?crwQSMCgPV

Posté

Pour réinitialiser toutes les marges/espaces, et éviter les différences entre navigateurs, je conseille ceci (en CSS):

* {
margin: 0;
padding: 0;
}

Ensuite, libre à vous de re-spécifier les marges que vous voulez, logiquement identiques dans tous les navigateurs.

Posté

Bonsoir

c'est ce que j'ai fais sauf que moi j'ai fait un peu différament

body{margin:0; padding:0;}

La méthode de captain_torche est plus efficace ;) (désolé).

Elle permet de réinitialiser les valeurs par défaut de toutes les balises. Alors oui, c'est vrai, l'héritage CSS (la fameuse "cascade") devrait permettre à tous les enfants de <body>, donc tous les éléments visibles, d'en profiter. Seulement, selon le navigateur, selon les règles, et selon les balises, l'héritage peut ne pas se transmettre. Ce n'est donc pas fiable ;)

Exemple d'inhéritage:

Prenons le code HTML suivant. Une balise <div> contenant un paragraphe, qui contient lui-même un élément à mettre en valeur (<em>)

<div id="pied"><p>Copyright 2001-2006. Tous droits réservés <em>mon-site.com</em></p></div>

Ensuite dans ma CSS j'attribue une bordure à la balise <div> ayant l'identifiant "pied"

div#pied {border: 1px dotted #f0f;}

L'héritage CSS devrait accorder la bordure, non seulement à la balise <div> concernée mais également à ses 2 enfants. Il n'en est rien ;) (et heureusement d'ailleurs)

De plus, la méthode à l'astérisque permet d'éviter les bordures blanches sur le pourtour de la page. En effet, la configuration par défaut de beaucoup de navigateurs est d'avoir un margin ou un padding de quelques pixels appliqués à <html>. Ta méthode ne permet pas de les enlever ;)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...