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 ! =)
Configuration: Windows Vista
Firefox 3.0.10
Créer une page html avec image
