labarique

Bonjour, mes frères et moi aimerions bénéficier d'un hébergement web pour nos blogs respectifs. Chacun a son nom de domaine (site1.fr, site2.fr, site3.fr) et nous aimerions donc acheter un hébergement web commun sur lequel nous installerions nos blogs dans des répertoires distincts (siteprincipal/site1, siteprincipal/site2, siteprincipal/site3). Le but étant de faire des économies. J'ai plusieurs questions à ce sujet : - pour que site1.fr renvoie bien vers siteprincipal/site1, il faut que je modifie les DNS de mon nom de domaine, non ? De quelle manière ? - est-il possible de procéder à une réécriture d'URL tel que siteprincipal/site1 s'affiche bien sous la forme site1.fr (rendant la redirection invisible) ? Si oui, comment ? - la formule du serveur dédié étant coûteuse, pensez-vous qu'un hébergement classique, chez Infomaniak par exemple, permette cette manoeuvre ? D'avance merci, P.

Non, cela ne fonctionne pas non plus. Mais merci pour la suggestion... Je continue à chercher...

Bonjour, j'ai un souci pour la mise en page de mon site web : je ne parviens pas à coder proprement un affichage sous formes de colonnes. Mon problème est le suivant : j'aimerais réussir à définir une class .colonne de façon à ce qu'elle me permette d'afficher le contenu choisi sous formes de colonnes. A priori, ça a l'air simple, la seule contrainte étant qu'il ne doit pas y avoir de class .colonnedroite et .colonnegauche, puisque la class est intégrée dans une boucle SPIP (qui reproduira donc plusieurs fois : div class="colonne"). Pour info : il y a 4 éléments qui vont être ainsi affichés. Voici mon code html (qui simule le résultat produit par SPIP) <div class="cellule_sommaire"> <H2>CONNAISSANCES</H2> <div class="colonne"> <span class="entete">Article scientifique</span> <ul class="connaissances"> <li>Article 1</li> <li>Article 1</li> <li>Article 1</li> </ul> </div> <div class="colonne"> <span class="entete">Sites Web</span> <ul class="sites"> <li>Article 1</li> <li>Article 1</li> </ul> </div> <div class="colonne"> <span class="entete">Autres documents</span> <ul class="livres"> <li>Article 1</li> <li>Article 2</li> <li>Article 3</li> </ul> </div> <div class="colonne"> <span class="entete">Encyclopédie</span> <ul class="encyclo"> <li>Article 1</li> <li>Article 2</li> <li>Article 3</li> </ul> </div> </div> Et le code CSS afférent : .cellule_sommaire { font-size: small; clear: left; padding-bottom: 5px; } .colonne{ width: 48%; float: left; border-color: #f40; border-style: solid;} En l'état, la colonne 1 et 2 s'alignent bien côte à côte, mais comme la colonne 2 est plus courte, la colonne 3 vient se mettre juste en dessous d'elle, touchant le bord de la colonne 1. Du coup, la colonne 4 se met sous la colonne 3 mais aligné avec la colonne 1, ce qui donne un grand vide entre le bas de la colonne 1 et le haut de la colonne 4. xxxxx-COLONNE 1-xxxxxx-COLONNE2 - xxxx xxxxx-Texte1-xxxxxxxxxx - Texte 2 - xxxxx xxxxx-Texte 1-xxxxxxxxx - Texte2 - xxxxxx xxxxx-Texte 1-xxxxxxxxx - COLONNE 3 -xxx xxxxxxxxxxxxxxxxxxxxx - Texte3-xxxxxxxx xxxxxxxxxxxxxxxxxxxxx - Texte3-xxxxxxxx xxxxxxxxxxxxxxxxxxxx - Texte 3 - xxxxxxx xxxxx-COLONNE 4-xxxxxxxxxxxxxxxxxxxxx xxxxx-Texte 4 -xxxxxxxxxxxxxxxxxxxxx xxxxx-Texte 4 -xxxxxxxxxxxxxxxxxxxxxx Si je mets clear:left dans .colonne, alors les balises s'alignent les unes sur les autres . Quelqu'un aurait-il une idée ? D'avance merci !

Merci pour vos réponses. Effectivement, c'était un problème de chemin ! Merci encore.

Bonjour, mon problème est le suivant : dans une div intitulée "cellule_sommaire", j'ai défini des propriétés pour les listes (balises UL et LI). Le problème c'est que je voudrais ensuite pouvoir personnaliser les icones de la liste suivant les situations (class="connaissances", class="sites", class="livres", avec pour chacune de ces class d'UL une list-style-image: url(IMG/image_n.gif) . A mon avis, il doit y avoir dans mon CSS des éléments définissant UL et LI qui rentrent en conflit, à moins que ce ne soit la syntaxe "ul.connaissances" qui soit fausse. Comme je ne comprends pas encore bien la syntaxe des styles imbriqués, j'aurais bien besoin de votre aide ! D'avance merci. Mon code HTML : <div class="cellule_sommaire"> <H2>CONNAISSANCES</H2> <div class="colonne"> <span class="entete">Article scientifique</span> <ul class="connaissances"> <li>Article 1</li> <li>Article 1</li> <li>Article 1</li> </ul> </div> <div class="colonne"> <span class="entete">Sites Web</span> <ul class="sites"> <li>Article 1</li> <li>Article 1</li> <li>Article 1</li> </ul> </div> <div class="colonne"> <span class="entete">Autres documents</span> <ul class="livres"> <li>Article 1</li> <li>Article 1</li> <li>Article 1</li> </ul> </div> </div> Le code CSS afférent : .cellule_sommaire{ font-size: small; clear: left; padding-bottom: 5px; } .cellule_sommaire ul { font-weight: bold; margin-bottom: 0; margin-left: -24px; margin-right: 1em; } .cellule_sommaire ul li { font-size: small; margin-top: 0em; margin-left: 10px; margin-right: 0; vertical-align: -2px; } ul.connaissances { list-style-image: url(IMG/icone4.gif) } ul.sites { list-style-image: url(IMG/icone5.gif) } ul. livres { list-style-image: url(IMG/icone6.gif) } .colonne{ width: 32%; float: left; border-color: #f40; border-style: solid;} .entete{ font-style: italic;}

Merci pour vos réponses. Effectivement, cela permet de garder le code beaucoup plus propre. Comme vous êtes si sympathiques, j'ai posé une nouvelle question...

Non, cela ne fonctionne pas. Si je mets, par exemple : #entete a:link, a:hover {blabla} la propriété blabla n'est pas appliquée..., mon navigateur va chercher la propriété a:hover générale.

Bonjour, dans mon fichier CSS, j'ai à plusieurs reprises des balises de type ".element1 a:link" et ".element1 a:visited" qui sont les mêmes. Suis-je obligé de détailler à chaque fois leur contenu où pourrais-je faire une balise commune dans mon CSS du type ".element1 a:link a:visited" ? D'avance, merci.

Bonjour, je suis perdu ! Je souhaite afficher du contenu sous formes de colonnes, mais je n'arrive pas à aligner les <DIV> ! Voici le code html en question : <DIV CLASS="milieu_sommaire"> <DIV class="cellule_sommaire"> CONNAISSANCES <DIV CLASS="colonne"> <I>Article scientifique</I> <UL><LI style="list-style-image: url(IMG/icone4.gif)"> <SPAN CLASS="listepuce">Article 1</A></SPAN></LI> <LI style="list-style-image: url(IMG/icone4.gif)"> <SPAN CLASS="listepuce">Article 1</A></SPAN></LI> <LI style="list-style-image: url(IMG/icone4.gif)"> <SPAN CLASS="listepuce">Article 1</A></SPAN></LI> </UL> </DIV> <DIV CLASS="colonne"> <I>Sites Web</I> <UL><LI style="list-style-image: url(IMG/icone4.gif)"> <SPAN CLASS="listepuce">Article 1</A></SPAN></LI> <LI style="list-style-image: url(IMG/icone4.gif)"> <SPAN CLASS="listepuce">Article 1</A></SPAN></LI> </UL> </DIV> <DIV CLASS="colonne"> <I>Autres documents</I> <UL><LI style="list-style-image: url(IMG/icone4.gif)"> <SPAN CLASS="listepuce">Article 1</A></SPAN></LI> <LI style="list-style-image: url(IMG/icone4.gif)"> <SPAN CLASS="listepuce">Article 1</A></SPAN></LI> </UL> </DIV> </DIV> </DIV> Et les éléments CSS afférents : .milieusommaire { padding-left: 36px; width: 800px; float: left; clear: right; } .cellule_sommaire { font-size: small; width: 100%; float: left; clear: left; clear: right; } .colonne { width: 48%; float: left; border-color: #f40; border-style: solid; } .listepuce { color: black; font-size: x-small; vertical-align: 3px; } Quelqu'un peut-il m'aider ? Je suis perdu dans tous mes clear et float...

Désolé, je n'ai pas dû bien comprendre ta réponse... Je n'y arrive vraiment pas !

Promis, c'est ma dernière question de la journée... ;-)

Bonjour, je souhaite dorénavant séparer deux colonnes (deux <DIV colonnes> au sein d'un <DIV zone de texte>) par un trait. Comment faire pour que ce trait soit de la longueur de la cellule la plus longue de ce "faux tableau" (que j'aurais codé en TABLE TD TD très simplement il y a quelques années) ? Ici, c'est entre les deux cellules roses que je souhaiterais insérer ce trait... Pour info, une petite partie de mon CSS : CODE <HTML> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html dir="#LANG_DIR" lang="#LANG"> <head> <title>[(#NOM_SITE_SPIP|textebrut)]</title> [<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />] <style type="text/css" title="mes_styles" media="all"> <!-- body { font-family: Verdana, Geneva, Arial, sans-serif; line-height: 180%; background-color: #F4F4F4; margin: 0 } #en_tete {position : relative; background-color: #F4F4F4; height: 130px } .nav_gauche { text-align: right; width: 20%; float: left } .milieu { padding-left: 36px; width: 50%; float: left; } .cellule_milieu { background: #E6E6FA; font-size: small; width: 100%; clear: left } .cellule_milieu h1 {background: #E6E6FA; font-weight: bold; font-size: 12px; width: 100%; background-color: #6b6c5a } .col_milieu { width: 50%; margin: 1px solid #000; font-size: 12px; background-color: #FF1493; float: left; } .nav_droite { font-size: 10px; font-style: italic; line-height: 20px; padding-left: 3%; width: 15%; float: left } #pied-de-page { color: white; font-size: 9px; line-height: 16px; background-color: #6b6c5a; text-align: center; letter-spacing: 6px; height: 16px; clear: left } --> </style> </head> <BODY> <div id="en_tete"><img src="IMG/logo_mv.png" ></div> <div class="nav_gauche"> <p> </p> <P>Actualités<P> <P>Séminaires<P> <P>Expériences></P> <p> </p> </DIV> <div class="milieu"> <Div class="cellule_milieu"> <H1>Actualités</H1> <DIV CLASS="col_milieu">Petit texte assez intéressant.</DIV> <DIV CLASS="col_milieu">QQSD QDQSDLK JKL lkjsfdjkl j lksflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj. </DIV> </Div> <BR /> <Div class="cellule_milieu"> <H1>Expériences</H1> QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j <STRONG>lksdjflkjsdlkf</STRONG> sklfjklj.QQSDlkjsdlkf sklfjklj. </Div> </DIV> <DIV CLASS="nav_droite"> <div class="element-de-menu">Derniers commentaires</DIV> <div class="element-de-menu">Derniers documents</DIV> </DIV> </BODY> </HTML> Merci !

Super, et merci encore. J'avais compris que les float et les clear étaient des balises particulièrement clés, mais je ne les maîtrise pas encore très bien. Je vais me replonger un peu dans la littérature... Juste une dernière chose : avec le clear:left, ça marche, mais mon div de gauche ("actualité du jour") est plus court(e) que mon div de droite ("actualité du mois"). Comme le background de ces cellules est rose, ça se voit. Evidemment, je peux jouer sur les couleurs de background pour harmoniser tout ça. Mais imaginons que je veuille conserver ces cellules roses (si si, imaginons...) : comment faudrait-il procéder pour harmoniser les hauteurs des deux colonnes (qui sont toutes deux des div class="col_milieu") ??

Rebonjour, et merci pour la rapidité de ta réponse ! Effectivement, j'avais totalement manqué cette révolution des <DIV>. De mon temps, comme on dit, je codais toute la mise en page en crachant des TR, TD, TABLE à la volée. C'était très bourrin, mais très efficace. Ce qui m'étonne avec les DIV, ce sont les différences d'affichage selon les navigateurs. J'ai corrigé les bugs que tu m'as indiqués, mais j'en ai trouvé d'autres, notamment un petit souci que je qualifierai de "dégoulinage de <div>", particulièrement visible sous Firefox... CODE <HTML> <!-- CODE SPIP DE BASE --> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html dir="#LANG_DIR" lang="#LANG"> <head> <title>[(#NOM_SITE_SPIP|textebrut)]</title> [<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />] <style type="text/css" title="mes_styles" media="all"> <!-- body { font-size: small; font-family: Verdana, Geneva, Arial, sans-serif; line-height: 180%; background-color: #F4F4F4; margin: 0 } #en_tete {position : relative; background-color: #F4F4F4; height: 130px } #navigation { color: white; font-family: Verdana; font-size: 9px; line-height: 16px; background-color: #82836D; text-align: center; letter-spacing: 6px; margin-bottom: 15px; height: 16px } .nav_gauche { text-align: right; width: 20%; float: left } .element-de-menu { color: #758642; margin-top: 20px; margin-left: 20px; border-top: 0 none; border-right: 0 none; border-bottom: 1px dotted #758642; border-left: 0 none } .milieu { padding-left: 36px; width: 50%; float: left; } .cellule_milieu { background: #E6E6FA; font-size: small; width: 100%; } .cellule_milieu h1 {background: #E6E6FA; font-weight: bold; font-size: 12px; width: 100%; background-color: #6b6c5a } .col_milieu { width: 50%; margin: 1px solid #000; font-size: 12px; background-color: #FF1493; float: left; } .nav_droite { font-size: 10px; font-style: italic; line-height: 20px; padding-left: 3%; width: 15%; float: left } #pied-de-page { color: white; font-size: 9px; line-height: 16px; background-color: #6b6c5a; text-align: center; letter-spacing: 6px; height: 16px; clear: left } --> </style> </head> <BODY> <div id="en_tete"><img src="IMG/logo_mv.png" alt="Mondes Virtuels" height="124" width="413" border="0"></div> <div id="navigation"><a href="#">ACCUEIL</a> | <a href="#">HISTOIRE</a> | <a href="#">NATURE</a> | <a href="#">VISITEURS</a> |<a href="#"> CONTACT</a></div> <div class="nav_gauche"> <p> </p> <div class="element-de-menu">Actualités</DIV> <div class="element-de-menu">Séminaires</DIV> <div class="element-de-menu">Expériences</DIV> <div class="element-de-menu">Documentation</DIV> <div class="element-de-menu">Encyclopédie</DIV> <p> </p> </DIV> <div class="milieu"> <a href="#paragraphe"> Ceci est un lien vers le bas de ma page d'accueil </a> <Div class="cellule_milieu"> <H1>Actualités</H1> <DIV CLASS="col_milieu"><STRONG>Actus du jour</STRONG><BR />Petit texte assez intéressant.</DIV> <DIV CLASS="col_milieu"><STRONG>Actus du mois</STRONG><BR />QQSD QDQSDLK JKL lkjsfdjkl j lksflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj. </DIV> </Div> <BR /> <Div class="cellule_milieu"> <H1>Expériences</H1> <DIV CLASS="col_milieu"><STRONG>Expérience du jour</STRONG><BR />Petit texte assez intéressant.</DIV> <DIV CLASS="col_milieu"><STRONG>Expérience du mois</STRONG><BR />QQSD QDQSDLK JKL lkjsfdjkl j lksflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj. </DIV> </Div> </DIV> <DIV CLASS="nav_droite"> <div class="element-de-menu">Derniers commentaires</DIV> <div class="element-de-menu">Derniers documents</DIV> </DIV> <div id="pied-de-page"> <a href="#">ACCUEIL</a> | <a href="#">HISTOIRE</a> | <a href="#">NATURE</a> | <a href="#">VISITEURS</a> |<a href="#"> CONTACT</a> </div> </BODY> </HTML>

Bonjour, nouveau dans le monde du CSS, je viens de me lire le tutoriel en 15 parties de pompage.net (http://www.pompage.net/pompe/cssdezero-1/) avant de me lancer dans la réalisation d'une mise en page pour mon site. Une fois cette lecture achevée, je me retrouve avec un souci dans la composition de ma page : je souhaite mettre le contenu d'une div en deux colonnes, elles mêmes codées en div. Pourtant, alors qu'il y a la place pour qu'elles soient l'une à la suite des autres, les deux <DIV> (en rose) s'empilent. Quelqu'un a-t-il une idée ? Ci-joint mon fichier html. D'avance merci ! CODE <HTML> <!-- CODE SPIP DE BASE --> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html dir="#LANG_DIR" lang="#LANG"> <head> <title>[(#NOM_SITE_SPIP|textebrut)]</title> [<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />] <style type="text/css" title="mes_styles" media="all"> <!-- body { background-color: #F4F4F4; margin: 0 } #en_tete {position : relative; background-color: #F4F4F4; height: 130px } #navigation { color: white; font-family: Verdana; font-size: 9px; line-height: 16px; background-color: #82836D; text-align: center; letter-spacing: 6px; margin-bottom: 15px; height: 16px } .nav_gauche { text-align: right; width: 20%; float: left } .element-de-menu { color: #758642; margin-top: 20px; margin-left: 20px; border-top: 0 none; border-right: 0 none; border-bottom: 1px dotted #758642; border-left: 0 none } .element-de-menu a:link { color: #758642; text-decoration: none } .element-de-menu a:hover { color: #c63; text-decoration: none } .milieu { padding-left: 36px; width: 50%; float: left; } .cellule_milieu { background: #E6E6FA; font-size: small; width: 100%; } .cellule_milieu_titre { background: #E6E6FA; font-weight: bold; font-size: 12px; width: 100%; background-color: #6b6c5a; } .col_milieu { width: 50%; border: 1px solid #000; font-size: 12px; background-color: #FF1493; } .nav_droite { font-size: 10px; font-style: italic; line-height: 20px; padding-left: 3%; width: 15%; float: left } #pied-de-page { color: white; font-size: 9px; line-height: 16px; background-color: #6b6c5a; text-align: center; letter-spacing: 6px; height: 16px; clear: left } p { text-indent: 3em} ul {margin: 1em 0 1em 40px } ul li { margin: .5em 0 .5em 0 } --> </style> </head> <BODY> <div id="en_tete">TITRE DE LA PAGE</div> <div id="navigation"><a href="#">ACCUEIL</a> | <a href="#">HISTOIRE</a> | <a href="#">NATURE</a> | <a href="#">VISITEURS</a> |<a href="#"> CONTACT</a></div> <div class="nav_gauche"> <p> </p> <div class="element-de-menu">Actualités</DIV> <div class="element-de-menu">Séminaires</DIV> <div class="element-de-menu">Expériences</DIV> <div class="element-de-menu">Documentation</DIV> <div class="element-de-menu">Encyclopédie</DIV> <p> </p> </DIV> <div class="milieu"> <Div class="cellule_milieu"> <DIV CLASS="cellule_milieu_titre">Actualités</DIV> <DIV CLASS="col_milieu">Petit texte assez intéressant.</DIV> <DIV CLASS="col_milieu">QQSD QDQSDLK JKL lkjsfdjkl j lksflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj. </DIV> </Div> <BR /> <Div class="cellule_milieu"> <DIV CLASS="cellule_milieu_titre">Expériences</DIV> QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j <STRONG>lksdjflkjsdlkf</STRONG> sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj. </Div> </DIV> <div id="pied-de-page"> <a href="#">ACCUEIL</a> | <a href="#">HISTOIRE</a> | <a href="#">NATURE</a> | <a href="#">VISITEURS</a> |<a href="#"> CONTACT</a> </div> </BODY> </HTML>