CSS et div incomprehensible Fermé

Question

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.

Configuration: Windows 7 / Firefox 15.0

Stefan0 · Answer

Bonjour,

Votre site est il en ligne ? Si oui, peut on en avoir l'adresse ?

arthezius · Answer

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.

Jeremdu54 · Answer

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 Team Belote

ensuite right.php:

Bienvenue Vous avez 0 nouveau message
nouveau messages
Vous n'avez aucun avertissement
Vous avez avertissement(s)

DERNIERS INSCRITS

et enfin news.php:

A LA UNE DE TEAM-BELOTE

Page : '; for ($i = 1 ; $i <= $nombreDePages ; $i++) { echo ' ' . $i . ' '; } 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 '
'; 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 '' , htmlentities(trim($data['titre'])) , '
'; echo 'Posté par ' , htmlentities(trim($data['auteur'])) , ''; echo ' le : ' , $jour , '/' , $mois , '/' , $an , ' à ' , $heure , ':' , $min , ':' , $sec , '

'; } ?>

voila ce dont vous aviez besoin

Pseudo	Date

Jeremdu54 · Answer

n'ayant aucune reponse je decide de lancer un "up".

CSS et div incomprehensible

4 réponses

Discussions similaires