18008 sujets

Questions générales et questions de débutants

Créer un élément vertical

Bonjour,

J'essaie depuis quelques jours de créer un élément graphique vertical qui puisse se redimensionner dynamiquement en fonction de la hauteur d'un texte placé à sa droite.

Pouvez-vous m'aider?,
D'avance merci.


HTML:
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body id="wrapper">
		<div class="conteneur">
			<div class="left"><!--vide-->
				
			</div>
			<div class="right">
				<div class="diviseur">
					<h1>Hello</h1>
					<div class="middle"><!--élément en question-->						
					</div>
						<div>
						<p id="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
						</p>
					</div>
				</div>
			</div>
		</div>		
	</body>
</html>

CSS:
/* */
#wrapper {
	background-color: #555;
	max-width: 1200px;
	margin: 0 auto;
}

h1, p {
	color: #FFF;
}

p {
	margin-left: 20px;
	margin-right: 10px;
}

.conteneur {
	overflow: auto;
	background-color: #333;
	margin-left: 10px;
	margin-right: 10px;
	max-width: 100%;
}

.left {
	width: 50%;
}

.middle {
	float: left;
	background-color: #FFFFFF;
	width: 10px;
	height: 50px;
	margin-top: 3px;
	margin-right: 10px;
}

.diviseur {
	
}

.right {
	float: right;
	/*background-color: green;*/
	width: 50%;
	height: 100%;
}

Modifié par minedeplomb (05 Mar 2015 - 10:02)
Salut minedeplomb,
Je n'ai qu'une piste pour toi :
regarde sur ce site http://decosolutions.s15769.adfields01.atester.fr/
au niveau de la rightbar j'ai l'impression que c'est ce que tu recherches, non ?
Plus particulièrement sur la div class "fixed-rightbar" avec des états :before et : after
qui permet d'agrandir "l'ombré" quant on ajoute des éléments dans la colonne.

A+
sab
Si j'ai bien lu, tu as deux blocs verticaux inclus dans un conteneur, et tu veux que la des deux soit la même de fonction du contenu inséré dans le bloc de droite.

Si c'est le cas, un display: table-cell appliqué aux deux blocs est suffisant.

Bonne journée.
Modifié par thierry (05 Mar 2015 - 11:05)
La réponse passe par table-cell effectivement.
Le résultat n'est pas aussi fin (pour le moment) que ce à quoi je m'attendait mais relativement simple et efficace...
voici le code:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style_separvert.css">
	</head>
	<body id="wrapper">
		<div class="conteneur">
			<div class="left"><!--vide-->
				
			</div>
			<div class="right">
				<div class="diviseur">
					<h1>Hello</h1>
					<div>
						<p class="bvert"></p>
						<p class="margevert"></p>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
						</p>
					</div>
				</div>
			</div>
		</div>		
	</body>
</html>


/* */
#wrapper {
	background-color: #555;
	max-width: 1200px;
	margin: 0 auto;
}

h1, p {
	color: #FFF;
}

p {
	display: table-cell;
	padding: 0;
}

.conteneur {
	overflow: auto;
	background-color: #333;
	margin-left: 10px;
	margin-right: 10px;
	max-width: 100%;
}

.left {
	background-color: red;
	width: 50%;
}

.middle {
	display: table-cell;
	float: left;
	background-color: #FFFFFF;
	width: 10px;
	
	margin-top: 3px;
	margin-right: 10px;
}

.right {
	float: right;
	background-color: green;
	width: 50%;
}

.bvert {
	background: white;
	width: 4px; /* permet de contrôler le width du premier <p> au pixel prêt */
}

.margevert {	
	width: 10px; /* permet de simuler une marge */
}

Modifié par minedeplomb (05 Mar 2015 - 12:34)
Sujet clos
Aller à