I used the class css text-overflow: ellipsis; , but I need to get the width of the div parent id="container" , and the width of the div child class="ellipsis" would be the same value as the parent div .
<div id="container" >
<div class="title" >
title
<div class="actions-container" >
<div class="fields">
</div>
</div>
</div>
<div class="body" >
<div class="champ2">
Paragraphe :
</div>
<div class="valeur" >
<div class="ellipsis" appIsEllipsisActiveDirective >
Un paragraphe est une section de texte en prose vouée au développement d'un point particulier souvent au moyen de plusieurs phrases, dans la continuité du précédent et du suivant. Sur le plan typographique, le début d'un paragraphe est marqué par un léger renfoncement ou par un saut de ligne
</div>
</div>
</div>
</div>
Set in the style of the child div width: 100%; or try margin-right: 0px;
Related
I have a little problem when i try to add wow fadeInUp (https://wowjs.uk/docs) animation on my website. I have
overflow set to scroll in my css and it seems to disable the effects of the animation. There is a reason why i had it on scroll so i was wondering if there is a way to make it work with overflow: scroll;
Here is the website for more details: https://admiring-khorana-ad08d5.netlify.app/
.webContainer{
max-height: 100vh;
overflow: scroll;
}
<div class="webContainer">
<div class="grid-container">
<div class="grid-item text wow fadeInUp" data-wow-duration="3s"><img class="services-icon img" src="./icons/services/s1.png" alt=""> <a
class="servicesTag" href="">Acupuncture</a><br>
<div class="serv-description">
Cette pratique constitue tout acte de stimulation, généralement au
moyen d’aiguilles, de certains sites déterminés sur la peau.
</div>
</div>
<div class="grid-item text wow fadeInUp" data-wow-duration="3s"> <img class="services-icon img" src="./icons/services/s2.png" alt=""> <a
class="servicesTag" href="">Kinésiologie</a><br>
<div class="serv-description">
Le kinésiologue est le professionnel de la santé expert en activité
physique. Il vous accompagne dans l’adoption et le maintien d’un
style de vie sain et actif. Ce professionnel peut aussi vous aider à
perdre du poids. Les programmes d’entraînement conçus par les
kinésiologues peuvent aussi aider les personnes souffrant de
problèmes chroniques.
</div>
</div>
...
var wow = new WOW();
wow.init();
I'm not really sure of what you are talking about but you can use #keyframes fadeIn to make animations. Example:
p:hover {
animation: fadeIn 3.1s;
}
#keyframes fadeIn {
from{opacity: 0;}
to{opacity: 1;}
}
<div>
<p>Hello</p>
</div>
Does that answer your question
Solved it by using Jquery
if (scrolled > 25 && scrolled < 50) {
jQuery('.grid-item, .services-image').each(function(i) {
setTimeout(()=>{
$(this).show().addClass('animated fadeInUp')
}, 250 * i);
});
I want my image and text to be responsive, I have added image for the format I need, but I used some coding and I'm not able to do it the right way. Please can someone help me out here?
I have this format here for desktop version
and this is what I see in tablet for screen 768
now I want in tablet to be similar as in desktop
#media (min-width:641px) {
.home-top{
background: url(../../images/index/u155.png);
background-position: center;
background-repeat: no-repeat;
min-height: 280px;
color:#fff;
padding-top: 30px;
padding-bottom: 30px;
}
}
<div class="home-top ">
<div class="container">
<div class="lg-container">
<div class="lg-container">
<div class="row">
<div class="col-md-4 "><img src="<?php echo URL ?>public/images/image_directeur.png" class="director-img"></div>
<div class="col-md-8 ">Mot de l’Inspecteur Général en charge de l'IGF <br><br>Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur général Mr Salomon Jude Alix Patrick... Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur Général Mr Guy Romero LATRY...
<br><br>
Guy Romero LATRY <span style="float: right;"><button class="home-top-btn">Lire l'article >></button></span>
</div>
</div>
</div>
</div>
</div>
</div>
The col-md-* works for screen widths higher than 992px.
You should add `col-sm-4' to the first column div and 'col-sm-8' to the second. Add, not replace.
This should work to get the proportions right on smaller screens.
I am a beginer but I already made websites so, I know HTML, CSS, and working with servers and FTP.
I was working on my html, and some weiiiird thing happenned to me (for me, as I really don't understand what is happening, it is weird...)
So, Localy, my images in the section "projets" shows, as asked by the code.
BUT, on my server, the images won't show. They are IDENTICAL lines, the images ares correctly named (01.jpg.02.jpg...) and placed on the server, the images 1 and 4 shows correctly, but the others, nope. I tried to copy/past the line from picture 1 to the picture 2 line and, the site shows picture 1 two times, so, I really don't understand at all what is wrong...
my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Agency</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<header style="background-color: #fafafa"> <!-- entête du site, contiendra le menu de navigation ainsi que le carrousel-->
<nav class="nav" role="navigation"> <!-- navigation-->
<img src="./webagency_images/images/logo.png" />
<ul clas="menu">
<li>Accueil</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div id="slider"> <!-- carrousel-->
<figure>
<img src="./webagency_images/images/slider/bg1.jpg" alt="Images Slider">
<img src="./webagency_images/images/slider/bg2.jpg" alt="Images Slider">
</figure>
<figcaption><h1><span style="color:#62a8d0">WEBAGENCY</span> : L'AGENCE DE TOUS VOS PROJETS!</h1><p>Vous avez un projet Web? La WebAgency vous aide à le réaliser!</p><br/><br/>
<button class="button" type="button">Plus D'infos</button>
</figcaption>
</div>
<!-- navigation dans le carrousel-->
<div class="slider_navigation">
<div class="fa fa-chevron-left" aria-hidden="true"></div>
<div class="fa fa-chevron-right" aria-hidden="true"></div>
</div>
</header>
<!-- section services de la page du site-->
<section class="services">
<h1 style="text-align: center">NOS SERVICES</h1>
<div class="point_bleu"></div>
<hr/>
<p class="bloc_centre">Nous proposons les meilleurs services et en plus, aux meilleurs prix!! Nous avons une équipe de professionnels tous prêt à accueillir votre projet et lui donner vie selon vos souhaits. N'hésitez pas à nous contacter pour un devis, un projet web ou pour un magasin web. Les éléments pris en charge par l'UX vont de la partie commerciale à l'accessibilité.</p><br/>
</div>
<div class="assides">
<img src="./webagency_images/images/main-feature.png" />
<div class="blocs"><h1>UX Design</h1>
<p><b>U</b>ser e<b>X</b>périence : son rôle à pour but de faire la liaison entre l'interface construite, et l'utilisateur. Il est chargé de rendre l’expérience d'utilisation fluide, simple, intuitive, de faciliter l'utilisation de l'utilisateur, de réfléchir pour lui à tout ces moyens là d'avoir la meilleure expérience possible sur son support.</p>
<div class=""><h1>UI Design</h1>
<p><b>U</b>ser <b>I</b>nterface : son rôle est là pour rendre accessible, optimale et facile, l'accès et l’exécution des dispositifs liés à l'interface des applications et machines.</p>
</div>
<div class=""><h1>SEO</h1>
<p><b>S</b>earch <b>E</b>ngine <b>O</b>ptimization : son rôle est d'optimiser au mieux le référencement des outils web, d'un site... Le travaille se fait sur les mots clés, la sémantique, l'étude de la concurrence, du marché actuel et doit être fait régulièrement pour mettre à jour les données importantes au référencement.</p>
</div>
</div>
</section>
<!-- section portfolio de la page du site -->
<section class="projets">
<h1 style="text-align: center">NOS PROJETS</h1>
<div class="point_bleu"></div>
<hr/>
<p class="bloc_centre">Lorem Ipsum et tout le tralala blablabla à remplir plus tard.</p><br />
<div class="row">
<div><img src="./webagency_images/images/portfolio/01.jpg" alt="Image1"/></div>
<div><img src="./webagency_images/images/portfolio/02.jpg" alt="Image2"/></div>
<div><img src="./webagency_images/images/portfolio/03.jpg" alt="Image3"/></div>
<div><img src="./webagency_images/images/portfolio/04.jpg" alt="Image4"/></div>
</div>
<div class="row">
<div><img src="./webagency_images/images/portfolio/05.jpg" alt="Image5"/></div>
<div><img src="./webagency_images/images/portfolio/06.jpg" alt="Image6"/></div>
<div><img src="./webagency_images/images/portfolio/07.jpg" alt="Image7"/></div>
<div><img src="./webagency_images/images/portfolio/08.jpg" alt="Image8"/></div>
</div>
</section>
<!-- bas de page contenant un iframe google maps et un formulaire de contact-->
<footer>
<form method="post">
<div>
<h1>Contact Info</h1>
<h4>WebAgency SAS<br /> 25 rue d'Hauteville 75010 Paris<br /> Tel : 01 02 03 04 05</h4>
</div>
<label for="Nom"></label>
<input type="text" name="Nom" placeholder="Nom"><br/>
<label for="E-mail"></label>
<input type="text" name="E-mail" placeholder="E-mail"><br />
<label for="Sujet"></label>
<input type="text" name="Sujet" placeholder="Sujet"><br />
<label for="Message"></label>
<textarea type="text" rows="10" cols="35" placeholder="Votre message"></textarea><br />
<input class="button" type="submit" value="Envoyer" style="width: 50%">
</form>
<div class="google_iframe">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11139.440186098542!2d4.878186999999999!3d45.73390145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1524499866273" width="100%" height="650" frameborder="0" style="border:0; opacity: 0.7" allowfullscreen></iframe>
</div>
</footer>
</body>
</html>
The link to my website page :
http://web-tool-box.com//openclassrooms/projets/webagency/webagency.html#
Am I making some "stupid junior mistake"?
i use the following code to put text beside image:
<div style="display:inline-block;vertical-align:bottom">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p>
</div>
<div style="display:inline-block;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
However, even if i change the size of my image, it is always above the text... why?
Finally i used the template "initializr" (see google), because it makes all responsive too, which i needed! thank you all anyway!
you might try adding the position property to the image
so, in this case,
image{position:fixed , absolute , relative; top:50%; left:50%;}
or this may work as well:
<div>
<image></image>
<p></p>
</div>
A commenter asked that I work with your code only. So, here's a solution using your code, to make the 2 divs sit next to each other.
<div style="float: left; width: 49%;">
<p><img alt="Cool" src="http://placehold.it/350x150" height="50%" width="50%" /></p>
</div>
<div style="float: right; width: 49%;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
EDITED
Below I've posted code that in my mind is better formatted for your solution. Just wanted to offer up some alternatives.
<style type="text/css">
.left {
float: left;
width: 50%;
height: 50%;
}
.left img {
width: 100%;
height: 100%;
}
.right {
float: right;
}
.movida strong {
color: #d54646;
}
.common strong {
color: #2089a4;
}
.text strong {
display: block;
font-weight: bold;
}
</style>
<div class="left">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" /></p>
</div>
<div class="right">
<p class="text">
<div><span class="movida"><strong>MOVIDA</strong>es un ministerio christiano, latino, internacional e interdenominacional con el propósito de:</span></div>
<div><span class="common"><strong>DESAFIAR</strong>al joven christiano a una entrega total a Dios y a crecer en su relación con El.</span></div>
<div><span class="common"><strong>PROVEERLE</strong>herramientas para que descubra sus dones y talentos.</span></div>
<div><span class="common"><strong>MOTIVARLO</strong>a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.</span></div>
</p>
</div>
The text is pushed below the image because the combined width of the two container divs is wider than the page, so it pushes the second div below the first one:
<div style="display:inline-block;vertical-align:bottom;width:200px;">
http://jsfiddle.net/3Luby/
I have experience in web development but zero experience in mobile development. I have therefore purchased a website template (html5 +css3) and I then used it as a starting point for a PHP website.
Some of the pages are not working very well on mobile though. When I test this page, the text is not sizing to the mobile screen. Even worse, when I go into Reader mode on iOS, there's just this big image of silver rings showing, instead of the actual text.
How can this be fixed ?
The code responsible for showing a block of text is the following:
<div class="container">
<div class="content_block row">
<div class="fl-container span9">
<div class="row">
<div class="posts-block span12">
<div class="contentarea">
<div class="row-fluid">
<div class="span12 module_cont module_text_area module_medium_padding">
<h3 class="headInModule"></h3>
<p>Les prestations commencent à partir de 250 euros.</p>
<p>Lors de ma prestation, je suis à votre entière disposition pendant un
nombre d’heures qui varie en fonction de la formule choisie. </p>
<p>Je m’engage à délivrer les photos dans un délai de 4 semaines suivant le
mariage.</p>
<p>Les frais de déplacement sont inclus dans la région Alsace-Lorraine,
Luxembourg et Province Luxembourg en Belgique. Pour toute autre région,
veuillez me contacter.</p>
</div>
</div>
<!-- .row-fluid -->
<div class="row-fluid">
<div class="span12 module_cont module_text_area module_medium_padding">
<img src="/img/bronze.jpg" alt="formule bronze"
style="float:left"/>
<div style="float:right">
<h3 class="headInModule">Formule Bronze</h3>
<a id="anchor1"></a>
<ul class="list_type1">
<li>6H de prestation le jour du mariage * (plage horaire à préciser
avec les mariés)
</li>
<li>Rencontre des futurs mariés avant le mariage et signature du
contrat de prestation
</li>
<li>La prestation comprend un photo reportage permettant de couvrir
les thèmes suivants:
<ul>
<li>préparatifs (habillage, maquillage, coiffeur)</li>
<li>cérémonie</li>
<li>photos de couple ou/et de groupe</li>
<li>vin d’honneur</li>
</ul>
</li>
<li>Travail de post-production et de retouches</li>
<li>1 DVD contenant les photos retravaillées en haute résolution
(min. 150 photos)
</li>
<li>Galerie photo internet sécurisée et disponible pendant 1 an
minimum.
</li>
<li>Cession intégrale des droits de reproduction dans un cadre privé
uniquement.
</li>
</ul>
<i>prix sur demande</i>
</div>
</div>
</div>
<!-- .row-fluid -->
Your classes .span9 and .span12 has a width of 700px and 940px which is stretching your content. If you set these to 100% in your media queries it should work.
e.g.
#media only screen and (max-width: 770px){
.span9, .span12 {width:100%;}
}