28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Assez difficile d'exprimer mon soucis mais en gros j'aimerais créer 2 blocs (div) côte à côte.
Le bloc du milieu doit être centré sur la page et faire 700px et celui de gauche doit prendre toute la largeur disponible à gauche (basiquement il s'agit bien évidement d'un bg-repeat d'où mon intérêt de l'ajustement de taille).

Le problème me semblait basique et pourtant je suis totalement bloqué Smiley decu Toute aide est la bienvenue.

Pour l'instant voici mon code pour ces deux blocs :
<div id="gauche">&nbsp;</div><div id="milieu">&nbsp;</div>

Et bien sur le CSS :

#gauche {
	background-image: url('../img/logo-repeat.png');
	background-position: 66px left;
	background-repeat: repeat-x;
	height: 135px;
	float: left;
	margin-left: 0
}
#milieu { width: 700px; margin-left: auto;margin-right: auto }


Merci d'avance,
Snif toujours pas de réponse :s

Au passage j'ai mis en ligne une version du soucis à cette adresse pour ceux qui voudraient jeter un oeil.

Je reste bloquer sur le soucis qui concerne comme vous pourrez le constater le repeat du liserai sur la gauche du logo.

Merci d'avance pour toute aide,
Hello,

Quand je cherches à faire ce que tu veux obtenir, je procède de la façon suivante :


body {
    overflow-y: hidden;
}

#monBlocAGauche {
    width: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 -850px 0;
}


Ca va placer la marge gauche de ton bloc au milieu vertical de ta page, puis la marge à gauche va ramener le bloc de sa largeur + 350px (la moitié de ton bloc central de 700px) vs la gauche.

L'overflow sur le body empêche la scrollbar horizontale d'apparaitre.

Ce n'est peut être pas la meilleure solution, ni la plus propre, mais elle a le mérite de fonctionner Smiley smile Si quelqu'un a mieux, je suis preneur !

Sinon, tu peux toujours passer par JS.
Hello, merci pour ta réponse et surtout d'avoir prit la peine d'investiguer sur le sujet.

En fait j'ai pensé à cette méthode est d'ailleurs au début c'est celle que j'avais implémenté. Le soucis c'est que sur smartphone et même tout simplement lorsque l'utilisateur redimensionne son navigateur le comportement des div n'est pas exactement celui souhaité... d'où ma recherche d'une solution plus "propre"...

Je commence à réaliser que ce qui me semblait "simple" ne l'est peut être en fait pas du tout ? Je suis désespérément preneur de toute aide lol... merci d'avance,
Je "up" un peu ce sujet car je cherche toujours désespérement la méthode pour faire cela !
Je reste preneur de tout exemple ou bout de code me permettant d'avancer...

En gros pour résumer j'aimerais créer 3 div côte à côte dont celle du milieu serait à taille fixe et centrée sur la page et les 2 du côté s'adapteraient bien entendu à la largeur disponible respectivement sur la gauche et sur la droite de la div centrale.

Merci d'avance pour toute aide,