Page 1 sur 1
pb de mise en page d'un site
Posté : 01 avr. 2006, 12:45
par Jib
Bonjour,
j 'ai un p'tit souci dans la mise en page d un site que je suis en train de coder
je voudrais que le div corp s adapte a ma page. En fonction de la page sur laquelle je me trouve, j 'ai differentes choses a afficher ( differents tableaux de tailles differentes). Sur une de mes pages, j'ai les tableaux qui debordent du div corp et cela ne rend pas tres bien.
Voici le code de mon css alors si quelqu'un pouvait me dire ce qui ne va pas, ce serait de sa part.
Code : Tout sélectionner
.leftnav {
-moz-border-radius:25px;
height:78%;
background-color:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
position: absolute; /* positionné par rapport à la boite parent (ici .container) */
left: 10px; /* démarre à 10 pixels de la gauche de la boite parent */
width: 18%; }
.corp {
margin: 0 40% 0 40%;
-moz-border-radius:25px;
postion:relative;
margin: auto; /* Centre le tableau */
height:80%;
width:60%;
border-left:1px solid #000000;
background-color:#FFFFFF;
border-right:1px solide 1px;
}
Merci
Posté : 01 avr. 2006, 12:48
par Cyrano
Tu n'aurais pas la page en ligne quelque part qu'on ait une idée plus précise ? Avec juste le style CSS, difficile de voir quoique ce soit
Ceci dit, je te signale quand même deux choses :
la position s'ajuste avec "pos
ition" et non "postion";
Ensuite la propriété moz-border-radius est propre à mozilla et n'est pas interprétée par Internet Explorer, tu perds donc ton effet pour près de 80% des internautes;
Code : Tout sélectionner
.leftnav {
-moz-border-radius:25px;
height:78%;
background-color:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
position: absolute; /* positionné par rapport à la boite parent (ici .container) */
left: 10px; /* démarre à 10 pixels de la gauche de la boite parent */
width: 18%; }
.corp {
margin: 0 40% 0 40%;
-moz-border-radius:25px;
position:relative;
margin: auto; /* Centre le tableau */
height:80%;
width:60%;
border-left:1px solid #000000;
background-color:#FFFFFF;
border-right:1px solide 1px;
}
Pour les coins arrondis, il exuste des astuces pour ne pas utiliser moz-border-radius, fouille
==> 
<==, tu vas y trouver pas mal d'informations pratiques.
Posté : 01 avr. 2006, 12:52
par Jib
Salut,
Desolé mais la page en question est sur mon localhost.
Par exemple, su rune page, le div contient seulement 2 liens qui sont sur 2 lignes et dans une autre page, le div en question contient 4 tableaux.
Sur ces deux pages, le div corp possedent la meme hauteur.
Je souhaiterai qu'il sadapte au contenu.
Merci
Posté : 01 avr. 2006, 13:07
par Cyrano
Je ne peux pas deviner, mets un code HTML qu'on puisse tester avec ta feuille de style en local.
Posté : 01 avr. 2006, 13:21
par Jib
OK pas de souci,
Pour le raduis je le sais. En gros, c'est un projet pour mon ecole et comme on est sous linux, tout fonctionne. Je ne me suis pas pris la tete pour que ca tourne sous IE. Tu sais, on a tellement de langages et de projets a faire que j'ai du utiliser ceci. Je vais chercher mon code et je vais le mettre.
Merci.
Code : Tout sélectionner
<html>
<head>
<META http-equiv="refresh" content="600"; URL="index.php">
<link rel="stylesheet" media="screen" type="text/css" title="Standard" href="styleF.css" />
<script type="text/javascript">
var checkflag = "false";
function couleur(obj) {
obj.style.backgroundColor = "#FFFFFF";
}
function check() {
var msg = "";
if (document.formulaire.h_depart.value == "") {
msg += "Veuillez saisir une heure de départ\n";
document.formulaire.h_depart.style.backgroundColor= "#F3C200";
}
if (document.formulaire.h_arrive.value == "")
{
msg +="Veuillez saisir une heure d'arrivée \n";
document.formulaire.h_arrive.style.backgroundColor = "#F3C200";
}
if (msg == "") return(true);
else {
alert(msg);
return(false);
}
}
function GereControle(Controleur, Controle, Masquer){
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);
if (Masquer=='0')
objControle.style.visibility=(objControleur.checked==true)?'visible':'hidden';
else objControle.disabled=(objControleur.checked==true)?false:true;
return true; }
</script>
</head>
<body>
<div class=header>
<center>
<img src="../corse_r1_c1.jpg"/>
</center>
</div>
<div class=topnav>
</div>
<div class=leftnav>
<ul class="liste">
<li><a href="T5/index.php">Accueil</a></li>
<li><a href="T5/choix.php?retour=affichage">Statistique</a></li>
<li><a href="index.php">Ouverture</a></li>
<li><a href="table.php">Fermeture</a></li>
<li><a href="destroy.php">Deconnexion</a></li>
</ul>
<br />
<br />
<table >
<tr>
<td>
<img src="../partenaires-avion.gif" />
</td>
<td>
<img src="../partenaires-hotels.gif" />
</td>
</tr>
<tr>
<td>
<img src="../partenaires-voiture.gif" />
</td>
<td>
<img src="../partenaires-voyage.gif" />
</td>
</tr>
</table>
</div>
<div class=corp>
<img src="voyager.gif" />
<p class="ecrit">Vous avez décidez d'ouvir un vol
<form method="post" name="formulaire" action="abis.php?nbescale=4" >
</p>
<fieldset><legend class=ecrit> Informations complémentaire</legend><p class="attention">Remplir le formulaire d'enregistrement d'un
vol.<br/>Attention, les heures doivent impérativement être dans ce format
hh:mm:ss <br /> pour un départ à 8h du matin, vous devez entrer 08:00:00
pour 20h, 20:00:00</p></fieldset>
<table>
<tr>
<td>Continent</td>
<td>ville</td>
<td>heure départ</td>
<td>heure arrivée</td>
<td>modele-fabricant</td>
<td>fréquence</td>
<td> </td>
</tr>
<tr class="ecrit">
<td>
<select name="continent" style="width:110px;" onKeyUp="javascript:couleur(this);">
<option>1</option>
<option value="1">Europe</option>
<option value="2">Asie</option>
<option value="3">Océanie</option>
<option value="4">Amerique du Sud</option>
<option value="5">Amerique du Nord</option>
</select>
</td>
<td>
<select name=ville onKeyUp="javascript:couleur(this);">
<option>paris</option>
<option value=paris>paris</option><option value=dehli>dehli</option><option value=jaipur>jaipur</option><option value=buenos aeres>buenos aeres</option><option value=quebec>quebec</option></select> </td>
<td>
<input size="9" type="text" name="h_depart" value="12:00:00" onKeyUp="javascript:couleur(this);">
</td>
<td >
<input size="9" type="text" name="h_arrive" value="15:00:00" onKeyUp="javascript:couleur(this);" >
</td>
<td>
<SELECT name=Type onKeyUp="javascript:couleur(this);" >
<option>144-tupolew</option>
<OPTION VALUE='144-tupolew'> 144-tupolew</OPTION><OPTION VALUE='5-ariane'> 5-ariane</OPTION><OPTION VALUE='747-boeing'> 747-boeing</OPTION><OPTION VALUE='A380-airbus'> A380-airbus</OPTION><OPTION VALUE='pou-mignet'> pou-mignet</OPTION></SELECT> </td>
<td >
<select name=frequence tabindex=40 onKeyUp="javascript:couleur(this);" >
<option>lundi</option> </select>
</td>
<td>
</tr>
<tr><td>jour</td><td>mois</td><td></tr>
<tr>
<td>
<select name=jour>
<option>1</option> </select>
</td>
<td>
<select name=mois>
<option>janvier</option> </select>
</td>
</tr>
<input type=hidden name=n_vol value=1005 /> <input type=hidden name=Ntype value=4 /><tr><td colspan=6>vous pouvez creer jusqu'à 4 escale pour le vol de num 1005 : </td></tr> <tr class="escale">
<td colspan=6>
<u>Création de l'escale pour ce vol :</u>
<br />
<label>continent</label>
<select name="continent_e1" style="width:110px;">
<option value=""></option>
<option value="1">Europe</option>
<option value="2">Asie</option>
<option value="3">Océanie</option>
<option value="4">Amerique du Sud</option>
<option value="5">Amerique du Nord</option>
</select>
<label>ville</label>
<select name=ville_e1>
<option value="paris ">paris</option>
<option value="dehli ">dehli</option>
<option value="jaipur ">jaipur</option>
<option value="buenos aeres ">buenos aeres</option>
<option value="quebec ">quebec</option>
</select> <br />
<label>arrive </label>
<input size=8 type=text name="arr_e1" />
<label>depart</label>
<input size=8 type=text name="dep_e1" /><br />
</td>
</tr>
<tr class="escale">
<td colspan=6>
<u>Création de l'escale pour ce vol :</u>
<br />
<label>continent</label>
<select name="continent_e2" style="width:110px;">
<option value=""></option>
<option value="1">Europe</option>
<option value="2">Asie</option>
<option value="3">Océanie</option>
<option value="4">Amerique du Sud</option>
<option value="5">Amerique du Nord</option>
</select>
<label>ville</label>
<select name=ville_e2>
<option value="paris ">paris</option>
<option value="dehli ">dehli</option>
<option value="jaipur ">jaipur</option>
<option value="buenos aeres ">buenos aeres</option>
<option value="quebec ">quebec</option>
</select> <br />
<label>arrive </label>
<input size=8 type=text name="arr_e2" />
<label>depart</label>
<input size=8 type=text name="dep_e2" /><br />
</td>
</tr>
<tr class="escale">
<td colspan=6>
<u>Création de l'escale pour ce vol :</u>
<br />
<label>continent</label>
<select name="continent_e3" style="width:110px;">
<option value=""></option>
<option value="1">Europe</option>
<option value="2">Asie</option>
<option value="3">Océanie</option>
<option value="4">Amerique du Sud</option>
<option value="5">Amerique du Nord</option>
</select>
<label>ville</label>
<select name=ville_e3>
<option value="paris ">paris</option>
<option value="dehli ">dehli</option>
<option value="jaipur ">jaipur</option>
<option value="buenos aeres ">buenos aeres</option>
<option value="quebec ">quebec</option>
</select> <br />
<label>arrive </label>
<input size=8 type=text name="arr_e3" />
<label>depart</label>
<input size=8 type=text name="dep_e3" /><br />
</td>
</tr>
<tr class="escale">
<td colspan=6>
<u>Création de l'escale pour ce vol :</u>
<br />
<label>continent</label>
<select name="continent_e4" style="width:110px;">
<option value=""></option>
<option value="1">Europe</option>
<option value="2">Asie</option>
<option value="3">Océanie</option>
<option value="4">Amerique du Sud</option>
<option value="5">Amerique du Nord</option>
</select>
<label>ville</label>
<select name=ville_e4>
<option value="paris ">paris</option>
<option value="dehli ">dehli</option>
<option value="jaipur ">jaipur</option>
<option value="buenos aeres ">buenos aeres</option>
<option value="quebec ">quebec</option>
</select> <br />
<label>arrive </label>
<input size=8 type=text name="arr_e4" />
<label>depart</label>
<input size=8 type=text name="dep_e4" /><br />
</td>
</tr>
</table><br /><input class=bouton type=submit value=Envoyer /></form></div>
</body>
</html>
Posté : 01 avr. 2006, 13:34
par Cyrano
Hé, comment veux tu qu'on voie quoique ce soit avec ca: mets-nous le code d'une page générée avec du contenu qu'on puisse reproduire les effets : ton code php ne sert à rien, on a pas la base de données.
Posté : 01 avr. 2006, 14:09
par Jib
J'ai remi le code généré à la place de l'autre.
Merci.
Posté : 01 avr. 2006, 14:49
par PhilFree
Salut,
J'ai testé ton code HTML avec la feuille de style corrigée par Cyrano, ça fonctionne parfaitement dans toutes les résolution d'écran depuis 640x480 jusqu'à 1400x1050
Posté : 01 avr. 2006, 14:53
par Cyrano
Pour ma part, je ne note pas de débordement. La seule correction que je peux proposer, c'est pour le centrage du bloc "corp" :
Code : Tout sélectionner
.corp {
-moz-border-radius:25px;
position:relative;
margin: auto; /* Centre le tableau */
height:80%;
left: 50%;
width:60%;
margin-left: -30%;
border-left:1px solid #000;
background-color:#FFFFFF;
border-right:1px solide 1px;
}
Quelle que soit la définition, le bloc sera toujours centré. Pour ce qui est du débordement, je n'en ai que si je mets la définition en 800/600...
Posté : 01 avr. 2006, 15:05
par Jib
Alors, j ai effectué les corrections et voila ce que ca me donne.
http://www.jb.xooit.net/pb.html
Merci
Posté : 01 avr. 2006, 15:38
par Cyrano
Tu pourrais ajouter un élément dans le style de ton bloc : overflow: auto
Comme ça, tu dimensionnes le bloc et le contenu qui dépasse sera masqué, mais tu auras alors une barre de défilement vertical le long du bloc.
Posté : 01 avr. 2006, 16:02
par Jib
Merci pour l astuce.