Tom's Guide > Forum > Programmation > [css, html] problème de code css et de mise en page html [résolu]

[css, html] problème de code css et de mise en page html [résolu]

Forum Programmation : [css, html] problème de code css et de mise en page html [résolu]

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

salut à tous.

j'ai un petit soucis. depuis peu, comme j'arrivai pas à m'en sortir avec une mise en page de site, j'ai été prendre un layout css sur le net, et quand j'ai regardé le code css, ô surprise : le bazar total !! j'ai donc commencé par l'adapter le plus grossièrement possible, mais ayant en permanence une marge gauche et droite imposée au corps de ma page, je me suis amusé à virer tout ce qui était de trop dans le code css, afin de mieux le comprendre.

Chose faite, et je le comprend mieux, mais "mieux" c'est pas "bien"...

Donc je me suis permis d'ouvrir ce sujet pour demander de l'aide, car je sèche un peu là...

Voici le code CSS qui reste :

Code :

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{margin:0;padding:0;}
#yui-main
.yui-b
{position:static;}
#yui-main
{width:100%;}
.yui-t4
#yui-main,.yui-t5
#yui-main,.yui-t6
#yui-main
{float:left;margin-right:-25em;}
.yui-t4
#yui-main
.yui-b
{margin-right:150px;}
.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc
.yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u
{float:left;}
.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g
.yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first
{float:left;}
.yui-u
{width:82%;}
#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after
{content:".";display:block;height:0;clear:both;visibility:hidden;}

et le code html

Code :

<html>
<head>
<title> titre de ma page</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body bgcolor="black">
<div id="doc3" class="yui-t4">
<div id="hd" style="height:68px;">
en-tête
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first" style="width:150px;">
menu de gauche
</div>
<div class="yui-u" style="background-color: black; color: white;" width="100%">
corps du document qui commence a 150px du bord de gauche
mais qui fait 82% :s (la taille du yui-u du fichier css)
et qui saute à la ligne en dessous des menus quand on réduit
la taille de la page par la souris (resize)
je veux qu'il commence à 150px du bord gauche effectivement
mais qu'il s'arrête à 150px du bord de droite... et qu'on puisse
le réduire en taille à volonté sans que la mise en page ne bouge...
</div>
</div>
</div>
</div>
<div class="yui-b" align="right">
menu de droite
</div>
</div>
<div id="ft">
pied de page
</div>
</div>
</body>
</html>

voilà si quelqun pouvait me venir en aide ce serait vraiment cool, parce que je comprend pas vraiment le principe de ce code css là... j'entrave rien. d'habitude oui mais là nan...

Message édité par cynoque le 30-03-2009 à 04:46:19

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

Tu peux réduire la taille de ta div pour qu'elle ne dépasse pas l'endroit que tu désire
tu utilises width pour la taille en longueur (en px ou en % c'est les + simple)
et height pour la hauteur

ex: .yui-b{ width: 60%
height: 30%}

bien que ne soit pas obligé de lui donner un height c'est seulement au besoin.

tu imagines ta page qui fait 100%
tu veux garder un menu à doite et un à gauche de la même taille par ex..pas difficile tu donne un width de 20%(droite) un 60%(centre) et 20%(gauche)...20+60+20=100%

tu joues comme ça partout, comme tu veux, sur n'importe quel div id ou class(#ou.)...voilà

Répondre à caliche

nan moi je veux des valeurs fixes, pas des %... c'est que je suis perfectionniste mais j'attend de ce post une bonne âme qui aie la gentillesse soit de m'expliquer le code css, soit d'essayer de m'aider à le dechiffrer... j'essaye de pas demander l'impossible bref...

Message édité par cynoque le 28-03-2009 à 19:09:53

Répondre à cynoque

je sais que c'est un peu gonflé, et limite complexe, mais bon... de l'aide serait vraiment la bienvenue, quelle qu'elle soit

sinon je vais (faut bien, ça dépasse tout le monde / ou c'est moi qui sent le poisson) carrément changer de layout, et repartir d'un autre moins bordelique, parce que le css je connais moyennement, et que je ne sais pas d'où repartir pour continuer à apprendre sans perdre de temps (pas tomber sur des trucs que je connais déjà, j'ai toute une partie des cours à sauter dans le cas d'une remise à niveau)

Donc (je demande ça à tout hasard) si quelqu'un conaissait un tuto css "de deuxième main" ou encore "de niveau 2"...

Message édité par cynoque le 29-03-2009 à 04:52:29

Répondre à cynoque

bon je relance une dernière fois... snif

EDIT : bon pour ceux que ça intéresseraient, j'ai résolu mon problème. j'ai été sur le site alsacreation ( http://www.alsacreations.com/ ), et je suis simplement parti du gabarit 11 et étape après étape ça marche...

Message édité par cynoque le 30-03-2009 à 04:49:07

Répondre à cynoque

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > [css, html] problème de code css et de mise en page html [résolu]

Aller à :

Aide |
Règles du forum

Il y a 456 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,402 secondes

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler

Liens