Aller au contenu

Pb de DIV qui dépasse et qui ne garde pas la couleur...

Pidji

Par Pidji
dans (X)HTML et CSS

 Partager

Sujets conseillés

Pidji

Pidji

Posté
Posté

Bonjour à tous

Je préfère commencer par dire que je suis assez novice dans les DIV, et du coup ça me pose de gros problèmes pour faire la nouvelle version de mon webzine.

En fait, j'ai un DIV principal, dans lequel il y a plusieurs DIV : le header en haut qui prends toute la largeur, puis 3 DIV (un central et 2 sur les côtés). Relativement simple donc.

Le souci, c'est que je voudrais que ces DIV prennent toute la hauteur de l'écran (qu'ils soient bien compris dans le DIV principal donc), et ça ne veut pas... Enfin, sur iE ça marche, mais pas sur firefox.

L'idéal c'est que vous y jettiez un oeil :

http://www.coreandco.fr/temp/accueil.php

J'ai mis un cadre en jaune, c'est normal, c'est juste pour que ce soit flagrant, sinon ce ne sera pas de cette couleur hein !

Bref, maintenant, passons au code :

le DIV du site :

#site {

position:relative;
margin:auto;
background-color:#020c16;
	width:1003px;
	height:100%;
border-color:#000000;
/* border-style:dotted; */
text-align: left;
font-color: #ffffff;
}

Maintenant, les DIV des 3 cadres (je ne mets pas celui du header, j'imagine que ça ne vous servira à rien) :

#home #cadreg {
	background-color:yellow;
height:100%;
position:relative;
float: left;
	padding-top: 10px;
	width:180px;	  border-color:transparent;
	padding-left:0px;
	padding-right:0px;  
}  
#home #cadrecentral {
	background-color:transparent;  background-position:center center;
background-repeat:repeat-y;
	position:relative;
width:643px;
padding-top:0px;
	padding-left:0px;
	padding-right:0px;
height:100%;
	float: left;  z-index:1;
}  
#home #cadredroite {
	background-color:transparent;
	position:relative;
top:0px;
right:0px;
padding-top:0px;
	width:180px;
height:100%;
	padding-left:0px;
	padding-right:0px;
float: right;  //z-index:2;
}

Merci d'avance pour votre aide... Et aussi à la limite pour optimiser ça, car encore une fois, je suis vraiment novice dans les DIV.

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté

Salut

Règle d'or pour le codage (X)HTML/CSS:

Toujours vérifier le code HTML avant le code CSS. C'est la base.

En effet, quand il y a un problème d'affichage, il est très fréquent que le navigateur essaie d'appliquer une CSS correcte à un code HTML buggé.

Là, c'est le cas.

Ne le prends pas mal (je dis ça pour t'aider) mais ton code HTML est franchement atroce :sick:

Si ce code vient d'un logiciel WYSIWYG, jete très vite ce logiciel à la poubelle. Si tu codes à la main, fais attention a ce que tu écris !

On passe en revue les différentes erreurs ? ;)

1. 

<html>
<HEAD>
</font><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML><HEAD><TITLE>Nous contacter | COREandCO Webzine</TITLE>

  • le Doctype n'est pas à sa place. Il doit toujours se trouver à la première ligne sans rien devant lui.
  • en XHTML, les balises sont en minuscules obligatoirement. Donc <HEAD> non. <head> oui.
  • la balise </font> en début de 3e ligne: D'une part cette balise n'existe plus dans les normes strictes. D'autre part, la balise <head> n'autorise que très peu de balises-enfants et même dans les normes transitionnelles, ça ne comprend pas la balise <font>. Enfin, une balise fermante n'existe que s'il y a une balise ouvrante: ce n'est pas le cas.
  • Il y a deux balises <html> et deux balises <head>; ce n'est pas autorisé.

2. 

<link rel='STYLESHEET' type='text/css' href='http://www.coreandco.fr/temp/cetc.css'></head>
<META http-equiv=Content-Type content='text/html; charset=iso-8859-1'>




<link rel='shortcut icon' type='image/x-icon' href='http://www.coreandco.fr/temp/candc.ico'>
<link rel='icon' type='image/gif' href='http://www.coreandco.fr/temp/candc.gif'>
<link rel=alternate type='application/rss+xml' title='Les news de COREandCO' href='http://www.coreandco.fr/xmlnews.php' />
<link rel=alternate type='application/rss+xml' title='Les chroniques de COREandCO' href='http://www.coreandco.fr/xmlchros.php' />


<body>

  • Toujours ce problème de balises en majuscule.
  • les balises <meta/> et <link/> doivent être placées entre <head> et </head>.
  • Les balises uniques doivent comporter un slash final.
  • (il faut que je vérifie, mais je crois que les majuscules pour une valeur de rel ne sont pas autorisées non plus en normes strictes.)

3. 

<div id=site>

  • Il faut des guillemets pour encadrer la valeur d'un attribut, c'est obligatoire
  • Il n'y a aucune balise </div> pour fermer ce <div>, vérifie la bonne imbrication de tes balises. D'ailleurs, tu utilises globalement beaucoup trop de divs. Il faut utiliser les bonnes balises au bons endroits, et pas du div partout pour tout et n'importe où.

4. 

<div id=cadreg>
<center>
<div class=cgauche>
<h2>rechercher</H2>
<h3>
<table class=texte>
<form action='recherche.php3' method=get>
<TR><TD>
<input type=text name='recherche' size=15 maxlength=50 value='Nom groupe' class='formulaire'> <input type=submit value=ok class=formulaire>
</TD></TR>
</form>
</table>
</H3>
<h4></H4>
</div>

  • Toujours ce problème de guillemets manquants pour les valeurs d'attributs...
  • Toujours ce problème de majuscules pour les balises, avec une petite nuance: tu les ouvres en minuscules et tu les fermes en majuscules. Même le navigateur le plus docile va s'y perdre, c'est sûr.
  • <center> n'existe plus dans les normes strictes. D'ailleurs il ne sert à rien puisque si tu veux centrer ta colonne de gauche, tu le fais en CSS très simplement.
  • Les balises <form>, <table>, <tr> et <td> sont mal imbriquées
  • Il y a un h4 vide qui se balade. Non seulement il n'a rien à faire là, mais les balises vides ne sont pas autorisées.

5. Section "reports de concerts": aucun lien n'est fermé, il y a les balises <a> mais pas les </a>

6. 

<a href='accueil.php'>retour à l'accueil</font></a></center>




</td></tr></table></center>

(Les sauts de lignes sont parfaitements inutiles, mais ce n'est pas très grave.)

  • La balise </font> (qui n'existe toujours plus) ne ferme aucune balise <font>
  • Les balises </td>, </tr>, </table> et </center>: même chose. Tu peux virer toute la ligne.
  • La balise <center>.. euh, tu le sais déjà.

7. 

<div id=pied><font class=texte><font color=#a43404>© 2007 COREandCO - Tous droits réservés</font><BR>< Coding : Pidji / Graph : Bin > </font></div>

  • Pour la balise <font>, je pense que tu as compris.
  • Quand tu veux un < ou un >, il faut les "échapper" avec des entités HTML. Sinon, le navigateur tente d'interpréter une balises <coding> qui n'existe pas (c'est d'ailleurs original de faire une erreur à cet endroit là, désolé je n'ai pas pu m'empêcher de te le faire remarquer :) )

En bref:

Il faut que tu partes sur des bases saines. Là, grosso modo, tu as le choix entre:

- passer 2 semaines à retoucher toutes tes erreurs d'imbrications, virer les balises moyenâgeuses, enlever les majuscules, mettre les guillemets, supprimer les tableaux de présentation, remplacer les divs inutiles par de vraies balises porteuses de sémantique.

- partir d'une base toute faite, tu n'as qu'à mettre le contenu et c'est tout. Je te renvoie au message de karnabal, mais pars de zéro avec le modèle choisi.

Ce qui est sûr c'est qu'avec un code HTML pareil, tu peux faire ce que tu veux avec ta feuille de style, ça ne s'affichera jamais bien: j'en mets mes deux mains à couper.

Encore une fois désolé de te mettre le nez sur tes erreurs, ne le prends pas mal c'est vraiment pour t'aider.

Et.. bon courage ;)

PS: merci de ne pas faire de "up" dans les topics, surtout en si peu de temps. J'ai supprimé un de tes messages qui ne servait qu'à remonter le sujet.

Lien vers le commentaire
Partager sur d’autres sites
Pidji

Pidji

Posté
  • Auteur
Posté (modifié)

Et bin ! Heheh

Merci à toi, je ne prends pas mal ces erreurs, j'ai tout appris par moi-même jusqu'à maintenant et je code avec notepad. ça va me faire avancer !

Par contre, j'ai des questions (qui paraitront peut-être "bêtes" pour toi)

- Tu dis que les balises "font" n'existent plus, tu les remplacent par quoi alors ? car je m'en sers pour déclarer la "classe" de l'écriture ?

- une chose toute conne aussi... Ok pour mettre des guillements pour les ID des DIV, mais vu que je démarre par un echo ", il ne veut pas des guillements ensuite... Je sais, encore une fois c'est sûrement bête pour toi mais je n'ai pas de démarche professionnelle !

- Ensuite, tu dis que j'utilise bcp trop de DIV : en fait, j'ai les DIV pour la structure de moi site : 1 pour le site dans lequel il y en a 1 pour le header, 3 pour les cadres du milieu, et 1 dernier pour le pied; et à cela je rajoute des divs pour mes "blocs" types (les cadres blancs). Ce n'est pas bon ? Comment ferais-tu ?

- Je viens de corriger le contenu du <head></head>, je pense qu'il est bon maintenant

- Tu dis : "Quand tu veux un < ou un >, il faut les "échapper" avec des entités HTML."... Encore désolé, mais comment fait-on ça ?

- Enfin (pour le moment lol) dans le 5. tu dis : "Section "reports de concerts": aucun lien n'est fermé, il y a les balises <a> mais pas les </a>" Je n'ai pas vu où... ?

Merci encore et merci d'avance pour les réponses à ces questions ;)

à+

Pidji

Modifié par Pidji
Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

La "classe" des textes, en XHTML, ne peut se faire qu'en CSS.

D'ailleurs, pourquoi avoir choisi un doctype XHTML ? Que t'apporte t'il de plus qu'un doctype HTML ?

Pour ce qui est du PHP, il suffit d'échapper les guillemets avec des antislashes (\) pour que ça ne pose plus de problème :

<?php
echo "<div id=\"test\">
?>

Lien vers le commentaire
Partager sur d’autres sites
Pidji

Pidji

Posté
  • Auteur
Posté (modifié)
La "classe" des textes, en XHTML, ne peut se faire qu'en CSS.

D'ailleurs, pourquoi avoir choisi un doctype XHTML ? Que t'apporte t'il de plus qu'un doctype HTML ?

J'avoue que... Je ne sais pas. Pourrais-tu me donner le doctype standard HTML ?

D'ailleurs... - je me sens vraiment bête aujourd'hui erf - à quoi servent réellement ces déclarations de doctype ?

(Et merci pour les guillemets)

Modifié par Pidji
Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

Un doctype explique à ton navigateur comment il doit se comporter face au document à afficher. S'il est bien renseigné, il permet de gommer les principales différences de rendu existant entre Internet Explorer et les autres navigateurs, par exemple.

Tu trouveras des explications plus complètes, ainsi qu'une liste de doctypes ici : http://www.pompage.net/pompe/doctype/

Pour ma part, je te conseillerai d'utiliser un doctype HTML transitional.

Lien vers le commentaire
Partager sur d’autres sites
Pidji

Pidji

Posté
  • Auteur
Posté

Ok je vais essayer ça, encore merci.

Je viens de mettre les doctype html, et ma police d'écriture principale est devenue plus "grasse" qu'avant : étrange

Et sinon pour mon problème de pied de page ?

Exemple : http://www.coreandco.fr/temp/contact.php

Des fois le cadre de gauche est plus grand que celui de droite...

Mon pied ne pourrais pas prendre toute la largeur du site et du coup se mettre à la fin de mes div ?

Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

Pour les doctype: tu ne dois pas choisir les 3, mais juste un seul. Celui du milieu est celui que je t'ai conseillé.

De plus, pour qu'un doctype soit correctement interprété, il ne faut pas qu'il y ait un caractère avant lui : il doit se trouver en premier sur la première ligne.

Lien vers le commentaire
Partager sur d’autres sites
Pidji

Pidji

Posté
  • Auteur
Posté

J'ai déjà apporté plusieurs modifications, tout mis en minuscules, refait le <head>, rajouté un "</div>" manquant à la fin, et mis les noms des divs entre guillemets.

Je vais modifier ma police dans mon css

Par contre, il me reste ce souci du bloc "pied" qui ne va pas à la fin des 2 divs quand celui de gauche est plus bas que celui de droite :

http://www.coreandco.fr/temp/contact.php

Merci pour ça car c'est mon plus gros souci pour le moment

Merci d'avance !!!

Lien vers le commentaire
Partager sur d’autres sites
Pidji

Pidji

Posté
  • Auteur
Posté

Bon, je pensais avoir trouvé une solution, en mettant mon cadre de gauche en "float:left" et en rajoutant un div transparent à la fin du cadre de droite pour qu'il aille jusqu'au bout de celui de gauche

Sur FIREFOX, ça marche nickel, mais sur iE, mon cadre de contact se met tout en bas du coup !!!

regardez : http://www.coreandco.fr/temp/contact.php

S'il vous plait, aidez moi !!!

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

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



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...