comment realiser une mise en page nickel sur dream

Marsh Posté le 08-02-2006 à 18:53:26

bonjour
je travaille sur dream mais ne maitrisant pas le style css
j'aimerais faire une mise en page de mon index par exemple de facon que dans le navigateur
ma page soit relativement centrée
comment je peux m'y prendre au départ pour placer mes divers objets
merci

Reply

Marsh Posté le 08-02-2006 à 18:53:26

Reply

Marsh Posté le 08-02-2006 à 19:39:54

ben tu as une div qui englobe toute ta page:

Code :

<div id="page">
..
...
..
</div>

Dans le css:

Code :

#page {
margin:0 auto;
width:800px;
}

Voilà

Reply

Marsh Posté le 08-02-2006 à 20:09:01

il faut que je fasse une feuile de style par exemple style.css
avec le code ci-dessus

pour le code de la div je la mets directement dans le code de ma page

c'est ça

Reply

Marsh Posté le 08-02-2006 à 20:23:19

tout à fait

Reply

Marsh Posté le 08-02-2006 à 20:31:37

j'ai mis mes différents code au bon endroit je pense
et quand je regarde sur mon écran pas top
je possède un 19" et c'est loin d'être centré

Reply

Marsh Posté le 08-02-2006 à 20:42:45

Envoi un screen...

Reply

Marsh Posté le 08-02-2006 à 20:49:47

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#000000;
}
#page {
margin:0 auto;
width:800px;
background:#CCCCCC;
}
</style>
</head>
<body>
<div id="page"> oihioihhhhiohohihh </div>
</body>
</html>

Je vois vraiment pas ce que tu veux de plus....

Bon le css, met le dans un fichier; là c'était pour te montrer

Reply

Marsh Posté le 09-02-2006 à 07:51:16

ok merci j'essai tout ça de nouveau

Reply

Marsh Posté le 09-02-2006 à 10:13:10

il faut pas rajouter:

Code :

body {
background:#000000;
align:center;
}
#page {
margin:0 auto;
align:left;
width:800px;
background:#CCCCCC;
}

a cause de IE je sais plus combien ?

Message édité par mechkurt le 09-02-2006 à 10:14:09

---------------
D3

Reply

Marsh Posté le 09-02-2006 à 13:33:19

voila mon code page et celui du css
ca ne donne rien

<body onLoad="MM_timelinePlay('Timeline1')">
<div id="page">
<div id="Layer8" class="Style4" style="position:absolute; width:152px; height:22px; z-index:6; left: 102px; top: 290px;"><a href="activite.htm">Culturel (clermont)</a> </div>
<div id="Layer8" class="Style4" style="position:absolute; width:50px; height:22px; z-index:6; left: 158px; top: 157px;"><a href="activite.htm" class="Style5">4*4</a></div>
<div id="Layer8" class="Style4" style="position:absolute; width:50px; height:22px; z-index:6; left: 146px; top: 183px;"><a href="activite.htm">Quad</a></div>
<div id="Layer8" class="Style4" style="position:absolute; width:90px; height:22px; z-index:6; left: 703px; top: 289px;"><a href="activite.htm">Moto</a></div>
<div id="Layer8" class="Style4" style="position:absolute; width:90px; height:22px; z-index:6; left: 644px; top: 162px;"><a href="activite.htm">VTT</a> </div>
<div id="Layer8" class="Style4" style="position:absolute; width:90px; height:22px; z-index:6; left: 635px; top: 187px;"><a href="activite.htm">Marche</a></div>
<div id="Layer8" class="Style4" style="position:absolute; width:90px; height:22px; z-index:6; left: 661px; top: 213px;"><a href="activite.htm#peche">Pêche</a></div>
<div id="Layer8" class="Style4" style="position:absolute; width:90px; height:22px; z-index:6; left: 667px; top: 238px;"><a href="activite.htm#pedalo">Pédalo</a></div>
<div id="Layer8" class="Style4" style="position:absolute; width:90px; height:22px; z-index:6; left: 659px; top: 264px;"><a href="activite.htm#pedalo">Baignade</a></div>
<div id="Layer8" class="Style4" style="position:absolute; width:90px; height:22px; z-index:6; left: 134px; top: 209px;"><a href="activite.htm#sport">Sport auto</a> </div>
<div id="Layer8" class="Style4" style="position:absolute; width:109px; height:22px; z-index:6; left: 123px; top: 236px;"><a href="activite.htm#montgolfiere">Montgolfière</a></div>
<div id="Layer8" class="Style4" style="position:absolute; width:104px; height:22px; z-index:6; left: 114px; top: 262px;"><a href="activite.htm#montgolfiere"><span class="Style5">Parapente</span></a></div>
<div id="Layer6" style="position:absolute; width:200px; height:50px; z-index:10; left: 315px; top: 311px;">
<p align="center"><em><strong>NOMBRE DE VISITEURS
<script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=4/35/5359/2/3&ID=4543"></script>
</strong></em></p>
<p align="center"><em><strong><br>
<br>
</strong></em></p>
</div>
<div id="Layer3" style="position:absolute; width:68px; height:106px; z-index:8; left: 1px; top: 479px;"><img src="imagegite/auvergnat.jpg" name="Image1" width="67" height="103"></div>
<div id="Layer4" style="position:absolute; width:643px; height:35px; z-index:9; left: 191px; top: 431px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="108" height="28">
<param name="BGCOLOR" value="">
<param name="movie" value="button1.swf">
<param name="quality" value="high">
<embed src="button1.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="108" height="28" ></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="108" height="28">
<param name="BGCOLOR" value="">
<param name="movie" value="button2.swf">
<param name="quality" value="high">
<embed src="button2.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="108" height="28" ></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="108" height="28">
<param name="BGCOLOR" value="">
<param name="movie" value="button3.swf">
<param name="quality" value="high">
<embed src="button3.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="108" height="28" ></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="108" height="28">
<param name="BGCOLOR" value="">
<param name="movie" value="button13.swf">
<param name="quality" value="high">
<embed src="button13.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="108" height="28" ></embed>
</object>
</div>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:5; left: 13px; top: 23px;"> <a name="haut"></a><img src="imagegite/puydome.gif" width="800" height="600" border="0"></div>
<div id="Layer5" style="position:absolute; width:783px; height:63px; z-index:7; left: 26px; top: 362px;">
<div align="center" class="Style2">
<p class="Style3">LOCATION DE VOS VACANCES EN AUVERGNE <br>
APPARTEMENT A FONTFREYDE AU PIED DU PUY DE DOME </p>
</div>
</div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:4; top: 159px; left: 550px;"><img src="images/accesd.gif" width="207" height="156"></div>
<div id="Layer7" style="position:absolute; width:200px; height:115px; z-index:3; left: 70px; top: 156px;"><img src="images/accesg.gif" width="207" height="156"></div>
</div>
</body>
</html>

css

#page {
margin:0 auto;
align:left;
width:800px;
background:#CCCCCC;
}

Reply

Marsh Posté le 09-02-2006 à 13:33:19

Reply

Marsh Posté le 09-02-2006 à 13:37:03

ben si tu places tout tes div en abolute, ca vas etre dur de les centrer a coups de margin:0 auto; il me semble (ou alors si ca doit marcher mais il faut mettre #page en position:relative; )

---------------
D3

Reply

Marsh Posté le 09-02-2006 à 14:23:18

est ce qu'il suffirait de supprimer dans mon code absolute pour mes div ou alors comment mettre #page en relative

Reply

Marsh Posté le 09-02-2006 à 14:29:13

j'ai mis mon #page en position relative et c'est impeccable
voila ma page centrée
il faut que je mette mon code de ma balise div englobant toute ma page sur chaque page ou il y a une astuce pour l'appliquer à tout le site

Reply

Marsh Posté le 10-02-2006 à 09:28:52

faire une feuille de style externe ?!

---------------
D3

Reply

Marsh Posté le 10-02-2006 à 15:29:38

c'est à dire

Reply

Marsh Posté le 10-02-2006 à 15:39:05

autre chose je rajoute une page web a mon site
je lui applique la meme feuille de style que les autres
et son code pour aller chercher la feuille et
aucun changement de mise en pagesur cette derniere
j'ai essaye avec une autre page idem
pourquoi

Reply

Marsh Posté le 10-02-2006 à 15:40:51

tu mets ton css dans un fichier a part (blahblah.css) et tu fait un lien depuis chacune de tes pages ou tu as besoin de ce style...

tu devrait surfer un peu openweb et alsacreations, tu devrait y apprendre plein de chose...

(un bon prof aussi et d'etudier le code source des pages qui te plaisent, genre csszengarden)

---------------
D3

Reply

Marsh Posté le 10-02-2006 à 15:45:45

j'ai fait ça pour mes pages déja faite pas de probleme c'est nickel
je fais une autre page avec le lien sur ma css et rien de bon

je vais aller faire un tour sur les sites
mais seul c'est pas toujours simple

Reply

Marsh Posté le 10-02-2006 à 16:02:01

quand tu cree un nouveau style css, dream te propose si tu veux faire une fueile de style pour cette page ou une feuille séparé non ?

---------------
D3

Reply

Marsh Posté le 10-02-2006 à 16:06:07

oui c'est le cas il me donne le choix
j'ai fait avec une feuille séparée
mais dans mon cas toutes mes pages précédentes auquel j'ai fait appel à cette css ont fonctionné
maintenant pour d'autres pages j'appel le css toujours le même et là rien

Reply

Marsh Posté le 10-02-2006 à 16:17:15

verifie en affichant le code source qu'il cree bien un lien de ce genre vers ton css:
<link href="blahblah.css" rel="stylesheet" type="text/css" />

---------------
D3

Reply

Marsh Posté le 10-02-2006 à 16:20:07

j'ai exactement ça

Reply

Marsh Posté le 10-02-2006 à 19:08:41

bizarre, tes pages sont en ligne qq part ?

---------------
D3

Reply

Marsh Posté le 10-02-2006 à 20:20:56

chose étonnante j'ai créé des pages nouvelles pour essayer
et ça marche
alors que des pages d'un autre site perso que j'ai copié et mis sur la racine de l'autre pas moyen
ça donne rien
toute celles qui sont en ligne fonctionne
je fais surtout des essais par rapport à mon boulot
voila pourquoi j'essai sur divers pages

Reply

Marsh Posté le 11-02-2006 à 10:14:41

conflit avec ue autre feuille de style ? erreur dans la balise link ? balise link ailleur que dans le head ?

---------------
D3

Reply

Marsh Posté le 13-02-2006 à 09:56:57

j'ai résolu mon problème en faisant un copier coller de ma page web sur une autre et en appliquant la meme css que les autres et nickel
peut être une merde sur ma premiere page

Reply

Marsh Posté le 13-02-2006 à 09:58:34

au fait merci pour tout
une derniere question
connais tu un site ou un bouquin m'indiquant la signification des différentes proprietes css

Reply

Marsh Posté le 13-02-2006 à 10:29:51

le gars d'alsacreations (pseudo sybelius sur ce forum) a ecrit un bouquin sur le CSS souvent cité comme référence, perso je l'ai pas lu donc je peux pas dire...
[:airforceone]

Message édité par mechkurt le 13-02-2006 à 10:30:17

---------------
D3

Reply

Marsh Posté le 13-02-2006 à 10:32:45

ok je regarde ça et je te tiens au courant

Reply

Marsh Posté le

Reply

comment realiser une mise en page nickel sur dream

Sujets relatifs:

Leave a Replay