ConnexionConnexionInscription
B E A D G
1017 connectés Sweepyto Guitare

Aide sur les CSS (Non, ce n'est pas Counter strike) // Déjà exposé dans le Freepost

#1
26/08/2007 20:32:44
Salut les jeunes.
Je vous colle ici ce que j'ai déjà posté dans le Freepost en espérant attirer des connaisseurs cette fois
Autocitation:

"C'est tout simple en fait, je voudrais me servir de "boîtes" pour la mise en forme d'une page HTML (rien d'original...).

L'idée est de créer une boîte qui a, par exemple, une longueur et une hauteur égales à 50% de la taille totale de la page.
Donc voilà le code de mon fichier CSS que j'importe dans la page HTML:

#boite {width: 50%;
           height: 50%;
           background-color: yellow;}

(C'est très basique, c'est juste pour l'essai)

Et celui de la page HTML: <div id="boite"></div> (Plus bien sûr les balises HEAD, BODY etc.)

Je croyais que la balise BODY du HTML entrainnait la création d'une boîte mais il semble que non, du coup mes 50% n'ont plus aucun sens. Beh ouais, 50% de quoi ?

J'ai cherché sur internet mais partout je ne trouve que des exemples où les dimensions des boîtes sont définies en nombre de pixels (px), ce que je tiens à éviter.

J'aimerais donc avoir une boîte qui représenterait la page entière mais je sais pas comment faire...
"
0
0
#2
26/08/2007 20:40:22
effectivement j'ai toujours vu la programmation de boites en pixels, jamais en % ... désolé, je te serais inutile...
0
0
#3
26/08/2007 21:04:38
 tu peux très bien le faire en % sa ne t'inquiete pas..
après pour tout ce qui est web je te conseille: http://www.siteduzero.com/

par contre non body ne cree pas une boite,mais tu cree des "boites"(div j'imagine que tu veux dire) dans le body...
0
0
#4
26/08/2007 21:24:32
Non, div n'est pas une boite, <div></div> crée une boite oui mais par exemple <p></p> crée aussi une boite.
Et je sais que je dois pouvoir le faire avec des % sauf que dans mon cas, ça ne marche pas
0
0
#5
26/08/2007 22:10:40
 ptite question bete, le div que ta cree, tu la bien mis entre les 2balises body?
0
0
#6
26/08/2007 22:11:26
  double post, petite erreur de ma part -_-
0
0
#7
26/08/2007 23:00:36
Oui, bien sûr que c'est entre les balises BODY
0
0
#8
26/08/2007 23:01:10
C'est quoi la question au juste? ^^'
(Sinan, tu peu régler 50% en largeur, mais en hauteur, bééh, en fait j'fait pas de réglage en hauteur, c'est fonction de se qui y'a dans le boite, la hauteur. bref (mais c'est sans doute possib'). Si je retrouve mes css de site qui sont en % j't'envois un exemple :p (mais euh, faut que je les retrouve ><))
0
0
#9
26/08/2007 23:39:09
Alors :
1) non, la balise <body> ne définit pas de "boîte" (on dit plutôt "bloc"), et elle sert (entre autres) à indiquer aux navigateurs le code qu'ils doivent afficher au visiteur.
2) Pourquoi des pourcentages plutôt que des éléments définis (pixels, em...) ?
3) pour afficher sur la largeur de la page, tu définis ta div en 100%...

Enfin, une des meilleures adresses (tutos très complets) pour les CSS et le XHTML : http://www.alsacreations.com
0
0
#10
27/08/2007 00:30:55
  Je sais à quoi sert la balise <body>

Pourquoi des pourcentages? Pour éviter que le résultat varie en fonction de la résolution de l'écran. Mais peut-être que je me trompe.

Mon problème c'est que, avec le code que j'ai fourni ici, lorsque je définis les dimensions avec des px, ça marche très bien mais dès que je passe aux pourcentages, ça merde totalement.
J'ai commencé par mettre width à 100% comme tu dis, mais rien n'y fait.
Et je suis totalement incapable de comprendre pourquoi.

Sinon je veux bien dire bloc, j'utilise juste le terme boite parce que c'est celui qui apparait dans le bouquin que j'ai

Alsacreations est justement le site auquel je pensais en disant que je n'avais trouvé que des exemples utilisant les pixels.
0
0
#11
27/08/2007 01:26:29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ceci est un test nul</title>

<style>
@import url(blo.css);
</style>
</head>
<body>

<div id="boite"></div>

</body>
</html>

/**************************************************************************/

#boite {width: 100%;
           height: 25%;
           border: 1px solid #000000;
           background-color: yellow;}

/**************************************************************************/

Voici le code complet de mes deux fichiers pourris, je capte pas mon erreur...
Aidez moi siyouplé...
0
0
#12
27/08/2007 09:51:42
Petit up avant d'enfiler mon polo Casto
0
0
#13
27/08/2007 10:01:51
euh salut! jpeux rien y faire parce que le css / xhtml ca m'as trop saoulé j'ai jamais fini de lire et de faire les cours apropriés ,mais ton probleme sra resolu en moins de deux sur le forum du site du zero...
0
0
#14
27/08/2007 10:23:37
Counter strike, c'est pas un jeu de Bowling ?
0
0
#15
27/08/2007 10:24:07
non c'est un fps -__-
0
0
#16
27/08/2007 10:25:08
Pour les elements <div/>, tu peux définir la largeur en fonction de l'objet contenant, c'est à dire dans ton cas, Body. Si div a une largeur fixée à 100%, il fera la largeur complète de la fenête, voir plus (il s'étendra dans le cas où un element plus large est à l'interieur, par exemple une imarge très très large ...).
Pour la hauteur, tu ne peux pas t'en tirer de la même façon. En effet, si un document HTML peut avoir une largeur figée, sa hauteur dépend de son contenu - tu ne peux donc pas simplement lui préciser qu'il fait "100%" de la fenêtre, aucun navigateur ne saurait interpréter cela. Pour remedier à ce problème, il convient d'utiliser Javascript afin d'interroger le navigateur sur la hauteur de la fenetre et d'utiliser la valeur récupérée.

Dans ton exemple, je ferais comme ça :

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

<html>

<head>

<title>Ceci est un test nul</title>

<style>

@import url(blo.css);

</style>

<script type="text/javascript">

<!--

window.onload = function()

{

SetDivSize();

}

window.onresize = function()

{

SetDivSize();

}

function getWindowHeight()

{

var windowHeight = 0;

if (typeof(window.innerHeight) == 'number')

{

windowHeight = window.innerHeight;

}

else

{

if (document.documentElement && document.documentElement.clientHeight)

{

windowHeight = document.documentElement.clientHeight;

}

else

{

if (document.body && document.body.clientHeight)

{

windowHeight = document.body.clientHeight;

}

}

}

return windowHeight;

}

function SetDivSize()

{

if (document.getElementById)

{

var windowHeight=getWindowHeight();

var ws=document.getElementById('boite');

if (windowHeight > 0 && ws)

{

ws.style.height = (windowHeight / 2) + 'px';

}

}

}

-->

</script>

</head>

<body>

<div id="boite"></div>

</body>

</html>

/**************************************************************************/

#boite {width: 100%;

height: 25%;

border: 1px solid #000000;

background-color: yellow;}

/**************************************************************************/

0
0
#17
27/08/2007 14:11:22
  http://fr.youtube.com/watch?v=oPMTap0ZAZI voila la vidéo de mon groupe cherche chanteur ou chanteuse salut a tous

0
0
#18
27/08/2007 14:12:34
t'as qu'a poster dans les annonces au lieu de pourrir tous les topics
0
0
#19
27/08/2007 23:18:08
Un grand merci à toi Koyuki! Je comprend effectivement maintenant le problème que ça peut poser sur la hauteur.

Depuis le temps que je voulais me mettre au Javascript
Encore merci ami Nantais
0
0
#20
28/08/2007 08:45:31
A ton service ...
0
0