I have added a margin to the .quotes-text selector however it moves the whole quotes section down not just the text within the quotes section. Any idea what might be causing this? Code below.
.quotes {
height: 344px;
background: #bf4b54;
}
.quote-text {
font-size: 2rem;
max-width: 860px;
}
<div class="quotes">
<div class="quote-text">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque soluta necessitatibus a autem obcaecati officiis reiciendis. - Head Chef</span>
</div>
<img src="" alt="" class="chef">
</div>
If you just want the text to move down (but not the section) use padding instead of margin.
Related
Suppose one is designing a box to frame some content, and wants that box to always have consistent space between its borders and text inside of it, regardless of the text's line-height. Is there a solution aside from custom negative margin on each box?
In theory this should actually be the "responsibility" of the content (in this case, the text), assuming our box is some kind of component allowing transclusion (e.g. web component slots), so I'd be especially interested in any way to style an inline element so that its line-height-generated top and bottom spaces collapse, regardless of line-height value (intentionally not calling them margins to not confuse them with the margin css property).
Here as an runnable example of the issue - the space between the magenta border and the inner text varies due to line height, and if the magenta border wasn't there, it would appear that each box has different padding.
This has probably been answered, but unfortunately since the terms are so generic it's hard to research (though I did try).
.foo {
max-width: 200px;
border: 2px solid blue;
padding: 20px;
line-height: 2;
display: inline-block;
vertical-align: top;
}
.foo>* {
border: 1px solid magenta;
}
.baz {
line-height: 1;
}
.bar {
line-height: 3;
}
<div class="foo">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>
<div class="foo">
<div class="baz">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>
<div class="foo">
<div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>
One idea that may solve half the issue is to change the line-height of the text to a smaller value than the container. Doing so, the height of the text will be smaller than the linebox and you can align it to the top. For this you need to consider an extra container.
.foo {
max-width: 200px;
border: 2px solid blue;
padding: 20px;
line-height: 2;
display: inline-block;
vertical-align: top;
}
.foo>* {
border: 1px solid magenta;
}
.baz {
line-height: 1;
}
.bar {
line-height: 3;
}
span {
line-height:1;
vertical-align:top;
}
<div class="foo">
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>
<div class="foo">
<div class="baz"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>
<div class="foo">
<div class="bar"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>
As you can see the text will always be aligned on the top whataver the line-height but the issue remains on the bottom. It's like we moved the issue to only one side.
Here is a related answer to better understand the alignment trick : https://stackoverflow.com/a/54190413/8620333
I use this template for my website skin. In this section of press have two div that contain text and image.I want change position of image and text. The image placed in left side and texts placed in right side. My site skin has rtl direction.
<div class="fh5co-press-item to-animate fadeInUp animated">
<div class="fh5co-press-img" style="background-image: url(/DNN_test/Portals/_default/Skins/Crew/images/img_8.jpg)"></div>
<div class="fh5co-press-text">
<h3 class="h2 fh5co-press-title">Versatile <span class="fh5co-border"></span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eius quos similique suscipit dolorem cumque vitae qui molestias illo accusantium...</p>
<p>Learn more</p>
</div>
</div>
On .fh5co-press-img and .fh5co-press-text you can set the order property. Add the following CSS:
.fh5co-press-text {
order:2;
position: relative;
}
.fh5co-press-img {
order:1;
position: relative;
}
You are using position:absolute; for the elements, you have to add position:relative;.
<div class="content">
<h2>This is a long heading</h2>
<p>This is a long text but it should be the same width as the h2, not wider nor narrower Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur temporibus commodi expedita debitis nisi accusantium, saepe dolorem sapiente eum suscipit quod vitae!</p>
</div>
Css
.content {
background-color: tomato;
color: #fafafa;
padding: 10px;
margin: 40px;
}
Basically my code is the first example, and i want it to be like in the second example.
The container having the same width as the H2(that is generated from a backend).
If the h2 has 2 words, then the paragraph below it should match the width, if the h2 has 20 words the same should happen(used extremes as guidelines).
Better check fiddle here
Looking for a css only solution
There is a way but it's not intended for general layout..but, FWIW.
For preference, I'd be using a more flexible layout method or javascript. I suspect that this option is not robust.
.content {
display: table;
border: 1px solid grey;
/* note does not extend to paragraph */
}
.content h2 {
display: inline-block;
}
.content p {
display: table-caption;
caption-side: bottom;
text-align: justify;
}
<div class="content">
<h2>This is a long heading</h2>
<p>This is a long text but it should be the same width as the h2, not wider nor narrower Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur temporibus commodi expedita debitis nisi accusantium, saepe dolorem sapiente eum suscipit quod
vitae!</p>
<p>This is a long text but it should be the same width as the h2, not wider nor narrower Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur temporibus commodi expedita debitis nisi accusantium, saepe dolorem sapiente eum suscipit quod
vitae!</p>
</div>
JSfiddle Demo
The only way that ensure a robust backward compatibility is Javascript.
I'd avoid the "table" display; i can't recall all the supports situation but it's somehow problematic.
I'd add that i don't find that nice coding using Divs just to trasform them in Tables again...
All in all it's just 2 lines of code:
function setWidth(id) {
w=$("#header").css("width");
$(id).css( "width", w);
}
setWidth(inner)
css part:
.content {
background-color: tomato;
color: #fafafa;
padding: 10px;
margin: 40px;
display:inline-block
}
h2 {
display:inline
}
HTML:
<div class="content">
<h2 id="header">This is a long text</h2>
<p id="inner">This is a text that expands accordling with H2 header other text, other and other...</p>
</div>
Working Feedle here
I have a paragraph of 4 lines that are poetry in a centered div. Because it is poetry, I need the 4 lines aligned left, but not to the left side of the div.
Here is how it is centered:
Lorem ipsum dolor sit amet,
onsectetur adipisicin.
Doloribus, totam unde facilis omnis
temporibus nostrum in
Here is how I want it:
Lorem ipsum dolor sit amet,
onsectetur adipisicin.
Doloribus, totam unde facilis omnis
temporibus nostrum in
Thanks.
JSFIDDLE
Here is the solution http://jsfiddle.net/YW7eS/2/
I removed text-align: center and used the grid system to give you more control.
<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
...
</div>
Since you don't provide any code its quite hard to help you, but this is (I guess) what you want. Change the left padding to whatever number to increase/decrease the distance of the text to the div.
.poetry {
padding: 0 0 0 20px;
}
.poetry p {
text-align: left;
}
Maybe you want to show us the code, but you probably want to do text-align:left on the paragraphs.
just try something like this:
<div style="width: 500px; height: 500px; float: left;"></div>
<div style="float: left; margin-left: 30px;">
Lorem ipsum dolor sit amet,
onsectetur adipisicin.
Doloribus, totam unde facilis omnis
temporibus nostrum in
</div>
you can change the code like this,
.marketing .col-md-4 {
text-align: left;
margin-bottom: 20px;
}
see the working fiddle here
Google wasn't giving me anything helpful :(
I'm after a way of having an image have a 100% width, and a fixed height, say, 400px, and not stretch horribly, and instead of stretching, zoom in?
I think I'm after something not dissimilar to what backstretch does, but not for full screen backgrounds.
I think this video kind of shows what I'm after in a few instances (I think the eagle picture shows what I'm looking for) http://www.teehanlax.com/resources/img/story/medium/prototypes/feature-header.mp4
100% width picture, that's a fixed height, that shows a cropped image, and that scales with the browser.
http://jsfiddle.net/XcYfS/2/
<style>
img {
width: 100%;
height: 400px; }
h1, p {
width: 80%;
padding-left: 10%; }
</style>
<img src="http://placekitten.com/200/300" alt="">
<h1>Interesting Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
To avoid Distortion i think its best to use jQuery for this.
You can use jQuery Supersized plugin for this. It's one of the famous plugins mostly used on sites with grounds covering 100% of the width.
Here's the link for the site - http://buildinternet.com/project/supersized/
Try this one. Click Here for Preview
I have edited your sample code
HTML:
<div class="wrapper">
<img src="http://placekitten.com/200/300" alt="" />
</div>
<h1>Interesting Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
CSS:
div.wrapper{
display: inline-block;
width:500px;
height:400px;
border:1px solid red;
overflow:hidden;
}
img {
width: 100%;
height: auto;
}
h1, p {
width: 80%;
padding-left: 10%;
}
The parent element of your image should be display:inline-block; and the width will be the width of your img.
if you want to position the image, lets say you want to show the center of the image, just add a negative margin-top to the img. Click Here for Preview
img {
width: 100%;
height: auto;
margin-top:-100px;
}