debutant en html , j'ai deux trois problèmes

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : debutant en html , j'ai deux trois problèmes

sebfun

bonjour
je m'entraine actuellement a relooker une page web d'un site html existant
le site en question
http://www.bel-hardware.be/ (ce n'est pas mon site hein )

bref j'essaie de lui donner un nouveau look et par la même occasion j'apprend la xhtml

voici un screnn de ou j'en suis (j'ai commencé hier soir)

voici un screnn sous IE 6

voici un screnn sous firefox 2.0

bien evidemment le rendu de firefox s'approche le plus de ce que je veux

je vous expose tout mes problèmes :

-sous IE comment faire pour que le cadre de news soit a coté de celui du menu (comme firefox quoi)
-sous IE et firefox , le cadre avec les news matbe est decalé un tout ptit cran vers la gauche , j'aimerais qu'il le soit un tout ptit cran vers la droite
-dans la catégories articles (là ou ya le panneau stop) , je veux mettre toute les articles cote a cote avec un leger espace quand même(regardé le site d'origine , vous comprendrez)
pour que sa fasse un peu comme matbe.com .
-vous pouvez constatez deux liste a puce composé de <ul><li> , est il possible de mettre autre choses a la place des puces (les ptits losanges noir)

avez vous des idées pour améliorez le design ???
il est a notez que les couleurs sont là juste pour voir les differentes balises, elles ne sont pas définitives.
la banniere sera également changé
avez vous des idées de couleurs a mettre???

voici le css , la validation a été un succé sur w3c

Code :

body
{
width : 1000px ;
margin-left: auto; margin-right: auto;
margin-top : 20px ;
margin-bottom : 20px ;
background-color : #093A66 ;
color: #000000;
}
#entete
{
width: 1000px;
height: 100px;
background-image: url("bandeau.jpg" );
background-repeat: no-repeat;
margin-bottom: 10px;
border: 2px solid black;
}
#article
{
width: 1000px;
height: 120px;
background-color: #ffffff;
border: 2px solid black;
margin-bottom: 10px;
color: #000000;
}
.stop
{
width:auto;
height:auto;
padding:5px;
border: none;
}
#menu
{
float: left;
width: 140px;
}
.element_menu
{
background-color: #ffffff;
border: 2px solid black;
margin-bottom: 20px;
color: #000000;
font-weight: bold;
text-align: center;
}
.element_menu ul
{
text-align: left;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}
#news
{
background-color: #ffffff;
color: #000000;
border: 2px solid black;
padding: 5px;
width: 810px;
margin-left: 180px;
margin-bottom: 30px;
height: auto;
}
.pcinpact
{
background-color: #ffffff;
color: #000000;
border: 2px solid black;
width: 400px;
float: left;
margin-bottom: 10px;
height: 300px;
padding: 10px;
}
#site
{
background-color: transparent;
width: 1000px;
height: 350px;
}
.matbe
{
background-color: #ffffff;
color: #000000;
border: 2px solid black;
width: 400px;
float: left;
height: 300px;
margin-bottom: 10px;
padding: 10px;
margin-left: 152px;
}
#footer
{
text-align: center;
background-color: #ffffff;
color: #000000;
border: 2px solid black;
width: 1000px;
height: 60px;
}

je vous remercie d'avance

Message édité par sebfun le 09-11-2006 à 11:27:22

Publicité

ZeBix

edit > preview

Salut,

- Pour mettre d'autres images sur tes puces : http://www.w3.org/TR/REC-CSS2/generate.html
(cherche "list-style-image" sur cette page)

- Pour le cadre qui se met en dessous, 99% tu temps c'est un problème avec les float / clear / position:relative ... google cela ou va voir ici :
http://www.w3.org/TR/REC-CSS2/visuren.html#floats

Sans le code HTML de ta page c'est-à-dire sans savoir quel est l'élément auquel s'applique quelle propriété CSS, c'est un peu casse-têter à deviner ... (on pourrait faire un View Source sur le site existant mais bon ... )

sebfun

ok excuse moi voici mon code html

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>essai site belhardware</title>
<link rel="stylesheet" media="screen" type="text/css" title="essai" href="essai.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="entete">
</div>
<div id="article">
<div class="stop">
<a href="http://www.bel-hardware.be/fin.html"><img src="stop.jpg" alt="fin du site" title="Bel-Hardware, une "fin programmée !" /></a>
</div>
</div>
<div id="menu">
<div class="element_menu">
<ul>
<li><a href="http://www.bel-hardware.be/index.html">Acceuil</a></li>
<br>
<li><a href="http://www.bel-hardware.be/forum">Forum</a></li>
<br>
<li><a href="http://www.bel-hardware.be/apropos.html">A propos</a></li>
</ul>
<br>
</div>
</div>
<div id="news">
<ul>
<li><a href="http://www.compumsa.be">- 30/07 - Magasin online Computersmsa-Shop ouvert !!!!</li>
<li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=689">- 04/10 - ATIx1800xt : 9000-10000pts @ 3dm05!</li>
<li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=673">- 20/09 - Intel : Voici le futur !</li>
<li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=672">- 20/09 - Coup de main maison pour l'achat d'un 19" TFT !</li>
<li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=622">- 11/08 - Geforce 7800 GT -> Premier test !</li>
<li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=612">- 04/08 - X800GT -> Premier test !</li>
</ul>
<p><a href="http://www.bel-hardware.be/forum/viewforum.php?f=16">Toutes les news</p>
</div>
<div id="site">
<div class="pcinpact">
<script type="text/javascript" src="http://www.pcinpact.com/include/newspart.php?nb=8"></script>
</div>
<div class="matbe">
<script language="JavaScript1.1" type="text/javascript" src="http://www.matbe.com/export/exportnews.htm"></script>
</div>
</div>
<div id="footer">
<p>copyright bel-hardware, page d'acceuil créer par <a href="mailto:sebfun2003@hotmail.com">sebfun</a>
</div>
</body>
</html>*

Message édité par sebfun le 09-11-2006 à 11:26:53

Chaos Intestinal

Merci d'utiliser la balise [code] pour plus de lisibilité :jap:

sebfun

ok scuse , c'est fait

ZeBix

edit > preview

oki essaye de mettre un float:left; dans le "#news" dans ton CSS.

et rajoute ceci (toujours dans le CSS) :

Code :

.clear {
clear:both;
}

Et maintenant dans le HTML : après la DIV news rajoute une div vide :

Code :

<div id="clear"></div>

C'est plus "propre" ; ta div suivante (site) sera "correctement" mise en-dessous (elle l'est maintenant juste parce que ton cadre global et/ou ta taille d'écran n'est pas suffisante, autrement elle s'afficherait mal.

sebfun

merci , je ne connaissais pas la propriété "clear".

sinon euxx dans le css c'est #clear que jdois mettre pas .clear
vu que c'est un "id" non ^^

donc sous internet explorer sa rend deja nettement mieux
mais ptit probleme , le cadre "news" ainsi que le cadre "matbe" n'est pas correctement alligné avec le cadre "article"

j'ai definit un margin-left pour "matbe" et "news" mais il reste un tout ptit cran decalé vers la gauche
je rajoute donc un ptit pixel en plus et là sa fout le cadre carrément en dessous (du genre il passe une ligne et il continue)

que faire svp

sebfun

sebfun

ZeBix

edit > preview

Alors oui effectivement #clear si tu mets une ID ... mais tu peux mettre ".clear" et utiliser "class" (<div class="clear"> ) . Vu que le "clear" est susceptible d'être utiliser plusieurs fois, c'est même mieux. (car autant que je sache un ID tu ne peux l'utiliser qu'une fois).

Concernant tes cadres décalés, c'est sûrement parce que la somme des pixels fixes que tu mets, dépasser la taille des pixels fixes de ton cadre global et/ou de ton écran.

J'ai pas le courage de me replonger dans ton html/css mais regarde au niveau des margins, padding etc. si tu n'as pas des sommes de valeurs trop grandes.

Publicité

sebfun

ok merci , c'est corrigé

j'ai donc ameliorer le design
qu'en pensez vous
index.html

apropos.html

sebfun

sinon , comment ajoutez sur le dessus de chaque bloc , une sorte de cadre (un motif gif que j'ai)

Message cité 1 fois

sebfun

sebfun

ZeBix

edit > preview

sebfun a écrit :

sinon , comment ajoutez sur le dessus de chaque bloc , une sorte de cadre (un motif gif que j'ai)

Eh bien tu fais, au sein de la div représentant ton bloc, deux sous-div :

- la première contiendra ton image ou ce que tu veux
- la suivante contiendra ton texte.

Joue avec les float et les clear pour obtenir le design souhaité

Message cité 1 fois

Aghould

ZeBix a écrit :

Moi j'aurais plutôt mis ça dans le background du div du menu, avec un padding-top correspondant à la hauteur du visuel.

FORUM HardWare.fr

Programmation

HTML/CSS

debutant en html , j'ai deux trois problèmes

Sujets relatifs
pressé : récuperer une statistique sur une page html	[PHP]Envoi de mail au format html.
Aide HTML	Problèmes avec web Creator
Un programme java sur une page Html	Conversion de fichier html n .doc
[HTML/PHP] Exploiter un tableau html pour base de données	Propriété d'une page HTML à l'ouverture (pas window.open())
[HTML]bordure champ texte
Plus de sujets relatifs à : debutant en html , j'ai deux trois problèmes

Page générée en 0.090 secondes