Bonjour,
J'utilise le grid bootstrap (jusque la sans problème : bonne documentation). Je dois intégrer un design. La maquette comprend bien les grids. Seul problème, j'ai des div qui sortent des grids.
exemple
energie13.pagesperso-orange.fr/maquette.png
Problème 1:
Avez vous une piste pour sortir les div logo et text de la grid container comme dans la maquette (j'ai essayé de les sortir du flux : en les mettant au dessus du div container avec un position : absolute mais il disparait ou un float left pour le logo et un float right pour le text sans succès
Problème 2 :
J'ai mon image 1 (background qui empiète moitié sur les grid, moitié à l'extérieur de container. Je pense à la sortir du flux mais ne vois pas trop comment le faire non plus.
Problème 3 :
Comment faire pour que le div (généralement background de couleur) qui prend 100% de la page puisse intégrer le contenu et s'adapter à la taille de celui-ci ?
Je ne sais pas si tout est clair...
Si vous avez des pistes... ou exemple de code ca serait top
Plus trop quoi tester. Du coup je m'arrache les cheveux... Je vais encore relire la doc css sur le positionnement en attendant.
Je vous remercie par avance
Exemple de Structure utilisée : (je pense que je me complique beaucoup la vie pour intégrer ce design mais ne vois pas trop par ou commencer
Modifié par energie13 (20 Dec 2013 - 03:28)
J'utilise le grid bootstrap (jusque la sans problème : bonne documentation). Je dois intégrer un design. La maquette comprend bien les grids. Seul problème, j'ai des div qui sortent des grids.
exemple
energie13.pagesperso-orange.fr/maquette.png
Problème 1:
Avez vous une piste pour sortir les div logo et text de la grid container comme dans la maquette (j'ai essayé de les sortir du flux : en les mettant au dessus du div container avec un position : absolute mais il disparait ou un float left pour le logo et un float right pour le text sans succès
Problème 2 :
J'ai mon image 1 (background qui empiète moitié sur les grid, moitié à l'extérieur de container. Je pense à la sortir du flux mais ne vois pas trop comment le faire non plus.
Problème 3 :
Comment faire pour que le div (généralement background de couleur) qui prend 100% de la page puisse intégrer le contenu et s'adapter à la taille de celui-ci ?
Je ne sais pas si tout est clair...
Si vous avez des pistes... ou exemple de code ca serait topPlus trop quoi tester. Du coup je m'arrache les cheveux... Je vais encore relire la doc css sur le positionnement en attendant.
Je vous remercie par avance
Exemple de Structure utilisée : (je pense que je me complique beaucoup la vie pour intégrer ce design mais ne vois pas trop par ou commencer
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>titre</title>
<link rel="stylesheet" href="css/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="logo left clearfix"></div>
<div class="container">
<div class="header">
<div class="signup"></div>
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="navlink_left"><a href="#">Lien 1 | Lien 2</a></div>
</div>
<div class="col-md-2 col-lg-2 col-md-offset-6 col-lg-offset-6">
<div class="navlink_right"><a href="#">Connexion</a></div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="slider">
<div class="col-md-12">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="text_slide">
<h2 class="h2</h2>
<h3>h3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="signinclick">
inscription 1 click
</div>
<div class="container">
test container
</div>
<div class="footer">
test footer
</div>
</div>
</body>
</html>
Modifié par energie13 (20 Dec 2013 - 03:28)
