11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

Je vous sollicite parce que j'ai un souci que je n'arrive pas à résoudre. Je découvre jQueryUI et je dois dire que je m'éclate.

Seulement j'ai un souci :
Je fais un site sur trois colonnes (gauche, centre, droite).
Dans la colonne de gauche, j'ai des menus accordion, et dans la colonne de droite, un panneau à onglet (tabs () ).

Seulement tout n'est pas indépendant.
Je vous montre le résultat, je pense que ça parle de soi :

upload/42593-probleme.gif

En fait, je voudrais simplement que le panneau à onglet soit représenté normalement.

Je vous montre mon code ?

CSS d'abord (vous moquez pas hein haha)


div.container {
	position:absolute;
	width:98%;
	top:5px;
	left:5px;
}


div.colonnegauche{
	width:432px;
	height:500px;
	background-color:red;
	float:left;
}

div.colonnedroite{
	width:300px;
	height:500px;
	background-color:red;
	float:right;
}

div.centre{
	background-color: #000;
	margin-left:437px;
	margin-right: 305px;
	height:100px;
}

li.ui-state-default {
	font-size:12px;
	margin:auto;
	position:absolute;
	}

li.ui-state-default#panneau {
	height:20px;
}

div.ui-tabs-panel {
	font: Arial, Sans-Serif;
	font-size:12px;
}


.ui-accordion-header{
		position:relative;
		width:430px;
		height:30px;
		font-size:12px;
	}
.ui-accordion-content{
		position:relative;
		width:377px;
		height:185px;
		font-size:12px;
	}


Le HTML :


<div id="sommaire" class="container">
	<ul>
		<li><a href=#accueil>Accueil</a></li>
		<li><a href=#tab2>Cours / Astuce</a></li>
	</ul>
	<div id="accueil" class="classaccueil">
		<div class="colonnegauche">
			<div id="accordion">
				<h1><a>Ajouter un visiteur</a></h1>
				<div>
					<form method="post" action="add_visiteur.php">
					Nombre de personnes entrées&nbsp;
					<input type="text" size="2"><br><br>
					Type de visiteur&nbsp;
					<SELECT name="fonction">
						<OPTION VALUE="enseignant">Visiteur intérieur du territoire</OPTION>
						<OPTION VALUE="etudiant">Visiteur extérieur du territoire</OPTION>
						<OPTION VALUE="ingenieur">Divers (livraison, facteurs etc)</OPTION>
						<OPTION VALUE="ingenieur">Bénévole</OPTION>
					</SELECT><br><br>
					Renseignements&nbsp;
					<SELECT name="fonction">
						<OPTION VALUE="enseignant">Documentation/Information sur la commune</OPTION>
						<OPTION VALUE="etudiant">Documentation/Information sur le département</OPTION>
						<OPTION VALUE="ingenieur">Documentation/Information sur la région</OPTION>
						<OPTION VALUE="ingenieur">Evènement ponctuel</OPTION>
						<OPTION VALUE="ingenieur">Evènement ponctuel</OPTION>	
						<OPTION VALUE="ingenieur">Evènement ponctuel</OPTION>
					</SELECT><br><br>
					Département d'origine&nbsp;<input type="text" size="2"><br><br>
					<input id="ajouter" type="submit"><br>
					</form>
				</div>
			</div>
		</div>
		<div class="colonnedroite">
			<br>
		</div>

		<div class="centre">
			<div id="tabs">
				<ul>
					<li id="panneau"><a href=#tab1>Actualité</a></li>
				</ul>
				<div id="tab1" class="tab1"> 
					Salut
				</div>
			</div>
		</div>
	</div>
</div>
	</body>


Et les balises <script></script>


<script>
$("#accordion").accordion({collapsible:true, active:false});
$("div#date").datepicker ();
$("#sommaire").tabs ();
$("#tabs").tabs ();
$("input:submit").button();
</script>



Désolé c'est peut-être un peu long.

En tout cas, je vous remercie de m'avoir lu jusqu'ici et de l'aide précieuse que vous voudrez bien m'accorder.

A très bientôt,
Grégoire.