Problème de retour à la ligne

Busy Women · 20 Octobre 2014

Bonjour

Novice et en pleine formation en programmation, j'essaie de développer mon site et je rencontre un problème avec cette page http://www.busy-women.fr/devis-en-ligne/ je n'arrive pas à mettre le texte après les images sauf si je mets trois lignes de <br/> alors je me dis qu'il y a forcément une autre solution.

zeb · 20 Octobre 2014

met tes classes "secteur" en float left et ta classe "clear" en clear both.

Busy Women · 20 Octobre 2014

ça marche pas =/

J'ai ajouter ça au css de mon thème :

Code:

}

.secteur {
	background: #f5f5f5;
/* Old browsers */
	background: -moz-linear-gradient(top,#f5f5f5 0%,#e8e8e8 50%,#f5f5f5 100%);
/* FF3.6+ */
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5f5f5),color-stop(50%,#e8e8e8),color-stop(100%,#f5f5f5));
/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,#f5f5f5 0%,#e8e8e8 50%,#f5f5f5 100%);
/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,#f5f5f5 0%,#e8e8e8 50%,#f5f5f5 100%);
/* Opera 11.10+ */
	background: -ms-linear-gradient(top,#f5f5f5 0%,#e8e8e8 50%,#f5f5f5 100%);
/* IE10+ */
	background: linear-gradient(top,#f5f5f5 0%,#e8e8e8 50%,#f5f5f5 100%);
/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#f5f5f5',GradientType=0);
/* IE6-9 */
	float: left;
	padding: 6px;
	border: 1px solid #96aabb;
	margin: 0 4px 9px 5px;
	width: 300px;
	height: 195px;
}

.imgSecteur {
	float: left;
	width: 300px;
	height: 195px;
}

.titreSecteur {
	background: #f78c40;
	color: #5a5a5a;
	text-shadow: 0 -1px #000;
	width: 300px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	float: right;
	margin-left: -0;
	margin-top: -25px;
	position: absolute;
}

body {
	text-align: justify;
}

.clear {
	float: both;
}

Et :

Code:

<?php
/*
Template Name: Devis
*/
?>
<?php do_action( '__before_main_wrapper' ); ##hook of the header with get_header ?>
<div id="main-wrapper" class="<?php echo tc__f( 'tc_main_wrapper_classes' , 'container' ) ?>">

    <?php do_action( '__before_main_container' ); ##hook of the featured page (priority 10) and breadcrumb (priority 20)...and whatever you need! ?>
    
    <div class="container" role="main">
        <div class="<?php echo tc__f( 'tc_column_content_wrapper_classes' , 'row column-content-wrapper' ) ?>">

            <?php do_action( '__before_article_container'); ##hook of left sidebar?>
                
                <div id="content" class="<?php echo tc__f( '__screen_layout' , tc__f ( '__ID' ) , 'class' ) ?> article-container">
                    
                    <?php do_action ('__before_loop');##hooks the header of the list of post : archive, search... ?>
<h1>Demande de devis en ligne</h1>
<div id="content">
<p> <br /> </p>
<h2>Rapide, fiable et économique !</h2>
<p> <br /> </p>
<h3>1 Choisissez une activité</h3>
<p>Cliquez sur la rubrique qui correspond à vos attentes pour déposer votre demande de devis en ligne.</p>
<h3>2 Décrivez votre projet</h3>
<p>Remplissez le questionnaire pour décrire votre projet aux prestataires.</p>
<h3>3 Obtenez un devis</h3>
<p>Jusqu’à 5 professionnels sélectionnés par nos soins vous proposent leurs devis Comparez & Choisissez.</p>
<p> <br /> Ce service sera bientôt disponible, <a title="Contact" href="http://www.busy-women.fr/contact/">contactez-nous</a> pour en savoir plus ou nous faire savoir que cela vous intéresse !</p>

<div>
<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Secrétariat.jpg" title="Secrétariat"><img class="wp-image-1876 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Secrétariat-300x195.jpg" title="Secrétariat" alt="Devis Secrétariat" class="imgSecteur" />
<p class="titreSecteur">Secrétariat</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Site-web-1.jpg" title="Site Web"><img class="wp-image-1877 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Site-web-1-300x195.jpg" title="Site Web" alt="Devis Site Web" class="imgSecteur" />
<p class="titreSecteur">Site Web</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Traduction.png" title="Traduction"><img class="wp-image-1878 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Traduction-300x195.png" title="Traduction" alt="Devis Traduction" class="imgSecteur" />
<p class="titreSecteur">Traduction</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Application-mobile-1.jpg" title="Application mobile"><img class="wp-image-1879 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Application-mobile-1-300x195.jpg" title="Application mobile" alt="Devis Application mobile" class="imgSecteur" />
<p class="titreSecteur">Application mobile</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Comptabilité.jpg" title="Comptabilité"><img class="wp-image-1880 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Comptabilité-300x195.jpg" title="Comptabilité" alt="Devis Comptabilité" class="imgSecteur" />
<p class="titreSecteur">Comptabilité</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Développement.jpg" title="Développement"><img class="wp-image-1881 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Développement-300x195.jpg" title="Développement" alt="Devis Développement" class="imgSecteur" />
<p class="titreSecteur">Développement</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Ecommerce-1.jpg" title="Ecommerce"><img class="wp-image-1882 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Ecommerce-1-300x195.jpg" title="Ecommerce" alt="Devis Ecommerce" class="imgSecteur" />
<p class="titreSecteur">Ecommerce</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Graphisme.png" title="Graphisme"><img class="wp-image-1883 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Graphisme-300x195.png" title="Graphisme" alt="Devis Graphisme" class="imgSecteur" />
<p class="titreSecteur">Graphisme</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Marketing.jpg" title="Marketing"><img class="wp-image-1884 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Marketing-300x195.jpg" title="Marketing" alt="Devis Marketing" class="imgSecteur" />
<p class="titreSecteur">Marketing</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Référencement.png" title="Référencement"><img class="wp-image-1885 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Référencement-300x195.png" title="Référencement" alt="Devis Référencement" class="imgSecteur" />
<p class="titreSecteur">Référencement</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Relation-de-presse.jpg" title="Relation de presse"><img class="wp-image-1886 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Relation-de-presse-300x195.jpg" title="Relation de presse" alt="Devis Relation de presse" class="imgSecteur" />
<p class="titreSecteur">Relation de presse</p> </a> </div>

<div class="secteur">
<a href="http://www.busy-women.fr/wp-content/uploads/2014/10/Rédaction.jpg" title="Rédaction"><img class="wp-image-1898 size-medium" src="http://www.busy-women.fr/wp-content/uploads/2014/10/Rédaction-300x195.jpg" title="Rédaction" alt="Devis Rédaction" class="imgSecteur" />
<p class="titreSecteur">Rédaction</p> </a> </div>

<div id="content">
<div class="clear"></div><p class="descriptionacc">
<p><h3>Rapidité, efficacité professionnalisme, Economie</h3><br /></p>
<h3>Présentation du service</h3>
<p>Ce service de demande de devis vous permet d’obtenir facilement et rapidement des estimations de prix pour les prestations dont vous avez besoin. Demander un devis en ligne sur notre site vous sera totalement gratuit et vous permettra d’être mis en relation avec le prestataire qui correspond le mieux à vos attentes. Économique, ce service vous permettra de réduire vos coût puisque vous pourrez choisir le prestataire qui correspond le mieux à votre budget.</p>
<h3>Pour quelles raisons faut-il faire un devis?</h3>
<p>Faire des devis avant de choisir vos prestataires de service est essentiel. Les devis sont le meilleur moyen pour pouvoir comparer les tarifs et les professionnels. Malgré les avantages certains des devis, tout le monde ne prend malheureusement pas le temps d’en faire et c’est dommage ! En effet, un devis ne vous engage absolument à rien et vous permet surtout d’avoir le coût approximatif des prestations dont vous avez besoin. Alors, n’hésitez plus et financer vos projets tout en cherchant le meilleur rapport qualité/prix possible !</p>
<h3>Pourquoi réaliser son devis sur busy-women.fr ?</h3>
<p>Les devis en ligne sur notre site sont entièrement gratuit. Nous avons sélectionné pour vous des prestataires de qualités et vous aurez vos devis dans les 48 heures ouvrées. En plus de la rapidité des réponses, vous pourrez obtenir jusqu’à 7 devis différents, selon votre demande et les disponibilités et ainsi pouvoir choisir le meilleur rapport qualité/prix. Comme vous avez pu le remarquer, vous pouvez faire un devis sur notre site pour la réalisation d’un très grand nombre de prestation : Ecommerce, Site Web, Application mobile, Développement, Graphisme, Marketing, Secrétariat, Traduction, Comptabilité, Relation presse.</p>
<h3>Comment choisir le bon prestataire de service ?</h3>
<p>C’est une question que l’on se pose souvent. Méfiez-vous des prix trop bas, la qualité à un prix. Prenez en compte la notoriété, l’ancienneté et les travaux déjà réalisés par les prestataires.</p>
<div class="clear"></div>
<?php do_action ('__after_loop');##hook of the comments and the posts navigation with priorities 10 and 20 ?>

                </div><!--.article-container -->

           <?php do_action( '__after_article_container'); ##hook of left sidebar ?>

        </div><!--.row -->
    </div><!-- .container role: main -->

    <?php do_action( '__after_main_container' ); ?>

</div><!--#main-wrapper"-->

<?php do_action( '__after_main_wrapper' );##hook of the footer with get_get_footer ?>

zeb · 20 Octobre 2014

.clear {float: both;}
.clear {clear: both;}

Busy Women · 20 Octobre 2014

Yes ! Merciiiiiiiiii, 2 jours que j'étais dessus ^^

Vous auriez d'autres conseils pour moi, pour cette page ?

Madrileño · 20 Octobre 2014

Bonjour,

Quelques avis :
- Ce service sera bientôt disponible : noindex
- Pas fan des images de type Microstock
- Pas fan de l'affichage du formulaire en bas
Continuer les améliorations globalement.

Cordialement.

Busy Women · 20 Octobre 2014

- le formulaire de commentaire ?
- vous conseillez quoi pour les images ?

Madrileño · 20 Octobre 2014

Bonjour,

- C'est bien le formulaire de commentaires
- D'avoir des images originales

Cordialement.

Busy Women · 22 Octobre 2014

Mettre ce genre d'image sur tout le site, ce serait originale ?

Busy Women · 22 Octobre 2014

Madrileño · 22 Octobre 2014

Bonjour,

C'est mieux.

Cordialement.

Busy Women · 26 Octobre 2014

Bonjour,

Finalement, je vais plutôt essayer de faire un partenariat avec un photographe ou illustrateur, j'ai déjà quelques pistes

baud74 · 26 Octobre 2014

c'est pas les photos de la page qui vont faire venir en nombre des gens susceptibles de remplir une demande de devis.
après, le contenu de la page va jouer sur le taux de remplissage mais le nombre de demande sera toujours plus faible avec une page parfaite pas vue qu'une page, peut-être pas parfaite, vue.

Madrileño · 26 Octobre 2014

Bonjour,

Pour résumer, il faut continuer le long travail d'optimisation du site pour le référencement naturel.

Cordialement.