Positionnement avec css bootstarp par khaliloufatiga - page 1

Bonjour,

Je suis entrain de faire une intégration d'une maquette et j'utilise bootstrap

J'ai un problème je n'arrive pas à aligner les 3 premier bloques en dessous du menu , j'ai utilisé la méthode inline-block ca ne marche pas et aussi j'ai utilisé le système de grille de bootstrap ça ne marche pas aussi.

Est ce quelqu'un peut m'aider

Voici mon code html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Atelier HTML #7</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/fonts.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div id="container">
		<header class="content">
			<nav class="navbar navbar-default">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"    data-toggle	="collapse" data-target="#navbar" aria-expanded="false" 		aria-controls="navbar">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand mycontent-left" href="#"><img src="img/logo.png"></a>
					</div>
					<div id="navbar" class="collapse navbar-collapse">
						<ul class="nav navbar-nav">
							<li class="mycontent-left"><a href="#">Agenda</a></li>
							<li class="mycontent-left"><a href="#">Dossier</a></li>
							<li class="mycontent-left"><a href="#">Société</a></li>
							<li class="mycontent-left"><a href="#">Inscription</a></li>
							<li class="mycontent-left"><a href="#">Contact</a></li>
						</ul>
						<div class="btn-group right" id="btn-group">
						  <button type="button" class="btn btn-danger">Les offres de formations</button>
 						<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						    <span class="sr-only">Toggle Dropdown</span>
						    <span class="caret"></span>
						  </button>
							<ul role="menu" class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
							</ul>
						</div>
					</div>
			</nav>

				<nav id="nav2">
							<ul>
							<li><a href="#">Accueil</a></li>
							<li><a href="#">Formation sur mesure</a></li>
							<li><a href="#">E-Learning</a></li>
							<li><a href="#">222222222</a></li>
						</ul>
				<p>
    			FranceAction Locale, organisme de formation des élus et agent territoriaux 
  				</p> 
				</nav>

				</header><!--content -->

				<section class="content1">
					<div id="lg1">					
        			<h4>Titre de la formation</h4>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at auctor leo, sit amet suscipit est. Nulla eget vestibulum elit, in suscipit turpis. 
					<div class="fond">
					<button type="button" class="btn">Voir l'offre</button>	
					</div>
					</div>
					<div id="lg2"><img src="img/slider.png"></div>
				</section>


		<!--
		</div>

				<section class="container">

			<div class="row">
				<div class="col-lg-3 col-sm-6">
					<h4>Titre de la formation</h4>
					<div class="fond">
					<button type="button" class="btn">Voir l'offre</button>	
					</div>
				</div>

			<div class="col-lg-5 col-sm-6">
				<img src="img/slider.png" class="slide">
			</div>	
			<div id="achure">
			</div>
			<div class="col-lg-4 col-4">
				<table>
					<thead>
					<tr>
						<th>Actualité</th>
						</tr>
					</thead>
					<tbody>
					<tr><td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at auctor leo, sit amet suscipit est.</p></td></tr>
					<tr><td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at auctor leo, sit amet suscipit est.</p></td></tr>
					</tbody>	
				</table>
			</div> -->
			</div> <!-- container -->
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

et le CSS

body
{
    margin: 0;
}

.clear
{
    clear: both;
}

#container
{
    width: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.navbar {
    border-radius: 0px;
}


/* Header */

.content {
    width: 800px;
    margin: auto;
}

.navbar-brand > img {
    display: block;
    margin-top: -31px;
    margin-left: -30px;
    height: 82px;
    padding: 15px;
}

.navbar-nav > li > a {
  font-size: 13px;
}

.mycontent-left {
  border-right: 1px solid #b4b4b2;
  height: 56px;
}

#btn-group  {
    margin-right: 10px;
    margin-top: 10px;

}

button.btn-danger {
    background-color: #8f1b7c;
    border-color: #550b46;
}

@media screen and (max-width:768px) {
    .navbar-header {
    width: 700px;
    }

    .btn-group {
        display: none;

    }

    #nav2 p {
        display: none;
    }

    #nav2 ul {
        float: left;
    }
}

/*@media (min-width: 1200px) {

.container {
    width: 800px;
}

.col-lg-3 {
    float: none;
}
} */

/* nav2 */

nav#nav2{
    background-color: #e8e7e3;
    height: 30px;
    text-align: right;
    margin-top: -20px;
}
     
nav#nav2 ul li {
    display: inline;
    width: 150px;
    font-size: 11px;
    margin: 13px;
    vertical-align: sub;
    color: #5c5b59;
} 

#nav2 p {
    font-size: 11px;
    float: left;
    margin-top: -24px;
    margin-left: 12px;

}

#nav2 a {
    text-decoration: none;
    color: #5c5b59;
}

/*#nav2 ul {
    margin-top: -10px;
}

#nav2 li a {
    font-size: 12px;
    color: #5c5b59;

}

#nav2 p {
    font-size: 11px;
    padding-left: 10px;
    padding-top: 7px;
}*/
/*.traitgauche
    {
    border-left: 1px solid black;
    padding-left: 5px;
    margin-left: 50px;
    } */

.fond {
    background-image: url(../img/motif.png);
    background-color: #fffffd;
    width: 193px;
    height: 70px;
    margin-top: 50px;
} 

.fond .btn {
        margin: 20px 53px;
        background-color: #8f1b7c;
        color: white;
} 

.slide {
    width: 300px;
    height: 289px;
    margin-top: -10px;
    margin-left: -15px;
}

#achure {
    background-image: url(../img/motif.png);
    background-color: #fffffd;
    width: 20px;
    height: 288px;
    margin-top: -10px;
    float:left;
    margin-left: -45px;
}

.col-4 {
    width: 276px;
    margin-top: -10px;
    margin-left: -14px;
    background-color: #f6f6f4;
    height: 289px;
}

th {
    border-bottom: #ccccca solid 1px;
    padding-bottom: 10px;
    font-size: 17px;
}

td {
    border-bottom: #ccccca dashed 1px;
}

tbody p {
    font-size: 13px;
    margin-top: 30px;
}

thead th {
    padding-top: 15px;
}

#lg1 {
    width: 150px;
    display: inline-block;
}

#lg2 {
    width: 420px;
    display: inline-block;
}

.content1 {
    width: 800px;
}





NB : la méthode de positionnement avec la grille de bootstrap je l'ai mis en commentaire

khaliloufatiga

23 juillet 2017 à 0:22:50

Mon nom est God ; phil God

24 juillet 2017 à 18:12:07

Salut,

Disposerais tu d'un Wireframe pour savoir exactement ce que tu souhaite en visuel ?

Je ne comprend pas ton histoire des trois blocs.

Ce qui serai sympa c'est d'avoir aussi les images.

Deja très mauvaise sémantique (utilise le HTML5) :

Une div avec un titre et du texte c'est un article

Il faut tailler les images en largeur en indiquant leur largeur

2 barres de navigation ! eh bé !

Moi j'obtien ça :

.....

J'échange des connaissances. Si je les donnais, je n'en aurais plus

27 juillet 2017 à 2:58:10

Voici l'image que je voudrai intégrer,

j'ai trouvé une solution avec la méthode de positionnement des float mais pour rendre le rendu responsive elle me pose des problème.

Le problème c'est que la méthode du système de grille de bootstrap qui rend le contenu responsive ne veut pas marcher

NB : Le code pour la méthode de grille est entre des commentaires en bas du script HTML

28 juillet 2017 à 7:51:10

Si tu veux faire du responsive il faut avoir aussi un wf par device pour savoir où l'on va.

Dans la dernière capture comment tes blocs vont ils s'agencer en xs , sm , md et lg (référence class BS) ?.

(HTML ligne 94 : col-4 ? ça ce n'est pas une classe BS)

Plan de travail à l'élaboration d'une page "responsive" :

1/ On décide de la méthode responsive à employer :

Mobile first : tout le css ultérieurement sera pour design en display xs (méthode conseillée)
Adaptative : tout le css ultérieurement sera pour design en display lg

2/On pose tout le html
3/On bati son css en ajustant les @media.

-
Edité par Mon nom est God ; phil God 28 juillet 2017 à 8:02:22

Positionnement avec css bootstarp

Positionnement avec css bootstarp

Supprimer

Modérer

Signaler le message aux modérateurs