Bienvenue visiteur (Inscription |  Connexion)
Qui est en ligne ?
Il y a : 17 utilisateurs en ligne, consultez le détail

Forum » Serveur, Réseaux et Programmation » Aide en CSS !!! Nouveau problème !!!

 Forum modéré par : jblecanard

| Même auteur

Score ( voter ) :
Page : [1] 2
Auteur Message
Guimauve2
#0 Message posté le : 14-12-2006 à 07:47:52


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 Edit : voir mon dernier message

Bonjour à tous,

J'ai un site que je développe à temps (très) perdu, http://glinux.freezee.org/

Le problème, c'est qu'il utilise des tableaux et que les tableaux, c'est vieux.

J'ai donc décidé de remplacer le tout par des div (en virant les petits Tux temporairement).

Un problème se pose : je suis incapable d'aligner mes différents div de menu (il y a en plusieurs, qui doivent aller un en dessous de l'autre) !

Voici une capture d'écran sous Firefox :


Comment c'est fait :

Mes div (mes trois divs alignés qui sont censées être un sous l'autre) ont comme propriété CSS

float:left;

Ce qui leur permet d'être côte à côté avec le contenu. Or, si chaque div flotte à gauche, c'est normal qu'ils soient alignés !

J'aimerais donc qu'ils soient un par dessus l'autre au lieu d'un à côté de l'autre. Pour ce qui du position en X et en Y du premier div, je m'arrangerai, mais pour l'instant c'est pour (surtout pour le Y et pour le côte à côte avec le contenu).

Est-ce que quelqu'un a une idée ?

Merci,

Guimauve2

--Message édité par Guimauve2 le 14-12-2006 à 20:35:02--


-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
jblecanard
#1 Message posté le : 14-12-2006 à 11:54:14


Jedi


Forum : Modérateur
Association : Membre fondateur
Arrivé(e) le : 08-01-2005
Nombre de messages : 4030
 Salut

Pour aligner ces divs, il te suffit de créer un div menu qui va les contenir. Tu leur laisse simplement la proprtété display:block; pour être sûr qu'ils soient les uns sur les autres et tu ne leur affecte pas de propriété float. Tu règles les marges pour les espacer à ton goût. Puis pour mettre le menu a gauche du contenu, tu fais ça sur le div qui contient l'ensemble des menus.

je ne sais pas si j'ai été très clair...

--Message édité par jblecanard le 14-12-2006 à 11:54:39--


-------------------------------------
C'est une situation bien inconfortable que d'être assez sensible à la bêtise pour en souffrir et trop intelligent pour s'en indigner. - Gustave Thibon -
Guimauve2
#2 Message posté le : 14-12-2006 à 19:40:48


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 Parfaitement, j'essaie ça tout de suite !

-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
hartley
#3 Message posté le : 14-12-2006 à 19:45:37


Hobbit


Forum : Inscrit
Association :
Arrivé(e) le : 23-03-2003
Nombre de messages : 1962
Pour aligner ces divs, il te suffit de créer un div menu qui va les contenir.


Pas forcement, float te permet de positionner un element dans son parent.
En gros 3 div dans un div en float:left, ils se placerons tous à gauche les uns a la suite des autres.

Par contre si tu fais un float:left pour le premier et un clear: left pour les suivants ils vont tous se placer l'un en dessous de l'autre.

Plusieurs possibilités s'offre à toi.

A+

-------------------------------------
Linux's user #371109
Guimauve2
#4 Message posté le : 14-12-2006 à 19:48:06


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 Bon, ça marche !

Il va me rester à vérifier les marges, mais ça devrait fonctionner !

-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
Guimauve2
#5 Message posté le : 14-12-2006 à 20:34:38


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 Euh...

J'ai encore une question.

J'invite les "répondants" à voir ce à quoi je suis rendu sur http://glinux.freezee.org/glinux-new-design/

Comme vous pouvez-voir, les rubriques de gauche sont par dessus le div du bas (celui avec les logos divers). Ils prennent toute la place !

Est-ce qu'il ne serait pas possible de les confinés à être placé entre le menu du haut et les boutons en bas (comme le div de contenu) ?

Par ailleurs, si je mets une margin au div qui contient les div du menu, je me retrouve avec un alignement potable pour le menu (margin-left:40%), or si le texte dans le menu est plus long, la marge ne fonctionne plus (elle s'agrandit).

Quelqu'un aurait-il une idée ?

-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
hartley
#6 Message posté le : 14-12-2006 à 21:12:07


Hobbit


Forum : Inscrit
Association :
Arrivé(e) le : 23-03-2003
Nombre de messages : 1962
 Tu dois avoir ton bas de page (les logos) qui sont dans le même conteneur.

Essayes de scinder ta feuille.

<div page>

<div menu>
a l'interieur tes cadres
</div>

<div bas de page>
</div>
</div>

Tu dois avoir "div bas de page" dans ton conteneur "div menu".

Bizarre je ne peux voir le code de ta page via firefox

-------------------------------------
Linux's user #371109
Guimauve2
#7 Message posté le : 14-12-2006 à 21:53:19


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenue sur G-Linux!</title>
<link rel="stylesheet" href="./css.css" type="text/css" />
</head>
<body>

<table class="englobeur">

<tr>
<td style="text-align:left; padding-left:50px; background-image:url(./images/fond.png); width:100%;"><a href="./index.php"><img src="./images/fond_logo.png" border="0" alt="" /></a></td>
</tr>
<tr>
<td style="width:100%; height:1px; background-image:url('./images/point.png');"></td>
</tr>
<tr>
<td>
<div class="utilitaire">

<a href="./index.php">Accueil</a> | Forum | Contact | Liens
</div>
<div class="menuGauche">
<div class="section">
<b>Espace membre</b><ul class="menu"><li>- <a href="./inscription.php">Inscription</a></li><li>- <a href="./connexion.php">Connexion qui va faire planter le design</a></li></ul> </div>
<div class="section">

<b>Introduction</b>
<ul class="menu">
<li>
- <a href="./apropos.php">&Agrave; propos</a>
</li>
<li>
- <a href="./quoilinux.php">GNU/Linux?</a>

</li>
</ul>
</div>

<div class="section">
<b>Distributions</b>
<ul class="menu"><li>- <a href="./affiche_sous_cat.php?id=1">Mandriva</a></li><li>- <a href="./affiche_sous_cat.php?id=2">Ubuntu</a></li></ul></div>

</div>
<div class="contenu">
<h3>Accueil</h3>
<p>Bienvenue sur G-Linux! Ce site a pour
vocation de rassembler le plus d'informations possible concernant
GNU/Linux, syst&egrave;me d'exploitation libre concurrent du Windows,
ainsi que sur les logiciels libres en g&eacute;n&eacute;ral. Vous y
trouverez donc des tutoriaux, des pages d'informations, des liens,
etc.<br /><br />Notez qu'avec la rentr&eacute;e des classes, j'ai
moins le temps &agrave; consacrer au site, mais j'y travaille,
lentement mais s&ucirc;rement! Une bonne partie de la programmation
est termin&eacute;e, le syst&egrave;me des articles est donc en
place.</p>

</div>
<div class="logos">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88"
style="border:none;" /></a>

<a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88"
style="border:none;" /></a>

<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=70"><img border="0" alt="Get Firefox!" title="Get Firefox!"
src="http://sfx-images.mozilla.org/affiliates/Buttons/88x31/get.gif"/></a>
</div>
</td>
</tr>

</table> </body>
</html>


-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
Guimauve2
#8 Message posté le : 14-12-2006 à 22:05:22


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 Bon, j'en épuré le design au maximum : plus de tableaux, plus de logo en haut, rien !

http://glinux.freezee.org/

Seulement des div. Même en même un div global, ça ne semble pas fonctionner (quel style dois-je appliquer pour ce div ?)

Edit : même avec un div englobant le menu de gauche et le contenu (et non plus un div pour toute la page), ça ne fonctionne pas.

--Message édité par Guimauve2 le 14-12-2006 à 22:14:21--


-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
hartley
#9 Message posté le : 15-12-2006 à 00:04:37


Hobbit


Forum : Inscrit
Association :
Arrivé(e) le : 23-03-2003
Nombre de messages : 1962
 tu as une "entete"

<div id="entete"
met ce que tu veux dedans
</div>

tu veux un menu sur la gauche (float: left)

<div id="menu">
ul, li, a etc ...
</div>

tu as un "contenu" (texte, bla bla)

<div id="blabla">
</div>

selon la hierarchie, le contenu englobera ton menu de gauche, tu lui met un margin-left pour le decaler du menu de la gauche.

tu veux enfin un "pied de page"

<div id="pieddepage">
</div>

et tu le place avec la fonction clear.

normalement cela fonctionne.

J'essaye de te faire un petit modéle.

A+

-------------------------------------
Linux's user #371109
jblecanard
#10 Message posté le : 15-12-2006 à 17:26:13


Jedi


Forum : Modérateur
Association : Membre fondateur
Arrivé(e) le : 08-01-2005
Nombre de messages : 4030
 La méthode d'Hartley est bonne. Je valide.

Regarde http://openweb.eu.org/
c'est très propre

Avec l'inspecteur de DOM de FF tu verras facilement comment la page est organisée.




--Message édité par jblecanard le 15-12-2006 à 17:30:10--


-------------------------------------
C'est une situation bien inconfortable que d'être assez sensible à la bêtise pour en souffrir et trop intelligent pour s'en indigner. - Gustave Thibon -
Guimauve2
#11 Message posté le : 15-12-2006 à 21:14:13


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 J'ai réglé le problème pour le bas avec la propriétés clear, je vais "gosser" le padding et le margin maintenant.

--Message édité par Guimauve2 le 15-12-2006 à 21:21:08--


-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
hartley
#12 Message posté le : 15-12-2006 à 22:35:28


Hobbit


Forum : Inscrit
Association :
Arrivé(e) le : 23-03-2003
Nombre de messages : 1962
 En fait je crois que le plus important avec le CSS c'est de comprendre le systéme d'imbrication des differents elements dans la page avec les position absolute, fixed, float etc..

A+

-------------------------------------
Linux's user #371109
Guimauve2
#13 Message posté le : 16-12-2006 à 05:48:36


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 C'est quoi une position en em ?

-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
hartley
#14 Message posté le : 16-12-2006 à 14:26:22


Hobbit


Forum : Inscrit
Association :
Arrivé(e) le : 23-03-2003
Nombre de messages : 1962
 Bonjour,

em est une unité relative de la largeur de ton caractére le plus large en majuscule, on appele "em" cadratin.

regardes sur google le treme "cadratin"

A+

-------------------------------------
Linux's user #371109
Guimauve2
#15 Message posté le : 16-12-2006 à 20:51:23


Naboo


Forum : Inscrit
Association :
Arrivé(e) le : 22-07-2003
Nombre de messages : 2128
 Bon, voici ce que ça donne présentement : http://glinux.freezee.org/

Je n'ai pas beaucoup travaillé dessus depuis vendredi, car je me concentre sur un examen de C++ (DirectX...) qui est mardi.

Je suis encore bloqué sur la margin de mon tableau à gauche, qui change si la largeur du div change...

-------------------------------------
GNU/Linux? Il y a moins bien, mais c'est plus cher!

Mon blog (pas très souvent updaté, mais tout de même...) : http://guimauve2.blogspot.com/
Page : [1] 2

Forum » Serveur, Réseaux et Programmation » Aide en CSS !!! Nouveau problème !!!

 Forum modéré par : jblecanard

| Même auteur

Score ( voter ) :