28172 sujets

CSS et mise en forme, CSS3

Questions sur le css

Bonjour à tous je fait du css depuis 1 ans mais sans vraiment travailler.
Donc j'ai des problèmes ou "questions" que je voudrais résoudre
J'ai une page :


<title></title>
<!--Déclaration de la feuille css -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../JeuxVideo/internetexplorer.css" />
<!--else >
<link rel="stylesheet" type="text/css" href="../JeuxVideo/mozillafirefox.css" />
<![endif]!-->
</head>
<body>
<!-- page-->
<form id="form1" runat="server">
<!-- bannière de la page -->
<div class="banniere" runat="server">
</div>
<!-- zone menu -->
<div class="zonemenu" runat="server">
</div>
<!-- zone publicité gauche -->
<div class="publicitegauche" runat="server">
</div>
<!-- zone publicité droite -->
<div class="publicitedroite" runat="server">
</div>
<!-- zone centre -->
<div class="zonecentre" runat="server">
</div>
<!-- zone pied de page -->
<div class="pieddepage" runat="server">
</div>
<!-- ZoneAmovible ; zone centre propre à chaque page dérivée de la page maître-->
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>


Et la feuille css qui va avec (je parle de celle de mozilla firefox) :

body
{
width : 1024px;
height : auto;
margin :auto;
}

/*Bannière de la page*/
.banniere
{
height : 100px;
width : 1024px;
background-image:url(images/bannierejeuxvideo.jpg);
background-repeat : no-repeat;
}
/*Zone Menu*/
.zonemenu
{
background-color : #cae4ff;
height : 50px;
width : 1024px;
}
/*Zone publicité gauche*/
.publicitegauche

{
position :relative;
top : 5px;
height : 900px;
width : 150px;
background-image:url(images/zonepub.jpg);
background-repeat : no-repeat;
}
/*Zone publicité droite*/
.publicitedroite

{
position :relative;
top : -895px;
left : 874px;
height : 900px;
width : 150px;
background-image:url(images/zonepub.jpg);
background-repeat : no-repeat;
}
/*Zone Centre*/
.zonecentre
{
position :relative;
top : -1795px;
left : 152px;
height :900px;
width : 720px;
background-image:url(images/zonecentre.jpg);
background-repeat : no-repeat;
}
/*Pied de page*/
.pieddepage
{
position :relative;
top : -2040px;
height : 30px;
width : 1024px;
background-image:url(images/pieddepage.jpg);
background-repeat : no-repeat;
}


Mes divs sont bien placé mais j'ai des choses que je n'arrive pas à faire :
Je voudrais que la zone centre s'adapte en fonction de ce quelle contient et que la zone pied de page suive en conséquent.
Le problème c'est que si je met la zone centre avec : height : auto ; la zone publicité droite se décale.
J'ai un autre problème qui est que j'ai une grande zone blanche sous la page maître.
De ce faite lorsque je met un contrôle ou un div dans le contentplaceholder d'une page enfant le contrôle se retrouve tous en bas de la page et plus dans la zone centre...
Comment faire?
D'avances merci pour vos réponses.
Je suis désolé si j'en demande beaucoup.
Modifié par Florent V. (12 Aug 2009 - 13:48)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
a écrit :
Merci pour ta réponse Laurie-Anne je ferais attention.


Bonne initiative, mais là, le message de Laurie-Anne avait pour but de te faire éditer ton message afin d'insérer les balises [ code] et [ /code] (sans espace) pour améliorer le rendu visuel de ton code.

a écrit :
Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Modifié par jQz (10 Aug 2009 - 23:44)
Bonjour,

1. Je ne vois pas de Doctype dans ton code. Soit tu l'as omis pour simplifier le code cité dans ce sujet, soit tu n'en as pas. Dans le deuxième cas c'est une erreur de débutant classique, à corriger de toute urgence.

2. Qu'est-ce que c'est que ce commentaire conditionnel avec un [ else ] dedans? Depuis quand est-ce censé marcher ce système? Je serais curieux de lire une source à ce sujet. Comme les navigateurs autres que IE ne lisent pas le contenu des commentaires conditionnels (qui sont des commentaires valides HTML, donc normalement ignorés), un navigateur comme Mozilla ne verra donc pas l'appel à ta feuille de styles.

3. Faire deux feuilles de styles séparées et complètes pour deux navigateurs différents, c'est une erreur. L'approche Qui Va Bien consiste à faire une feuille de styles pour TOUS les navigateurs, et ensuite éventuellement à rajouter une feuille appelée via un commentaire conditionnel pour IE 6 et/ou 7, et ne contenant QUE les quelques correctifs nécessaires.

4. Des blocs large de 1024px, c'est une erreur de débutant. Je te laisse deviner pourquoi ça ne marche pas (par exemple en testant le site en 1024x768). À corriger.

5. Tu as positionné l'essentiel de tes blocs en relatif, avec des valeurs comme top: -900px par exemple. C'est une erreur, là encore de débutant (décidément, ce code est un cas d'école). Je te laisse lire le Guide de survie du positionnement CSS et les articles qui y sont indiqués comme référence. Pour ne pas faire durer le suspense, cependant: il va falloir complètement réécrire le CSS pour le positionnement de tes principaux éléments. Bon courage. Smiley cligne
Sujet clos
Aller à