Souci de lien dans sidebar sous IE
El-Cherubin
Member
dans Archives
Bonjour a tous,
J'essaye d'adapter un theme CSS/HTML sur pluxml, cependant j'ai un leger souci...
Les liens de la sidebar ne s'affiche aps sous IE alors que sous FF pas de probleme...
Une idée?!
Merci
template.php
J'essaye d'adapter un theme CSS/HTML sur pluxml, cependant j'ai un leger souci...
Les liens de la sidebar ne s'affiche aps sous IE alors que sous FF pas de probleme...
Une idée?!
Merci
template.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php __('pagetitle'); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="pluxml/templates/<?php echo $pluxml->style; ?>/style.css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Rss" href="rss.php" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="header">
<h1><?php __('maintitle', 'link'); ?></h1>
<p><?php __('subtitle'); ?></p>
</div>
<div id="content">
<?php # En mode 'home' ou 'catégorie' # ?>
<?php if($pluxml->mode == 'home' || $pluxml->mode =='cat') : ?>
<div id="colOne">
<div id="scroll">
<?php # Liste d'articles # ?>
<?php while($pluxml->loopArticles()):?>
<div class="post">
<h2 class="title"><?php __('title', 'link'); ?></h2>
<p class="posted"><?php __('author'); ?> | <?php __('date'); ?> à <?php __('hour'); ?> | <?php __('categorie'); ?></p>
<?php __('chapo'); ?>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
<?php # Fin mode 'home'/'catégorie' # ?>
<?php # En mode 'article' # ?>
<?php if($pluxml->mode == 'article') : ?>
<div id="colOne">
<div id="scroll">
<?php # Liste d'articles # ?>
<?php while($pluxml->loopArticles()):?>
<div class="post">
<h2 class="title"><?php __('title'); ?></h2>
<p class="posted"><?php __('author'); ?> | <?php __('date'); ?> à <?php __('hour'); ?> | <?php __('categorie'); ?></p>
<div class="story">
<?php __('content'); ?>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
<?php # Fin mode 'article' # ?>
<div id="colTwo">
<ul>
<li class="fold">
<h2><!--<a href="#">-->Search</h2>
<form method="get" action="#">
<div>
<input type="text" id="textfield1" name="textfield1" value="" size="18" />
<input type="submit" id="submit1" name="submit1" value="Search" />
</div>
</form>
</li>
<div id="categories">
<h2>Categories</h2>
<?php __('catlist','Accueil'); ?>
</div>
<li class="fold">
<h2>Archives</h2>
<ul>
<li><a href="#">January 2007</a></li>
<li><a href="#">December 2006</a></li>
<li><a href="#">November 2006</a></li>
<li><a href="#">October 2006</a></li>
<li><a href="#">September 2006</a></li>
<li><a href="#">August 2006</a></li>
<li><a href="#">July 2006</a></li>
<li><a href="#">June 2006</a></li>
<li><a href="#">May 2006</a></li>
<li><a href="#">April 2006</a></li>
<li><a href="#">March 2006</a></li>
<li><a href="#">February 2006</a></li>
<li><a href="#">January 2006</a></li>
</ul>
</li>
<div id="liens">
<h2>Liens utiles</h2>
<ul>
<li><a href="#">1</a>: Site1</li>
<li><a href="#">2</a>: Site2</li>
<li><a href="#">3</a>: Site3</li>
</ul>
<h2>Syndication</h2>
<ul>
<li><?php __('rss'); ?></li>
<li><?php __('atom'); ?></li>
</ul>
<h2>Administration</h2>
<ul>
<li><a href="pluxml/admin/">Administration</a></li>
</ul>
</div>
</ul>
</div>
<hr />
</div>
<div id="footer">
<p><?php __('pagination'); ?></p>
<p>CMS <a href="http://pluxml.org" title="Rejoindre le site officiel de Pluxml">Pluxml</a> | Design 2006 Quadrangle. by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
<br />
</div>
</body>
</html>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #FFB0B0 url(images/img1.gif) repeat-x;
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #797272;
}
h1 {font-size : 1.6em;}
h2 {font-size : 1.2em;}
h3 {font-size : 1.1em; padding : 5px 0; margin : 0;}
p {margin : 0; padding : 3px 0;}
hr {clear : both; visibility : hidden; margin : 0; padding : 0;}
a {
color: #F85555;
}
a:hover {
text-decoration: none;
}
/* Header */
#header {
width: 550px;
height: 100px;
margin: 0 auto;
padding: 20px 0 50px 200px;
background : url(img/) no-repeat;
font-size : 1.4em;
}
#header * {
text-align: center;
text-decoration: none;
}
#header h1 {
letter-spacing: -2px;
font-size: 3em;
}
/* Content */
#content {
width: 750px;
margin: 0 auto;
}
/* Column One */
#colOne {
float: right;
width: 440px;
height: 400px;
padding: 65px 48px 85px 62px;
background: url(images/img2.jpg);
}
#scroll {
overflow: auto;
height: 360px;
padding: 20px;
}
#colOne .post {
margin-bottom: 1em;
border-bottom: 1px dashed #F2B8B8;
}
#colOne .title {
color : #000;
font-size : 1.5em;
font-weight : bold;
margin : 0; padding : 3px 0 0 0;}
}
#colOne .posted, #colOne .meta {
font-size: .8em;
}
#pagination { /* Conteneur des liens 'page suivante' et 'page précédente' */
margin-top : 10px;
text-align : center;}
/* Column Two */
#colTwo {
float: left;
width: 180px;
}
#colTwo ul {
margin: 0;
padding: 0;
list-style: none;
}
#colTwo li ul {
padding: 10px;
}
#colTwo .fold ul {
display: none;
}
div#categories{ /* Bloc 'catégories' (application du background) */
margin : 0;
padding : 3px 0;
}
/* For latest browser version only
#colTwo .fold:hover ul {
display: block;
}
*/
#colTwo li a {
color: #F18585;
}
#colTwo h2 {
display: block;
padding: 3px 5px;
text-decoration: none;
background: #F18585;
color: #FFFFFF;
}
#colTwo form {
margin: 0;
padding: 10px;
}
#textfield1 {
width: 150px;
}
#submit1 {
display: none;
}
/* Footer */
#footer {
width: 550px;
margin: 0 auto;
padding: 0 0 0 200px;
background : url(img/) no-repeat center;}
}
#footer * {
text-align: center;
font-size: xx-small;
color: #FFFFFF;
}
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
ton code est invalide , firefoxe arrive a le corrigé , Internet Explorer non.
des <li> doivent etre des enfants de <ul> ou <ol> , mais ne peuvent etre lachées seules dans la nature
tes li class="fold" pourraient etre de simple div class="fold".
Fait usages des validateurs du w3c pour t'aider a faire tes gabarits html ou templates et ainsi t'assurer d'un rendu optimal de tes differents contenus.
GC
Merci a tous les 2, j'effectue donc ces modifs en esperant que ce soit bon
<li class="fold">... </li>
<div id="categories">...</div>
....
<li>....</li>
</ul>
Que fait ton <div> ici ?
c'est peut être ça ton probleme.
Consultant PluXml
Ancien responsable et développeur de PluXml (2010 à 2018)
le conseil de faire usage d'un validateur , n'est pas a ecarter , d'ailleurs , même pour une page qui "fonctionne" , ceci est recommandé pour finaliser un "codage".
ta page au validateur :
http://validator.w3.org/check?uri=http%3A%2F%2Flist.links.free.fr%2Fpluxml%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Aprés corrections , tout fonctionneras a merveile
GC
Et je saisis pas le souci de la div, le bloc est ouvert puis fermé, non?!
Le problème ce n'est pas que les balises soient ouvertes puis fermées, c'est que la balises <div> n'a rien à faire là.
PAS BON
<ul>
<li class="fold">... </li>
<div id="categories">...</div>
....
<li>....</li>
</ul>
BON
<ul>
<li class="fold">... </li>
<li><div id="categories">...</div></li>
....
<li>....</li>
</ul>
Consultant PluXml
Ancien responsable et développeur de PluXml (2010 à 2018)
Désolé je suis un peu un noob en css...
Dans mon premier message je te propose de passer ton li orphelin en div , franchement quelle interet de faire des sous listes ?
Ensuite , valider ton code , veut dire de corriger tes trucs du genre <li></li><div> ou <p><p> ...</p></p>.
Tu as 2 grand type de balise :
les balise de type "inline , assimilé a des contenus de type texte (span , img , strong , etc ...)
et des balises de type block : (div p , ul li )
la cela devient plus compliquer , certaines sont considerer commes des contenus de zones majeures et peuvent recevoir d'autres elements block ou seulement certains :
un div peut contenir toutes sortes de balises
un ul des li
un dl des dt et dd
un dt des p , h2 , etc ..
Certaines de ces balises fonctionnent en "groupes" : la balise table , qui se construit au minimum avec un tr et td (a savoir que le tbody est rajouté par les navigateur au moment de l'interpretation ! ... et oui , les navigateur interprete et tente de corriger ou harmoniser le code pour donner un rendu visuel acceptable , chacun a sa sauce et selon le mode : standard w3c ou html de base ).
une balise li peut recevoir de div .mais un p ne peut recevoir un div.
Ceci dit , le css n'interdis pas de modifié un affichage par defaut et de mette un li ou autre balise block en display:inline et vice versa .
Il n'est pas important de connaitre toutes ces regles par coeur , une certaines habitude et l'usage du validateur permet de te rappeller ou de te montrer certaines de ses erreurs , avec le temps ou en fait moins ou plus du tout.
Dans tout les cas , sitot qu'un affichage semble incoherent dans un ou plusieurs navigateur , la premiere demarche est de verifier la validité du doctype , puis celle du code html.
Une fois ces erreurs corrigés , on peut partir a la chasse aux bugs ou erreurs css .
Idem , premiere demarche : le validateur , une accolade de trop ou de moins , une erreur de syntaxe ou un point virgule passé en double point suffit a faire capoté une mise en page en partie.
Il faut t'armé d'un peu de patience pour te familiariser avec tout ça
Je te conseil de chercher sur google les listes des balises html , pour savoir a quoi elle servent , plutot que de les utiliser pour l'aspect visuel quelles peuvent avoir. Le css est justement la pour la mise en forme
Ensuite de nombreux site et forums donne un nombre d'infos et de tutos considerables sur l'usage et les regles chaudement recommandés a suivres.
gc
http://www.validome.org/lang/fr
http://w3qc.org/validateur/
Qu'il reste dans le prolongement de l'image...?
Sinon, auriez vous une idée pour decouper le cadre/image, afin d'avoir une zone plus grande?!
Merci