dimension bloc

19 octobre 2017 à 6:12:49

Bonjour, j'ai un problème avec mes blocs, le Bloc 4 ne fait pas la même dimension que les autres:

Quelqu'un pourrait m'aider svp

et de plus quand je réduis la taille de ma page mes blocs s’alignent verticalement et moi je voudrais qu'ils restent tous aligner horizontalement.. car je compte faire une colonne en dessous de chaque bloc et mettre du contenu à l'intérieur.

Voici mon HTML :

<HTML>
<HEAD>

<link href="style.css" rel="stylesheet" media="all" type="text/css" /><TITLE>Menu pour mon site</Title></HEAD>

<BODY>



<div class="tab-home row  show-lg show-md- show-sm hidden-xs">
    <div class="tabs-x tabs-above tab-bordered">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" ><a href="#auto" aria-controls="auto" role="tab" data-toggle="tab"><h2>Bloc</h2></a></li>
            <li role="presentation" ><a href="#"><h2>Bloc1</h2></a></li>
            <li role="presentation" ><a href="#"><h2>Bloc2</h2></a></li>
            <li role="presentation"><a href="#"><h2>Bloc3</h2></a></li>
            <li role="presentation"><a href="#"><h2>Bloc4</h2></a></li>
        </ul>
 </div>

</BODY>
</HTML>

CSS:

.tab-home .nav {
	
	margin: 0 120px 0 120px;
	overflow: hidden;

}
.nav-tabs {
	 margin: 0 px 0 120px;
	
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
	
}
ul, ul {
    margin-top: 0;
    
}


.nav-tabs > li {
    float: left;
    margin-bottom:0px;
	
}




 .nav li a h2 {
    font-size: 17px;
    padding: 60px 45px;
    background: #f0f0f0;
    color: #5c5c5c;
    margin: 0 40px 0 0;
    cursor: pointer;
    border-radius: 0px;
	width:100%;
	border: 2px solid red; 

	
}


.nav-tabs > li > a {
    margin-right: 79px;
    line-height: 70px;
    border: 1px solid transparent;
    border-radius: 20px 20px 0 0;
	
}
.nav > li > a {
    position: relative;
    display: block;
	height: 200px; 
	
	
   
}

a {
    color: #337ab7;
    text-decoration: none;
	
}

Merci d'avance.

-
Edité par FarCry 19 octobre 2017 à 12:31:54

Krogoth

19 octobre 2017 à 16:15:16

Bonjour,

Essai peut etre d'utiliser les grid qui repondra plus a ton besoin:

https://la-cascade.io/css-grid-layout-guide-complet/

Un petit +1 si je vous ai aidé est toujours appréciable :).

FarCry

19 octobre 2017 à 16:36:17

C 'est exactement ce que j'avais besoin

Merci beaucoup ! :))

-
Edité par FarCry 19 octobre 2017 à 16:37:59

Hsuissia

19 octobre 2017 à 16:55:07

Bonjour,

Le systeme de grille est un excellent moyen pour placer tes éléments, de plus en plus utiliser ( quoi qu'avec flex^^ ) surtout des framework CSS tel que pure, bootstrap, blueprint;...

Cependant si on analyse ta question, j'ai un problème avec mes blocs, le Bloc 4 ne fait pas la même dimension que les autres:

Si je te demande de me tracer un trait a la regle, et sans autre indicatif, que fais tu ?

Ici c'est pareil, dans ton css, si tu veux que toutes les divs fassent la meme taille, il faut leur préciser la taille. " Trace moi un trait de 32cm "

Voili voilou, mais continue sur ta lancé du grid, c'est le principe quoi

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

Krogoth

20 octobre 2017 à 8:54:22

Hsuissia a écrit:

Bonjour,

Le systeme de grille est un excellent moyen pour placer tes éléments, de plus en plus utiliser ( quoi qu'avec flex^^ ) surtout des framework CSS tel que pure, bootstrap, blueprint;...

Euh ne pas confondre les grilles à la bootstrap et autre framework css et les grid CSS3. Les grid CSS sont justement le "successeur" des flexbox.

Un petit +1 si je vous ai aidé est toujours appréciable :).

Hsuissia

20 octobre 2017 à 10:20:48

Ce n'est pas l'inverse ? Flexbox successeur des grids ? ( simple question )

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

Lamecarlate

20 octobre 2017 à 10:33:29

Hsuissia > non

Le module Flexbox a été conçu pour du micro-placement : du placement des éléments dans leurs conteneurs. Grid est fait pour le positionnement général des pages, du macro-placement.

Et le module Grid a été finalisé il y a à peine un an - chose très intéressante, il n'a justement fallu qu'un an pour que tous les navigateurs modernes l'implémentent, et c'est très cool : http://caniuse.com/#feat=css-grid .

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Hsuissia

20 octobre 2017 à 11:26:44

D’accord merci pour l’info je me coucherais moins bête

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

dimension bloc

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

dimension bloc

dimension bloc

Supprimer

Modérer

Signaler le message aux modérateurs