Superposer 2 éléments d'une meme row Boostrap

10 janvier 2018 à 17:37:55

Bonjour, je suis en train de faire l'activité du cours Intégré une maquette CSS et HTML

http://exercices.openclassrooms.com/assessment/519?login=8560279&tk=a571dd173b4bafc1fc9a2b348db772c8&sbd=2016-02-01&sbdtk=2466d6bae51e373d89ac8e3f74213199

J'ai donc choisi une maquette PSD et commencer à travailler dessus, mais je bloque pour superposer 2 éléments comme ci dessous

et voila ce que j'ai actuellement :

et voici mon code :

<body>
	
		<nav>
			<div class="container">
<!-- Nav liste inline avec border bas au passage de la souris-->
				<div class="row">
					<div class="col-md-offset-6 col-md-6 ">
						<ul class="list-inline">
							<li> <a href="#">Home </a> </li>
							<li> <a href="#"> About </a></li>
							<li><a href="#">Projects </a></li>
							<li><a href="#">Services </a></li>
							<li><a href="#"> Clients</a></li>
							<li><a href="#">Contact</a></li>
						</ul>
					</div>
				</div>

			</div>
		</nav>
		
		<header>
			<div class="container-fluid">
				
				<div class="row">
					<!--Logo-->
					<div id="plan_1" class="col-md-offset-3 col-md-2">
							<img src="images/logo.png" alt=""/>
					</div>
								<!-- texte logo-->
					<div class="col-md-4">Our work is not about
								form follows function but
								form follows beauty
					</div>	
					
					<div id="plan_2" class="col-md-offset-4 col-md-8" > 
						<img src="images/bandeau.png" alt="" />
					</div>

				</div>

			</div>
		</header>

			
			
		




</body>

-
Edité par Julemane 10 janvier 2018 à 17:45:19

Mewen_bzh

10 janvier 2018 à 17:48:22

Bonjour,

Pour commencer je te conseille de revoir la structure de ton HTML.

Par exemple, le bandeau.png : si je ne me trompe pas c'est la grande image avec une sorte de quadrillage. Son rôle étant purement décoratif, cette image doit se trouver dans le CSS, en background-image de l'élément qui contient le logo et la phrase d'accroche. Faire cela va déjà te simplifier la vie.

Je ne réponds pas aux messages privés.

Julemane

10 janvier 2018 à 18:55:44

alors j'ai un peu progressé mais pas encore assez, je bloque sur le positionnement de mon background j'ai essayer plusieurs chose dont un conteneur-fluid (avec 2 col d'offset et 10 col pour que le bandeau soit aligné a droite) dans lequel je met mon conteneur qui contient mon logo et ma citation mais du coup ça me le décale en même temps...

Et mon code

<!--container centrer sur la page de 12col-->
			<header  class="container">
				<!-- contient le logo a gauche a 1col du bord du conteneur et une citation de 4 col-->

				<div class="row">
					<div id="logo" class="col-md-offset-1 col-md-2">
					<img src="images/logo.png" alt="logo" />
					</div>
					
					<div id="citation" class="col-md-4" >
						<h1>Our work is not about form follows function but <div id="underline"> form follows beauty</div></h1>
					</div>

				</div>
				
				</header>

-
Edité par Julemane 11 janvier 2018 à 14:00:02

Julemane

11 janvier 2018 à 20:20:20

J'ai réussi, (2 jours de galere quand meme ) merci Mewen pour ton aide

-
Edité par Julemane 12 janvier 2018 à 14:30:34