CSS/HTML : positionner une image
SouthParkNews
Messages postés
37
Date d'inscription
Statut
Membre
Dernière intervention
-
SouthParkNews Messages postés 37 Date d'inscription Statut Membre Dernière intervention -
SouthParkNews Messages postés 37 Date d'inscription Statut Membre Dernière intervention -
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 :
Feuille de style :
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 ! =)
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
- Espace en html ✓ - Forum HTML
- Espace html ✓ - Forum Webmastering
- Html download - Télécharger - HTML
- /Var/www/html/index.html ✓ - Forum Linux / Unix
3 réponses
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
<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
