Signaler

[css] conseillez-moi pour la déco de mon site [Fermé]

Posez votre question fabrice11901 790Messages postés dimanche 31 juillet 2005Date d'inscription 12 juillet 2007 Dernière intervention - Dernière réponse le 25 juin 2006 à 22:55 par fabrice11901
Bonjour
mon site
http://www.zone-mobile.net
Pouvez-vous me conseiller pour la déco en css (font de toutes les pages, couleur du texte, que faudrai t-il mettre pour agrémenter un peu sur la page d'accueil...?
Merci
Utile
+0
plus moins
Bonjour

Déjà ta page d'accueil ne tient pas en 1024 x 768 (un ascenseur vertical est affiché) alors que tu pourrais supprimer quelques lignes autour du mot "Entrer"

Le blanc sur fond bleu ca flash un peu : mais c'est sûr que c'est lisible ! LOL

Le titre qui défile mouais mais lorsqu'il disparait complètement la page fait "vide"


En image de fond tu pourrais mettre un téléphone portable, voir faire un menu en te servant d'un téléphone (mais pas à l'échelle parce que sinon c'est trop petit !)

Par ex
http://www.nobodysperfect.freesurf.fr/zone-mobile/zone-mobile.htm
Utile
+0
plus moins
Et si tu veux des styles pour t'inspirer, il y en a plus d'une centaines assez originaux là:

http://www.csszengarden.com

(cliquer sur les styles dans la colonne de droites :-)
Utile
+0
plus moins
salut
merci à vous
En fait si je demande ça c'est par ce que je suis mal-voyant et on m'a dit que la page n'était pas térible
mais moi je parlais plus pour la page http://www.zone-mobile.net/accueil.php je vais voir vos liens merci
si y a d'autre réponses...
Utile
+0
plus moins
Hum cette page là ...

Ben disons que le texte en marron sur un fond assez jaune ocre ca ressort assez mal à mon goût (étant myope j'ai tendance à préfèrer des images à plus fort contraste surtout pour les textes )

Change de police essai Arial ou Verdana

Mais ce n'est pas le plus important : je ne sais pas comment toi tu perçois la page mais ce qui me déplaît vraiment c'est le menu du haut en rouge sur fond marron bordeau foncé avec des bordures grises : disons le tout net c'est très moche ! LOL


Je serrais toi je ferais tout dans le même style que le logo zone-mobile.net . Bon c'est sûr étant donné que la police est grande ça rend bien : faut voir ce que ca donne si tu réduis la police
Utile
+0
plus moins
Bonsoir
J'ai essayer de faire juste un menu en html et css voici l'adresse de la page :
http://www.zone-mobile.net/ccm.html
Qu'en pensez-vous?
Utile
+0
plus moins
Désolé mais là ca "arrache" carrement le jaune : c'est trop violent comme couleur


Le titre "Média gratuit ..." mis à part le fait que c'est un peu gros là ca va (par contre on ne vois que lui ;-) )

Les options du menu ne ressortent pas beaucoup : peut être en les mettant en noir ou en blanc ou en bleu plus foncé. Les mettre dans un énorme rectangle bleu n'est pas nécessaire : supprime la couleur du fond.
Utile
+0
plus moins
j'ai fais une autre version :
http://www.zone-mobile.net/ccm.html
voici le code de ccm.html :<!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" />
<link rel="stylesheet" type="text/css" href="index.css" />
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration:underline }
A:active {text-decoration: none }
A:hover {text-decoration: underline overline; color: white;}
</style>
</head>


<body>
<h1>Zone-mobile.net <br> Médias gratuits pour mobile</h1> <br/> <br/> <br/>
<br> <br> <br/>
<ul><li><a href="http://www.zone-mobile.net/accueil.php">Accueil</A></li><br><li><a href="http://www.zone-mobile.net/membre.php">Espace membre</A></li><br><a href="http://www.zone-mobile.net/form_inscription.php">S'inscrire</A></li><br><br><li><a href="http://www.zone-mobile.net/les_sonneries.php">Les sonneries</A></li><br><li><a href="http://www.zone-mobile.net/sms.php">Jeux et envois de sms</A></li><br><li><a href="http://www.zone-mobile.net/forum/index.php">Forum</A></li><br><li><a href="http://www.zone-mobile.net/formulaire.php">Contact</A></li><br><li><a href="http://www.zone-mobile.net/partenaires.php">Les partenaires</A></li><br><li><a href="http://www.zone-mobile.net/amis.php">Faire connaitre le site</A></li></ul>
<br> <br> <br/> <br/>
<img src="http://www.zone-mobile.net/images/pub.gif" border="0" alt="Banière du site" title="Banière du site"></center>

</body>
</html>
et index.css :html,body{background-color: #FF0000; color: white; text-align: center;
font-family : verdana;
font-size : 12px;
} h1{ background-color: #FF0000; font-size: 50px; width :100%;margin-right : auto;
height : 100%; }
ul {
list-style : none ;

margin-left : auto ;
margin-right : auto;
margin-top : 10px;
padding : 0 00 10px 0 ;

background-color : #000000;
text-transform : uppercase ;
font-weight : bold;

font-size : 15px; }

comment tu ferai un menu assez joli toi?
merci de ton aide et de ta patiance mais c'est pas facile pour moi d'autant que je ne vois pas beaucoup.
A+



Utile
+0
plus moins
Ben là disons que ta page est toute rouge ...

Et que tu as choisi des couleurs qu'en effet je ne mettrais pas ensemble.

En règle générale il vaut mieux éviter d'utiliser des couleurs trop saturées comme #FF0000, #00FF00, #0000FF

Tu vois mal les textes ou les couleurs ?

C'est pas pour être indiscret c'est juste que je ne suis pas sûr que mes explications soient pertinentes.

Sinon faire une page jolie ben c'est très subjectif

Disons que

http://www.nobodysperfect.freesurf.fr/fabrice/ccm.htm

j'ai mis un fond orange ca rappel la téléphonie, j'ai gardé ton titre en blanc sur fond bleu dont j'ai réduit un peu la taille et j'ai supprimé la couleur du fond du menu.

je trouve ca assez joli mais faudrait y consacrer plus que quelques minutes.

Sinon le plus simple est de laisser le fond blanc : ca passe partout.
Ou alors noir c'est pas mal aussi.

Utile
+0
plus moins
Salut et merci de ton aide.
Moi je vois... pas grand chose ! moin d'un 1/10ème.
Là la page tel que tu me l'as mi ça fait assez bien?
Puis ça correspond à quoi le <script> en bas (c'est une popup non?
au début je voulais mettre mes liens comme suis :
un tableau ou toutes les cases du tableau serai de même couleur et chaque lien qui serait dans ces cases d'une couleur différentes mais css me faisais pas les couleurs avec <table><tr><td...
Si y a un tableau tu le ferai comment toi? parce que moi je suis pas arrivé à le faire !
C'est bizarre d'un coup, je préfère le php que ça !
Merci encore
Utile
+0
plus moins
css
Utile
+0
plus moins
là j'ai fais ça :
http://www.zone-mobile.net/css.html
Est-ce que le menu comme ça irai et les couleurs?
merci
Utile
+0
plus moins
Bjr

Oui le popup je n'y peux rien c'est de la pub insèrée par mon provider : en utilisant un popup killer on peut la supprimer. Mais bon l'hébergement est gratuit donc je vais pas chipotter. Le jour où je veux un site pro sans pub je paye et basta LOL

Ta page http://www.zone-mobile.net/css.html ne fonctionne pas !

Sinon pour mon ex que te dires ... demande d'autres avis.
Le fond orange ça peut ne pas plaire. Les goûts et les couleurs...

Je comprends que tu préfères PHP au CSS : avec PHP tu sais ce que tu fais.

Avec le CSS il n'y a vraiment que lorsque tu visualises la page que tu peux te rendre compte du résultat : c'est pas intuitif du tout , c'est long et compliqué pour trouver un équilibre des couleurs, des polices, un look sympa.

C'est pourquoi j'utilise un logiciel graphique style PhotoShop pour faire mes essais : ensuite j'adapte en CSS.

De toute façon ta page est super extra géniale quand tu viens juste de la finir, mais quelques semaines plus tard tu la trouves quelconque alors ...


En CSS pour définir une couleur sur un lien hypertexte tu peux faire comme ceci (que le lien soit ou non dans un tableau c'est pareil)

<html>
<style>

/* Styles pour les liens lien_1 */
.lien1
{
	font-size : 24pt;
	font-weight : bold;
}


.lien_1:link		/* Pour les liens non visités */
{
   color : #0000C0;
}

.lien_1:visited		/* Pour les liens visités */
{
   color : #0000C0;
}

.lien_1:hover		/* Quand la souris survole le lien */
{
   color : #FF0000;
}

.lien_1:active		/* Lien en train d'être cliqué (mouse down ?) */
{
   color : #0000C0;
}


/* Styles pour les liens lien_2 */
.lien2
{
	font-size : 18pt;
	font-weight : bold;
}

.lien_2:link		/* Pour les liens non visités */
{
   color : #ff0030;
}

.lien_2:visited		/* Pour les liens visités */
{
   color : #ff0030;
}

.lien_2:hover		/* Quand la souris survole le lien */
{
   color : #00FF66;
}

.lien_2:active		/* Lien en train d'être cliqué (mouse down ?) */
{
   color : #ff0030;
}
</style>

<body>
<table>
<tr>
<td><a class="lien_1" href="#">Lien avec le style lien_1</a></td>
</tr>
<tr>
<td><a class="lien_2" href="#">Lien avec le style lien_2</a></td>
</tr>
</table>
</body>
</html>


j'ai défini 2 liens avec chacun leur style nommé lien_1 et lien_2

Utile
+0
plus moins
re
je me suis trompé de lien :
http://www.zone-mobile.net/tableau.html
ya pas le titre c'est pour voir si tu trouve bien comme ça...
merci
Utile
+0
plus moins
oui là ça va c'est lisible.

Le fond blanc pour le page finalement c'est ce qui passe le mieux

par contre tu peux le faire moins large ainsi on se rend mieux compte qu'il s'agit d'un menu

Utile
+0
plus moins
Moin large tu veux dire quoi? les cases des liens?
Après, est-ce que tu connais un code qui ferai une ou deux animation de photo (en fait des images de derniers portables).
Merci je pense qu'il faut du javascript mais comme je n'utilise pas se language...
Utile
+0
plus moins
Bonj'ai fais ça :
http://www.zone-mobile.net/ccm.html
peux-tu me dire si c'est potable?
Par contre maintenant que les couleurs des liens ont changés, les couleurs de liens visités... ne posent pas de pb?
CODE html :
<!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" />
<link rel="stylesheet" type="text/css" href="index.css" />
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration:underline }
A:active {text-decoration: none }
A:hover {text-decoration: underline overline; color: white;}
</style>
</head>


<body>
<h1>Zone-mobile.net <br> Médias gratuits pour mobile</h1> <br/> <br/> <br/>
<br> <br> <br/> <center><table><tr><td align="center" width="16%" bgcolor="#660066"><a href="http://www.zone-mobile.net/accueil.php"><font color="#FFFF99" size="2"><strong>Accueil</strong></font></A></td></tr><br><tr><td align="center" width="16%" bgcolor="#660066"><a href="http://www.zone-mobile.net/membre.php"><font color="#FFFF99" size="2"><strong>Espace membre</strong></font></A></td></tr><br><tr><td align="center" width="16%" bgcolor="#660066"><a href="http://www.zone-mobile.net/les_sonneries.php"><font color="#FFFF99" size="2"><strong>Les sonneries</strong></font></td></tr><br><tr><td align="center" width="16%" bgcolor="#660066"><a href="http://www.zone-mobile.net/sms.php"><font color="#FFFF99"><strong>Jeux et envois de sms</strong></font></A></td></tr><br><tr><td align="center" width="16%" bgcolor="#660066"><a href="http://www.zone-mobile.net/forum/index.php"><font color="#FFFF99"><strong>Forum</strong></font></A></td></tr><br><tr><td align="center" width="16%" bgcolor="#660066"><a href="http://www.zone-mobile.net/partenaires.php"><font color="#FFFF99"><strong>Les partenaires</strong></font></A></td></tr><br><tr><td align="center" width="16%" bgcolor="#660066"><a href="http://www.zone-mobile.net/formulaire.php"><font color="#FFFF99"><strong>Contact</strong></font></A></td></tr><br><tr><td align="center" width="16%" bgcolor="#660066"><a href="http://www.zone-mobile.net/amis.php"><font color="#FFFF99"><strong>Faire connaitre le site</strong></font></A></td></tr></table></center> <br> <br> <br> <br/> <br/>
<center><IMG SRC="http://www.zone-mobile.net/images/pub.gif" alt="Banière du site" border="0"></center> </body> </html>

et le css :html,body{
background-color: #FFFF33;
background-color: #F09940;
background-color: #FF9900;
background-color: #FFA700;



color: white; text-align: center;
font-family : verdana;
font-size : 12px;
}
h1{ background-color: #000066; font-size: 40px; width :100%;margin-right : auto;
height : 100%; }


/* Styles pour les liens */
a:link
{
color : #000066;
}

a:visited
{
color : #000066;
}

a:hover
{
color : #FFFFFF;
}

a:active
{
color : #000066;
}


merci


Utile
+0
plus moins
Oui par trop large j'entends que les cases (les balises <td>) sont trop large : tu as précisé width="16%" dans chaque td.
Supprime les et les cases vont s'ajuster au contenu le plus large, donc au texte le plus long.
Pratique non !

Pour les animations tu peux utiliser du Javascript ou du Flash

Si tu retournes sur ma page d'exemple :
http://www.nobodysperfect.freesurf.fr/zone-mobile/zone-mobile.htm

J'affiche une photo de portable (d'une marque suèdoise bien connue assez joli je trouve)
j'ai utilisé du javascript pour que ton menu apparaisse sur l'écran du portable lorsque tu cliques sur la photo comme si il s'allumait


Utile
+0
plus moins
Peux-tu me donner tout le code du menu que tu fais ?
Mais ça c'est en fait pour une description non?
Utile
+0
plus moins
c'est bon en effet ça change j'avais pas pensé au width !
http://www.zone-mobile.net/ccm.html
Maintenant faudrai que je mette peut-être des truc à gauche et à droite mais quoi? ta pas des images animées, qui pourrait avoir comme thème les mobile, le gratuit...
merci
Utile
+0
plus moins
salut
j'ai un amis canadien qui m'a fait ça :
http://www.zone-mobile.net/ccm(1).html
tu préfère celui là ou celui de tout à l'heure :
http://www.zone-mobile.net/ccm.html
?
merci

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !