CrystalXP.net

»

Liste des forums

»

FORUM CrystalXP.net Français

»

Exposition Graphique

»
Webdesign, Boutons & Objets
»
New Webdesign
 
 




Tutoriaux Graphiques : clemsterio Exposition Graphique : babasse et 34 utilisateurs inconnus

S'identifier | S'inscrire | Aide
 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

New Webdesign

 
n°135948
panda25
Profil : Penguin
Avatar
profil
Posté le 05-02-2008 à 14:51:19  
 

Un nouveau web design pour mon site :

 

http://mathieu.sup.fr/

 

Vos avis ?

 

Merci

 

J'ai toujours pas compris comment centrer mon site  :boulay: je ne sais pas ou placer CODE<style>body {margin: auto}</style> dans mon code.

answer
mood
GoogleAds
profil
Posté le 05-02-2008 à 14:51:19  
 

answer
n°135949
Cocopop
*Keep It Real*
Profil : Big Penguin
Avatar
profil
Posté le 05-02-2008 à 15:09:12  
 

Sympa comme design mais je trouve le site vraiment trop petit.

 

Pour centrer ton site c'est très simple, fais comme ceci :

 

CODEbody
{
   width: XXX px; /* Largeur de ton Site */
   margin:auto; /* Pour centrer ton Site */
}

answer
n°135950
panda25
Profil : Penguin
Avatar
profil
Posté le 05-02-2008 à 17:16:27  
 

Merci Cocopop. C'est vrai qu'il est très petit, mais c'est juste comme si c'était un portail pour redirigé vers mon blog.

 

Par contre j'ai toujours pas réussi a centré  :boulay:

 

Voila mon code :
CODE<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Matphotograph</title>

 


  <script type="text/javascript" src="lightbox/lightbox.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 

<!-- ImageReady Styles (header.psd) -->
  <style type="text/css">
/*--------- Lightbox -----------*/
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.9em;
color: #555;
padding-top: 0.5em;
}
#closeButton{ top: 5px; right: 5px; }
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#lightbox img{ border: none; }
#overlay img{ border: none; }
#overlay{ background-image: url(lightbox/overlay.png); }
* html #overlay{ /*Hack IE */
background-color: #000;
background-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="lightbox/overlay.png", sizingMethod="scale");
}
/*-------- fin lightbox -------*/
html { height:100%; cursor: url('hand.cur'), auto; }
* html { cursor: url('hand.cur'); }
<!--
#Tableau_01 {
position:absolute;
left:0px;
top:0px;
width:820px;
height:620px;
}
#index-01 {
position:absolute;
left:0px;
top:0px;
width:820px;
height:14px;
}
#index-02 {
position:absolute;
left:0px;
top:14px;
width:40px;
height:606px;
}
#index-03 {
position:absolute;
left:40px;
top:14px;
width:225px;
height:50px;
}
#index-04 {
position:absolute;
left:265px;
top:14px;
width:555px;
height:81px;
}
#index-05 {
position:absolute;
left:40px;
top:64px;
width:225px;
height:399px;
}
#index-06 {
position:absolute;
left:265px;
top:95px;
width:229px;
height:368px;
}
#index-07 {
position:absolute;
left:494px;
top:95px;
width:124px;
height:93px;
}
#index-08 {
position:absolute;
left:618px;
top:95px;
width:27px;
height:124px;
}
#index-09 {
position:absolute;
left:645px;
top:95px;
width:126px;
height:93px;
}
#index-10 {
position:absolute;
left:771px;
top:95px;
width:49px;
height:525px;
}
#index-11 {
position:absolute;
left:494px;
top:188px;
width:124px;
height:31px;
}
#index-12 {
position:absolute;
left:645px;
top:188px;
width:126px;
height:31px;
}
#index-13 {
position:absolute;
left:494px;
top:219px;
width:124px;
height:87px;
}
#index-14 {
position:absolute;
left:618px;
top:219px;
width:25px;
height:401px;
}
#index-15 {
position:absolute;
left:643px;
top:219px;
width:124px;
height:91px;
}
#index-16 {
position:absolute;
left:767px;
top:219px;
width:4px;
height:401px;
}
#index-17 {
position:absolute;
left:494px;
top:306px;
width:124px;
height:37px;
}
#index-18 {
position:absolute;
left:643px;
top:310px;
width:124px;
height:33px;
}
#index-19 {
position:absolute;
left:494px;
top:343px;
width:124px;
height:89px;
}
#index-20 {
position:absolute;
left:643px;
top:343px;
width:124px;
height:89px;
}
#index-21 {
position:absolute;
left:494px;
top:432px;
width:124px;
height:31px;
}
#index-22 {
position:absolute;
left:643px;
top:432px;
width:124px;
height:31px;
}
#index-23 {
position:absolute;
left:40px;
top:463px;
width:63px;
height:157px;
}
#index-24 {
position:absolute;
left:103px;
top:463px;
width:58px;
height:81px;
}
#index-25 {
position:absolute;
left:161px;
top:463px;
width:23px;
height:157px;
}
#index-26 {
position:absolute;
left:184px;
top:463px;
width:70px;
height:81px;
}
#index-27 {
position:absolute;
left:254px;
top:463px;
width:28px;
height:157px;
}
#index-28 {
position:absolute;
left:282px;
top:463px;
width:67px;
height:81px;
}
#index-29 {
position:absolute;
left:349px;
top:463px;
width:145px;
height:157px;
}
#index-30 {
position:absolute;
left:494px;
top:463px;
width:124px;
height:93px;
}
#index-31 {
position:absolute;
left:643px;
top:463px;
width:122px;
height:91px;
}
#index-32 {
position:absolute;
left:765px;
top:463px;
width:2px;
height:157px;
}
#index-33 {
position:absolute;
left:103px;
top:544px;
width:58px;
height:76px;
}
#index-34 {
position:absolute;
left:184px;
top:544px;
width:70px;
height:76px;
}
#index-35 {
position:absolute;
left:282px;
top:544px;
width:67px;
height:76px;
}
#index-36 {
position:absolute;
left:643px;
top:554px;
width:122px;
height:66px;
}
#index-37 {
position:absolute;
left:494px;
top:556px;
width:124px;
height:64px;
}
-->
  </style><!-- End ImageReady Styles -->

 

</head>

 


<body style="margin: 0px; background-color: rgb(255, 255, 255);">

 

<!-- ImageReady Slices (header.psd) -->
<div id="Tableau_01">
<div id="index-01"> <img src="images/index_01.gif" alt="" height="14" width="820"> </div>

 

<div id="index-02"> <img src="images/index_02.gif" alt="" height="606" width="40"> </div>

 

<div id="index-03"> <img src="images/index_03.gif" alt="" height="50" width="225"> </div>

 

<div id="index-04"> <img src="images/index_04.gif" alt="" height="81" width="555"> </div>

 

<div id="index-05"> <img style="width: 225px; height: 399px;" onmouseout="this.src='images/index_05.gif';" onmouseover="this.src='imagesover/index_05.gif';" src="images/index_05.gif" alt=""> </div>

 

<div id="index-06"> <img src="images/index_06.gif" alt="" height="368" width="229"> </div>

 

<div id="index-07"> <a href="imageshd/lotus.jpg" rel="lightbox" title="Incompatible Nature - Juillet 2007 - Paris"><img onmouseout="this.src='images/index_07.gif';" onmouseover="this.src='imagesover/index_07.gif';" style="border: 0px solid; width: 124px; height: 93px;" src="images/index_07.gif" alt=""></a> </div>

 

<div id="index-08"> <img src="images/index_08.gif" alt="" height="124" width="27"> </div>

 

<div id="index-09"> <a href="imageshd/alexandre.jpg" rel="lightbox" title="When the sun goes down - Juillet 2007 - Paris"><img onmouseout="this.src='images/index_09.gif';" onmouseover="this.src='imagesover/index_09.gif';" style="border: 0px solid; width: 126px; height: 93px;" src="images/index_09.gif" alt=""></a> </div>

 

<div id="index-10"> <img src="images/index_10.gif" alt="" height="525" width="49"> </div>

 

<div id="index-11"> <img src="images/index_11.gif" alt="" height="31" width="124"> </div>

 

<div id="index-12"> <img src="images/index_12.gif" alt="" height="31" width="126"> </div>

 

<div id="index-13"> <a href="imageshd/red.jpg" rel="lightbox" title="Sunday Bloody Sunday - Janvier 2008 - Valdahon"><img onmouseout="this.src='images/index_13.gif';" onmouseover="this.src='imagesover/index_13.gif';" style="border: 0px solid; width: 124px; height: 87px;" src="images/index_13.gif" alt=""></a> </div>

 

<div id="index-14"> <img src="images/index_14.gif" alt="" height="401" width="25"> </div>

 

<div id="index-15"> <a href="imageshd/feuille.jpg" rel="lightbox" title="Seul - Octobre 2007 - Valdahon"><img onmouseout="this.src='images/index_15.gif';" onmouseover="this.src='imagesover/index_15.gif';" style="border: 0px solid; width: 124px; height: 91px;" src="images/index_15.gif" alt=""></a> </div>

 

<div id="index-16"> <img src="images/index_16.gif" alt="" height="401" width="4"> </div>

 

<div id="index-17"> <img src="images/index_17.gif" alt="" height="37" width="124"> </div>

 

<div id="index-18"> <img src="images/index_18.gif" alt="" height="33" width="124"> </div>

 

<div id="index-19"> <a href="imageshd/eiffel.jpg" rel="lightbox" title="Dentelle d'une Parisienne - Juillet 2007 - Paris"><img onmouseout="this.src='images/index_19.gif';" onmouseover="this.src='imagesover/index_19.gif';" style="border: 0px solid; width: 124px; height: 89px;" src="images/index_19.gif" alt=""></a> </div>

 

<div id="index-20"> <a href="imageshd/herbe.jpg" rel="lightbox" title="Verdure sous basse température - Janvier 2008 - Sancey"><img onmouseout="this.src='images/index_20.gif';" style="border: 0px solid; width: 124px; height: 89px;" onmouseover="this.src='imagesover/index_20.gif';" src="images/index_20.gif" alt=""></a> </div>

 

<div id="index-21"> <img src="images/index_21.gif" alt="" height="31" width="124"> </div>

 

<div id="index-22"> <img src="images/index_22.gif" alt="" height="31" width="124"> </div>

 

<div id="index-23"> <img src="images/index_23.gif" alt="" height="157" width="63"> </div>

 

<div id="index-24"> <a href="mailto:futureisnature@hotmail.fr"><img style="border: 0px solid; width: 58px; height: 81px;" onmouseout="this.src='images/index_24.gif';" onmouseover="this.src='imagesover/index_24.gif';" src="images/index_24.gif" alt=""></a> </div>

 

<div id="index-25"> <img src="images/index_25.gif" alt="" height="157" width="23"> </div>

 

<div id="index-26"> <a href="http://matphotograph.skyrock.com"><img style="border: 0px solid; width: 70px; height: 81px;" onmouseout="this.src='images/index_26.gif';" onmouseover="this.src='imagesover/index_26.gif';" src="images/index_26.gif" alt=""></a> </div>

 

<div id="index-27"> <img src="images/index_27.gif" alt="" height="157" width="28"> </div>

 

<div id="index-28"> <a href="http://www.myspace.com/b102prod"><img onmouseout="this.src='images/index_28.gif';" onmouseover="this.src='imagesover/index_28.gif';" style="border: 0px solid; width: 67px; height: 81px;" src="images/index_28.gif" alt=""></a> </div>

 

<div id="index-29"> <img src="images/index_29.gif" alt="" height="157" width="145"> </div>

 

<div id="index-30"> <a href="imageshd/mesange.jpg" rel="lightbox" title="De battre mes ailes se sont arrêtées - Janvier 2008 - Neublans"><img onmouseout="this.src='images/index_30.gif';" onmouseover="this.src='imagesover/index_30.gif';" style="border: 0px solid; width: 124px; height: 93px;" src="images/index_30.gif" alt=""></a> </div>

 

<div id="index-31"> <a href="imageshd/Obvious.jpg" rel="lightbox" title="Staring at the sun - Janvier 2008 - Pontarlier"><img style="border: 0px solid; width: 122px; height: 91px;" onmouseout="this.src='images/index_31.gif';" onmouseover="this.src='imagesover/index_31.gif';" src="images/index_31.gif" alt=""></a> </div>

 

<div id="index-32"> <img src="images/index_32.gif" alt="" height="157" width="2"> </div>

 

<div id="index-33"> <img src="images/index_33.gif" alt="" height="76" width="58"> </div>

 

<div id="index-34"> <img src="images/index_34.gif" alt="" height="76" width="70"> </div>

 

<div id="index-35"> <img src="images/index_35.gif" alt="" height="76" width="67"> </div>

 

<div id="index-36"> <img src="images/index_36.gif" alt="" height="66" width="122"> </div>

 

<div id="index-37"> <img src="images/index_37.gif" alt="" height="64" width="124"> </div>

 

</div>

 

<embed hidden="true" loop="true" autostart="true" src="http://pagesperso-orange.fr/b102prod/Untitled.mp3">
<!-- End ImageReady Slices -->
</body>

 

</html>

 

Je met où ce que tu m'as donné parce que j'ai essayé à plusieurs lignes différentes mais c'est jamais centré.

 

Merci

answer
n°135951
TheFirefox
Profil : Big Penguin
Avatar
profil
Posté le 05-02-2008 à 20:25:43  
 

Toutes les positions sont données en coordonnées absolues... ce qui difficile le centrage: il faut enblober tout dans un div qui sera lui centré à l'aide de CSS si je me souviens bien, pour que les coordonnées se réfèrent à celui-ci au lieu de la page mais je suis plus très sûr...
Il doit falloir mettre ça juste dans la balise <style>
CODE.centrage
{
   width: XXX px; /* Largeur de ton Site */
   margin:auto; /* Pour centrer ton Site */
}
ça juste après <body>
CODE<div class="centrage">
et ça juste avant </body>
CODE</div>

 

Je promets rien mais ça devrait marcher :wink:

answer
n°135952
Cocopop
*Keep It Real*
Profil : Big Penguin
Avatar
profil
Posté le 05-02-2008 à 21:03:22  
 

Sache que ce que je fais faire est une critique constructive car je suis Webmaster.

 

Je trouve que c'est très grossièrement codé, il n'y as pas de hiérarchie, enfin on s'y retrouve pas :frown:

 

Ensuite le Doctype n'est pas le bon et ca m'étonnerai que ca passe le W3C (je pourrais t'aider à le rendre valide si tu veux).

 

Sinon, pour ton problème je pense que ceci le résoudra :

 

Voila ce que tu as codé toi
CODE<body style="margin: 0px; background-color: rgb(255, 255, 255);">

 

Moi je te conseil :
CODEbody
{
   width: XXXpx; /* Largeur de ton Site */
   margin:auto; /* Centrer ton Site */
   margin-top: 20px; /* Pour éviter de coller avec le haut de ta fenêtre de navigateur */
   margin-bottom: 20px; /* Idem pour le bas du navigateur */
   background-color: #FFFFFF;
}

 

Respecte bien ma structure et normalement ca devrai marché, c'est du CSS 2

 

Edit : Centrer avec un div qui enveloppe tout le site n'est vraiment pas recommandé.

 

Edit 2 : Je viens de comprendre la structure de ton site, je t'aurais conseiller de respecter la structure CSS et xHTML et non de tout mélangé. Enfin bref je pense pas que tu auras le courange de tout retapé donc la solution que je te propose aprés analyse de ton code est celle ci (vraiment pas super mais bon...) :

 

CODE<div class="centrer_site"> ( à placé juste aprés <body> )
   width: XXXpx; ( à placé juste aprés <body> toujours)
   margin:auto; ( à placé juste aprés <body> encore^^)
</div>(juste avant ton <\body>

 

En gros c'est le même code que Fififox qui normalement devrai marché aprés analyse de ton code.
Mais encore une fois cette solution est moins que bonne et je te conseillerai de séparer le CSS et le xHTML (Tu véra les avantages par la suite et ils sont nombreux :smile:)

answer
n°135980
sangohanama
Profil : Penguin Pro
Avatar
profil
Posté le 07-02-2008 à 11:23:14  
 

C'est  vraix que c'est dommage que sa soit un peut petit comme design mais j'aime bien ce style :great:

 

Mais tu auras toujours que 8 photos ?

 

Sango'

answer
n°135999
panda25
Profil : Penguin
Avatar
profil
Posté le 08-02-2008 à 11:43:17  
 

Changement d'adresse : http://matphotograph.sup.fr/

 

Merci de participer au développement de mon site.

 

Le codage c'est pas un domaine que je connais tip top, là j'ai tout fait avec photoshop. Par contre j'arrive toujours pas à centrer même avec tes explications qui sont pourtant claires et précises.

 

Non il ya aura plus de photo, mais j'ai pas beaucoup de temps en ce moment. d'ailleurs ya une 2eme page maintenant.

  

answer
n°136000
sangohanama
Profil : Penguin Pro
Avatar
profil
Posté le 08-02-2008 à 12:18:06  
 

Tu auras des meilleurs explications par des gars comme fififox que moi :he:

 

Mais ton " suite " se voit pas met le en blanc par exemple.

 

Et ton roll-over n'est pas tip top, j'aurais vu autre chose :wink:

 

Sango'

answer
n°136012
panda25
Profil : Penguin
Avatar
profil
Posté le 08-02-2008 à 18:13:47  
 

Voila j'ai modifié mes boutons de changement de page, plus simple et compréhensible.
http://matphotograph.sup.fr/

answer
n°136015
inzemix
Touriste option tourisme
Profil : Penguin
Avatar
profil
Posté le 08-02-2008 à 18:51:42  
 

Pour le curseur qui change c'est sympa, mais c'est pas glop quand tu passes sur un lien (image ou autre..) il se transforme en main immonde... je sais pas si c'est possible, mais ce serait vraiment mieux... :biggrin:

answer
n°136018
panda25
Profil : Penguin
Avatar
profil
Posté le 08-02-2008 à 22:15:47  
 

Je cherche justement pour le changer au survol d'un lien, pour le curseur normal j'ai CODEhtml { height:100%; cursor: url('hand.cur'), auto; }
* html { cursor: url('hand.cur'); }
 Une idéé pour les liens ?

 

Au fait Cocopop mon site passe le w3c  :happy2:

answer
n°136035
panda25
Profil : Penguin
Avatar
profil
Posté le 15-02-2008 à 12:00:07  
 

Ca y'est j'ai réussi  à centrer mon site http://matphotograph.sup.fr/

 

J'ai mis ça
CODE#Tableau_01 {
position: relative;
margin-left: auto;
margin-right: auto;
width: 820;
}

 

Merci à tous de votre aide.

 

Pour le curseur je n'ai pas trouvé tant pis.

 

Encore merci

answer
n°136037
didjoman
Profil : New Penguin
Avatar
profil
Posté le 17-02-2008 à 09:48:54  
 

Le deuxième site est super beau !!
Le premier site est codé comme un pied ^^ ! j'aime pas trop les doctype "transitionnal" je trouve sa un peu bordel quand le HTML et xHTML sont mélangés ...

answer
n°136040
inzemix
Touriste option tourisme
Profil : Penguin
Avatar
profil
Posté le 18-02-2008 à 00:21:10  
 

Euh, sur firefox, ton site n'est pas centré...

answer
n°136041
Komm
Profil : Penguin Pro
Avatar
profil
Posté le 18-02-2008 à 19:44:58  
 

Hello,

 

Pour le centrer, essaie ça dans ton css:
CODE#Tableau_01 {
position:relative;
margin:auto;
width:820px;
height:620px;
}
Ou si tu veux vraiment de l'absolute:
CODE#Tableau_01 {
position:absolute;
left: 50%;
top:50%;
margin-left:-410px;
margin-top:-310px;
width:820px;
height:620px;
}

 

Sinon, le design est très beau, mais c'est dommage qu'il y ait autant d'images et que le codage soit peu propre...
Par contre, elles sont très sympa tes photos :wink:

answer
n°136042
Dr Rodney Mckay
Profil : New Penguin
Avatar
profil
Posté le 18-02-2008 à 20:07:24  
 

inzemix a écrit :

Euh, sur firefox, ton site n'est pas centré...

 


Je confirme ...

 


Très joli design en tout cas, mes félicitations  :great:

answer
n°136107
panda25
Profil : Penguin
Avatar
profil
Posté le 08-03-2008 à 00:20:20  
 

Désolé de répondre seulement maintenant mais je n'avais pas accès à un ordi pendant un bout de temps.
Mon site était centré mais il s'est décentré sur le net mais pas en local j'ai essayé de réparer ça, chez moi sous firefox c'est centré maintenant. Merci pour vos commentaires et votre aide.

 

:xeyes:  http://matphotograph.sup.fr/  :xeyes:

answer
n°136108
Komm
Profil : Penguin Pro
Avatar
profil
Posté le 08-03-2008 à 00:34:55  
 

Il l'est sous Safari 3 en tout cas!

answer
n°136285
panda25
Profil : Penguin
Avatar
profil
Posté le 19-04-2008 à 00:13:10  
 

Une nouvelle page d'accueil pour le site :
http://matphotograph.sup.fr

answer
n°136286
Cocopop
*Keep It Real*
Profil : Big Penguin
Avatar
profil
Posté le 19-04-2008 à 00:28:43  
 

Trés jolie page d'accueil, par contre il y a un truc qui ne me plait pas c'est la barre de scroll inutile..

answer
n°136287
panda25
Profil : Penguin
Avatar
profil
Posté le 19-04-2008 à 10:06:26  
 

Merci cocopop. Disons qu'elle est inutile si la page s'affiche en totalité j'ai essayé de la caché mais je suis en 1024*768 et on ne voit plus le bas donc je pense que je vais la laisser

answer

Aller à :
Ajouter une réponse
  

CrystalXP.net

»

Liste des forums

»

FORUM CrystalXP.net Français

»

Exposition Graphique

»
Webdesign, Boutons & Objets
»
New Webdesign
 

Forum MesDiscussions.Net, Version 2007.2
(c) 2000-2007 Doctissimo Software
Page générée en 0.187 secondes