CSS/HTML : positionner une image

Fermé

SouthParkNews Messages postés 37 Date d'inscription jeudi 12 avril 2007 Statut Membre Dernière intervention 13 février 2010 - 7 mai 2009 à 19:58
SouthParkNews Messages postés 37 Date d'inscription jeudi 12 avril 2007 Statut Membre Dernière intervention 13 février 2010 - 10 mai 2009 à 18:57

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/c58985109a251c52a550111163b328ad20090507175909.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ôter 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">
    <p><p>
    <p><p>
    <p><p>
    <p><p>
    <p><p>
  </div>
  
  
   <a href=""><img src="images/accueil/gauche.PNG" width="266" height="201" border="0" id="gauche">
   
   
  <!-- 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:15px;
}

pan /***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:500px;
width:576px;
margin:0 auto;
}

gauche{
background-image:url('images/fond.PNG');
height:200px;
width:200px;
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

Voila pour le moment, si j'ai d'autre question je posterai sur le même sujet, merci de votre aide amis webmaster ! =)

A voir également:

CSS/HTML : positionner une image
Editeur html - Télécharger - HTML
&Nbsp html - Forum HTML
Espace en html - Astuces et Solutions
Faire un trait horizontal html css ✓ - Forum CSS
Espace html ✓ - Forum HTML

3 réponses

Réponse 1 / 3

SouthParkNews Messages postés 37 Date d'inscription jeudi 12 avril 2007 Statut Membre Dernière intervention 13 février 2010 2
7 mai 2009 à 20:19

J'ai réussi à mettre mon image sur le fond blanc avec le code suivant :

<div id="corps">
<a href=""><img src="images/accueil/gauche.PNG" width="266" height="201" border="0">
</div>

Mais je ne vois pas, par la suite, comment dire à mon code de mettre l'image exactement comme je l'ai mise sur mon design (premier lien). Avec un SPAN, un CLASS ? Je vois pas trop !

Merci

Réponse 2 / 3

SouthParkNews Messages postés 37 Date d'inscription jeudi 12 avril 2007 Statut Membre Dernière intervention 13 février 2010 2
8 mai 2009 à 19:13

Petit up ! =)

Réponse 3 / 3

SouthParkNews Messages postés 37 Date d'inscription jeudi 12 avril 2007 Statut Membre Dernière intervention 13 février 2010 2
10 mai 2009 à 18:57

Aidez-moi s'il vous plait : =(

Discussions similaires

la balise <br> ou <br />

Saut de lignes sans <br/>

Balise </br>

Que veut dire <p> </p>?