4658 sujets

Sémantique web et HTML

Salut !

J'ai un petit problème d'alignement avec mes bloc. Je n'arrive pas les aligner des façons horizontale sur la page.
voici mon code :

<!--SECTION 8 LIST CONTACT US-->
         
         
         <section id="features-height">
             <div class="container">
                 <div class="row">
                      <div class="services-intro">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                       <div class="about-content text-center">
                           <h2>Contact with us</h2>
                           <p>Rapid solutions to the most complex business challenges <br>with cooperative process-driven.</p>
                       </div>
                   </div>
                 </div>  
                 
    <div id="products" class="row list-group">
        <div class="item col-xs-6 col-sm-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/370x243/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>           
             </div>
             
             
               <div id="products" class="row list-group">
        <div class="item  col-xs-6 col-sm-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/370x243/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>           
             </div>
             
             
             <div id="products" class="row list-group">
        <div class="item col-xs-6 col-sm-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/370x243/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>           
             </div>
        </div>
             </div>
    </section>
         



/*SECTION 8*/

#features-height {
    padding: 100px 0;
    background-color: white;
}




.glyphicon { margin-right:5px; }
.thumbnail
{
    margin-bottom: 20px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.item.list-group-item {
    float: none;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
}

.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover {
    background: #428bca;
}

.item.list-group-item .list-group-image {
    margin-right: 10px;
}


.item.list-group-item .thumbnail {
    margin-bottom: 0px;
}


.item.list-group-item .caption {
    padding: 9px 9px 0px 9px;
}


.item.list-group-item:nth-of-type(odd) {
    background: #eeeeee;
}

.item.list-group-item:before, .item.list-group-item:after {
    display: table;
    content: " ";
}


.item.list-group-item img {
    float: left;
}


.item.list-group-item:after {
    clear: both;
}


.list-group-item-text {
    margin: 0 0 11px;
}
Salut Mikazuki31,
il y a la class "list-group-item" qui est utilisée nulle part dans ton code?! est-ce normal?

Sinon sur ton post précédent (avec le rectangle jaune) as-tu résolu ton pb? Je crois que je n'ai pas compris ce que tu voulais faire exactement?!

Cordialement
Salut !
Effectivement j'ai surement oublié de mettre cette class "list-group-item"

Concernant le post du header avec le rectangle jaune, tu peux me répondre directement sur le sujet concerné ça sera plus simple.
Ton code marche bien mais quand je l'intègre j'ai que l'image de fond et pas les texte et le rectangle ...