Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Mac OS Autres OS Mac OS X Faire un site web élégant facilement

Faire un site web élégant facilement

31 réponses
Avatar
fra
Hello

Mon frère m'a demandé de lui faire un site web pour son activité. Je lui
ai fait une page de base avec SeaMonkey, mais j'aimerais faire quelque
chose de plus classe avec un menu statique en haut (éventuellement
translucide quand ça défile), avec des transitions de page ou des
remplacement de contenus (plutôt que le chargement d'une nouvelle page).

J'ai des connaissances extrêmement limitée en html (c'est pour ça que
j'utilise SeaMonkey -comme j'utiliserais word-).

J'ai fais quelques essais avec WordPress sur les pages perso de free
mais j'ai vite été bloqué. Il a fallu que j'utilise une ancienne version
de wordpress et je n'arrive pas à changer de thème (peut être à cause de
l'ancienne version). Je n'ai pas trouvé non plus comment placer un beau
menu bandeau en haut. Et pour le moment ça ressemble à un blog tout
moche et non à un site "commercial".

Je cherche donc un outil très facile d'usage qui permette de faire des
sites classes avec les effets html5 que l'on peut voir actuellement.

Et là vous me dites : "si ça existait tous les web-designers seraient au
chômage".
Mais en vrai, ça existe ou pas ?

Merci d'avance.
--
Fra
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3 4
Avatar
fra
Jacques Perrocheau wrote:

Ce sont les browsers, Safari comme Firefox (user agent stylesheet), qui
rajoutent une marge de 8 pixels pour ne pas avoir de texte au ras de
limite de la fenêtre.



On peut s'en affranchir comment ?
(J'ai essayé ton nouveau code mais c'est pareil)
--
Fra
Avatar
Olivier Miakinen
Bonjour,

Le 28/12/2014 15:37, MV a transféré dans le bon groupe la question
de Fra :

Quelqu'un saurait-il me dire pourquoi j'ai une marge de 8 pixels autour
de ce menu (haut gauche droite) ?



Avant de pouvoir chercher plus loin, il faudrait que ton code soit du
HTML sans erreur, parce que sinon n'importe quoi peut arriver.

Tu peux voir par exemple ici : <http://validator.w3.org/check>.

code :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>



Il manque un <title> dans le <head>

<body
bgcolor="#000000" text="#ffffff" vlink="#96be1c" alink="#96be1c"
link="#96be1c">
<font face="Helvetica, Arial, sans-serif">
<style type="text/css">.wifeo_pagemenu >



Une balise <style> doit être dans le <head> et pas dans le <body>.

a{color:#FFFFFF;text-decoration:none} .wifeo_pagemenu:hover >
a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_rubrique >
a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique:hover >
a{color:#FFFFFF;font-weight:bold;text-decoration:none}
.wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none}
.wifeo_conteneur_menu{border-spacing:0px}
.wifeo_conteneur_menu{width:100%;display:table;background-color:#7D7D7D;height:50px;border-bottom:0px
solid #7D7D7D} .wifeo_pagemenu > a, .wifeo_rubrique >
a{text-decoration:none;display:table-cell;vertical-align:middle;height:50px;padding:0
0px;width:100%;font-size:18px;text-align:center;-webkit-transition:all
0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagemenu > a:hover, .wifeo_pagesousmenu >
a:hover{background-color:#7D7D7D;font-size:20px} .wifeo_rubrique:hover >
a{background-color:#7D7D7D;font-size:20px} .wifeo_pagemenu,
.wifeo_rubrique{float:left;position:relative;width:33.333%;text-align:center;display:table}
.wifeo_sousmenu{left:0;opacity:0;position:absolute;top:0;visibility:hidden;z-index:1;width:100%}
@media screen and
(min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}}
.wifeo_rubrique:hover
.wifeo_sousmenu{opacity:1;visibility:visible;top:50px}
.wifeo_pagesousmenu{border-left:0px solid #7D7D7D} .wifeo_pagesousmenu
a{background:#7D7D7D;width:100%;display:inline-block;height:38px;padding:0px
0;font-size:18px;text-align:center;-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagesousmenu
a:hover{background:#7D7D7D;width:110%;display:inline-block}</style>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">



Idem pour <meta> que pour <style>.

<nav>



La balise <nav> n'existe pas.

<div class="wifeo_conteneur_menu">
<div class="wifeo_rubrique"><a href="#mw999">A propos</a>
<div class="wifeo_sousmenu"></div>
</div>
<div class="wifeo_rubrique"><a href="#mw999">Réalisations</a>
<div class="wifeo_sousmenu"></div>
</div>
<div class="wifeo_rubrique"><a href="#mw999">Contacts</a>
<div class="wifeo_sousmenu"></div>
</div>
</div>
</nav>
</font>
</body>
</html>
++++++++++



Cordialement,
--
Olivier Miakinen
Avatar
Anne G
Le 27/12/14 08:16, Fra a écrit :
Hello

Mon frère m'a demandé de lui faire un site web pour son activité. Je lui
ai fait une page de base avec SeaMonkey, mais j'aimerais faire quelque
chose de plus classe avec un menu statique en haut (éventuellement
translucide quand ça défile), avec des transitions de page ou des
remplacement de contenus (plutôt que le chargement d'une nouvelle pag e).

J'ai des connaissances extrêmement limitée en html (c'est pour ça que
j'utilise SeaMonkey -comme j'utiliserais word-).

J'ai fais quelques essais avec WordPress sur les pages perso de free
mais j'ai vite été bloqué. Il a fallu que j'utilise une ancienne version
de wordpress et je n'arrive pas à changer de thème (peut être à cause de
l'ancienne version). Je n'ai pas trouvé non plus comment placer un be au
menu bandeau en haut. Et pour le moment ça ressemble à un blog tout
moche et non à un site "commercial".

Je cherche donc un outil très facile d'usage qui permette de faire de s
sites classes avec les effets html5 que l'on peut voir actuellement.

Et là vous me dites : "si ça existait tous les web-designers seraie nt au
chômage".
Mais en vrai, ça existe ou pas ?

Merci d'avance.




Freeway, chez Softpress.
La version d'essai, valable un mois, est parfaite.
Avatar
Anne G
Le 28/12/14 17:10, Anne G a écrit :

Freeway, chez Softpress.
La version d'essai, valable un mois, est parfaite.



Et le forum d'entraide est très sympa.
http://www.tri-edre.fr/fr/freeway.html
Avatar
fra
Anne G wrote:

Freeway, chez Softpress.



Ca n'a pas l'air mal. Je vais essayer. (Les ancres/poignets d'objets
sont un peu petites)
--
Fra
Avatar
fra
Olivier Miakinen <om+ wrote:

Avant de pouvoir chercher plus loin, il faudrait que ton code soit du
HTML sans erreur, parce que sinon n'importe quoi peut arriver.



Désolé, je débute.


Tu peux voir par exemple ici : <http://validator.w3.org/check>.

> code :
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
> </head>

Il manque un <title> dans le <head>



En fait je l'ai enlevé pour anonymiser un peu.


> <body
> bgcolor="#000000" text="#ffffff" vlink="#96be1c" alink="#96be1c"
> link="#96be1c">
> <font face="Helvetica, Arial, sans-serif">
> <style type="text/css">.wifeo_pagemenu >

Une balise <style> doit être dans le <head> et pas dans le <body>.

[...]

Idem pour <meta> que pour <style>.



OK.
--
Fra
Avatar
Anne G
Le 29/12/14 05:25, Fra a écrit :
Anne G wrote:

Freeway, chez Softpress.



Ca n'a pas l'air mal. Je vais essayer. (Les ancres/poignets d'objets
sont un peu petites)



Ça a été monté pour les graphistes, avec les même outils et rac courcis
que QuarkXpress.

Pour moi, en tout cas, c'est parfait.
Avatar
jperrocheau
Fra wrote:

Jacques Perrocheau wrote:

> Ce sont les browsers, Safari comme Firefox (user agent stylesheet), qui
> rajoutent une marge de 8 pixels pour ne pas avoir de texte au ras de
> limite de la fenêtre.

On peut s'en affranchir comment ?



Comme ceci, en rajoutant une valeur de 0px pour la propriété "margin"
dans le sélecteur "body" de la feuille de style :

body{ margin: 0px; }

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<style type="text/css">
body{ margin: 0px; }
.wifeo_pagemenu >
a{color:#FFFFFF;text-decoration:none} .wifeo_pagemenu:hover >
a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_rubrique >
a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique:hover >
a{color:#FFFFFF;font-weight:bold;text-decoration:none}
.wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none}
.wifeo_conteneur_menu{border-spacing:0px}
.wifeo_conteneur_menu{width:100%;display:table;background-color:#7D7D7D;height:50px;border-bottom:0px
solid #7D7D7D} .wifeo_pagemenu > a, .wifeo_rubrique >
a{text-decoration:none;display:table-cell;vertical-align:middle;height:50px;padding:0
0px;width:100%;font-size:18px;text-align:center;-webkit-transition:all
0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagemenu > a:hover, .wifeo_pagesousmenu >
a:hover{background-color:#7D7D7D;font-size:20px} .wifeo_rubrique:hover >
a{background-color:#7D7D7D;font-size:20px} .wifeo_pagemenu,
.wifeo_rubrique{float:left;position:relative;width:33.333%;text-align:center;display:table}
.wifeo_sousmenu{left:0;opacity:0;position:absolute;top:0;visibility:hidden;z-index:1;width:100%}
@media screen and
(min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}}
.wifeo_rubrique:hover
.wifeo_sousmenu{opacity:1;visibility:visible;top:50px}
.wifeo_pagesousmenu{border-left:0px solid #7D7D7D} .wifeo_pagesousmenu
a{background:#7D7D7D;width:100%;display:inline-block;height:38px;padding:0px
0;font-size:18px;text-align:center;-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagesousmenu
a:hover{background:#7D7D7D;width:110%;display:inline-block}</style>
</head>
<body bgcolor="#000000" text="#ffffff" vlink="#96be1c" alink="#96be1c"
link="#96be1c">

<!-- <font face="Helvetica, Arial, sans-serif"> -->
<nav>
<div class="wifeo_conteneur_menu">
<div class="wifeo_rubrique">
<a href="#mw999">A propos</a>
<div class="wifeo_sousmenu">
</div>
</div>
<div class="wifeo_rubrique">
<a href="#mw999">Réalisations</a>
<div class="wifeo_sousmenu">
</div>
</div>
<div class="wifeo_rubrique">
<a href="#mw999">Contacts</a>
<div class="wifeo_sousmenu">
</div>
</div>
</div>
</nav>
<!-- </font> -->
</body>
</html>

(J'ai essayé ton nouveau code mais c'est pareil).



Ben oui ! je n'avais rien changé dans la feuille de style, simplement
mis en forme la code html pour qu'il soit plus propre.

--
Jacques Perrocheau
______________________________________________________________________
Avatar
Olivier Miakinen
Le 29/12/2014 13:28, Fra a écrit :

Avant de pouvoir chercher plus loin, il faudrait que ton code soit du
HTML sans erreur, parce que sinon n'importe quoi peut arriver.



Désolé, je débute.



Ce n'était pas tant un reproche qu'un conseil. Si ça se trouve, dès que
les erreurs auront été corrigées ça fonctionnera comme tu le souhaites.
Avatar
Olve
Bonjour,

Si te ne repostes pas le code corrigé ...

Ye ne souis pas non plus un spécialiste mais, avec Mozilla Firefox, on
dispose dans le menu Outils/Développement web (il faut peut être
l'installer, j'ai oublié) de plusieurs outils. Commence par Outils de
développement qui ouvre tout je crois. Bref avec "Inspecter", tu verras
la taille des zones et le code css attenant. C'est idéal pour régler les
marges / padding etc. Sinon, sous clic-droit, la dernière entrée est
"Examiner l'élément" et donne la structure css correspondante.

JQCA, O.
1 2 3 4