> Tous les forums > Forum des Webmasters
 CSS autre que "table"/formulaire contactSujet résolu
Ajouter un message à la discussion
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]
leela
  Posté le 30/11/2015 @ 18:16 
Aller en bas de la page 
Astucienne

Re, bonsoir!

Je voudrais avoir vos conseils!

Dans mon site de "smileys" j'ai fait un CSS avec "table" pour les cases de chacuns des smileys.

Mais je sais que c'est pas trop bien, alors si je fais autrement?

***dois je faire avec <li>image</li>

*** ou vu dans google

<div class="float">
 <img src="image1.gif" width="100" height="100"
 alt="image 1" /><br />
 <p>légende 1</p>
</div>

***Ou

<p class="flottante">image1</p>texte </p>

car je voudrais pouvoir écrire un texte dessous l'image pour un autre de mes sites!

je ne sais pas si je suis bien clair! merci



Modifié par leela le 10/01/2016 14:33
Publicité
elle
 Posté le 30/11/2015 à 18:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

C'est la mise en page par tableaux qui est déconseillée, donc présenter le site au complet dans un tableau... qui contient souvent d'autres tableaux.

Dans ton cas, la présentation des smileys peut très bien (je dirais même : doit) se faire dans un tableau.

Ton menu, par contre, devrait être sous forme de liste horizontale.



Modifié par elle le 30/11/2015 18:48
elle
 Posté le 30/11/2015 à 18:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Pour mettre du texte sous les images, il suffit de donner à ces dernières un display: block

.tableausmileys td img {
display: block;
}

elle
 Posté le 30/11/2015 à 18:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Juste pour dire que j'aime beaucoup les couleurs choisies pour ton site (ça me rappelle un des miens, en fait, qui n'existe plus pour l'instant ).

Tes pages sont claires, aérées, bref, agréables à l’œil et faciles à consulter.



Modifié par elle le 30/11/2015 18:53
Dreamer
 Posté le 30/11/2015 à 20:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Pour ton menu, tu faires ceci

html


<div class="navigation">
<ul>
<li><a class="actif" href="#">Accueil</a></li>
<li><a href="#">Mes créations</a></li>
<li><a href="#">Mes liens</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Pour le css

.navigation {
clear: both;
width: 100%; /*Dans la mesure où tu as mis une largeur fixe pour le contenu ou la page*/
border-bottom: 4px solid #E46FA6;
}

.navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.navigation ul li {
display: inline-block;
width: 180px; /*Si ta page fait dans les 760px de large*/
height: 50px;
margin: 0;
padding: 0;
text-align: center;
line-height: 30px;
}

.navigation ul li a {
text-decoration: none;
font-size: 16px; /*en fonction de ta police d'écriture*/
font-weight: bold;
color: #A6D4A5
}

.navigation ul li a:hover,
.navigation ul li a.actif {
color: #D2D2D2;
}

Ce n'est qu'un exemple ...

leela
 Posté le 01/12/2015 à 08:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Pour le menu, je pensais "div, div flotant à gauche et re div.... lol donc j'ai bien fait de vous demandez avant.

elle , Dreamer, merci je vais consulter toutes vos infos.

elle, merci pour le compliment, ça fait toujours plaisir.

je vous tiens au courant!

elle
 Posté le 01/12/2015 à 08:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

En fait, c'est assez simple pour savoir quoi utiliser :

Le code HTML doit transmettre la structure sémantique du document, avec les balises prévues à cet effet, qui déterminent la nature du contenu qu'elles encadrent. Donc, <h1> à <h6> pour les titres, <p> pour un paragraphe et non pour insérer des espaces , <ul> pour les listes, <table> pour un tableau, etc. Div signifie une division.

leela
 Posté le 02/12/2015 à 11:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Donc, <h1> à <h6> pour les titres, <p> pour un paragraphe et non pour insérer des espaces ,

oui, lol je vais essayer de revoir ça.

ça me décale tout alors j'ai fait au plus simple.

le menu est refait ! merci à vous deux.

leela
 Posté le 09/01/2016 à 17:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Donc, <h1> à <h6> pour les titres, <p> pour un paragraphe et non pour insérer des espaces ,

Bonjour,

Je vais refaire mon formulaire de contact.

Mais avant comment supprimer les espaces ? il y a une astuce? ou un code?

je dois mettre "line-height" ou"<br>?

merci



Modifié par leela le 09/01/2016 18:05
Publicité
Dreamer
 Posté le 09/01/2016 à 18:10 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Ou utilise un margin-top ou margin-bottom ??

leela
 Posté le 10/01/2016 à 11:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

-les espaces c'est OK!

-Pour mon formulaire de contact j'ai pris ce lien.

http://blueseodesign.com/web-design/formulaire-contact-html5-responsive/

ça fonctionne mais c'est bizarre! il me met leela.smiley@free.fr, à ecrit en haut du mail

car je n'utilise jamais cette adresse c'est juste l'adresse du site qui est sur Free.fr

J'ai bien reçu le mail à l'adresse que j'ai noté.

mais j'obtiens une page blanche avec le message "j'ai bien reçu votre message, merci"

comment faire pour retourner sur la page contact ?

merci

http://leela.smileys.free.fr/



Modifié par leela le 10/01/2016 11:38
Dreamer
 Posté le 10/01/2016 à 11:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

re

Si tu mets du php dans ta page, il te faut renommer ta page en contact.php et non contact html !!

Pour le retour, crée une page merci avec un meta refresh dessus de 5 à 10 secondes.

Donc, tu vas remplacer la ligne

echo"J'ai bien reçu votre message, merci";

par


print"<script>document.location.href='http://leela.smileys.free.fr/merci.html';</script>";

et ta page merci dans ce style

<!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=utf-8" />
<title>leela smileys, Page remerciements</title>
<meta name="Description" content="site de smileys, feminin,créations de smileys féminins, que des filles ">
<meta name="KeyWords" content="smileys,leela,bonjour,merci,emoticon,emoticons,gifs, smileys,smilette, smiley, fille, girl,girly">
<link rel="Shortcut Icon" href="http://leela.smileys.free.fr/imag/favicon.ico">http://leela.smileys.free.fr/imag/favicon.ico"/>
<link href="http://leela.smileys.free.fr/css/styles.css">css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class = "petitebarrehaut"></div>
  <div class= "central">
  <div class="header"><img src="http://leela.smileys.free.fr/imag/logorose.jpg">imag/logorose.jpg"  class="logo" alt="logo" />
    <h1 class="h1"> Leela Smileys</h1>
    </div>
    <div class="menunavigation">
      <ul>
      <li><a href="http://leela.smileys.free.fr/#">#">Accueil</a></li>
      <li><a href="http://leela.smileys.free.fr/lescreations.html">lescreations.html">Mes créations</a></li>
      <li><a href="http://leela.smileys.free.fr/contact.html">contact.html">Mes liens</a></li>
      <li><a href="http://leela.smileys.free.fr/contact.html">contact.html">Contact</a></li>
   </ul>
    </div>
etc .............
zoulouman
 Posté le 10/01/2016 à 13:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut,

Perso, je trouve ton site très bien fait comme il est à l'heure actuelle.

Comme le dit Elle, c'est aéré, c'est clair, très agréable à l'oeil, bref, c'est très bien !

Les tableaux pour présenter tes smileys sont une bonne solution. Si tu changes ça, tu vas te retrouver avec des pages qui changeront selon la largeur des smileys et, surtout, selon la taille écran de l'internaute.

Tu devrais rester sur des tableaux, ton site est très bien comme il est.

leela
 Posté le 10/01/2016 à 14:32 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Zoulouman, Oui, pour les tableaux c'est réglé, elle et Dreamer m'ont conseillés de les garder

maintenant, je suis sur le formulaire de contact, j'ai repris mon post à la suite.

Merci ça fait plaisir les compliments, c'est encourageant.

Dreamer,

Je suis trop contente , merci beaucoup!

MERCI à toutes et tous.



Modifié par leela le 10/01/2016 15:28
zoulouman
 Posté le 10/01/2016 à 17:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

C'est sincère. Ton site est très bien comme il est.

Bon, tu peux optimiser ce site au niveau SEO, mais la charte graphique est très bien comme elle est.

leela
 Posté le 12/01/2016 à 18:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Zoulouman' lol c est quoi SEO?

elle
 Posté le 12/01/2016 à 18:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

SEO = Search Engine Optimization

En français : optimisation pour les moteurs de recherche

Publicité
leela
 Posté le 13/01/2016 à 09:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

ah, bah c'est un site pour m'amuser et me faire la main!

Je vais quand même regardé pour l'améliorer, j'ai trouvé ce lien est il de bon conseil?

http://www.karinemiron.com/5-conseils-seo-pour-optimiser-votre-positionnement

merci.

http://www.maboite.qc.ca/site_web-referencement.php et celui-ci!



Modifié par leela le 13/01/2016 09:10
Malcolm
 Posté le 15/01/2016 à 23:19 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

hello,

il se peut que tu aies reçu des mails vides, c"'est moi

ta page n'est peut-être pas totalement complète... dis-moi si c'est le cas !

leela
 Posté le 16/01/2016 à 08:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

bonjour Malcolm, Oui des mails vides, hier soir 23h...4mails



Modifié par leela le 16/01/2016 08:34
Malcolm
 Posté le 16/01/2016 à 17:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

montre-nous (ou envoie moi en MP) le code de ton fichier "envoyer.php".

D'autre part, tu mélanges HTML5 et XHTML sur ta page de contact.

leela
 Posté le 16/01/2016 à 19:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

fichier envoyer.php envoyer en MP.

tu mélanges HTML5 et XHTML sur ta page de contact.

merci de me dire comment réparer mon erreur.

leela
 Posté le 16/01/2016 à 19:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

<!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">

c'est surement ce truc , bas un mauvais copier/coller d’où ça sort alors là ,je ne sais pas!!!

<!DOCTYPE HTML>
<html >

c'est bon comme ça?

Bonne soirée.



Modifié par leela le 16/01/2016 19:13
Malcolm
 Posté le 16/01/2016 à 23:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

j'ai répondu à ton message privé pour le code source.

Oui, avec ce doctype c'est mieux

leela
 Posté le 17/01/2016 à 11:28 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

<!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=utf-8" />
<title>Document sans nom</title>
</head>

<body>
</body>
</html>

bah, je comprends plus, je viens de voir que c'est "Dreamweaver " qui me met ce code quand je fais nouveau.html

dans chaque page j'ai ce code, alors pourquoi tu me dis que c'est pas bon? pour ma page contact! c'est peut être une question "idiote" mais je la pose!



Modifié par leela le 17/01/2016 14:08
Malcolm
 Posté le 17/01/2016 à 18:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

leela a écrit :

<!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=utf-8" />
<title>Document sans nom</title>
</head>

<body>
</body>
</html>

bah, je comprends plus, je viens de voir que c'est "Dreamweaver " qui me met ce code quand je fais nouveau.html

dans chaque page j'ai ce code, alors pourquoi tu me dis que c'est pas bon? pour ma page contact! c'est peut être une question "idiote" mais je la pose!

Malheureusement, Dreamweaver n'est qu'un logiciel, et, comme disait mon vénéré "Koala01" (dieu qu'il me manque...) << un logiciel ne pourra jamais faire mieux que ce qu'ont pu/su/voulu lui faire faire ses développeurs>>. En conséquence, si ton dreamweaver ne connait pas l'HTML 5, peut-être est-il temps de le mettre à jour (quelle version as-tu ? un MX2004 c'est sûr ... un dreamweaver CS6 qui ne connait pas HTML5, c'est grave ... ).

Ce que tu fais est donc la bonne manip, pas d'inquiétude, mais comme tu as pris un exemple venant d'un autre site, lui en HTML5, forcément il faut adapter ...

Sur ton site, c'est pas grave d'avoir une page en HTML5 et toutes les autres en XHTML 1.0 transitional : ça ne causera aucun bug technique (si tant est que le dctype est bien respecté) pas plus que ça n'aura d'impact, positif ou négatif, sur ton référencement. C'est juste que c'est plus logique de tout harmoniser, mais tu n'as nul besoin urgentissime dans l'état actuel des choses de tout refaire :-)

Publicité
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
17,99 €Clé USB 3.0 Philips Flash Drive Vivid Edition 128 Go à 17,99 €
Valable jusqu'au 01 Mars

Amazon fait une promotion sur la clé USB 3.0 Philips Flash Drive Vivid Edition 128 Go qui passe à 17,99 € alors qu'on la trouve ailleurs autour de 30 €. La livraison en relais colis est gratuite.


> Voir l'offre
109,90 €Alimentation PC modulaire Gigabyte P850GM (550W, 80+Gold) à 109,90 €
Valable jusqu'au 01 Mars

RueDuCommerce fait une promotion sur l'alimentation PC modulaire Gigabyte P850GM (850W, 80+Gold) qui passe à 109,90 € au lieu de 129,90 € ailleurs. Installez uniquement les câbles dont vous avez besoin pour réduire l’encombrement, augmenter le débit d’air et améliorer les performances thermiques du châssis.  Elle bénéficie d’un ventilateur à roulement hydraulique intelligent.


> Voir l'offre
125,46 €SSD WD Black SN750 1 To (NMVe M.2, 3470 Mo/s) à 125,46 € livré
Valable jusqu'au 28 Février

Amazon Allemagne fait une promotion sur le SSD WD Black SN750 1 To (NMVe M.2) qui passe à 120,91 €. Comptez 4,55 € pour la livraison en France soit un total de 125,46 € livré alors qu'on le trouve ailleurs à partir de 170 €. Ce SSD utilise une interface M.2 NVMe PCIe Gen3 x 4 pour une connexion simple et des performances exceptionnelles : jusqu’à 3 470 Mo/s en lecture séquentielle et jusqu’à 3 000 Mo/s en écriture séquentielle. Le SSD est doté de la technologie 3D TLC NAND haute densité offrant une endurance d’écriture durable et assorti d’une garantie de cinq ans.

Vous pouvez utiliser votre compte Amazon FR sur Amazon DE et il n'y a pas de douane.


> Voir l'offre

Sujets relatifs
déplacement de données d'une table à une autre
récup d'1 valeur d'1 table pour une autre table
Exporter donnes d'une table sql dans une autre
Effet d'une page sur une autre
Mon site est intégré dans un autre sans autorisation
Questions avant création de page web ou autre
Base de donnés d'un hébérgeur à un autre
transfert de données d'un forum à un autre
affichage table par odre alphabétique
Plugin Jquery ou autre pour Co-voiturage.
Plus de sujets relatifs à CSS autre que "table"/formulaire contact
 > Tous les forums > Forum Forum des Webmasters