28172 sujets

CSS et mise en forme, CSS3

Barre position:fixe en bas, problème d'affichage.

Bonjour, j'ai a vrai dire 2 problèmes qui me gène particulièrement:
j'ai crée une barre en position:fixe en bas (j'ai mis top:80%) mais sa beug sur certain terminaux mobile la barre n'est pas vraiment en bas de la page, elle dépasse même, c'est assez bizarre et donc je demande votre aide.
et la 2ième chose je n'arrive pas à centré les 2 boutons par rapport à l'espace de la barre Smiley ohwell

voici les codes:
CSS:
@charset "UTF-8";
/* CSS Document */
body{
	background-color:#00B000;
	}

@media (max-width: 640px) {

	/* passer tous les éléments de largeur fixe en largeur automatique */
	body,
	element1,
	element2 {
		width: auto;
		margin: 0;
		padding: 0;
	}

	/* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}

	/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
	img {
		height: auto; width: auto;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* gestion des mots longs */
	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		word-wrap: break-word; /* passage à la ligne forcé */
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
	}

	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}

	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
	element1,
	element2 {
		float: none;
		width: auto;
	}

	/* masquer les éléments superflus */
	.hide_mobile {
		display: none !important;
	}

	/* Un message personnalisé */
	body:before {
		content: "Version mobile du site";
		display: block;
		color: #777;
		text-align: center;
		font-style: italic;
	}
}
#barremenu{
	position:fixed;
	top:80%;
	background-color: #F90;
	right:0%;
	left:0%;
	-webkit-box-shadow: 0 -3px 5px rgba(0,0,0,0.25);	
	-moz-box-shadow: 0 -3px 5px rgba(0,0,0,0.25);
	box-shadow: 0 -3px 5px rgba(0,0,0,0.25);
	color: #FFFFFF;
	font-size: 120%;
	font-weight: bold;
	-webkit-border-radius:10px 10px 0px 0px;
	-moz-border-radius:10px 10px 0px 0px;
	border-radius:10px 10px 0px 0px;
	font-family:Calibri;
	text-align:center;

}
#barremenu ul{
	list-style:none;
	margin-left:0;
	padding-left:0;
}
#barremenu li{
	display:inline;
	padding: 0px 15px 0px 5px;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
	color:#FFFFFF;
	border-right:solid 2px rgba(255,255,255,1);
}
#barremenu li span{
	border:0;
}
#barremenu li a{
	color:#FFFFFF;
	text-decoration:none;
}
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
}




et maintenant la mises en page:
HTML:
<!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-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<link href="menumob.css" media="all" rel="stylesheet" type="text/css">
<title>Document sans titre</title>
</head>

<body>
<div id="barremenu">
	<ul>
		<li><span>Menu</span></li>
		<li style="border:0px;"><span>Connexion</span></li>
	</ul>
</div>
<div>
	<p>&nbsp;
</div>
</body>
</html>


voici ce que le résultat donne:
upload/51172-Capturedec.png

ok, on vois que j'ai essayé d'y insérez le code d'une "base" de CSS mobile mais même sans cette base le résultat est identique.

Merci de bien vouloir m'aidez. Boris
Modifié par borrougagnou (28 Jan 2014 - 00:34)
salut,
à ta place je n'utiliserais pas trop les positions fixes pour les terminaux mobiles et tablettes. C'est assez mal géré et assez chaotique comme résultat.
alors comment je fais?
sachant que au final cette barre en bas fixé possèdera un menu déroulant sur le "Menu".
Et je ne possède pas les compétences pour faire du javascript ou jQuery.
Modifié par borrougagnou (28 Jan 2014 - 01:24)
Pourquoi pas bottom: 0 plutôt que top: 80% ?
Ca me parait plus logique à moins que j'ai mal compris le problème !

Bien penser aussi à mettre un padding de la hauteur du menu sur le bas du body (ou la div de contenu).
Excusez moi pour le temps d'attente de la réponse j'ai été pas mal occuper a cause des examens.

Cgaybeul> merci Smiley smile c'est ce que je cherchais mais je doutais énormément qu'il existait une commande pour un affichage par le bas. merci Smiley smile

Zelalsan> oui c'est ce que j'ai fais j'ai tester mon site sur différente interface mobile

si non je cherche à espacer les texte (Menu et Connexion) de sorte à les avoir centré par rapport à leurs emplacement
mais séparé par une barre verticale blanche au centre. et à que cette façon s'intègre à tout type de format mobile (voir image au dessus)
Modifié par borrougagnou (06 Feb 2014 - 19:53)
… <:s
a vrai dire la barre je l'ai écrit comme cela:


<div id="barremenu">
	<ul class="liste1">
		<li><span>Menu</span></li>
		<li style="border:0px;"><span>Connexion</span></li>
	</ul>
</div>


donc voila Smiley ohwell il me manque à faire l'espacement centré au niveau de la page entre chaque li Smiley ohwell
Modifié par borrougagnou (14 Feb 2014 - 21:12)
Sujet clos
Aller à