28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai créé en CSS un conteneur qui contient 7 "parties". Sur l'une de ces parties, coté droit, je n'arrive pas a afficher le contenu alors que le code fonctionne. Voici ce code ;


[code]<div id="box6">
<?php if ((!isset($action) || $action == "") && $_SESSION['typuser'] == "OAO")
{?>
	<input type="button" value="Ajouter" onclick="FPrg.action='programmes.php?A=AJT';FPrg.method='Post';FPrg.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Dupliquer" onclick="FPrg.action='programmes.php?A=DUP';FPrg.method='Post';FPrg.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Modifier" onclick="FPrg.action='programmes.php?A=MOD';FPrg.method='Post';FPrg.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Supprimer" onclick="FPrg.action='programmes.php?A=SUP';FPrg.method='Post';FPrg.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Détail" onclick="FPrg.action='programmes.php?A=DPG';FPrg.method='Post';FPrg.submit();this.disabled=true;this.value='Patientez...'"/>
<?php }
else if ($action == 'MOD')//Modification d'un programme existant
{?>
	<input type="button" value="Valider" onclick="FMajPrg.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Abandonner" onclick="FMajPrg.action='programmes.php';FMajPrg.method='Post';FMajPrg.submit();this.disabled=true;this.value='Patientez...'"/>
<?php }
else if ($action == 'AJT')//Ajout de programme
{?>
	<input type="button" value="Valider" onclick="FAjtPrg.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Abandonner" onclick="FAjtPrg.action='programmes.php';FAjtPrg.method='Post';FAjtPrg.submit();this.disabled=true;this.value='Patientez...'"/>
<?php }
else if ($action == 'DUP')//Duplication d'un programme existant
{?>
	<input type="button" value="Valider" onclick="FDupPrg.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Abandonner" onclick="FDupPrg.action='programmes.php';FDupPrg.method='Post';FDupPrg.submit();this.disabled=true;this.value='Patientez...'"/>
<?php }
else if ($action == 'SUP')//Suppression d'un programme
{?>
	<input type="button" value="Valider" onclick="FSupPrg.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Abandonner" onclick="FSupPrg.action='programmes.php';FSupPrg.method='Post';FSupPrg.submit();this.disabled=true;this.value='Patientez...'"/>
<?php }
else if ($action == 'DPG')//Détail des prestations
{?>
	<input type="button" value="Valider" onclick="FDetPre.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Ajout prest." onclick="FDetPre.action='programmes.php?A=AJDPG';FDetPre.method='Post';FDetPre.submit();this.disabled=true;this.value='Patientez...'"/>
		<br /><br />
	<input type="button" value="Retour Prog." onclick="FDetPre.action='programmes.php';FDetPre.method='Post';FDetPre.submit();this.disabled=true;this.value='Patientez...'"/>
<?php }
else if ($action == 'AJDPG')//Détail des prestations
{?>
	<input type="button" value="Valider" onclick="FAjDPre.submit();this.disabled=true;this.value='Patientez...'"/>
	<br /><br />
	<input type="button" value="Retour Détail" onclick="FAjDPre.action='programmes.php?A=DPG';FAjDPre.method='Post';FAjDPre.submit();this.disabled=true;this.value='Patientez...'"/>
<?php }?>
</div>

<div id="box7">
<span class="text">
sarl 8 000 € - RCS Lyon SIRET 484 787 817 00010 - 140 rue Pré Magne ZA Les Andrés 69126 BRINDAS
Tel 04 78 45 00 82 Fax 04 78 45 06 42 - <br />
RCP GENERALI Assurances Iard 52 rue Dusquesne 69453 Lyon cedex 06
Licence LI 069 05 0014 - Garantie financière APS 15 av Carnot 75017 PARIS</span>
</div>


et la css


#conteneur {
	position:relative;
	width: 100%;
	max-width: 1000px;
	min-width: 700px;
	max-height: 800px;
	min-height: 500px;
	margin-left:auto;
	margin-right:auto;
}

#header {
	text-align:center;
	height:130px;
	border:solid;
	border-color:#0075bd;
	}
#box2 {
	height:150px;
	border:solid;
	border-color:#0075bd;
	}
#box3 {
	height:40px;
	border:solid;
	border-color:#0075bd;
	text-align:center;
	}
#box4 {
	float:left;
	width:180px;
	border:solid;
	border-color:#0075bd;
	padding:0;
	}
#box5 {
	margin-left:190px;
	margin-right:160px;
	border:solid;
	border-color:#0075bd;
	}
#box6 {
	float: right;
	width:150px;
	border:solid;
	border-color:#0075bd;
	}
#box7{
	clear:both;
	height:100px;
	border:solid;
	border-color:#0075bd;
	}



De plus, je souhaitais que mes boites droite (box 4) et gauche (box 6)encadrent la boite centrale (box5), mais elles apparaisent en dessous.

Merci de votre aide
Modifié par catcat (15 Jan 2008 - 15:54)
Bonjour,

Deux remarques rapides:
- pour un problème de rendu HTML/CSS, le PHP ne va pas nous être d'une grande utilité Smiley cligne ;
- de plus, ça serait plus simple avec une page en ligne.
Oui, je viens de le voir. En fait, j'ai créé un menu, et je l'ai ensuite "inclus". Je corrige, et vérifie mes autres includes.

Mais ça ne résout pas mon pb Smiley decu
catcat a écrit :
Mais ça ne résout pas mon pb Smiley decu

Oui, mais il faut toujours commencer par corriger les erreurs de validation (sauf si on est capable de dire qu'elles sont mineures) avant de s'attaquer à un problème de rendu. Ça serait ballot de croire avoir affaire à un bug, et de chercher à le contourner, alors que le problème peut venir de la syntaxe du code HTML ou CSS...
je viens de découvrir l'outils de validation, et c'est super. Smiley biggrin

Je corrige les qq balises qu'il me reste, mais mon affichage est tj aussi "raté" !
euh Smiley confused j'avais oublié que je n'affiche ce menu que si je suis connectée. Donc, ça marche.

Mais j'ai vraiment un gros problème sur l'affichage des mes blocs droits et gauche pour encadrer mon bloc central.
catcat a écrit :
Mais j'ai vraiment un gros problème sur l'affichage des mes blocs droits et gauche pour encadrer mon bloc central.

As-tu déjà le tutoriel suivant: Un design fluide avec trois «colonnes», grâce au positionnement flottant?

On y explique que pour juxtaposer trois blocs, il faut:
- deux blocs flottants (ou trois, mais deux ça suffit et mieux vaut éviter d'en rajouter);
- placer les blocs flottants avant l'éventuel bloc non flottant dans le code HTML.
C'est bon, j'ai réussi. Il ne me reste qu' mettre en place la hauteur "factice" sur les colonnes de droite et de gauche, mais je peine un peu à comprendre le source.

Peux-tu m'aider ?
Le principe des colonnes factices est de placer une image de fond sur le conteneur des «colonnes», image de fond que l'on répétera en qui dessinera des colonnes sans pour autant que les blocs de contenu aient la même hauteur.

En gros, c'est du trompe l'oeil.

Pour savoir comment procéder exactement... ben ça dépend du design final. Ça peut être plus ou moins facile ou difficile à utiliser.