On the following webpage http://rocoru.com/web/course.html on line 91 the following HTML
<li><strong>Description</strong></li>
doesn't display at 100% height with the following CSS applied to it:
li strong {
width: 35%;
float: left;
height: 100%;
display: block;
}
What are potential reasons why this element would not equal the height of the < li> tag with the CSS shown above applied to it?
The Problem is in
<div>Il y a des petites fees au creux de ma main et qui prennent le the dans un jardin. Il y a des petites fees au creux de ma main et qui prennent le the dans un jardin</div>
You Used to much text..
try changing it to
<div> test text </div> and see the difference :)
hope it helps
Related
I'm creating a flexbox container with several items that contain text but not all texts have same lenght. I want to resize automatically the font size of text for fill the height of every flexbox item.
I have tried to set font-size with vh and another units and tried the js plugin FitText but it make all texts bigger.
Here is my code:
<div style="display:flex;flex-wrap:wrap;justify-content:space-between">
<blockquote class="articulo">
<p>Aprendizaje y práctica de la conciencia plena en estudiantes de bachillerato para potenciar la relajación y la autoeficacia en el rendimiento escolar</p>
<small><cite">universitas psychologica</cite></small>
</blockquote>
<blockquote class="articulo">
<p>Prevalencia de la depresión en España: Análisis de los últimos 15 años.</p>
<small><cite">universitas psychologica</cite></small>
</blockquote>
<blockquote class="articulo">
<p>Instrumentos para la evaluación de la sobrecarga del cuidador familiar de personas con demencia.</p>
<small><cite>universitas psychologica</cite></small>
</blockquote>
<blockquote class="articulo">
<p>Impulsividad y consumo de alcohol y tabaco en adolescentes.</p>
<small><cite>universitas psychologica</cite></small>
</blockquote>
</div>
CSS:
.articulo{
width:30%;
margin-bottom:20px;
border-left:3px solid #92c500;
}
.articulo cite{
text-transform: uppercase;
}
This is what I have:
and something like this is what I want:
This post gives quite a few answers, in terms of plugins and others:
Font scaling based on width of container
you'll have to make sure whatever you apply changes font size in regards to height and not width!
And I think using SVG as shown by Danto like this would work for your case:
<div style="height: 60px;">
<svg width="100%" height="100%" viewBox="0 -200 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="300" fill="black">Text</text>
</svg>
</div>
How about set font size 16px as default then use JavaScript or jquery and get the text length ,then check if length is < (num),set 18px font for example!
I just get stucked of how to center vertically an element.
<div class="wpb_wrapper">
<article class="callout"><a class="callurl" href="#">NOS SUCCESS STORIES</a>
<h3>Développement IT</h3><p></p>
<p>La transformation digitale, c’est avant tout un nouveau rapport d’opportunités d’innovations immense, dynamisé par :</p>
<p>- L’adhésion accélérée du grand public à de nouveaux usages.</p>
<p>- La collecte et le traitement de données toujours plus nombreuses.</p>
<p>- Le partage de la connaissance et l'Open Innovation IT.</p>
<p></p></article>
</div>
The code is in: http://jsfiddle.net/lzyphil/2bq7zqvf/
In fact,this part of code is generated by a wordpress plugin Webnus Callout,and I'm trying to modify the css in the hope that 'NOS SUCESS STORIES' sits vertically in the middle of <article>
Anyone get some ideas? Solution would be appreciated! Thanks
You can place the callout button absolutely positioned with respect to the relative parent container. It overlaps when mobile size browser breakpoint is reached. But you can modify it using media query with the desired position.
Output:
.callout a.callurl {
position: absolute;
right: 5%;
top: 40%;
}
JSfiddle
I'm trying to get a title and text into one paragraph. The title, however, should have another font than the text. I could get it to work using a lot of <div>'s but it's hard to do it that way. I'm looking to do it without a lot of <div>'s but i figured it might be impossible without any <div>'s. Here's my code:
<div class="blue">
<p class="font2">
Bits
</p>
<br>
<p class="font1">
Een bit is een kleine schakelaar die open of gesloten is.
De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.
De enen en nullen kunnen worden gezien als ja en nee of aan en uit.
Computers gebruiken deze waarden om informatie op te slaan en te lezen.
</p>
</div>
Thanks for your help!
I'd also like to ask another question:
#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 5px 5px;}
#menu1 a:hover {background-color: #0088FF}
#menu1 li {display: inline-block;}
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}
Here's my code. I'm trying to get it all under one #menu1 Because i'm working with multiple menu's and i don't want to lose my overview.
Thanks for your help!
Try this simple method using span
best way to add class to text is using <span> and to change style use font-family:
.bold {
font-family: cursive
}
.italic {
font-family: fantasy
}
.underline {
font-family: monospace
}
.italic {
font-family: serif
}
<div class="blue">
<p class="font2">
Bits
</p>
<br>
<p class="font1">
<span class="bold">Een bit is een kleine schakelaar die open of gesloten is.</span>
<span class="italic">De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.</span>
<span class="underline">De enen en nullen kunnen worden gezien als ja en nee of aan en uit.</span>
<span class="boldit">Computers gebruiken deze waarden om informatie op te slaan en te lezen.</span>
</p>
</div>
You'll probably have much better luck with slightly-reworked HTML, to improve the structure. For example:
<h2>Bits</h2>
<p>
Een bit is een kleine schakelaar die open of gesloten is.
De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.
De enen en nullen kunnen worden gezien als ja en nee of aan en uit.
Computers gebruiken deze waarden om informatie op te slaan en te lezen.
</p>
The h2 should be at whatever level is appropriate.
Now, you can style that as you wish by targetting the h2 and the p. If you want them grouped, for semantic reasons, you can wrap both in a section element. Otherwise, if you wish to style each separately from other h2 / p elements in your document, you can apply a class to each.
Now, what styles do you wish to apply to each element? As an example, you can start with:
h2 { font-family: sans-serif; }
p { font-family: serif; }
Based on another answer, and the title of this question, would it be correct to say you want each sentence in the paragraph to have potentially different styles?
Just wrap your text in a span and add a class it's inline by default and won't break your lines:
<p>some text <span class="font1">with a headline</span> and some other text in the same paragraph with <span class="font2">another headline</span></p>
I don't know if you have your styles in an external stylesheet, at this point I'm assuming not, so in you head tag put:
<style>
.font1{
font-family:arial /* put whatever font you want here */
}
.font2{
font-family:helvetica /* put whatever font you want here */
}
</style>
you should externalize your styles if you aren't, and I'd look into using h1, h2, h3 tags etc instead of p elements for titles
I'm making a website for a design class and I'm having a hard time placing things like I would want them to be.
I would like all box on the same row to be the same height, but I don't want a fixed height because the website will be responsive in the future. I would also like it if I could vertically center the content of the boxes.
Here is a screenshot of what it should look like:
And this is what it actually look like:
I tried many things but I can't think of a nice way to do that.
Here is a link to my current code: http://cgagnier.ca/gived/design/
Thank you very much
For equal heights columns you can also take a look here (use of pseudo elements):
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Or another way is to explore the display:table rule, so you could define boxes as table-cells. This would then probably address also the vertical align problem (just using the vertical-align property on table-cell elements).
--
For the vertical aligning itself, I sometimes take advantage of the inline-block vertical-align property.
So, define every inner block as inline-block and with vertical-align:middle (so they align with each other). Then use a pseudo ghost element with height:100% to align the others with it.
I've also got a sass mixin for that:
//to be placed on a pseudo :after/before
#mixin vertical_pivot{
content:"";
width: 1px;
height: 100%;
display:inline-block;
vertical-align: middle;
}
this last technique is also explained here (see the ghost element part by Michał Czernow):
http://css-tricks.com/centering-in-the-unknown/
This will solve your issue:
#premium figure {min-height: 203px;}
It is mobile responsive.
Another solution will be to use a <table> layout, but in my opinion, stick to the solution above.
You just need to specify a max-height for those images like so
#premium figure img {
max-width: 45%;
display: inline-block;
max-height: 149px;
min-height: 149px;
}
Put an div arround those div's give it a class, like container, and give it a min-height and max-height.
div:
<div class='container'>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
css:
.container{
min-height: 200px;
max-height: 200px;
}
Wrap your two figures in flex box div
<div style="
display: flex;
"><figure class="grille_6">
<img alt="DLC" src="img/p_dlc.png">
<figcaption>
<h1>Tous les DLC gratuits</h1>
<p>Obtenez gratuitement tous les DLC de Bugfield. Vous pourrez profiter de tous ces nouveaux bug une semaine en avance!</p>
</figcaption>
</figure>
<figure class="grille_6">
<img alt="Mallette" src="img/p_mallette.png">
<figcaption>
<h1>Participation au banquier™</h1>
<p>Lorsque vous achetez le Premium™, vous êtes automatiquement inscrit pour faire partie des spectateur du Banquier™</p>
</figcaption>
</figure>
</div>
<div style="
display: flex;
">
<figure class="grille_6">
<img alt="Couteau" src="img/p_couteau.png">
<figcaption>
<h1>Nouvelles armes exclusives</h1>
<p>Obtenez des nouvelles armes exclusives tel que le couteau bipod qui comprend une lampe tactique et une mire optique x10</p>
</figcaption>
</figure>
<figure class="grille_6">
<img alt="Priorité réduite" src="img/p_serveur.png">
<figcaption>
<h1>Priorité en file réduite</h1>
<p>Lorsque vous rejoindrez un serveur, vous serez placé dans une file spéciale à priorité réduite. Tous les autres joueurs passeront avant vous.</p>
</figcaption>
</figure>
</div>
You can also create a container and use the 2 columns as table cells. This is a really primitive demonstration, but I hope you've got the point. Fiddle
CSS:
#container {
display: table;
}
#content {
display: table-cell;
vertical-align: top;
background: #000;
color: #fff;
padding: 0 10px;
}
#sidebar {
display: table-cell;
vertical-align: top;
background: #cecece;
padding-right: 10px;
}
HTML
<div id="container">
<div id="sidebar">
<p>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br></p>
</div>
<div id="content">
<p>Main content</p>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How to ensure that the text does not exceed the gray border, and there is no scroll bar? I think that the problem is comming from the width of <td class="message">.
Edit : The bottom-border is already the border of <td class="message"> to show its width.
Here is the fiddle : http://jsfiddle.net/eGVZx/3/
HTML
<div class="liste_posts">
<table>
<tr>
<td class="message">
<div class="topic_div"><p>Si vous êtes sur cette page, c'est parce que vous avez décidé de laisser tomber phpbb, ou autre, pour vous lancer dans l'aventure qu'est la création d'un forum. Et ça tombe bien, parce que justement, ici on va voir comment faire ça Smiley. Il faut, avant de commencer, que vous sachiez que je vais montrer comment réaliser une base que vous pourrez ensuite faire évoluer comme bon vous semblera.</p></div>
</td>
</tr>
</table>
</div>
CSS
.message{
background-color: rgb(244, 238, 250);
}
.topic_div p {
word-break: break-all;
}
Thanks in advance.
If you want to indent the first line use the css text-indent. If you want to indent all lines use padding-left for a left indent.
As far as your text flowing out of your <td> you need to add a max-width to your <td> or the div.topic_div or just a static width.
////EDIT////
http://jsfiddle.net/eGVZx/6/
I may not be understanding your requirements; however, here is something which might be similar to what you are looking for:
http://jsfiddle.net/eGVZx/8/
.message{
background-color: rgb(244, 238, 250);
}
.topic_div p {
word-break: break-all;
width: 80%;
padding-right: 20%;
}
This would allow for the "gray" section to cover the other 20% where the text is not. Needless to say, you can adjust the percentage indent as necessary to create enough room for the text area and gray area, which would sit over top.
Please provide more information if necessary.
Hope this helps at all.