On my website on the page "Equipe", I would like some more space between the text "Founder and Managing Director" and the text below. I tried margin bottom but doesn't seem to work. Any suggestion?
Note: a br would be too much space.
HTML code:
<div class="equipe-bio">
<img src="images/avatar-man.png" width="80" height="80" alt="Picture" />
<p><span class="bioname">Gregory Yrogerg</span></p>
<p><span class="biotitle">Founder and managing director</span></p>
<p>Originaire de Belgique, Gregory vit depuis plus de 20 années en Norvège. Lorem ipsum dolor sit amet,...</p>
</div>
A simple fix would be to add the margin-bottom to the <p> tag, which should achieve your desired effect:
<p style="margin-bottom: 5px;">
<span class="biotitle">Founder and managing director</span>
</p>
By default span is an inline element. So if you wanted to add a margin to a span, you would have to change the display property:
.biotitle {
display: block;
margin-bottom: 5px;
}
Related
I have a short text that is followed by an SVG in a limited-width container.
The expected behaviour is that the text breaks if it's longer than the container width BUT I would like it NOT to break right between the text and the svg:
Current result:
Expected result:
Adding a <nobr> or a <span>tag in the middle of the text (before blue) and closing it after the SVG is not an option as the text comes from an external database and cannot be edited.
<span class="text">
Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg">
<svg>
....
</svg>
</span>
add display-block to svg container:
.svg {
display: inline-block;
}
The only solution I found required a nasty change in the origin HTML.
To make sure the icon is never alone in the new line I wrapped the last word and the icon in a new element with white-space: no-wrap;, plus if we want it to still split if the line cannot accommodate last word with the icon we can make this new container inline flex and flex-wrappable.
<div>
Lorem ipsum dolor sit
<span class="last_word">
very_long_last_word
<svg>...</svg>
</span>
</div>
.last_word {
/* Stick icon to last word */
white-space: no-wrap;
/* Make sure last word and icon will break ultimately */
display: inline-flex;
flex-wrap: wrap;
}
Live example: https://jsfiddle.net/uerzo6sa/
You can prevent the line breaking with this markup. It doesn't need to include the last word, so you can use it even with a generated content.
JSX
<div>
{children}
<span className="tail">
{'\u00a0'}
<svg></svg>
</span>
</div>
HTML
<div>
Lorem ipsum dolor sit<span class="tail"> <svg></svg></span>
</div>
CSS
.tail {
white-space: no-wrap;
}
https://jsfiddle.net/radarfox/65h40jt7/
You can add padding to the text and a negative margin:
<span class="text" style="padding-right: 15px;">
Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg" style="margin-left: -15px;">
<svg>
....
</svg>
</span>
That way, if there isn't room for the padding, the last word will get pushed to the next line also.
(This is based on this answer: https://stackoverflow.com/a/25857961/5899236)
You can define position: absolute on the SVG, with auto for top, right, etc.
https://codepen.io/jsit/pen/xxOQoVW
The only side-effect is this will allow the SVG to appear outside of the containing box; this is in a sense the reason it works at all.
I'm trying to use <img> within mdl-card__supporting-text but if the image is bigger than the card, the image would not scaled to fit within the card's supporting text area. See the codepen for example. See how the right side of the image is covered up.
I'm not expert in css and mdl. I have also tried to search for a solution and didn't quite find one that would work. If anyone has an idea, I would really appreciate if you could give a helping hand. Thanks.
For me this simple snippet worked:
img {
height: auto;
width: 100%;
}
But if you will have more than just this image, you should consider using a class for this.
.card-img {
height: auto;
width: 100%;
}
And for better overview you should use the .mdl-card__media class on a div as the container, if you are trying to make a layout like this.
<div class="mdl-card mdl-shadow--2dp demo-card-square">
<div class="mdl-card__media">
<img src="http://placehold.it/400x300">
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
In jQueryMobile, listviews truncate text. There are lot of articles and posts like this one that say to add white-space:normal in css.
However, this isn't working for me in jQueryMobile 1.4. You can see here. To test you'll need to shrink your browser window size. Any ideas?
Given your LI markup:
<li>
<a href="#">
<img src="http://pbs.twimg.com/profile_images/1225696765/29072010042_normal.jpg" />
<h3 class="wrap">Marco Alberto Sotelo (#marcosotelo79)</h3>
<p>Sun Feb 02 20:01:24 +0000 2014</p>
<p class="wrap">Ya estamis en el estadio MetLife para el #SuperBowl #SBUniversal http://t.co/80 /1wSo5O9E</p>
<br />
<img src="http://pbs.twimg.com/media/Bffo-1MCIAEoY5X.jpg" style="max-width: 90%; margin: auto;" />
</a>
</li>
Change the class wrap to:
.wrap {
white-space: normal !important;
}
The !important allows the class to override all the jQM classes that are setting it to nowrap.
Here is a DEMO
try this
<li><p class='ui-li-desc'>Text to be displayed</p></li>
I want the text to change completely when someone hovers over it. I found code online that should work, but it doesn't. Any suggestions?
<span class="show">
<p>if { <br /></p>
<p>yourSite < awesome; <br /></p>
<p>solution = aislingDouglas (HTML5 + CSS3 + <br /></p>
<p>JavaScript + PHP); <br /></p>
<p>} <br /></p>
<p>else { <br /></p>
<p>solution = null; <br /></p>
<p>} </p>
</span>
<span class="noshow">
<p>Need a website? <br /></p>
<p>You found your dream developer! <br /></p>
<p>And hey - I already helped you on the web, <br /></p>
<p>why not let me help you <br /></p>
<p>build an amazing site! <br /></p>
</span>
And here is the CSS:
.noshow, p:hover .show { display: none }
p:hover .noshow { display: inline }
I'm not opposed to using JavaScript (coding suggestions welcome), but I'd prefer it to stay in CSS.
Thanks in advance!
You've got the right idea, sort of...
The goal is to have a container element which holds both sections of text.
When that element is moused over it gets assigned the pseudoclass :hover. Using this selector, you can re-style the children (below, .first and .second) appropriately.
Note that I've used <span> for the text and <p> for the parent below, but if you want to do this with block level children like more <p> elements, then you should use <div> as the parent instead.
http://jsfiddle.net/G28qz/
HTML:
<p class="hovertext">
<span class="first">This is what you see first</span>
<span class="second">But this shows up on mousehover</span>
</p>
CSS:
/* Hide the second piece of text by default */
p.hovertext .second {
display:none;
}
/* Hide the first piece of text on hover */
p.hovertext:hover .first {
display:none;
}
/* Re-show the second piece of text on hover */
p.hovertext:hover .second {
display:inline;
}
I think you want something like:
<div class="wrap">
<div class="show">
<p>if { </p>
<p>yourSite
< awesome; </p>
<p>solution = aislingDouglas (HTML5 + CSS3 + </p>
<p>JavaScript + PHP); </p>
<p>} </p>
<p>else { </p>
<p>solution = null; </p>
<p>} </p>
</div>
<div class="noshow">
<p>Need a website? </p>
<p>You found your dream developer! </p>
<p>And hey - I already helped you on the web, </p>
<p>why not let me help you </p>
<p>build an amazing site! </p>
</div>
</div>
with the following CSS:
.wrap {
outline: 1px dotted blue;
height: 300px;
}
.noshow, .wrap:hover .show {
display: none
}
.wrap:hover .noshow {
display: block
}
You need an outer container to wrap the two blocks that will be toggled on and off.
For best results, set a height to the outer wrapper or else you can get a oscillating show/hide effect since the panel will resize itself due to the different amount of text, which means that that the mouse may not be over the panel about to be displayed, so the hover state will be instantly reverted to not-hover, hence re-triggering the show/hide effect.
Fiddle: http://jsfiddle.net/audetwebdesign/zAt7f/
Is there any CSS workaround to make the pdf/doc/ppt icon always sit at the end of text line, without using a background image? When there is not enough space for the icon image, it will sit in second line alone. I'm wondering if there is anything similar as white-space:nowrap?
<ul>
<li>
Lorem Ipsum is simaorem Ipsum. (3MB, PDF)
<img src="images/pdf.gif" />
</li>
</ul>
<ul> has a fixed width.
Images are text, or “inline content,” from the perspective of layout. Thus, you can use same techniques as for preventing line breaks in text. The nobr markup prevents line breaks and works universally in browsers, though standards-writers have frowned upon it. If needed you can use its standardized, less reliable, more verbose sister: white-space: nowrap in CSS, together with some inline markup like span.
Here the problem is that you would need “overlapping” markup: ... (3MB, <nobr>PDF)</a><img ...></nobr> (i.e., open a nobr element inside the a element but close the a before nobr). While this works, it violates HTML syntax rules, so I’d suggest that you move some text out of the a element (it probably does not need to be there):
Lorem Ipsum is simaorem Ipsum. (3MB, <nobr>PDF)
<img src="images/pdf.gif" alt=""></nobr>
or
Lorem Ipsum is simaorem Ipsum. (3MB, <span
style="white-space: nowrap">PDF) <img src="images/pdf.gif" alt=""></span>
You can add an inline child to your list item and give it a background image.
<ul>
<li><span class='bg'>Lorem Ipsum is simaorem Ipsum. (3MB, PDF)</span></li>
</ul>
...
li .bg {
background-image: url(...);
background-repeat: no-repeat;
background-position: 100% 100%;
padding-right: 24px
}
See a demo here: http://tinkerbin.com/qbwNWFBb
ul li a:after {
content: url('http://placekitten.com/16/16');
}