28114 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour à tous,

mon deuxième message, juste après ma présentation...

J'ai commencé mon premier site, une petit blog personnel pour ma copine.
j'ai utilisé pour ça un menu css trouver sur le site Listamatics, que j'ai modifier légèrement à mes besoins.

je voudrais déjà avoir juste votre avis sur la manière dont j'ai travaillé, sachant que c'est mon premier site, de surcroit en css

aussi j'ai plusieurs petits problemes:

je n'arrive pas à coller le premier onglet au bord de mon bloc de contenu. Si je joue sur les margin ou padding, j'ai pas réussi.

Il y a probablement du code inutile aussi, je m'en excuse d'avance et je m'apprete à tester chaque ligne.

Pour coller mon bloc de contenu à mon menu, j'ai du utilisé un Float, toute les autres solutions que j'ai testé précédemment ne fonctionnaent pas dans touts les navigateurs. Me suis-je dirigé vers la bonne solutions?

et Sinon, je vous entends déjà me dire que tout est placé en absolu..... j'en suis conscient, ça ne va pas le rester, promis je vais centré tout ça.

Ce premier post est surtout là pour avoir une appréciation de la part de professionnel, et non pour me macher le travail, j'espère que je ne donne pas l'impression.

ps: je mettrai le code CSS dans une feuille externe plus tard, il est inclus dans l a page ici, juste pour n'avoir qu'une page de code ouverte quand je travaille dessus.

l'adresse de ma page
http://users.telenet.be/freeway/test/testposition.htm

le code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body {
   background-image:url(picture/fond.gif);
   margin:0;
   padding:0; }


#banniere {

 
   position: absolute;
   background:#6D8F6B;
   border: 1px solid;
   margin-left: 50px;
   top: 25px;
   padding: 10px; 
   
}


#navcontainer
{
position: absolute;
top: 200px;
margin-left: 50px;
width: 770px;

}

#navlist
{

padding: 5px 0px 3px 0px;
margin-left: 0px;
margin-bottom: 0px;
border-bottom: 1px solid #2B5D2D;
font: bold 12px Verdana, sans-serif;

}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 5px;
margin-left: 3px;
border: 1px solid #2B5D2D;
border-bottom: none;
background: #6D8F6B;
text-decoration: none;
}

#navlist li a:link { color: #003300; }
#navlist li a:visited { color: #003300; }

#navlist li a:hover
{
color: #AA7103;
background: #336633;
border-color: #003300;
}

#navlist li a#current
{

background: #CEE1CD;
border-bottom: 1px solid #CEE1CD;
}

#corps {
   float: left;
   background:#CEE1CD;
   border: 1px solid #2B5D2D;
   border-top: none;
   padding: 20px; 
   margin-top: 0px;
}


-->
</style>
</head>

<div id="banniere">
<img src="picture/banniere.jpg" height="125" width="750" alt="banniere">
</div>


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Ma famille</a></li>
<li><a href="#">Mon pays</a></li>
<li><a href="#">Célébrités</a></li>
<li><a href="#">Mes amis</a></li>
<li><a href="#">Mes photos</a></li>
</ul>



<div id="corps">

</div>
</div>




</body>
</html>

Modifié par Dindon (07 Aug 2005 - 05:26)
Bonjour et bienvenue.
J'ai cru comprendre que tu as un petit décrochement du menu en haut à gauche ? comme ça :
upload/579-decroche.jpg
et que tu préfèrerais sans ...
upload/579-decroche2.jpg
Le petit décalage provient de tes bordures, pour corriger il faut donner une marge gauche négative à ton bloc <ul>
 /* en remplaçant cette partie... */
#navlist
{
padding: 5px 0px 3px 0px;
margin-left: 0px;
margin-bottom: 0px;
border-bottom: 1px solid #2B5D2D;
font: bold 12px Verdana, sans-serif;
}
/* par celle-ci */
#navlist
{
padding: 5px 0px 3px 0px;
margin-left: -3px;
margin-bottom: 0px;
font: bold 12px Verdana, sans-serif;
}
/*J'ai enlevé le border-bottom qui, du coup, fait un petit trait (3px) en début de menu et je l'ai remplacé plus bas dans #corps en désactivant border-top: none;*/
#corps {
float: left;
background:#CEE1CD;
border: 1px solid #2B5D2D;
/*border-top: none;*/
padding: 20px; 
margin-top: 0px;
}

Tu feras attention, quand on est pas en charset UTF-8, il faut mettre les caractères spéciaux du html exemple pour les accents aigus : célébrités deviendra dans ton code
upload/579-eacute.jpg Sinon ça fera comme sur la deuxième image de capture dans pas mal de navigateurs.
Sinon je trouve que c'est très bien pour un premier code. Je penses que tu n'uras pas de mal à centrer ton bloc page.
Salut
Modifié par Aureance (01 Aug 2005 - 13:57)
merci beaucoup
ton expication est très clair.
c'est génial, c'est exactement ça.

Pour les caractères spéciaux.... j'ai tellement été absorbé par le reste que j'en ai oublié le plus élémentaire. Bien vu pour ta remarque.

je consacrerai une partie de ma soirée à modifier tout ça Smiley langue
Modifié par Dindon (01 Aug 2005 - 16:59)
pour la marge de -3px ça fonctionne parfaitement.

Par contre, pour éviter le mini-trait de 3 px, malheureusement ça ne fonctionne pas en mettant border: 1px solid #2B5D2D; dans le #corps à la plce de #Navlist car alors j'obtiens avec IE et Opera un border qui se prolonge même en dessous de l'onglet de la page active.

Je me demande si je n'ai pas mal commencé et cumuler plusieurs que je n'arrive pas à corrigier puisqu'elle sont cumulées justement.
je me permet de relancer le sujet,
je ne comprends pas et je n'arrive pas à enlever la barre qui se prolonge même sous l'onglet actif. sous FF c'est nickel, mais IE et Opera font les rebels lol... et comme la majorité des gens surfe quand même sous IE... c'est assez embetant.
merci d'avance pour votre aide
http://users.telenet.be/freeway/test/testposition.htm
Recoucou Messieurs CSS,

je me permet de relancer mon topic.
Je ne trouve toujours pas de solution à mon problème, j'ai même essayé de mettre des z-index dans le #corps et #navlist li a#current, mais rien à faire, la ligne rebelle sur l'onglet actif m'ennuie vraiment.

Peut-être n'y a t'il pas de solution... et que je cherche pour rien?

merci d'avance pour votre aide précieuse.
Modérateur
bonjour,
essai avec le z-index, comme ceci:
#navlist
{
position:relative;
	z-index:2;
padding: 5px 0px 3px 0px;
margin-left: -3px;
margin-bottom: 0px;
font: bold 12px Verdana, sans-serif;
}

bon dev !
Coucou le roucoucou.
Bo: pour la première question ? c'est bon ou pas ?
& 2ème question , j'ai pas compris.
A+
Dindon a écrit :
Par contre, pour éviter le mini-trait de 3 px, malheureusement ça ne fonctionne pas en mettant border: 1px solid #2B5D2D; etc…
Je me demande si je n'ai pas mal commencé et cumuler plusieurs que je n'arrive pas à .

Mon cher ami, je ne t'ai pas conseillé de mettre un border px etc…
J'ai conseillé, désactivation (élimination) dans ta div #corps le petit bidulle "border-bottom". Chez moi ça fonctionne bien, ce doit être pareil chez toi.
A+
Je me suis mal expliqué je crois, mais j'ai fait exactement comme tu me l'avais montré.
le problème de marge de 3 px est résolu.

Ce que j'ai comme problème maitenant c'est ceci:

http://users.telenet.be/freeway/test/Capture1.jpg

Dans FF, on ne voit pas ce problème (FF le résultat est parfait), mais dans IE, je te jure que chez moi c'est comme ça.

avec ceci;
#navlist
{
padding: 5px 0px 3px 0px;
margin-left: -3px;
margin-bottom: 0px;
font: bold 12px Verdana, sans-serif;
}
#navlist li a#current
{
background: #CEE1CD;
border-bottom: 1px solid #CEE1CD;
}

#corps
 {
   float: left;
   background:#CEE1CD;
   border: 1px solid #2B5D2D;
   padding: 20px; 
   margin-top: 0px;
}

Modifié par Dindon (06 Aug 2005 - 05:22)
Aureance a écrit :

Tu feras attention, quand on est pas en charset UTF-8, il faut mettre les caractères spéciaux du html exemple pour les accents aigus : célébrités deviendra dans ton code
upload/579-eacute.jpg Sinon ça fera comme sur la deuxième image de capture dans pas mal de navigateurs.


<soupir> Smiley cligne

utf-8 n'est pas le seul jeu de caractères dans lequel les caractères accentués "français" peuvent être saisis directement. Ces caractères sont parfaitement pris en compte par iso-8859-
1, qui est le jeu adopté par Dindon, d'après le code cité dans son premier message. C'est même exactement le rôle d'iso-8859-1 dans cette série de jeux de caractères iso-8859-quelque-chose Smiley rolleyes


Dindon n'a donc aucun besoin de passer par &eacute; pour utiliser le caractère é, sauf si on veut lui compliquer la vie gratuitement.

Et faire en sorte que sa page ne soit pas rendue dans d'anciennes version de navigateurs ayant des problèmes avec les entités caractères...

Sauf, évidemment, si l'éditeur HTML qu'il utilise n'encode pas le texte en iso-8859-1. Auquel cas, il faut changer d'éditeur, et non de jeu de caractères. Voir Introduction aux jeux de caractères
Modifié par Laurent Denis (06 Aug 2005 - 09:29)
à sa décharge... quand Aureance a fait le commentaire, je n'avais mis aucun jeu de caractère dans ma feuille html.... Smiley cligne
Dindon a écrit :
à sa décharge... quand Aureance a fait le commentaire, je n'avais mis aucun jeu de caractère dans ma feuille html.... Smiley cligne


Il lui sera beaucoup pardonné Smiley cligne
Je parlais de l'éditeur HTML de Dindon, qui est la seule cause d'erreur possible sur un caractère é dans un document théoriquement en iso-8859-1 : contrairement à ce qu'espère Dindon, son éditeur n'encode pas le document dans ce jeu de caractère (et la méta n'y change rien, voir l'article mentionné ci-dessus).
Si le document est effectivement encodé en iso-8859-1 et que ce charset est appliqué par le navigateur, le é ne pose aucun problème.

Maintenant, si Dindon avait omis la déclaration du charset, et que ton navigateur a appliqué par exemple de l'utf-8 par défaut... il faut revoir la configuration de celui-ci Smiley cligne
Modifié par Laurent Denis (06 Aug 2005 - 16:14)
Laurent Denis a écrit :
Maintenant, si Dindon avait omis la déclaration du charset, et que ton navigateur a appliqué par exemple de l'utf-8 par défaut... il faut revoir la configuration de celui-ci Smiley cligne

En fait, il avait bien mis un charset (facile à voir plus haut ). J'ai choisi de configurer mon éditeur en utf-8 par défaut. Mais lors du "copicollage" et donc au moment de créer un nouveau document : j'ai bien choisi l'encodage correspondant ( charset=iso-8859-1 ). Même si je ne l'avais pas fait, j'aurais pu ré-ouvrir avec cet encodage.
Peut-être qu'il sagit du tag "code" du forum qui ré-encoderait différement ? cependant le forum est aussi en iso-8859-1... Alors, peut être le navigateur qui ouvre avec un autre encodage et que ça "m'enduit" ( comme disait Coluche ) copieusement dans l'erreur ?
Ben c'est de ma faute alors, j'édite mes pages au bloc notes... c'est sur que ça va pas aller.. mais j'ai compris je crois....

Meci d'avoir mis la page en ligne Aureance , mais j'ai le même résultats chez moi... sous Firefox, c'est bon, mais sous IE le border est visible entre l'onglet actif et le gros bloc de contenu et ne fait donc pas l'effet désiré.
as-tu comparé le résultat entre les 2 browser?
ou alors y'a encore qqch que je n'ai pas compris... ce qui est très possible.

merci d'essayer de m'aider en tout cas.
#navlist li a
{
padding: 3px 5px;
margin-left: 3px;
border: 1px solid #2B5D2D;
border-bottom: none;
background: #6D8F6B;
text-decoration: none;
[b]z-index: 1;
position: relative;[/b]
}
merci Laurent Denis.

J'avais déjà mis un z-index à cet endroit là.. sans succès; normal, j' avais omis de combiner avec la position relative, ça ne fonctionnait donc pas.

Donc, 2 fois merci. Une fois pour avoir résolu mon problème, et une fois pour m'apprendre à réfléchir.
et je peux enfin marqué le sujet comme [Résolu].
Pas si facile que ça le css, mais qu'est-ce que c'est amusant de construire son site, pas à pas, en progressant Smiley smile
Pages :