28172 sujets

CSS et mise en forme, CSS3

Petit soucis avec ccs

Pages :
Bonjour,
Voila je vient de crée mon site et j'ai quelques petit problème
Le lien du site est : http://www.radio-geek.fr/index.php

Problème 1 : Quand on utilise le menu déroulant les images sont décaler (voir les barre rouge sur le screen ) http://je-stock.fr/getfile.php?file_id=18&file_key=wges6

Problème 2 : Il y a un décalage entre le menu et le contenu voir images : http://je-stock.fr/getfile.php?file_id=18&file_key=wges6

Code du header :

<!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" lang="fr">

<head>
<meta name="copyright" content="Copyright Association SD-web" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Radio-Geek :: <? echo $title; ?></title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<?
include('config.php'); 
?>



<body><div id="banniere">
<div id="top">
  
    <?php
$fp = fsockopen ("pewo.fr", "8200", $errno, $errstr, 30);
if (!$fp) {
    echo "$errstr ($errno)<br>\n";
} else {
    fputs ($fp, "GET / / HTTP/1.0\r\nUser-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)\r\nHost: 212.43.196.210:8000\r\n\r\n");
    while (!feof($fp)) {
        $line = fgets ($fp,21048);
    eregi( "<font class=default>Current Song: </font></td><td><font class=default><b>(.*)</b></td></tr></table>", $line, $regs );
    $currentsong = htmlspecialchars($regs[1]);
     }
fclose($fp);
}

?><div style="margin-left: 350px;">
<? echo "$currentsong";?> </div><div id="votem"><span id="votep"><a href="dedi.php?page=plus"><img title="Tu est pour ?" src="images/up.png" width="40" height="40" border="0"></a></span>  <span id="votec"><a href="dedi.php?page=moins"><img title="Tu est contre ?" src="images/down.png" width="40" height="40" border="0"></a></span></div></div>

<div id="conteneur">


<link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>

<script>
$(document).ready(function(){
$("#menu div").each(function(){
$(this).mouseover(function(){
$(this).children("ul").slideDown("fast");
if($.browser.msie) { var hauteur = $(this).width();	$(this).children("ul").css({marginLeft:"-"+hauteur+"px"});   }
$(this).prev().children("ul").fadeOut("fast");
$(this).siblings().children("ul").fadeOut("fast");
});
});
$("body").click(function(){
$("#menu div ul").fadeOut("fast");
});
});


</script>
<div id="menubar">	<div id="menulein"> <div id="menu">
<div>
	<a title="Accueil" href="index.php"><img src="images/bot1.png" border="O"></a>
	
	</div>
	<div>
	<a title="Voir tous les articles classs dans MFR en bref" href="#mfr-en-bref/"><img  border="O" src="images/bot2.png"></a>
	<ul style="display:inline;">
		<li><a href="player.php"><img src="images/listen.png" border="0" ></a><br></li>
		<li><a href="programe.php"><img src="images/les-programmes.png" border="0" ></a><br></a></li>
		<li><a href="class.php"><img src="images/top-10.png" border="0" ></a><br></a></li>
		<li><a href="equipes.php"><img src="images/lequipes.png" border="0" ></a><br></a></li>
	</ul>
	</div>
	<div>
	<a title="Voir tous les articles classs dans Mtiers" href="#metiers/"><img  border="O" src="images/bot3.png"></a>
	<ul style="display:inline;">
		<li><a href="webcam.php"><img src="images/webcam.png" border="0" ></a><br></li>
		<li><a href="dedicasse.php"><img src="images/dedi.png" border="0" ></a><br></li>
		<li><a  href="livre-or.php"><img src="images/livre-or.png" border="0" ></a><br></li>
	</ul>
	</div>
	<div><a title="Voir tous les articles classs dans Nos Formations" href="#nos-formations/"><img  border="O" src="images/bot4.png"></a>
	<ul style="display:inline;">
		<li><a title="Voir tous les articles classs dans Sports questres" href="#le-secteur-des-sports-equestres/">Partenairs</a></li>
		<li><a title="Voir tous les articles classs dans levage Jeunes Chevaux" href="#le-secteur-de-lelevage/">Contact</a></li>

	</ul>
	</div>
</div></div>





</div>
    <? if ( $pro == 1 )
	{
	}
	else
	{
	?>
 	<div id="contenu">
<br><div id="titre_t"><? echo $titre; ?></div><br>
<style type="text/css">
<!--

titre {
	font-weight: bold;
	color: #03F;
	font-size: 18px;
}
-->
</style>

<div id="ecoute">
<table width="987" height="536" border="0" align="left">
  <tr>
    <td width="185" align="center" valign="top" ><p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><a href="lecteur/radio-geek.m3u"><img src="images/winamp.png" alt="" border="0" width="50" height="50" /></a></p>
      <p><a href="lecteur/radio-geek.asx"><img src="images/mediaplayer.png" alt="" border="0" width="50" height="50" /></a></p>
      <p><a href="lecteur/radio-geek.ram"><img src="images/quicktime.png" alt="" border="0" width="50" height="50" /></a></p></td>
    <td width="760" valign="top" ><p>&nbsp;</p>



<?
}
?>


Code du css :
/*
		    CSS par Le Raton Laveur
				 www.jojoratonlaveur.fr
 
*/

body{
	background:url(images/fondd.png);
}
#banniere{
background:url(images/header.png) no-repeat top center;

}

#menulein{
	margin:3px 0 50px 10;
float:right;
margin-top:69px;
margin-left:325px;
position:absolute;
display:inline;
border:none;

}

.droite{
	text-align:right;
}
.clear{
	clear:both;
}
a{
	color:#0fafcf;
	text-decoration:none;
}
a:hover{
	color: #000;
}
/*/////////////////////////////////////
		    Le Header
/////////////////////////////////////*/
#top{
	margin:3px 0 50px 10;
	height:60px;
	font-size:24px;
	line-height:55px;
	color:#FFF;
	text-align:center;
	margin-left:450px
	font-family: "Comic sans ms", Arial, Verdana, serif;
}
#votechoix{

}
#top .petit{
	font-size:14px;
}
#encour{
	margin-left:450px
}

/*/////////////////////////////////////
		    Le conteneur
/////////////////////////////////////*/
#conteneur{
	width:1024px;
	margin:0 auto;
	}


/*/////////////////////////////////////
		    Le menu
/////////////////////////////////////*/
#menubar {
	background:url(images/menu.png) no-repeat bottom left;
	height:105px;
    margin:0;
    padding:0;
    border:0:


}
#menu ul li {
display:inline;
border:none;
}
#menu div {
float:left;
display:inline;
border:none;
}
#boites{
	float:left;
	height:212px;
	width:460px;
	margin-left:210px

}
#menu ul, #menu li {

}
#emission{
	background:url(images/cadre.png) no-repeat top center;
	height:238px;
	width:322px;
	margin-left:690px;

	text-align: center;
	}
#bloco{
background:url(images/boites.png) no-repeat top center;
	height:212px;
	width:474px;
	margin-left:210px
}
#reagit{
	background:url(images/reagit.png) no-repeat top center;
	height:193px;
	width:261px;
	margin-left:510px;


}
#ecoute{
	background:url(images/menu_gauche.png) no-repeat top center;
	height:539px;
	width:192px;
	margin-left:10px

}
#pr-em{
	background:url(images/pr-em.png) no-repeat top center;
	height:38px;
	width:318px;
	margin-left:700px

}
#titre_t{
	background:url(images/barre_titre.png) no-repeat top center;
	height:45px;
	width:810px;
	margin-left:170px;
	text-align: center;
	font-size: 18px;
	color: #FFF;
	line-height:45px;

}
#texte{
	margin-left:205px;
}
/* Les différentes couleurs des menu */


/*/////////////////////////////////////
		    Le contenu
/////////////////////////////////////*/
#contenu{
	background:url(images/fond.png) repeat-y left;
    margin:0;
    padding:0;
    border:0:

}

/* Les news */
#news{
	float:left;
	width:300px;
}
#news h1{
	padding:0 10px;
	margin:0;

	height:27px;
	line-height:27px;
	width:282px;
	background:url(theme/news_h1.jpg);
	font-size:1em;
	font-weight:bold;
}
#news p{
	padding:0 15px;
	color:#bababa;
}

/* La navigation */
#navigation{
	float:right;
}
.bloc{
	width:160px;
	margin:10px 0 0 0;
	padding:10px 0 0 10px;
	background:url(theme/nav.jpg) no-repeat top left;
}
.finbloc{
	background:url(theme/nav_b.jpg) no-repeat top left;
	width:170px;
	margin:0;
	height:15px;
}
#navigation h1{
	padding:0 0 0 19px;
	margin:0;
	color:#FFF;

	height:34px;
	line-height:30px;
	width:133px;
	background:url(theme/nav_h1.jpg) no-repeat;
	font-size:1em;
	font-weight:bold;
}
#navigation ul{
	list-style-image:url(theme/nav_li.jpg);
	color:#959595;
	margin:0;
}
#navigation ul li a{
	list-style-image:url(theme/nav_li.jpg);
	color:#959595;
}
#navigation ul li a:hover{
	color:#000000;
}
/*/////////////////////////////////////
		    Le foot
/////////////////////////////////////*/
#bas{

	background:url(images/footer.png) no-repeat top center;
	text-align: center;
	color:#FFF;
}
#bas a{
	font-weight:bold;
	color:#CCC;
}
#bas a:hover{
	font-weight:bold;
	color:#FFF;
}


.navigation {
      margin: 0;
      padding: 0;
      list-style: none;
      background: #000;
      color: #fff;
      width: 200px;
      font: 1.2em "Trebuchet MS", sans-serif;
      }
   .navigation a, .navigation span {

      padding: 4px 10px;
      color: #fff;
      text-decoration: none;
      background: #000 url(images/bot1.png) left bottom no-repeat;
      }
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
      background-image: url(images/bot1.png);
      }
   .navigation .open a, .navigation .open span {
      background-image: url(images/bot1.png);
      }
   .navigation a:hover, .navigation a:focus, .navigation a:active {
      text-decoration: underline;
      }
   .navigation .subMenu {
      font-size: .8em;
      background: #ccc url(images/bot1.png) 0 0 repeat-x;
      font-size: .9em;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #666;
      }
   .navigation ul.subMenu a {
      background: none;
      padding: 3px 20px;
      }#titre_cour {
	font-size: 16px;
}
#banniere #conteneur #contenu #ecoute #emission p {
	font-weight: bold;
	color: #FFF;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#banniere #conteneur #contenu #ecoute table tr td fieldset legend {
	font-weight: bold;
}
#banniere #conteneur #contenu #ecoute table tr td fieldset legend {
	color: #06F;
}
#banniere #conteneur #contenu #ecoute table tr td fieldset p {
	text-align: center;
	color: #FFF;
}

#votec {
	color: #F00;
}
#votep {
	color: #0F0;
}
#votem {
margin-left:500px;
}
img {

}
Salut,

J'ai pas regardé le code (désolé), a priori je pencherai pour une marge induite, donc à toi de voir si tu n'as pas alloué de "mauvaise valeur" aux fonctions margin, voire padding.

Enfin, je peux me tromper, mais je commencerai par chercher par là ! Sinon, si il s'agit d'images qui sont "roll hoverées", vois si tes images sont découpées au plus près... Un spécialiste te donnera rapidement une réponse, moi, je te propose juste deux pistes à explorer Smiley smile .

Enfin, à titre perso et c'est purement subjectif, mais ton menu une fois déroulé n'a pas d'interactivité, résultat on ne sait pas si les boutons sont cliquables. C'est pas très grave, mais ce serait mieux avec un texte souligné par exemple au moment du survol du bouton.

En espérant t'apporter un peu d'aide (et pas trop de boulot ^^).

A+
Hum, ça se pourrait bien que ça vienne d'une marge ajoutée au moment de définir que le bouton est un lien.

Par exemple dans Dreamweaver, lorsque tu transformes une image en lien, le programme lui attribue une bordure, il faut donc entrer la valeur 0 si on souhaite afficher l'image sans la bordure qui indique que c'est un lien.

Maintenant, je ne sais pas si tu utilises Dreamweaver ^^...

A+
Bonsoir.

Moi je me demande si tu n'a pas un problème dans ton code html. Il y a plusieurs choses qui me paraissent bizarre.

Déjà tu as une balise link qui se balade dans ta div conteneur, il me semble que les balises link doivent se trouver dans l'élément head.

Ensuite tes div me paraissent imbriquées sans logique. Ca vient peut-être de là.
Effectivement je suis un peut perdu dans le CSS, si quelqu'un peut m'aider a nettoyer tout sa sa serai sympa.
C'est ça le problème à copier-coller des bouts des scripts et de code sans réfléchir et harmoniser le tout...

Déjà, corriges les 130 erreurs de validation xHTML : validation html

Et également les quelques erreurs CSS : validation css


Ensuite ça devrait aller beaucoup mieux^^
Modifié par Heyoan (29 Apr 2009 - 01:45)
Merci de ton aide, bn au niveaus css plus d'erreur, sinon html je suis passer de 130 a 65 erreur c'est deja mieux, le reste je trouve pas.

Par exemple sa :
Line 17, Column 170: Attribute "border" exists, but can not be used for this element.
"….png" width="40" height="40" border="0" /></a></span> <span id="votec"><a hr"
sa veut dire coi ?
Salut,

comme j'avais déjà dit :
Heyoan a écrit :
@Arthur69 > merci d'utiliser les balise [ url=] ... un lien... [ /url] (sans espace) quand les liens font 10 km de long. Smiley cligne
Merci d'avance...
Modifié par Heyoan (29 Apr 2009 - 01:46)
Je suis pas sérieux... encore désolé Heyoan.


> Salut, déjà, tu ne fermes pas ta <head>, ça doit causer des problèmes.

> Aussi, tu ne met jamais d'attributs alt="" dans tes images, ce qui est dommageable pour l'accessibilité (en cas de non chargement des images par exemple).

Et je rappelle que ce code est parfaitement valide.
<img src="image.png" [b]alt=""[/b] />


> Tu as également un " qui traîne ligne 120 et qui désactive le alignbuttons="top"
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="460" height="212" id="dewplayer" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="dewslider.swf?&randomstart=1&transition=slide&speed=5&timer=5&showbuttons=0&alignbuttons="top" />
Bon voila, j'ai corriger pas mal de problème mais il me reste encore 19 erreur que je n'arrive pas a reglé
J'ai également repéré des 
 border="O"


Il faudrait remplacer par des 0.



Récapitulons, où en est exactement ton problème, que veux-tu exactement. (fais des screens au pire)


Chez moi ça marches sur FF3 uniquement...
Pages :
Sujet clos
Aller à