18041 sujets

Questions générales et questions de débutants

CSS/HTML - Positionner les images

Pages :
Bonjour,

Je suis en train de créer un site Internet, et j'ai quelques souci avec le CSS et le HTML.
J'ai créé une maquette de mon site et j'aimerais la programmer.
Je sais bien que mon code n'est pas à 100% bon mais je fais ce que je peux dans les règles.

Je vous donne ci-dessous les problèmes rencontrés et les codes que j'ai tapé :

Alors, voici l'image de la maquette que j'ai réalisé, il manque encore des éléments mais ils ne sont pas indispensables pour régler mon problème.

http://www.weplug.com/images_1/c58985109a251c52a550111163b32­8ad20090507175909.png

Ce que j'aimerais faire, et ce que je parviens pas à faire, ce sont les points suivants :

- Le logo "Fringues" et "Mon panier", j'aimerais que le logo soit aligné au design sur la gauche, et "Mon panier" aligner à droite avec mon design.
- J'aimerais intégrer l'image de la femme métisse sur le fond blanc à travers ma feuille de style CSS (id="gauche"). Mais elle ne se positionne pas où je veux.

Ce sont les deux gros points pour le moment. A côté de cela j'ai quelques petits problèmes que je comprend pas :

- Le "Copyright" est souligné, je vois pas pourquoi...
- "C'est l'été" et la phrase qui l'accompagne, est-ce possible de le faire via le CSS avec la même police, la même taille et au même endroit ?

Voici ma page "accueil.html" et "style.css" que j'ai codé :

accueil.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Fringues - Vêtements homme, femme et enfant !</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
   
    <ul>
      <li><a href="accueil.html"><img src="images/header.PNG" border="0" id="header" alt="header" /></li>
      <li><a href="panier.html"><img src="images/panier.PNG" border="0" id="pan" alt="panier" /></li>	
    </ul>

<br><br>
<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td><a href=""><img src="images/menu/1.PNG" width="85" height="28" border="0"></td>
    <td><a href=""><img src="images/menu/accueil.PNG" width="51" height="28" border="0"></td>
    <td><a href=""><img src="images/menu/2.PNG" width="42" height="28" border="0"></td>
    <td><a href=""><img src="images/menu/homme.PNG" width="65" height="28" border="0"></td>
    <td><a href=""><img src="images/menu/femme.PNG" width="69" height="28" border="0"></td>
    <td><a href=""><img src="images/menu/enfant.PNG" width="62" height="28" border="0"></td>
    <td><a href=""><img src="images/menu/3.PNG" width="24" height="28" border="0"></td>
    <td><a href=""><img src="images/menu/contact.PNG" width="119" height="28" border="0"></td>
    <td><a href=""><img src="images/menu/4.PNG" width="60" height="28" border="0"></td>
  </tr>
</table>
   
  
  <!-- ON AFFICHE LE FOND POUR L'ESPACE DE CONNEXION ET LA RECHERCHE  -->
  
  <div id="connexion"></div>  
  
  <!-- ON AFFICHE LE CORPS DE LA PAGE  -->  
   
  <div id="corps">
  <span style="position: left; top: 80 px; left: 100 px;width: 103px; height: 61px"> <!-- IMAGE DE GAUCHE -->
  <img src="images/accueil/gauche.PNG" >
  </span>
  <span style="position: right; top: 80 px; left: 100 px;width: 103px; height: 61px"> <!-- IMAGE DE DROITE -->
  <img src="images/accueil/droite.PNG" >
  </span>
  </div>
  
   
  <!-- ON MET LE COPYRIGHT DU SITE -->  
   
  <div id="bas">Design "Société Fringues" :: Copyright © 2009</div>
</body>
</html>




Feuille de style :

a:visited {color:white;}/*Couleur des liens visité*/
a{color:white;}/*La couleur des liens*/

body /***Le bloc page***/
{
text-align:center;
background-image:url('images/fond.PNG');
margin:auto;
color:white;
}

header  /***Le header ***/
{
height:90px;
width:120px;
margin:auto;
margin-top:0px;
}

#panier /***Le Panier***/
{
height:90px;
width:800px;
margin:auto;
margin-top:15px;
}
ul.menu /***Le menu ***/
{
background-image:url('images/fond.PNG');
height:100px;
width:576px;
margin:0 auto;
padding-top:2px;
text-align:left;
list-style-type : none;
}

li{
display : inline;
padding : 0 0.5em;
margin:0;
}

div#corps /***Le corps de la page***/
{
background-image:url('images/corps.PNG');
height:600px;
width:576px;
margin:0 auto;
}

div#bas /***Copyright ***/
{
background-image:url('images/footer.PNG');
font-size: 8pt; 
color: #FFFFFF; 
font-family: Verdana;
height:24px;
width:576px;
margin:auto;
padding-top:4px;
}

div#connexion /***Espace connexion et recherche***/
{
background-image:url('images/connexion.PNG');
height:46px;
width:576px;
margin:auto;
padding-top:4px;
}

p /**Balise paragraphe pour le texte**/
{
padding:15px;
margin:0;
}


Voici pour le moment, le résultat obtenu avec ces deux codes :

http://www.weplug.com/images_1/e46bf8e34a7af4c747c5ef605f9144ad20090507180446.png

ou le site

http://shade45.free.fr/projet/accueil.html

Je dois dire que je commence à me perdre avec le CSS/HTML pour placer les images entre SPAN, DIV, ... je code un peu dans tous les sens. A noter que la page, ou que ce soit sur le fond blanc, me propose un lien vers "accueil.html", je comprend pas pourquoi.

Voila pour le moment, si j'ai d'autre question je posterai sur le même sujet, merci de votre aide amis webmaster ! =) [code]
Modifié par DKProject (10 May 2009 - 20:11)
D'accord j'irai voir, mais pour ce qui est des fautes je comprend pas trop le validateur. Il me met des fautes à toutes mes balises alors que pourtant il n'y a apparemment pas de problème. Il me met aussi des erreurs XML, un peu d'aide serais le bienvenu !
Les erreurs sont assez simple à comprendre pourtant : tu oublies de fermer certaines balises (a, img), tu oublies des attributs (alt).

Tu utilise un doctype XHTML, mais tu ne respecte pas sa rigueur (HTML est plus laxiste sur les fermetures de balises).
Oui je vois bien, mais pourquoi il me met les balises html et br, par exemple, en rouge alors que ces balises là sont forcement bien construites. A noter que mon "site" qui est plutôt un projet qui me permet de toucher un peu a toutes les programmations (sql, vba, php) par la suite, ne doit pas forcement répondre a 100% aux normes w3c ! Mais c'est sur que ce serai beaucoup mieux si il etait en conformité mais là c'est vrai que y'a des erreurs que je ne comprend pas trop.

Cela serait t-il possible de m'aider sur les autres points en faisant abstraction de mon code pas très reglementaire ? Par exemple le copyright souligné, mon code au niveau des div, class, ... si il y a des méthodes a préfèrer pour les actions voulues, ...

Merci de votre aide !
Re',

DKProject a écrit :
Cela serait t-il possible de m'aider sur les autres points en faisant abstraction de mon code pas très reglementaire ?
Ben non parce que tant qu'un code n'est pas valide on ne peut pas être sûr que les problèmes ne viennent pas de là... d'autant plus que dans ton cas il s'agit essentiellement d'éléments que tu ouvres et que tu ne fermes pas (<li><a>...</a></li>)

Pour corriger il faut partir des règles d'écriture du code déterminées par le doctype que tu as choisi.

Accessoirement Alsacréations est dédié aux standards du web et à l'accessibilité donc un code valide c'est le minimum syndical. Smiley langue
DKProject a écrit :
D'accord, je vais essayer de corriger mon code et vous le recopier ici ! Merci
Le corriger est une bonne idée... mais inutile de le recopier ici puisque tu nous as déjà fourni le lien vers la page en ligne. Smiley smile
Oui effectivement ! Par contre, pour m'aider dans ma démarche, le validateur me dis que la balise LI n'est pas fermée, mais quand je regarde mon code il y a bien un <li> puis un </li>.

Il me reste plus que 9 erreurs pour le moment.

Une fois que j'ai ajouté "alt" mes deux images on disparu et j'ai "gauche" et "droite" de marquer à la place.
Modifié par DKProject (11 May 2009 - 19:43)
Le problème vient de ce que tu ouvres des liens <a href ...> mais que tu ne les fermes pas </a>
Et mettre juste "/>" ça marche aussi ?

9 erreurs restantes (li, html, body)
Modifié par DKProject (11 May 2009 - 19:52)
Lorsque je le place à toutes les lignes où il est nécessaire j'ai beaucoup plus d'erreur que quand je le retire. Je vais réessayer.

<a href="panier.html"><img src="images/panier.PNG" border="0" id="pan" alt="panier"</a></li>

euh ça doit pas être dans ce sens là, NotePad me le marque pas en couleur.
Modifié par DKProject (11 May 2009 - 20:07)
Est-ce que par hasard tu ne respecterais pas l'imbrication et écrirais
<li><a>...</li></a>
au lieu de
<li><a>...</a></li> ?
euh... ben non, j'ai le LI ouvert, puis mon lien A, puis je ferme la balise A, et enfin je ferme la balise LI juste derrière.
DKProject a écrit :
Lorsque je le place à toutes les lignes où il est nécessaire j'ai beaucoup plus d'erreur que quand je le retire. Je vais réessayer.

<a href="panier.html"><img src="images/panier.PNG" border="0" id="pan" alt="panier"</a></li>

euh ça doit pas être dans ce sens là, NotePad me le marque pas en couleur.


Tu n'as pas fermé la balise img Smiley cligne
mistike a écrit :


Tu n'as pas fermé la balise img Smiley cligne


Oui je sais, j'avais corrigé par la suite. Le code est disponible sur cette page : http://shade45.free.fr/projet/accueil.html ! Smiley biggrin

PS : J'ai réussi à tirer le trait de soulignement sur le copyright. Je sais pas comment mais il est parti ! Smiley confused
Modifié par DKProject (11 May 2009 - 20:15)
Ce n'est pas
<a href="..."/>...</a>
mais
<a href="...">...</a>

Ce n'est pas
<br></br>
mais
<br />
Merci pour les BR. Mais pour le A, ce n'est pas ici que le slash me gêne, c'est après le lien de l'image entre les balises A. Si je met ça dans cette position il m'indique 45 erreurs.
DKProject a écrit :


PS : J'ai réussi à tirer le trait de soulignement sur le copyright. Je sais pas comment mais il est parti ! Smiley confused


Sûrement en fermant une balise <a> qui trainait Smiley cligne

Tu devrais essayer d'indenter ton code, peut-être y verrais-tu plus clair et oublierais moins de balises fermantes Smiley cligne
Pages :
Sujet clos
Aller à