comment realiser une mise en page nickel sur dream

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : comment realiser une mise en page nickel sur dream

patmarley

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

Publicité

xtof_83

Freeride Spirit

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à

patmarley

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

xtof_83

Freeride Spirit

tout à fait

patmarley

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é

xtof_83

Freeride Spirit

Envoi un screen...

xtof_83

Freeride Spirit

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

patmarley

ok merci j'essai tout ça de nouveau

mechkurt

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

patmarley

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;
}

Publicité

mechkurt

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

patmarley

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

patmarley

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

mechkurt

faire une feuille de style externe ?!

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

patmarley

c'est à dire

patmarley

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

mechkurt

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

patmarley

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

mechkurt

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

patmarley

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

mechkurt

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

patmarley

j'ai exactement ça

mechkurt

bizarre, tes pages sont en ligne qq part ?

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

patmarley

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

mechkurt

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

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

patmarley

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

patmarley

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

mechkurt

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

patmarley

ok je regarde ça et je te tiens au courant

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

comment realiser une mise en page nickel sur dream

Sujets relatifs
comment faire une page achat en ligne	[Résolu]Variance de taille de page entre FF et IE
variable qui suit après une redirection de page	Interbase par page CGI : Fermeture de database trop longue
bloquer une page IE pour qu'on accede plus au bureau	css nickel sous firefox, rien sous IE
pb retour d'une page avec un comboBox	[ASP .NET] Page de news
lien hypertexte front page 2003	Faire apparaître des données Access sur une page HTML (via php ?)
Plus de sujets relatifs à : comment realiser une mise en page nickel sur dream

Page générée en 0.083 secondes