Titre: ligne noir et CSS
Posté par: Balrog le le 03-08-2004 a 15:46:20
salut,
Suite aux conseils avisés d'un lapin psychotique, je tente de refaire la mise en page de mon site en CSS. Me voila confronté à mon premier probleme.
Tel que je l'avais codée initialement, la partie bannière faisait apparaitre une ligne noire entre les différents éléments qui la compose. Ceci grace à bgcolor="black" et cellspacing=1.
je n'arrive pas à reproduire ceci avec les CSS. Il doit y avoir une commande mais je ne la connais pas. Voici mon code CSS. Il ne couvre que la banière (quatre images) et j'ai enfin réussi à le faire s'adapter à toutes les largeurs sur IE (il m'a fallu des heures :P :'().
body
{
background-color: white;
margin: 0;
font-size: 8pt;
font-style;
width:750px;
}
.head1
{
border: 10px black;
width:100%;
height:38px;
background-color:#006600;
background-image: url(photos/vdnbaner.gif);
background-repeat: no-repeat;
}
.head2
{
margin:0;
width:100%;
height:30px;
background-color:#CC9966;
background-image: url(photos/vdnbaner2.gif);
background-repeat: no-repeat;
}
.head3
{
position:absolute;
right:0px;
top:0px;
margin:0;
width:272px;
height:68px;
background-color:black;
}
Voila voila, une idée? ;D
Merci d'avance
et bonne reprise au forum |
Titre: Re:ligne noir et CSS
Posté par: TinMar le le 06-08-2004 a 05:53:45
est ce que tu peux nous mettre le lien de ta page HTML ou le code pour voir please ?
Bye,
TinMar |
Titre: Re:ligne noir et CSS
Posté par: Balrog le le 06-08-2004 a 08:59:20
Salut,
merci de ta réponse,
Voici le code de la page actuelle (mis en page avec des tableaux).
<!-- BANIERE + NAV BAR -->
<tr>
<TD><TABLE border="0" cellspacing="1" cellpadding="0" bgcolor="black" width="100%">
<tr>
<td height="38" bgcolor="#006600"><img src="photos/vdnbaner.gif" alt="baner" width=400 height=37></td>
<td rowspan="3" width="136" height="85"><a href="photos/automne.jpg"><img src="photos/automne85.gif" title="Randonnée à l'Etang du Waldeck, couleur et nature d'automne" alt="Randonnée à l'Etang du Waldeck, couleur et nature d'automne" border="0" hspace="0"></a></td>
<td rowspan="3" width="136" height="85"><a href="photos/hiver.jpg"><img src="photos/hiver85.gif" title="Randonnées hivernales, Etang gelé de Hanau, hiver" alt="Randonnées hivernales, Etang gelé de Hanau, hiver" border="0" hspace="0"></a></td>
</tr>
<tr>
<td height="30" bgcolor="#CC9966"><img src="photos/vdnbaner2.gif" alt="baner" width=400 height=30></td>
</tr>
<tr>
<td height="15" bgcolor="#FFFFCC" class="standard"> <span class="bord"><b>»</span> <a href="index.html">Accueil</a> »</b> <span class="bord1">Alsace et Vosges du Nord en randonnées: nature, terroir...</span></td>
</tr>
</table></td>
</tr>
voila le code de la bannière tel qu'il est actuellement.
Et voici la façon dont je l'ai codé (tentative :-\...) en css.
<div class="head1"></div>
<div class="head2"></div>
<div class="head3">
<img src="photos/automne85.gif" border="0" hspace="0" width="136" height="85" align="left">
<img src="photos/hiver85.gif" border="0" hspace="0" width="136" height="85" align="left">
</div>
<b>»</span> <a href="index.html">Accueil</a> »</b> <span class="bord1">Les accompagnateurs montagne: randonnées, nature, terroir...
tu trouvera les informations Css dans mon post précédent.
merci pour le coup de main :)
|
Titre: Re:ligne noir et CSS
Posté par: TinMar le le 07-08-2004 a 12:47:22
J'ai un peu bosse pour toi, mais je sais pas si mon code est bon j'ai pas pris le temps de le faire verifier !
Bonne chance !
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body
{
background-color: white;
margin: 0;
font-size: 8pt;
width:750px;
}
.HeadLeft1
{z-index: 3;
position: absolute;
left:0px;
color: #006600;
border-bottom: solid 1px black;
width:100%;
height:38px;
background-color:#006600;
background-image: url(photos/vdnbaner.gif);
background-repeat: no-repeat;
}
.HeadLeft2
{z-index: 2;
position: absolute;
color: #CC9966;
left:0px;
margin:0;
width:100%;
height:68px;
border-bottom: solid 1px black;
background-color:#CC9966;
background-image: url(photos/vdnbaner2.gif);
background-repeat: no-repeat;
background-position: left bottom
}
.HeadLeft1 h1{display:none}
.HeadLeft2 h2{display:none}
.HeadRight{z-index: 4;
position:absolute;
right:0px;
top:0px;
margin:0;
height:85px;
background-color:transparent}
.HeadRight img{padding: 0; margin: 0}
-->
</style>
</head>
<body>
<div class="HeadRight">
<!-- Passe pas a la ligne apparement ca merde / oubli pas de mettre des alt-->
<img src="photos/automne85.gif" alt="automne" border="0" width="136" height="85"><img src="photos/hiver85.gif" alt="hiver" border="0" width="136" height="85">
</div>
<!-- Je mets du texte ou cas ou tu n'as pas de feuille de style -->
<div class="HeadLeft1"><h1>Vosges du Nord Rando</h1></div>
<div class="HeadLeft2"><h2>Decouvrez les vosges du nord en Marchant</h2></div>
</body>
</html> |
|
|
Titre: Re:ligne noir et CSS
Posté par: TinMar le le 07-08-2004 a 12:50:38
| Au fait, vu le nombre de page que tu as il faudrait peut etre que tu passe en php avec des includes parce que ca doit te donner de boulot non ?! ::) |
Titre: Re:ligne noir et CSS
Posté par: Balrog le le 07-08-2004 a 16:44:21
Salut :D,
je n'ai qu'une petite idée du boulot que ça t'as demandé. Tout de même merci beaucoup. Je n'ai pas encore testé :-[, mais je me jete dessus rapidement.
Pour le PHP et les includes, c'est comme les Css, il faut d'abord que j'apprenne. J'ai tout débuté il y a 3 mois. D'ici à ce que je maitrise à peu prés tout ces trucs, il faudra un petit moment encore.
et oui! tu as raison, modifier un élément du sommaire me donne beaucoup de boulot...
Si tu passe par les Vosges du Nord, rappelle moi de t'emmener en rando ;D
Encore merci |
Titre: Re:ligne noir et CSS
Posté par: TinMar le le 07-08-2004 a 19:31:06
Y a pas de quoi ! Par contre je sais pas si c'est la meilleure methode !!! Mais bon...
Si tu as commence y a trois mois c'est carrement bien ce que tu as fait. En tout cas tant qu'a mettre ton site avec des css et tout tu peux passer en php mais je suis pas sur que ton herbergeur l'accepte il faut que tu vois.
Pour les includes en php il faut que:
- Tu installes easyphp sur ta becane pour tester tes pages
- que tu vois si ton hebergeur accepte. Vu ton site tu peux limite prendre un herbergeur payant parce que ca peux valoir le coup il est bien ton site. En plus tu es deja bien place dans google il faut que tu arrives a gagne encore des places ! (http://www.google.fr/search?q=randonnee+vosges&sourceid=mozilla-search&start=0&start=0 (http://www.google.fr/search?q=randonnee+vosges&sourceid=mozilla-search&start=0&start=0))
- va jeter un coup d'oeil sur http://www.alsacreations.com/articles/include/ (http://www.alsacreations.com/articles/include/) pour savoir a quoi servent et comment on se sert des CSS et PHP
Enfin pour lea rendo pas de pb ! Quand je repasses en France et si j'ai l'occas de passer dans les vosges de jeterai un coup d'oeil sur ton site et je t'enverai un mail ;)
|
Titre: Re:ligne noir et CSS
Posté par: Balrog le le 07-08-2004 a 22:40:00
salut,
j'ai jeté un oeil sur le truc que tu m'a pondu. Ca marche, a ce détail près:
a droite entre les deux photos et le bord, il y a un pixel de visible des bande verte et beige-rose. Les deux photos ne sont pas tout à fait coler au bord. Il doit manquer un ou 2 px...
En parallèle, j'ai remodifié le code Css que je t'avais donné au début, j'ai obtenu le même résultat qu'avec ton code...
ton boulot m'a bien servi!
Je suis à peu prés sur que mon hébergeur n'accepte pas les PHP. et puis j'ai d'autre contrainte à gérer en plus alors pour l'instant, je vais buché les CSS et passerais à autre chose après.
Où trouve-t-on easy PHP?
Comme soft, J'utilise webexpert, il y a une rubrique php, mais j'ai zappé pour le moment.
Pour le moteur, avec randonnees (pluriel)+vosges, je suis troisième ;D...et d'autres mots clés (alsace, rando...) je suis toujours dans les 5 premiers.
Y a que avec rando ou randonnées tout court que je ne figure même pas dans les 10 prems... >:(. C'est là que je voudrais ammélioré...
Enfin dans tout ça, il me faut encore un peu d'expérience...
au fait t'es où à l'étranger.
A+
je me demande si nous devrions pas continuer ce chat par mail, sinon on va se faire gronder ;) |
Titre: Re:ligne noir et CSS
Posté par: TinMar le le 08-08-2004 a 14:51:12
Clair t pas mal place. Pour le tchat je surs rarement connecte et en plus avec le decalage c'est pas facile je suis en chine ! Sinon de tout facon si tu as des merdes envoi moi un mail.
Pour easyphp tu vas sur:
http://www.easyphp.org/
Pour le php c'est vraiment pas complique: On appelle ca des pseudo frame. Tu peux aller voir un peu sur internet et aussi sur les precedents messages du forum. Moi j'ai change mon site et je suis passe avec cette methode et ca fait gagner un temps fou. En gros tu mets ton menu ton bas de page dans un fichier que tu appel grace a une fonction PHP, la fonction incude. Tu peux aller voir aussi:
http://www.alsacreations.com/articles/frames/suite.php
Pour ce qui est du css c'est en faisant des tests que tu y arrives avec mozilla et IE en meme temps pour voir les differences d'affichage.
Pour la marge entre les deux images si tu ne passes pas a la ligne dans ton code apparement ca marche (en tout vas avec le code que je t'ai mis plus haut ca marche je crois)
bonne continuation.
Martin |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|