28172 sujets

CSS et mise en forme, CSS3

Méler un dimensionnement en pixel et en pourcent

Bonjour,

Je cherche à effectué la mise en page suivante :
Un bloc flottant à gauche de largeur fixe et un bloc flottant à droite qui occupe tout l'espace restant.
(Une idée de ce que je veux visuellement avec une mise en page avec un tableau : mise en forme)

Seulement je souhaiterai que le bloc de gauche soit positionné après le bloc de droite dans le code HTML. En gros avoir un truc comme ça niveau HTML : 


<html>
	<body>
		<div>Bloc de gauche (prends tout l'espace restant)</div>
		<div>Bloc de droite (prends une largeur fixe)</div>
	</body>
</html>


Ca fait plusieurs heure que je me casse la tête dessus. Peut-être qu'il existe pas de solution Smiley decu . Ou alors il y a un truc tout con que j'ai pas vu Smiley biggrin .

Si vous avez une solution, des pistes ou des idées... je suis preneur !
Modifié par delta14 (07 Feb 2012 - 21:52)
Modérateur
Et pourquoi pas utiliser un tableau?

ou uniquement en css en imitant le comportement du tableau avec display: table, display: table-row, dsiplay: table-cell mais il faudra ajouter un peu de balises.

Dernière option, un javascript qui se met à jour au redimensionnement de la fenêtre, mais si les éléments existant remplissent la fonction, à quoi bon?

Edit: Le tuto ci-dessus, ne répond pas vraiment à ce problème...
Modifié par kustolovic (08 Feb 2012 - 10:05)
Merci pour les réponses.

J'ai essayé le tuto que tu m'a donné est ca donne un truc comme ca :
resultat

C'est bien la mise en page que je souhaite ; mais ca ne résout pas mon principal problème qui est d'avoir la partie droite avant la partie gauche dans le HTML.

J'ai actuellement ca dans le HTML : 


<div id="[b]gauche[/b]">
	<p>
	...
	</p>
</div>
<div id="[b]droite[/b]">
	<p>
	...
	</p>
</div>


et je voudrait l'inverse (tout en gardant le même effet visuel) : 


<div id="[b]droite[/b]">
	<p>
	...
	</p>
</div>
<div id="[b]gauche[/b]">
	<p>
	...
	</p>
</div>


En ce qui concerne ce que propose kustolovic je ne connait pas bien ces propriétés je vais essayé de tester ca.
Modifié par delta14 (08 Feb 2012 - 11:27)
Bon, on a donc quatre caractéristiques:
- Deux colonnes.
- De même hauteur.
- La première (visuellement) est de largeur fixe, et la deuxième de largeur fluide.
- La première visuellement doit être en deuxième dans le code (une demande sans doute motivée par une optimisation SEO furieusement inutile, mais passons).

La seule solution que je connaisse et qui gère tout ça nativement c'est du côté de CSS3 avec Flex Box ou Grid Layout. Pas encore utilisable dans les navigateurs.

Une autre piste, ce serait:
- display:table et display:table-cell pour obtenir la mise en page de type tableau.
- direction:rtl sur le «tableau» et direction:ltr sur les «cellules» pour intervertir l'ordre visuel des cellules (disposition de droite à gauche) sans changer la disposition du texte (de gauche à droite).
Ça marche dans les versions récentes de Firefox mais j'ai pas testé ailleurs.
Bon j'ai peut-être trouvé une solution : 


<div id="droite">...</div>
<div id="gauche">...</div>




#droite
{
	position: absolute;
	top: 0px;
	left: 302px;
}

#gauche
{
	width: 300px;
	position: absolute;
	top: 0px;
	left: 0px;
}


Ca donne ca : resultat 3

C'est un peu brutal mais ca marche Smiley smile
delta14 a écrit :
C'est un peu brutal mais ca marche Smiley smile

Oui, si tu enlèves la contrainte des colonnes de même hauteur (ou éventuellement si tu la feintes avec la technique des colonnes factices), et du moment que tu n'as aucun contenu à placer en dessous de tes éléments positionnés en absolu.

À tout hasard, je précise que tu peux positionner en absolu un seul des deux éléments (a priori plutôt #gauche), l'autre peut rester en position:static et ménager un espace pour le premier avec une marge par exemple.
fvsch a écrit :

À tout hasard, je précise que tu peux positionner en absolu un seul des deux éléments (a priori plutôt #gauche), l'autre peut rester en position:static et ménager un espace pour le premier avec une marge par exemple.


Pas idiot, ca fera toujours un truc en moins en absolu.
Le positionnement en absolu, je trouve ça assez violent. Même si ça a l'avantage d'offrir un résultat net et immédiat.
Sujet clos
Aller à