XHTML 1.1 Strict: aligner autre chose que du texte

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : XHTML 1.1 Strict: aligner autre chose que du texte

A Levra Senza Coda

Aghju maghjatu u bichoco ?

Reprise du message précédent :

SoulJacker a écrit :

C'est peut-être pas compliqué, mais dans les solutions, soit ca passe pas sous IE5, soit ca passe pas sous Mozilla. Mais bon, c'est surement du au mélange table-div

Un bon <div style="float:left;width:gnagna;height:gnagna;background-image:url(truc);"></div>
<div style="float:right;width:gnagna;height:gnagna;background-image:url(bidule);"></div>

Normalement ca passe sous IE5, Mozilla...

---------------
1732 : Giacinto Paoli rédige un projet de constitution, dont le préambule decrète pour la première fois dans l'histoire de l'Humanité "Les Hommes naissent libres et égaux en droit"...

Publicité

gm_superstar

Appelez-moi Super

Bon j'ai fait ça rapidement :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Génération NT - Astuces, News, Dossiers pour Windows NT / 2000 / XP</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr-FR" />
<meta name="Description" content="Génération NT propose des astuces, news et dossiers pour les systèmes d'exploitation Windows NT / 2000 et XP" />
<meta name="Keywords" content="windows, astuce, 2000, xp, optimisation, partage, adsl, 2k, nt, news, regedit, système, exploitation, tweak, connexion, dossier, réseau, iis, serveur, download, registre, base, génération, generation, tweakui, pc, performance, hardware, software, usb, driver, sécurité, firewall, detonator" />
<meta name="category" content="internet" />
<meta name="distribution" content="Global" />
<meta name="Date-Creation-yyyymmdd" content="20010901" />
<meta name="Date-Revision-yyyymmdd" content="20011110" />
<meta name="Robots" content="index,follow" />
<meta name="revisit" content="15 days" />
<meta name="Author Publish" content="Bruno / Ray" />
<meta name="reply-to" content="webmaster@generation-nt.com" />
<meta name="Owner" content="webmaster@generation-nt.com" />
<meta name="Identifier-URL" content="http://www.generation-nt.com" />
<meta name="Copyright" content="Génération NT" />
<link rel="shortcut icon" type="image/x-icon" href="images/design/favoricon.ico" />
<link rev="made" href="mailto:webmaster@generation-nt.com" />
<link rel="stylesheet" type="text/css" rev="stylesheet" href="includes/style.css" />
</head>

<body>

<table id="principal" cellspacing="0">

<tr id="enTete">
<td><img src="images/design/haut-gauche.gif" width="162" height="128" alt="" /></td>
<td><img src="images/design/titre.gif" width="640" height="128" alt="Génération NT" /></td>
<td><img src="images/design/haut-droit.gif" width="162" height="128" alt="" /></td>
</tr>

<tr>

<td id="menu">
<span id="visiteurs">- <b><script src="apps/nb/connectes.php?action=show" type="text/javascript"></script></b> visiteurs sur le site -</span>
<img id="imageMenu" src="images/design/menu-gauche.gif" width="154" height="510" usemap="#menu-gauche" alt="Menu" />
<map name="menu-gauche" id="menu-gauche">
<area shape="rect" coords="2,556,152,578" href="sondages.php" alt="Voir tous les Sondages" />
<area shape="rect" coords="2,473,152,495" href="contact.php" alt="" />
<area shape="rect" coords="2,428,152,450" href="liens.php" alt="" />
<area shape="rect" coords="2,384,152,406" href="apps/phpBB2" alt="" />
<area shape="rect" coords="2,338,152,360" href="fichiers.php" alt="" />
<area shape="rect" coords="2,293,152,315" href="dossiers.php" alt="" />
<area shape="rect" coords="2,138,152,160" href="astuces.php?rub=1" alt="" />
<area shape="rect" coords="2,49,152,71" href="news.php?rub=1" alt="" />
<area shape="rect" coords="2,4,152,26" href="index.php" alt="" />
<area shape="rect" coords="30,263,152,277" href="astuces.php?rub=6" alt="" />
<area shape="rect" coords="30,241,152,255" href="astuces.php?rub=5" alt="" />
<area shape="rect" coords="30,219,152,233" href="astuces.php?rub=3" alt="" />
<area shape="rect" coords="30,197,152,211" href="astuces.php?rub=2" alt="" />
<area shape="rect" coords="30,86,152,100" href="news.php?rub=2" alt="" />
<area shape="rect" coords="30,175,152,189" href="astuces.php?rub=4" alt="" />
<area shape="rect" coords="30,108,152,122" href="news.php?rub=3" alt="" />
</map>
<p>
<a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" /></a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/"><img style="width:88px; height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>
</td>

<td id="contenu">
<form id="recherche" method="post" action="recherche.php">
<div>
<img src="images/design/recherche.gif" width="175" height="25" alt="" />
<input type="text" name="motscles" id="motscles" size="17" maxlength="100" value="" />
<input type="image" src="images/design/ok.gif" name="ok" id="ok" value="OK" />
<span class="rouge">syntaxe:</span>
<span class="bleu">mot1 + mot2 + ...</span>
</div>
</form>


<div class="coins"><img src="images/design/bord-haut-gauche.gif" width="15" height="15" alt="" /><img class="coinDroite" src="images/design/bord-haut-droit.gif" width="15" height="15" alt="" /></div>
</td>

<td id="colDroite">

<p id="pub">
<script type="text/javascript" src="http://fl01.ct2.comclick.com/aff_js_src.ct2?id_regie=1&num_editeur=7507&num_site=1&num_emplacement=2"></script>
<object>
<noscript>
<p style="display: inline">
<a href="http://fl01.ct2.comclick.com/click_url.ct2?id_regie=1%BD%03m_editeur=7507%BD%03m_site=1%BD%03m_emplacement=2"><img src="http://fl01.ct2.comclick.com/aff_url.ct2?id_regie=1&num_editeur=7507&num_site=1&num_emplacement=2" alt="" /></a>
</p>
</noscript>
</object>
</p>

<p>Les sections :</p>

<p class="left">
<strong>¤</strong> Infos...<br />
<strong>¤</strong> Derniers Commentaires<br />
<strong>¤</strong> Chat<br />
</p>

<p>sont désactivées pour quelque temps.<br /><br />
Pour plus d'information concernant ces changements veuillez lire cette
<strong><span style="color: #FF0000"><a href="index.php?cat=news&id=844">News</a></span></strong>.
</p>

<p><img src="images/design/tribune.gif" width="132" height="30" alt="" /></p>
</td>
</tr>

<tr>
<td class="basDePage"><img src="images/design/bas-gauche.gif" width="50" height="50" alt="" /></td>
<td id="contenuBas">
<div class="coins"><img src="images/design/bord-bas-gauche.gif" width="15" height="15" alt="" /><img class="coinDroite" src="images/design/bord-bas-droit.gif" width="15" height="15" alt="" /></div>
<div id="credits">Ce site est la propriété exclusive de www.generation-nt.com <b>©</b>
2001-2002. Pour tout contact: <a class="email" href="mailto:webmaster@generation-nt.com">Webmaster</a>
</div>
</td>
<td class="basDePage"><img class="coinDroiteGrand" src="images/design/bas-droit.gif" width="50" height="50" alt="" /></td>
</tr>
</table>

</body>
</html>

et style.css :

@charset "iso-8859-1";
/* Date de création: 6/01/2003 */

body {
background-color: #1e0075;
color: #ffff00;
text-align: center;
}

img {
border: none;
margin: 0;
}

table {
border: none;
border-spacing: 0;
}

a:link { color: #ffff00; background-color: inherit; text-decoration: none; }
a:hover { color: #ff0000; background-color: inherit; text-decoration: none; }
a:visited { color: #ffff00; background-color: inherit; text-decoration: none; }
a.menu-accueil { text-decoration: none; background-color: inherit; color: #FFFFFF; }
a.menu-accueil:hover { text-decoration: none; background-color: inherit; color: #FFCC33; }
a.menu-commentaire { text-decoration: none; background-color: inherit; color: #FFCC33; }
a.menu-commentaire:hover { text-decoration: none; background-color: inherit; color: #FFFFFF; }
a.menu-recherche { text-decoration: none; background-color: inherit; color: #FFFFFF; }
a.menu-recherche:hover { text-decoration: none; background-color: inherit; color: #FFCC33; }
a.email { text-decoration: none; background-color: inherit; color: #009900; }
a.email:hover { text-decoration: none; background-color: inherit; color: #FF0000; }
a.sondage { text-decoration: none; background-color: inherit; color: #009900; }
a.sondage:hover { text-decoration: none; background-color: inherit; color: #FF0000; }
a.rubriques-dossier { text-decoration: none; background-color: inherit; color: #FFFFFF; }
a.rubriques-dossier:hover { text-decoration: none; background-color: inherit; color: #FFFF00; }
a.menu { text-decoration: none; background-color: inherit; color: #FFFFFF; }
a.menu:hover { text-decoration: none; background-color: inherit; color: #FFFF00; }
a.menu1 { text-decoration: none; background-color: inherit; color: #FFFF00; }
a.menu1:hover { text-decoration: none; background-color: inherit; color: #FF0000; }
a.newsastuces {text-decoration: none; background-color: inherit; color: #FFFFFF; }
a.newsastuces:hover { text-decoration: none; background-color: inherit; color: #FFFF00; }

.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }

table#principal {
width: 964px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

table#principal td {
padding: 0;
}

#enTete img, .basDePage img {
display: block;
}

td#menu, td#colDroite {
background-color: #d3e5fa;
vertical-align: top;
text-align: center;
color: #000000;
}

#visiteurs {
color: #0000cc;
font-family: Comic Sans MS, helvetica, sans-serif;
font-size: xx-small;
}

#visiteurs b {
color: #000000;
font-size: x-small;
}

img#imageMenu {
margin: 40px 0px 60px 0px;
}

td#contenu {
background-color: #003399;
vertical-align: top;
}

td#contenuBas {
background-color: #003399;
vertical-align: bottom;
}

form#recherche {
margin: 0;
background-color: #d3e5fa;
padding: 2px;
text-align: center;
}

form#recherche span {
font-family: Comic Sans MS, helvetica, sans-serif;
font-size: xx-small;
}

.coins {
height: 15px;
}

.coinDroite {
position: relative;
left: 610px;
}

#pub {
margin: 60px 0px 50px 0px;
}

.coinDroiteGrand {
position: relative;
left: 112px;
}

.basDePage {
background-color: #d3e5fa;
vertical-align
}

#credits {
background-color: #d3e5fa;
text-align: center;
font-size: xx-small;
color: #000000;
padding-top: 0.3em;
padding-bottom: 0.3em;
}

.rouge {
color: #ff0000;
}

.bleu {
color: #0000ff;
}

Message édité par gm_superstar le 08-01-2003 à 18:19:20

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gm_superstar

Appelez-moi Super

Bon y'a sans doute moyen de faire mieux, mais ça ne remet pas en cause tout ton code. Il y a juste une meilleure séparation contenu/mise en forme plus conforme à ce que doit être un document XHTML 1.1

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

souljacker

Bon, je vais potasser ça et voir si je comprends.

Encore un grand merci :jap:

souljacker

J'ai compris en partie où je fesait une erreur.

au lieu de faire

je fesais

Code :

<div class="coins">
<img src="images/design/bord-bas-gauche.gif" width="15" height="15" alt="" />
<img class="coinDroite" src="images/design/bord-bas-droit.gif" width="15" height="15" alt="" />
</div>

Mais du fait que ce soit des blocks, change l'affichage en les mettant l'un en dessous de l'autre au lieu de côte à côte et le problème avec les dimensions 606 au lieu de 610, venait de là aussi.

gm_superstar

Appelez-moi Super

J'avais bien dit de laiser les éléments collés !

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

souljacker

Je ne peux que m'excuser platement.

J'ai mal lu :pfff: :pfff: :pfff: :sweat: :sweat: :sweat:

gm_superstar

Appelez-moi Super

Ah ? URL ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gm_superstar

Appelez-moi Super

http://www.chezmoicamarche.org/

La preuve

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

souljacker

gm_superstar, j'ai une question sur ta preuve. Tu m'as dit que les images ne peuvent pas être des blocks. Or quand tu fais float: left, elle le devienne. C'est normal?

C'est bon, on pousse pas, je sortirai bien tout seul

C parce que tu utilises IE5.5, avec IE6 ca marche très bien.

Message édité par souljacker le 10-01-2003 à 16:52:29

Publicité

gm_superstar

Appelez-moi Super

Ah oui mais tu utilises IE 5 qui est n'est qu'une parodie de navigateur. Là effectivement je ne connais pas de contournement simple. Non le bug auquel je pensais concernait IE 6 en mode standard...

PS: une dénonciation a été envoyé à antp pour le screenshot.

SoulJacker: je n'ai jamais dit qu'une image ne pouvait pas être un bloc. Effectivement dès qu'un élément est flottant il devient un bloc (cf les specs)

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gm_superstar

Appelez-moi Super

J'ai pas de IE 5 là, mais si on ajoute :

img {
border: none;
margin: 0;
}

Est-ce que ça résout le problème ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

XHTML 1.1 Strict: aligner autre chose que du texte

Sujets relatifs
Affichage de ma page xhtml en arbre xml sur ie6	xhtml 1.1 et image mappée
[XHTML] Aligner du texte à gauche dans un tableau	Lecture d'un fichier texte contenant des entiers...
Comment attacher un texte dans une JFrame ??	il a fallu qu'il y ait des iframes dans les pubs, donc XHTML 1.1 DMC
un texte defilant	apache: c koi c chose dans mon access.log
Plus de sujets relatifs à : XHTML 1.1 Strict: aligner autre chose que du texte

Page générée en 0.073 secondes