28218 sujets

CSS et mise en forme, CSS3

Pages :
J'ai fait une liste dans un bloc, qui me servira de menu (balise UL ect...)
Peux t'on supprimé les puce qui apparaisse ?
Un autre problème, 2 bloc sont dans un contenaire, et ont une bordure de 1 pixel, comment fait t'on pour qu'il y ait un coté sans bordure ? (car la ou les blocs se touchent ça fait 2 pixelles)
Et le dernier problème, quand j'écris un text dans le bloc : centre, il déborde quand il est trop grand. Comment fait on pour qu'il revienne à la ligne automatiquement.
Merci.
Répondez moi sachant que j'ai débuté la programmation cet après midi (pas de réponse compliqué svp)
Merci de votre taff


body {
margin: 0;
}

#head {
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     border: 1px solid #000;	 
     }
	 
#menu1 {
     margin-top: 10px;
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     border: 1px solid #000;
     text-align: center ; 	
     font: bold 16px Times ; 	 
     }
	 
#conteneur {
position: absolute;
margin-top: 10px;
width: 900px;
left: 50%;
margin-left: -450px;
margin-right: -450px;
background-color:#ffffff;
}
	 
#centre {
background-color:#ffffff;
margin-left: 150px;
border: 1px solid #000;
}
#gauche {
position: absolute;
left:0;
width: 150px;
border: 1px solid #000;
}
	 
a.menu1:link{
color: green;
text-decoration: none;}
a.menu1:visited{
color: green;
text-decoration: none;}
a.menu1:hover{
color: green;
text-decoration: underline;}
a.menu1:active{
color: green;
text-decoration: underline;}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Title" lang="fr" content="Softiz - La gratuité sous windows" />
<meta name="Identifier-url" content="http://izbing.free.fr/test" />
<meta name="Description" lang="fr" content="Logiciel gratuit sous windows, nombreux tutoriaux, forum et chat" />
<meta name="Keywords" lang="fr" content="windows, libre" />
<meta name="Date-Creation-yyyymmdd" content="20050508" />
<title>Softiz - La gratuité sous windows</title>
<link rel="stylesheet" href="style.css" type="text/css" title="Softiz" />
</head>
<body>
<div id="head"><img src="head.jpg" alt="Softiz - La gratuité sous windows" /></div>
<div id="menu1">
<a href="" class="menu1" title="Page principale">Accueil</a> - 
<a href="" class="menu1" title="Les membres de l'équipe">Equipe</a> - 
<a href="" class="menu1" title="Demandez, parlez, partagez sur le forum">Forum</a> - 
<a href="" class="menu1" title="Chattez avec nous">Chat</a> - 
<a href="" class="menu1" title="Une selection des meilleurs liens du web">Liens</a> - 
<a href="" class="menu1" title="Contactez nous">Contact</a>
</div>
<div id="conteneur">
<div id="gauche">
<UL>
    <LI>Liste 1
    <LI>Liste 2
	<LI>Liste 2
	<LI>Liste 2
	<LI>Liste 2
	<LI>Liste 2
	<LI>Liste 2
	<LI>Liste 2
	<LI>Liste 2
	<LI>Liste 2
</UL>
</div>
<div id="centre">Contenue</div>
</div>
</body>
</html>

Modifié par Froltar (09 May 2005 - 01:20)
Si


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


alors 0 majuscule dans le code html

si

<ul>
<li>item1
</ul>


alors


<ul>
<li>item1[#red]</li>[/#]
</ul>


Remarque : met les css de coté pendant 1 semaine et concentre toi sur le codage html (bis repetita Smiley rolleyes )
Modifié par clb56 (08 May 2005 - 19:28)
C'est réparé.
Non c'est bon le HTML je commence à comprendre.
Merci Smiley cligne
Pour le bord merci beaucoup.
Il déborde sur la droite dans le bloc : Centre
Modifié par Froltar (08 May 2005 - 19:21)
clb56 a écrit :

alors 0 minuscule dans le code html

Je crois que tu voulais dire 0 majuscule. Smiley cligne
border: 1px 1px 1px 0;

Quand je fais ça il n'y a plus de bord du tout Smiley ohwell
Bibop c'est bon je le savais déjà mais juste un oublie Smiley murf
Modifié par Froltar (08 May 2005 - 19:27)
Ce que clb56 a tenté de t'expliquer, c'est que XHTML est sensible à la casse. Donc, tous les éléments doivent s'écrirent en minuscules (sauf exceptions tel le DOCTYPE).

De plus, chaque balise doit être fermée :

<li></li>
<p></p>
etc...

De même que les éléments vides :

<br /> <hr />

Pour en savoir plus : XHTML en une heure
Modifié par Stephan (08 May 2005 - 19:30)
border: 1px 1px 1px 0 solid #000;


Il faut tout définir bien sûr ...

Fais VRAIMENT un tour par les tutos Smiley cligne
g41687 a écrit :

Un bord de trop (ici à droite) ? :
border: 1px 1px 1px 0;


euh... Ça c'est gauche Smiley cligne

L'ordre est : top, right, bottom, left.

D'ailleur, je ne connaissais pas cette propriété doublement raccourcie. Je vérifie.
border: 1px 1px 1px 0 solid #000;

Modifié par Stephan (08 May 2005 - 19:47)
C'est exactement ce que j'avais fait.
Mais je n'ai quand même pas de bordure.
Mon site est valide XHTML 1.0 Strict.
Si vous voulez voir ce que ça donne avec le code source :
http://izbing.free.fr/

CSS :

body {
margin: 0;
}

#head {
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     border: 1px solid #000;	 
     }
	 
#menu1 {
     margin-top: 10px;
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     border: 1px solid #000;
     text-align: center ; 	
     font: bold 16px Times ; 	 
     }
	 
#conteneur {
position: absolute;
margin-top: 10px;
width: 900px;
left: 50%;
margin-left: -450px;
margin-right: -450px;
background-color:#ffffff;
}
	 
#centre {
background-color:#ffffff;
margin-left: 150px;
border: 1px solid #000;
}
#gauche {
position: absolute;
left:0;
width: 150px;
border: 1px 1px 1px 0 solid #000;
}

ul {
 list-style-type:none; }
	 
a.menu1:link{
color: green;
text-decoration: none;}
a.menu1:visited{
color: green;
text-decoration: none;}
a.menu1:hover{
color: green;
text-decoration: underline;}
a.menu1:active{
color: green;
text-decoration: underline;}
	
g41687 a écrit :
border: 1px 1px 1px 0 solid #000;


Il faut tout définir bien sûr ...

Fais VRAIMENT un tour par les tutos Smiley cligne

Après vérification, Le service de validation CSS du W3C interprète cette déclaration par :

border : 1px none inherit;

Ce qui est loin du résultat escompté.

À trop vouloir aider, on finit par embrouiller. Smiley ohwell
2 questions

1. Y a t'il une raison particulière à ce que


<div id="menu1">
<a href="" class="menu1" title="Page principale">Accueil</a> - 

<a href="" class="menu1" title="Les membres de l'équipe">Equipe</a> - 
<a href="" class="menu1" title="Demandez, parlez, partagez sur le forum">Forum</a> - 
<a href="" class="menu1" title="Chattez avec nous">Chat</a> - 
<a href="" class="menu1" title="Une selection des meilleurs liens du web">Liens</a> - 
<a href="" class="menu1" title="Contactez nous">Contact</a>
</div>


Ne soit pas


<ul id="menu1">
<li><a href="" class="menu1" title="Page principale">Accueil</a></li>

<li><a href="" class="menu1" title="Les membres de l'équipe">Equipe</a></li>
<li><a href="" class="menu1" title="Demandez, parlez, partagez sur le forum">Forum</a></li> 
<li><a href="" class="menu1" title="Chattez avec nous">Chat</a></li> 
<li><a href="" class="menu1" title="Une selection des meilleurs liens du web">Liens</a></li>
<li><a href="" class="menu1" title="Contactez nous">Contact</a></li>
</ul>


2. à quoi correspond cette liste


<div id="gauche">

<ul>
    <li>Liste 1</li>
    <li>Liste 2</li>
	<li>Liste 1</li>
    <li>Liste 2</li>
	<li>Liste 1</li>
    <li>Liste 2</li>

	<li>Liste 1</li>
    <li>Liste 2</li>
	<li>Liste 1</li>
    <li>Liste 2</li>
	<li>Liste 1</li>
    <li>Liste 2</li>

</ul>
</div>


ce sera un menu ?

Fait t'elle partie du contenu ou de l'environnement ?

Si c'est de l'environnement il n'est sans doute pas judicieux de mettre cet élément dans #conteneur.

Petit point :


<div id="gauche">


ne sert à rien, il suffit de mettre


<ul id="gauche">
Clb56 j'ai fait tes corrections mes cela à encore plus embrouille (débordement de cadre)
Et la liste sera en effet un menu
Modifié par Froltar (08 May 2005 - 20:01)
clb56 a écrit :

Petit point :

<div id="gauche">

ne sert à rien, il suffit de mettre

<ul id="gauche">


À moins bien sûr qu'il ne soit prévu d'ajouter autre chose dans ce groupe en plus d'une liste de liens Smiley cligne
Oui il y aura surement quelques logo ou image.
Comment dois je faire avec le problèmes de débordement et de pixel ?
pour les id Menu1 je ferais ça plus tard, merci de la remarque Smiley cligne
À propos, il n'y a absolument rien qui oblige à grouper les liens sous forme de liste.
Tout ce que les Directives pour l'accessibilité aux contenus Web (version 1.0) proposent est :
Points de contrôle de priorité 3 a écrit :

10.5 Tant que les agents utilisateurs (incluant les technologies d'assistance) n'afficheront pas les liens adjacents distinctement, incluez des non-liens, des caractères imprimables (entourrés par des espaces) entre deux liens adjacents.

Points de contrôle de priorité 3 a écrit :

13.6 Groupez les liens apparentés, identifiez le groupe (pour les agents utilisateurs), et, tant que les agents utilisateurs ne le font pas, fournissez un moyen de contourner le groupe.

http://www.la-grange.net/w3c/wcag1/full-checklist.html

On choisi les listes à puce parce que souvent, c'est plus pratique.

@Froltar
[ Désolé de ne pas avoir répondu à ta question, mais je me devais de clarifier certains points. ]
Modifié par Stephan (08 May 2005 - 20:19)
Stephan a écrit :


On choisi les listes à puce parce que souvent, c'est plus pratique.


hum plutôt parce que celà fait très naturellement sens. Après tout un menu n'est constitué que d'une série d'item qui sont des liens.

Perso je ne voie rien de pratique ou de non pratique dans l'utilisation d'une liste. C'est adéquat simplement.
Modifié par clb56 (08 May 2005 - 20:21)
Administrateur
En fait, je pense que ce document est devenu une sorte de "référence" pour l'utilisation des listes pour les menus :

http://www.la-grange.net/w3c/html4.01/struct/lists.html#h-10.4
W3C a écrit :
L'élément MENU était conçu pour les listes de menu sur une seule colonne. Les deux éléments ont la même structure que l'élément UL, seule leur restitution diffère. En pratique, l'agent utilisateur restituera une liste DIR, ou MENU, exactement comme une liste UL.

Nous recommandons fortement d'utiliser l'élément UL à leur place.
Pages :