CSS et div incomprehensible

Jeremdu54 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   -  
Jeremdu54 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour a tous ,
voila actuellement je suis en train de refaire le design de mon site.Pour le menu y a pas de souci.Mais j'ai un souci pour l'affichage d'un div.Je vous explique:
lorsque la perosnne n'est pas connectées elle peut voir les news sur la gauche et voir affiché bienvenue visiteur sur la droite lorsque au contraire elle est connecte elle vois en plus au centre le chat.Le souci est l'affichage de ce fameux bienvenue visiteur.
en effet j'ai inclu un margin top de 2 %.Lorsqu'elle est pas connectés aucun souci mais sinon il est affiché tout en bas.
Voici le code du Css: 
body{ background:#75918D}
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

/* Principal */
#menu{
        width: 100%;
        margin-top: 1%;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
		height:45px;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

/* Sous-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
        height: 10px;
        width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;    
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 20px;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

#header{
		margin-top:-10%;
}


#News{
	    width: 20%;
		-moz-border-radius: 50px;
        border: 2px solid;
		margin-top:2%;
		margin-left:3%;
		margin-bottom: 10px;
		font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
		float: left;
}
#News a{
     color: #bb1e15;
}
#connectes{
    margin-left:75%;
    margin-top: -17%;	
	padding: 5px; 
	width: 25%; 
	background: #ddd;
	height:200px; 
	overflow-y: auto;
}

#infos{
		
		width: 20%;
		-moz-border-radius: 50px;
        border: 2px solid;
		margin-bottom:10px;
		margin-left: 20%;
		margin-top:2%;
		padding:20px;
		text-align:center;
		font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
		float: right;
}
#inscrit{
		
		width: 20%;
		-moz-border-radius: 50px;
        border: 2px solid;
		margin-top:-22%;
		margin-bottom:10px;
		padding:20px;
		margin-left:90%;
		margin-top: -16%;
		font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 14px; /* hauteur du texte : 12 pixels */
		float: right;
}
#Inscrit a{
		color: #bb1e15;
}
/* Pour que les liens ne soient pas soulignés */
a {
	text-decoration: none;
}
img {
	vertical-align: middle;
}


#message{
height:100px;
overflow:auto;
}

#tchat{
		  width:45%;
          margin-left:25%;
          margin-top:2%;
          font-size: 11px;
          font-family: Verdana, Arial, "Times New Roman", Sans-Serif;
          text-align: left;
          border-style: dashed;
          border-width: 1px;
          padding: 10px;
          background-color: #FFFFFF;
        }
}
#onglets
{
    font : bold 11px Batang, arial, serif;
	font-size:13px;
    list-style-type : none;
    padding-bottom : 30px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    border-bottom : 1px solid #9EA0A1;
    margin-left : 0;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:20px;
}
#onglets li
{
    float : left;
    height : 25px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
	width:145px;
    background-color: grey;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #9EA0A1;
	border-radius:20px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	text-align:center;
	
}
#onglets li.active
{
    border-bottom: 1px solid #fff;
    background-color: #fff;
}
#map {
    margin-left: 25%;
	margin-bottom:10px;
	margin-right:0;
	margin-top:25px;
	padding:5px;
	width:660px;
	border: 2px solid;
	min-height:50px;
	font-size:15px;
}

Si vous avez besoin de quelque information qu'il soit je vous la fournirais.Merci de votre aide.

A voir également:

4 réponses

Réponse 1 / 4
Stefan0 Messages postés 59 Date d'inscription   Statut Membre Dernière intervention   5
 
Bonjour,

Votre site est il en ligne ? Si oui, peut on en avoir l'adresse ?
0
Réponse 2 / 4
arthezius Messages postés 3538 Date d'inscription   Statut Membre Dernière intervention   475
 
Sans code HTML on peut pas vraiment t'aider.
Au minimum il nous faudrait le code de la page, au mieux un lien vers celle-ci.
0
Réponse 3 / 4
Jeremdu54 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour, oui il est en ligne actuellement j'ai un site developper mais le design va etre changer voici avec le nouveau design en cours de creation:

http://www.team-belote.com/test

sinon pour le code html voici index.php/right.php et news.php

index.php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       
		<meta http-equiv="Content-Language" content="fr" />
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
		<meta name="robots" content="Site de belote en ligne ,noodp"/>
		<meta name="googlebot" content="noodp" />
		<meta name="keywords" content="Site de Belote en ligne gratuit,site de belote en ligne ,site convivial et simple,Aire de jeu de belote,belote en ligne, belote multijoueur, belote classique,belote moderne"/>
		<meta name="description" content="Site de Belote en ligne convivial et simple,Aire de jeu de belote,Venez jouer pour le plaisir" />
        <link href="style.css" rel="stylesheet" title="Style" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script src="chat.js"></script>

		<script type="text/javascript">
<!--

self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)

//-->
</script><noscript><a href="http://www.editeurjavascript.com/mycircle/">echange de lien</a></noscript>
        <title>Team Belote</title>
    </head>
    <body> 
	<div id "header">
	<center><img src="Image2.jpg" Alt="Team-Belote vous souhaite Bienvenue"></center>
</div>
<?php
if(isset($_SESSION['username'])){
?>

        	<ul id="menu">
			<li><a href="index.php">Home</a></li>
			<li><a href="Compte.php">Mon Compte</a>
			<ul>
				<li><a href="#">Modifier mes infos</a></li>
			 <li><a href="see_amis">Mes Amis</a></li>
             <li><a href="attente.php">Demande en attente</a></li>
			</ul></li>
	
	<?php

// Récupération du login en Session
if(($_SESSION['statut'])== "4" || ($_SESSION['statut'])== "3")
{
$privilege=80;

}
else 
$privilege=00;


$cnxString ="host=91.121.172.107 port=5432 dbname=game user=frederic password=plasma";
$pgsql_conn = pg_connect($cnxString, PGSQL_CONNECT_FORCE_NEW);
						$login=$_SESSION['username'];
						$dns = pg_fetch_array(pg_query('select cdjoueur from joueur'));
						 $id = $dn2+1;
						if($dns=="0"){	
							$requete="INSERT INTO joueur (cdjoueur,pseudo,avatar,privilege,couleur) VALUES ('".$id."','".$login."','".$avatar."',".$privilege.",'".$couleur."')";
							$reponserequete= pg_query($pgsql_conn,$requete);
						}
						else
						{

// Pass dans config.properties
$conf_pass = "jeremy julien meli max";

//Execution de la requete

// URL d'accès a welcomeGame.srv
$url = "http://ks362194.team-belote.com:8080/belote_1.4/welcomeGame.srv";

// Contruction de la clef avec md5()
$key = md5($login.$conf_pass.date("jmY"));

// TODO : encode login

// Affichage du lien pour l'accès à l'aire
echo ("<li><a href=\"$url?Pseudo=$login&id=$key\">Acces Belote</a></li>");
}
?>
    	<li><a href="#">Acces Jeux</a></li>
        <li><a href="forum/index.php">Forum</a></li>
        <li><a href="see_users.php">Utilisateurs</a></li>
		<?php
		if(($_SESSION['statut'])== "4" || ($_SESSION['statut'])== "3")
					{
		?>
        <li><a href="Admin.php">Administration</a></li>
		<?php
		}
		?>
		<li><a href="Livre.php">Livre d'or</a>
		<li><a href="Equipe.php">Equipe</a></li>
		<li><a href="Contact.php">Contact</a></li>
		<li><a href="connexion.php">Deconnexion</a></li>
</ul>
<?php
}
else{
?>
<ul id="menu">
		<li><a href="index.php">Home</a></li>
		<li><a href="Livre.php">Livre d'or</a>
		<li><a href="Equipe.php">Equipe</a></li>
		<li><a href="Contact.php">Contact</a></li>
		<li><a href="connexion.php">Connexion</a></li>
		<li><a href="sign_up.php">Inscription</a></li>
</ul>
<?php
}
?>


ensuite right.php: 

<div id="infos">
					<font color="#bb1e15" style="text-align:center;"><center>Bienvenue<?php if(isset($_SESSION['username'])){echo ' '.htmlentities($_SESSION['username'], ENT_QUOTES, 'UTF-8');} else echo ' visiteur'; ?></center></font>
					<?php
					if(isset($_SESSION['username'])){
					?>
					Vous avez <?php
								 $req='SELECT COUNT(*) as nb_messnonlu FROM messages WHERE id_destinataire="'.$_SESSION['userid'].'" AND messages.lu=0';
								 $result = mysql_query($req);  
								 $donnee3 = mysql_fetch_row($result); 
								if ($donnee3==0){
								?>
								<a href="message.php">0</a> nouveau message<br>
								 <?php 
								 }
								 else{
								?>
								<a href="message.php"><?php echo $donnee3[0];?></a> nouveau messages<br>
								<?php
								}
								 $req='SELECT Nb_avertissement FROM users WHERE username="'.$_SESSION['username'].'"';
								 $result = mysql_query($req);  
								 $donnee3 = mysql_fetch_array($result); 
								if ($donnee3['Nb_avertissement']==0){
								?>
								Vous n'avez aucun avertissement<br>
								 <?php 
								 }
								 else{
								 ?>
								 Vous avez <?php echo $donnee3['Nb_avertissement'];?> avertissement(s)
								 <?php
								 }
								 ?>
								 
		</div>
		<div id="inscrit">
				<center><h3>DERNIERS INSCRITS</h3></center>
				<table>
				<tr>
				<th align="center"  width="10%">Pseudo</th>
				<th align="center"  width="10%">Date</th>
				</tr>
				<?php
				$req='SELECT id,username,signup_date from users where id =(select max(id)) ORDER BY id DESC LIMIT 5';
				$données= mysql_query($req);
				while($dnn = mysql_fetch_array($données))
				{
				?>
				<tr>
				<center><th><a href="profile.php?id=<?php echo $dnn['id']; ?>"><?php echo htmlentities($dnn['username'], ENT_QUOTES, 'UTF-8'); ?></a></th></center>
				<center><th><?php echo date('d/m/Y',strtotime( $dnn['signup_date']));?></th></center>
				</tr>
				<?php
				}
			}
				?>
				
		</div>

et enfin news.php: 
<div id="News">
  <center><h3>A LA UNE DE TEAM-BELOTE</h3></center>
<?php
 // On récupère le nombre total de messages
$nombreDeMessagesParPage =3;
$sql2 = mysql_query('SELECT COUNT(*) AS nb_messages FROM news'); 
$donnees = mysql_fetch_array($sql2);
$totalMessages = $donnees['nb_messages'];
 // On calcule le nombre de pages à créer 
$nombreDePages = ceil($totalMessages / $nombreDeMessagesParPage); 
// Puis on fait une boucle pour écrire les liens vers chacune des pages
echo '<br><center>Page : '; 
for ($i = 1 ; $i <= $nombreDePages ; $i++) 
{ 
echo '<a href="index.php?page=' . $i . '">  ' . $i . '  </a>'; 
} 
 
if (isset($_GET['page'])) 
{ 
$page = $_GET['page']; 
} 
else // La variable n'existe pas, c'est la première fois qu'on charge la page 
{ 
$page = 1;
}
// On calcule le numéro du premier message qu'on prend pour le LIMIT de MySQL 
$premierMessageAafficher = ($page - 1) * $nombreDeMessagesParPage; 
$reponse = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT ' . $premierMessageAafficher . ', ' . $nombreDeMessagesParPage);
	echo '</center><br>';
	while ($data = mysql_fetch_array($reponse)) 
	{ 

   // si on a au moins une news, on l'affiche
   
      // on décompose la date
      sscanf($data['date'], "%4s-%2s-%2s %2s:%2s:%2s", $an, $mois, $jour, $heure, $min, $sec); 
 
      // on affiche les résultats
      echo '<center><a href=news.php?id="'.$data['id'].'">' , htmlentities(trim($data['titre'])) , '</a></center></br>'; 
	  echo '<center><strong>Posté par </strong> ' , htmlentities(trim($data['auteur'])) , ''; 
      echo '<strong> le : </strong> ' , $jour , '/' , $mois , '/' , $an , ' à ' , $heure , ':' , $min , ':' , $sec , '</center><br /><br />'; 
	} 
	
  

?>  
</div>


voila ce dont vous aviez besoin
0
Réponse 4 / 4
Jeremdu54 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention  
 
n'ayant aucune reponse je decide de lancer un "up".
0

Discussions similaires

Message étrange et incompréhensible
Liselise_7724 -
VincentVoltaCCM -

6 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
Enlever trait sous un lien href
ponpon17430 -
trucmachinchose-rose -

30 réponses