Aller au contenu

creation d'un gabarit xhtml stric particulier.

jer666

Par jer666
dans Programmation et Lignes de code

Messages recommandés

jer666 Régulier

jer666

Posté(e)
Posté(e)

Bonsoir, voila deja quelques mois que je m'acharne a faire un theme xhtml strict particulier...

je seche completement....

effets désirés:

un theme 2 colonnes comprennant 3 colonnes (c, d e) dans la colonne centrale (b)

257684d89104dba284c003d8d764f595.gif

caractéristiques :

- mettre en avant dans le code le content, en clair B doit apparaitre avant A dans la feuille html.

- le contenu est dynamique, donc la colonne de gauche, ne peut PAS prendre une valeur absolute pour son placement, car sa longueur est variable comme les colonnes centrales, et donc pourrait allegrement dépasser du theme.

- la largeur de ma page doit etre variable entre 1029px et 777px.

- heu je crois que c'est deja pas mal [biggol]

difficultés :

- l'utilisation de marge négatives ne fonctionne pas, puisque la largeur de la colonne centrale a est variable.

-l'utilisation de position: absolute ne fonctionne pas a cause de la longueur variable des 2 bloc A et B [sweatdrop]

ma question est, aprés avoir tourné le probleme dans tout les sens, je ne trouve aucune solution, mais alors aucune!!!!

j'ai essayer plein de truc en passant par les plus farfellu et les plus vicieux!!

tel qu'une margin-top negatif [langue] ca ne marche pas du tout!!

ou encore le rajout d'un element en dessous de A et mettre cette meme colonne en absolute, pour prendre tout la longueur de la colonne comme pleine! mais non ca marche pas non plus [bawling]

j'avais les cheveux long avant de commencer, mais une calvicie debute!! svp sauvé mes cheveux [biggol]

une idée? un axe de recherche?

merci par avance! :transpi:

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)

difficultés :

-l'utilisation de position: absolute ne fonctionne pas a cause de la longueur variable des 2 bloc A et B [sweatdrop]

Heu je vois pas le rapport, en position : absolute les coordonnées sont calculées par rapport au coin supérieur gauche, donc tu peux avoir une longueur variable ça ne pose absolument aucun problème. Je pense que tu confond avec la largeur... Enfin bon ça revient au même puisque tu ne peut pas utiliser des coordonnées absolues pour ton projet.

Donc la solution testée et approuvée (lifetime garanted for IE, Firefox and Opera) :

xhtml

<div id="global">
 <div id="header">mon header</div>
 <div id="col_b">mon contenu qui doit apparaître en premier</div>
 <div id="col_a">ma collone qui reste derrière et qui fait pas chier !</div>
 <div id="footer">mon footer</div>
</div>

css

#global{
 /* ce que tu veux */
 }

#header{
 /* ce que tu veux
 eventuellement si une de tes collones se met sur la même ligne que ton header
 (les tailles variables ça peut apporter ce genre de désagrément) tu rajoutes:
 clear: both; */
 }

#col_a{
 float: left;
 }

#col_b{
 float: right;
 }

#footer{
 clear: both;
 }

Normalement ça devrait marcher, ensuite pour les blocs C, D et E ça devrait être facile.

Lien vers le commentaire
Partager sur d’autres sites
Sentinel Collaborateur

Sentinel

Posté(e)
Posté(e)

Merci bien, un truc basique avec header, contenu et footer, c'est tous les jours au petit déjeuner.

Maintenant, essaie de coder un layout complexe comme il demande, tout en respectant ses contraintes (notamment code de B avant celui de A), et tu verras que c'est une autre paire de manches.

Propose un layout complet au lieu de ce pseudo-code ultrasimple, et on pourra comparer.

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)

Mon code marche très bien, tu le colle dans une page html et un css tu verra qu'il fait exactement ce qui est demandé il n'y a aucune raison de le compliquer plus.

Edit : bon je retire ce que j'ai dit, ça ne marche pas aussi bien que je le pensais car je ne peux pas spécifier une largeur au conteneur global (col_b se met tout à droite de l'écran :\ ). Mais je reste convaincu que c'est possible de faire tourner un layout comme ça sur tout les navigateurs. Je poste dès que j'ai trouvé une solution.

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)

Bon je dois m'avouer vaincu... :keskidit:

Ma manière de concevoir la page nécessite obligatoirement qu'on rentre soit une dimension pour #global soit un rapport de proportion pour les collones A et B. Sinon la collone B se retrouve plaquée à droite de l'écran.

À la rigueur si je pouvais avoir plus d'information sur le comportement des deux collones A et B (la on ne sait que deux chose, elles sont variables en largeur et la somme de leur largeur est comprise entre 777 et 1029px) je pourrait arriver à quelque chose, mais la je suis dans une impasse. D'ailleurs, Sentinel, je suis curieux de voir comment tu est arriver à juxtaposer les deux blocs en les inversant dans le code et en ne spécifiant aucune dimension...

Si tu pouvais m'éclairer.

:cartonrouge:

Lien vers le commentaire
Partager sur d’autres sites
Sentinel Collaborateur

Sentinel

Posté(e)
Posté(e)

Ben, de toute façon, max-width c'est du CSS 3 il me semble, donc pas près d'être supporté. En attendant, tu es obligé de spécifier une taille en dur pour le container de la page. Avec 950px ça rentre agréablement dans du 1024x768, et c'est bien compris dans la marge donnée par jer666.

Par ailleurs il n'a pas spécifié que la largeur des colonnes elles-mêmes était variable, seulement leur hauteur, ce qui peut poser problème si on code mal son layout (des div qui sortent de leur conteneur parent).

Mais IE et FFox ont des comportements tellement différents avec les CSS qu'il est très délicat de faire un layout si complexe purement en CSS...

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)

Oui mais bon je suis désolé d'insister, mais le code que j'ai posté au début dans ce cas là fonctionne tout aussi bien. Faut pas prendre ça comme une agression mais si tu garde une taille globale fixe c'est tout à fait possible de faire tourner un layout de ce type sur tout les navigateurs...

Lien vers le commentaire
Partager sur d’autres sites
Sentinel Collaborateur

Sentinel

Posté(e)
Posté(e)

Si tu gardes le header, le contenu avec 2 colonnes, et le footer, oui.

Maintenant ajoute les zones C, D et E comme sur le schéma avec des DIV, et ça commence à être difficile, surtout si tes colonnes peuvent avoir des hauteurs différentes.

Mon code fonctionne sous FF car il gère à peu près correctement les padding/margin/border. Sous IE, les tailles sont calculées n'importe comment, ce qui fait partir le layout en vrille.

Si tu as une solution complète qui fonctionne bien sous les deux browsers, ça m'intéresse.

Lien vers le commentaire
Partager sur d’autres sites
Sentinel Collaborateur

Sentinel

Posté(e)
Posté(e)

J'ai modifié mon code, ça devrait maintenant passer sous IE aussi (mais je ne peux pas le vérifier chez moi, je n'ai pas windows...)

Toujours cette obligation de fixer les largeurs des colonnes, mais sinon ça devrait satisfaire jer666 :)

/*
================================================================================
							GENERAL
================================================================================
*/

*
{
margin:						0px;
padding: 					0px;
font-family: 				verdana sans-serif;
}


/*
================================================================================
							LAYOUT
================================================================================
*/

body
{
text-align: 				center;
}


#body
{
text-align: 				center;
}


#page
{
width: 						960px;
margin-left: 				auto;
margin-right: 				auto;

text-align: 				left;
}


#page_header
{
height: 80px;
background-color: #444;
color: #fff;
}

#page_content
{
clear:both;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
background-color: #CCF;
}


#page_content_A
{	
width: 350px;
float:left;
background-color: #CCC;
}

#page_content_B
{
width: 600px;
float: right;
background-color: #CCC;
}

#page_content_C
{
display:block;
background-color: #CFC;
}



#page_content_D
{
float:left;
display:block;
width: 295px;	
background-color: #FCF;
}
#page_content_E
{
float:right;
display:block;
width:295px;	
background-color: #888;
}

#page_footer
{
color: #fff;
clear:both;
height: 40px;
background-color: #444;
}



<html>

<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="body">

<div id="page">

	<!-- ======================================== -->
	<!-- HEADER DE LA PAGE						  -->
	<!-- ======================================== -->
	<div id="page_header">
		header
	</div>

	<!-- ======================================== -->
	<!-- CONTENU DE LA PAGE						  -->
	<!-- ======================================== -->
	<div id="page_content">

		<div id="page_content_B">

			<div id="page_content_C">
				contenu C, contenu C, contenu C, contenu C, contenu C<br/>
				contenu C, contenu C, contenu C, contenu C, contenu C<br/>
				contenu C, contenu C, contenu C, contenu C, contenu C<br/>
				contenu C, contenu C, contenu C, contenu C, contenu C<br/>
			</div>

			<div id="page_content_afterC">
				<div id="page_content_D">
					contenu D, contenu D, contenu D, contenu D, contenu D<br/>
					contenu D, contenu D, contenu D, contenu D, contenu D<br/>
					contenu D, contenu D, contenu D, contenu D, contenu D<br/>
					contenu D, contenu D, contenu D, contenu D, contenu D<br/>
				</div>
				<div id="page_content_E">
				contenu E, contenu E, contenu E, contenu E, contenu E<br/>
				contenu E, contenu E, contenu E, contenu E, contenu E<br/>
				contenu E, contenu E, contenu E, contenu E, contenu E<br/>
				contenu E, contenu E, contenu E, contenu E, contenu E<br/>					
				</div>

			</div>

		</div>

		<div id="page_content_A">
		contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A<br/>
		contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A<br/>
		contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A<br/>
		contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A, contenu A<br/>			
		</div>

	</div>

	<!-- ======================================== -->
	<!-- FOOTER DE LA PAGE						  -->
	<!-- ======================================== -->
	<div id="page_footer">
		footer
	</div>

</div>

</div>
</body>
</html>

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)

Bon bah laisse tomber je pensait pouvoir gruger avec la propriétée overflow: hidden; mais finalement mon idée ne marche pas, les blocs se mettent les uns en dessous des autres plutôt que de dépasser horizontalement de l'écran sans déclencher d'ascenceur...

Lien vers le commentaire
Partager sur d’autres sites
jer666 Régulier

jer666

Posté(e)
  • Auteur
Posté(e)

:mdr: j'adore votre discution :mdr: ca commence a "rien de plus simple" et ca fini par "ben on est obligé de fixer la largeur" :mdr: on dirais pas comme ca, mais je commence a toucher ma bille en css. mais ayant tout apris de mes propres experience, j'espéré ne pas connaitre une astuce :-D

et non c'est bien longueur et largeur variable ;-) et pour chaqu'une des colonne... seul "A" aurait une largeur fixe :-D

Je vous remercie enormement de votre aide...

Ta proposition de code mon cher sentinel est vraiment trés bon, mais j'ai deja des gabarits du meme ordre, la j'aurais aimer tapper dans le maxi gabarit ;-) avec une largeur variable, qui dans un premier temps se comporte comme precisé precedement entre 1029px et 777px. mais a terme je pense l'adapter pour des resolution trés différentes... je pense notamment a certain de mes collaborateur qui ont des resolution atypique 1600*je sais plus combien :chinois: sans compter au resolution 800*600 qui represente encore 16% de mes visites mensuelles :ouioui:

Aprés avoir chercher des dizaines d'heure (j'ai commencer ce gabarit en fevrier :francais: ), vous representiez mon dernier espoir... :zarb: je pense que je vais me tourner vers la solution que vous me proposés, une largeur fixe pour le conteneur :fumer:

merci encore...

Au fait sentinel, je ne connais pas les différences entre les type de css, mais max-width est relativement bien reconnu par tout les navigateur, enfin sauf IE, mais on peut pas decement dire que c'est un navigateur :transpi:

j'hesite presque a ceer un site de petition pour le retrait de IE du monde de l'informatique :zarb::zarb:

bon ben je vais reprendreto n,idée sentinel et xoopsé tout ca, ben ouai ca serrait trop simple si c'etait un site en html :mdr:

MERCI ENCORE!!

ps je pensais aps qu'il y aurait autant de reponses :eeek2::yes:

si quelqu'un trouve une solution merci de la poster, voir m'envoyer un mp si c'est dans longtemps :transpi:

Lien vers le commentaire
Partager sur d’autres sites
Sentinel Collaborateur

Sentinel

Posté(e)
Posté(e)

C'est encore moi ;)

En relisant toute cette discussion (acharnée), je me rends compte que j'ai pu être un peu sec avec notre ami Yangzebul. Je le regrette, ce n'était vraiment pas mon intention, et j'apprécie l'aide qu'il apporte sur le forum.

Encore désolé,

Sentinel

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...