XHTML : clear:both; deux colonnes.. et c la m....

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : XHTML : clear:both; deux colonnes.. et c la m....

freed102

Arayashiki

voila ! ce qui devait arriver arriva, depuis le début on me dit "oui le site doit etre en HTML 4.01 transitional".... puis suite à une réunion, la fameuse décision a été prise : "bah non finalement... on veut du XHTML 1.0 Strict !!!"...

... personnellement ça me pose pas trop de problèmes vu que ma syntaxe était déja tres proche du XHTML... simplement faut revoir les pages de façon à "séparer le contenu de la forme"... et par la même occasion... utiliser des div plutot que des tables... (chose que j'avais deja fait sur certaines pages assez simples... heureusement !)

donc en gros mis à par la homepage.. je n'aurais pas trop de probleme pour le moment à remettre tout en XHTML...

Le problème vient plus loin... ce sont les CSS... là c'est toujours le grand problème... ya toujours un truc qui cloche ! lol !

je vous explique mon probleme, j'ai deux colonnes (dans le conteneur central du site biensur), dans lesquelles se trouvent deux colonnes (une pour un image.. et une pour du texte) et pour couronner le tout j'ai une image (un lien) qui doit etre aligné avec celui de la colonne d'à côté !

En images ça donne ça : (j'ai laissé les repères de photoshop pour bien voir les alignements)

bon la bonne nouvelle c'est que j'y suis presque arrivé !! ça marche pas trop mal dans IE et FF sur pc... et sur Safari ça passe pas trop mal non plus....

Mais alors sur IE mac... c pas ça du tout ! et j'ose même pas essayer sur les autres ! et malheureusement je susi obligé de faire un truc qui marche absolument partout !

voici mon bout de code :

Code :

<div id="nouveautes" style="margin-left:10px;">
<div id="nouveaute_1" style="width:311px;height:114px;margin:left:10px;float:left;">
<a href="#" target="_self">
<img src="../img/1/images/home_image1.jpg" alt="image1" width="145" height="101" style="margin-right:10px;float:left;" />
</a>
<p id="nouveautes_1_texte" style="width:145px;height:114px;float:left;">
<span class="texte_courant">
<strong>Votre fidélité récompensée ! </strong> <br />
Avec <strong>Mes points </strong>, Toto.com récompense encore plus votre fidélité. C'est simple, chaque mois vous cumulez des points sans même y penser !
</span>
</p>
<a href="#">
<img src="../img/1/boutons/bouton_en_savoir_plus.jpg" alt="En savoir plus" width="118" height="26" style="margin-left:155px;clear:both;" />
</a>
</div>
<div id="nouveaute_2" style="width:311px;height:114px;margin:left:10px;float:left;">
<a href="#">
<img src="../img/1/images/home_image2.jpg" alt="image1" width="145" height="101" style="margin-right:10px;float:left;" />
</a>
<p id="nouveautes_2_texte" style="width:145px;height:114px;float:left;">
<span class="texte_courant"><strong>Profitez de nos offres ! </strong> <br />
Découvrez tout au long de l'année, notre programme d'offres privilèges.
Des offres exclusives négociées pour vous, auprès de nos partenaires...</span>
</p>
<a href="#">
<img src="../img/1/boutons/bouton_en_savoir_plus.jpg" alt="En savoir plus" width="118" height="26" style="clear:both;margin-left:155px;" />
</a>
</div>

PS : j'ai (pour le moment) laissé les attribus "style" dans le code HTML... ça m'evite de switcher avec le fichier CSS.. je trouve que c une perte de temps monumentale.. en général une fois que ça bouge plus... je remets tout à sa place dans le fichier CSS

J'en profite pour poser une autre question :
Concernant les padding et les borders... quand je fais un "width:100px;padding5px;border:1px solid #FFFFFF" (par exemple)
au niveau du rendu... ma taille finale sera de width=110px ? width=112px? ou bien elle restera à 100px ?? parceque j'ai l'impression que parfois un padding ou un border va completement déformer mes marges et du coup ça rentre plus ! (c peut etre bon d'en etre sûr une bonne fois pour toutes)

Message cité 1 fois
Message édité par freed102 le 10-04-2006 à 11:06:36

Publicité

xtof_83

Freeride Spirit

Pour les marges des éléments tu as mis

Code :

* {
margin:0;
padding:0;
}

dans ton CSS?

freed102

Arayashiki

oui ça y est toujours ! c le premier truc que je fais !

Code :

/* CSS Document */
/*-------------------------------------------------------------------------------------------------------*/
/* Balises générales */
*{
border:0px solid #EEEEEE;
margin: 0;
padding: 0;
}
body {
width:100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
font-weight:normal;
}
/*-------------------------------------------------------------------------------------------------------*/
/* structure du site */
#header {
height: 85px;
}
img{
border:0;
margin:0;
padding:0;
}
#page {
width:100%;
}
#centre {
position:relative;
margin-left: 160px;
}
#menu_gauche {
float:left;
width: 150px;
}
#footer{
position:relative;
height:44px;
border-top:3px solid #FF6600;
margin-top:30px;
clear:both;
}
/*-------------------------------------------------------------------------------------------------------*/
/* titres */
h1{
margin:0;
padding:0;
}
h2 {
font-size: 16px;
font-weight:bold;
margin-top:0px;
padding-bottom:5px;
margin-left:3px;
margin-bottom:10px;
white-space:nowrap;
border-bottom: 1px solid #EEEEEE;
}
h3{
padding-top:20px;
font-size:16px;
font-weight:bold;
}
h4{
margin-left:0;
padding-top:10px;
font-size:14px;
font-weight:bold;
color:#FF6600;
}
h5{
margin-left:20px;
padding-top:10px;
padding-bottom:10px;
font-size:12px;
font-weight:bold;
color:#666666;
}
/*-------------------------------------------------------------------------------------------------------*/
/* Liens généraux*/
/* Liens (sans class) */
a:link{
font-size: 11px;
text-decoration:underline;
font-weight:normal;
color:#FF6600;
}
a:visited{
font-size: 11px;
text-decoration:underline;
font-weight:normal;
color:#FF6600;
}
a:hover{
text-decoration: none;
}
a:active{
text-decoration:none;
color:#FF6600;
font-weight:normal;
}
/* Liens (Libellés du catalogue) */
a.lien_libelle:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#000000;
text-decoration:none;
}
a.lien_libelle:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#000000;
text-decoration:none;
}
a.lien_libelle:hover {
color:#000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration:underline;
}
a.lien_libelle:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration:none;
color:#FF6600;
}
/*-------------------------------------------------------------------------------------------------------*/
/* Textes généraux */
.texte_courant {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
font-weight:normal;
}
.texte_noir_18px { font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
}
.texte_noir_14px { font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
.texte_orange_18px { font-family: Helvetica, Arial, sans-serif;
font-size: 18px;color: #FF6600
}
.texte_courant_orange {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color:#FF6600;
}
.texte_courant_orange_12px {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FF6600;
}
/*-------------------------------------------------------------------------------------------------------*/
/* Navigation gauche */
#nav_gauche{
width:130px;
list-style-position: inside;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
display:inline;
margin:0;
}
#nav_gauche li{
list-style-position: inside;
border-bottom: 1px solid #EEEEEE;
padding-top:5px;
padding-bottom:5px;
list-style-type: none;
}
.nav_gauche_sous_menu{
font-size:11px;
margin-left:18px;
text-decoration:none;
}
/* Liens pour la liste du menu gauche */
#nav_gauche a:link{
font-size:11px;
text-decoration: none;
font-weight:normal;
white-space:nowrap;
color:#000000;
}
#nav_gauche a:visited{
font-size:11px;
text-decoration: none;
font-weight:normal;
white-space:nowrap;
color:#000000;
}
#nav_gauche a:hover{
text-decoration:none;
}
#nav_gauche a:active{
text-decoration:none;
color:#FF6600;
font-weight:normal;
}
.filet_menu_gauche{
float:right;
display:inline;
}

Message édité par freed102 le 10-04-2006 à 14:16:19

sibelius

Vous êtes sûr ?

freed102 a écrit :

puis suite à une réunion, la fameuse décision a été prise : "bah non finalement... on veut du XHTML 1.0 Strict !!!"...

Question bête : pourquoi ?
Juste pour suivre la mode ? Y'a-t-il un réel besoin de suivre cette norme plutot qu'une autre dans ce cas de ce projet ?

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

freed102

Arayashiki

bah c la charte du client.. c une grosse firme française et on va integrer une partie de leur site, et dans la doc c'est écrit qu'il est préférable de faire du XHTML 1.0 Strict (chose qui n'avait pas été précisée au départ)

Probablement pour rendre le site accessible sur des supports hors du commun dans le futur (mobiles, lecteurs d'ecrans, etc etc)

Message cité 1 fois

sibelius

Vous êtes sûr ?

freed102 a écrit :

Probablement pour rendre le site accessible sur des supports hors du commun dans le futur (mobiles, lecteurs d'ecrans, etc etc)

Justement. Aucun rapport : on peut très bien être très accessible et avoir une séparation fond/forme en HTML 4.01 bien conçu.

Le choix de XHTML Strict n'apporte ici aucun intérêt réel (je parle bien dans ce projet précis). L'intérêt est de séparer le contenu (HTML) de la mise en forme (CSS) afin de véhiculer ce contenu sur toutes les plateformes... et cet intérêt existe déjà en HTML 4.01

D'où ma question Je pense que c'est surtout par "mode", ils ont entendu parler de ce "super truc" qu'est le XHTML Strict et se disent que c'ets ce qu'ils leur faut.

Message édité par sibelius le 10-04-2006 à 15:02:18

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

freed102

Arayashiki

bah moi je pense que vu l'envergure de la boite en question.. ils veulent tout simplement être véhiculés sur toutes les plateformes quelles qu'elles soient ! c pour ça que même le vieil IE sur Mac qui fait iech et bien ça doit marcher dessus ! lol !

à savoir que c un site qui existe deja et qui est utilisé par 3 millions de visiteurs

Vous allez me dire "Mais... pourquoi ont-ils mis un site pareil entre les mains de quelqu'un qui n'est pas une bete de CSS ?"

... je vous répondrai... "j'en sais rien ! mais quoi qu'il en soit... l'ancienne version du site c'est une catastrophe niveau code... je ne peux pas faire pire ! bien au contraire !"

... et je vais m'appliquer... c'est un challenge ! je connais les règles essentielles au XHTML (d'ailleurs c pour ça que j'ai commencé à taper du HTML très proche du XHTML) mes pages sont valides.. c déjà un bon point !! maintenant faut juste arriver à positionner des blocs les uns à coté des autres au pixel pres... et là c une autre paire de manche !! lol !

FlorentG

Unité de Masse

Dis-leur qu'IEMac a vu son développement arrêté il y a 5 ans, et qu'il vaut mieux l'oublier...

C'est ce que fait yahoo (Browser Grades), le rendu sous IEMac se fait sans CSS...

freed102

Arayashiki

ouai je vais deja essayer de faire quelquechose de visible et si j'y arrive pas je vais leur envoyer ça dans les dents! lol

freed102

Arayashiki

bon sinon pour en revenir au probleme principal... j'ai réussit regler le probleme.. en réduisant d'un pixel chaque paragraphe de texte... je pensais qu'avec les CSS on pouvait placer des objets au pixel pres et que 145(image)+10(marge)+145(texte) ça rentrait dans un bloc de 301 pixels... apparament non ! lol !

et puis d'ailleurs 301+10+301.. ça rentre pas dans 612pixels ! lol

Message cité 1 fois

Publicité

sibelius

Vous êtes sûr ?

freed102 a écrit :

et puis d'ailleurs 301+10+301.. ça rentre pas dans 612pixels ! lol

Si si, ça marche très bien
Il faut simplement bien comprendre le Modèle de Boites
http://openweb.eu.org/articles/dimensions_boites_css/

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

freed102

Arayashiki

oui si je lis bien, c bien ce que je disais, le padding elargit le bloc j'ai l'impression

dans un navigateur appliquant le modèle de boîte standard, les deux boîtes sont identiques : leur largeur apparente est égale à width+padding+border

FORUM HardWare.fr

Programmation

HTML/CSS

XHTML : clear:both; deux colonnes.. et c la m....

Sujets relatifs
XHTML : probleme de footer	recherche traduction des différents codes css et xhtml
recherche logiciel autre que notepad ++ pour xhtml et css	Validation XHTML = character "" not allowed in prolog
fonction qui clear stdout	Array sur deux colonnes et foreach..
pb struts+javascript+xhtml	[XHTML & XML] Peut-on créer ses propres balises ?
[xsl->xhtml+css] Compatibilite	XHTML = langage rigoureux ?
Plus de sujets relatifs à : XHTML : clear:both; deux colonnes.. et c la m....

Page générée en 0.106 secondes