This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I have this situation, with two seperated card components, and it is nesseserly to add both headings same height.
Is it possible using only CSS?
<div class="card">
<div class="card__head">
<h4 class="heading4 c-white">
Heading
</h4>
</div>
<div class="card__body">
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis commodo mauris.
</p>
</div>
</div>
simple no by pure css you can not do this. you have to put fixed height which is not feasible. best way to go is matchHeight js and using display:inline-block; and vertical-align:middle.
1) you apply div structure and css according to codepen using inline-block. keep in mind that both title are in different columns
<div class="fa-title"><h4>heading 1</h4></div>
<div class="fa-title"><h4>heading 2</h4></div>
<style>
.fa-title{text-align:center;}
.fa-title h4{display:inline-block; vertical-align:middle;}
.fa-title h4::before,
.fa-title h4::after{content:""; display:inline-block; vertical-align:middle; height:100%; white-space:nowrap;}
</style>
2) apply js to that div for common height of both div.
`$('.fa-title').mathcHeight();`
http://brm.io/jquery-match-height-demo/
https://codepen.io/edge0703/pen/iHJuA
You want same height heading and if title is bigger then you need to hide overflow title text part using css.
You can use this css properties for heading section:
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
Related
I am using BS3 and need to have 2 columns with column 1 sticky whilst the second scrolls as normal - this works fine using class affix on the 1st column but that column never fills the full width hence it doesn't have the correct borders, background etc as the rest of the content.
I have read a few answers which explain this is because fixed takes the content out of the normal flow of the page - some suggestions have been to use width: inherit and I have tried a few JS options I found in various answers but none work for me. Likewise making column 1, 100% makes it full the whole area and clash with the 2nd column
Is there a simple way in BS3 of having a fixed left column with a normal right column where both columns fill to their full width?
<div class="row">
<div class="col-lg-3">
<div class="panel panel-flat affix">
<div class="panel-body" style="background-color:red">
1 of 2
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-flat">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare ipsum vitae
</div>
</div>
</div>
.col-lg-3 {
width: 25%;
float:left;
}
.col-lg-6 {
width: 50%;
float:left;
}
https://jsfiddle.net/6bwkzd5y/1/
Bootstrap Affix uses position: fixed to display a block statically, and fixed positioned elements don't listen to the parents positional styles to display. To make this work, I added a custom class inherit-width and the style width: inherit. Optionally, if you want to make all .affix elements have this, you can just do that with some simple CSS: .affix { width: inherit; }.
Here is the updated jsfiddle:
https://jsfiddle.net/dx70wv95/2/
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 2 years ago.
When should I be using this:
header.classname
and when should I use this:
header .classname
And what is the difference between the two?
header.classname mean you are targeting header having class as classname.
header .classname mean you are targeting the html element having class classname which is a child/descendent of header
1st case:
header.hclassname {
background: turquoise;
}
<header class="hclassname">
Lorem Ipsum
<div class="divclassname">Dolor</div>
Sit Amet
</header>
2nd case
header .divclassname {
background: skyblue;
}
<header class="hclassname">
Lorem Ipsum
<div class="divclassname">Dolor</div>
Sit Amet
</header>
Use header.classname when: you want to target a .classname that is a header element.
Use header .classname when: you want to target .classname descendants of a header element.
I hope this solves your question, it's as simple as can be.
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>
I am relatively new to coding and am trying to create a very simple slideshow only I want the javascript to be "linked" to my image url's in the css rather than using div id's for the images in html. Can this be done because I can't seem to figure it out.
Basically, my website has a series of image thumbnails that currently expand when clicked upon, thus a vertical accordion feature. The accordion is its own div id and everything to do with the accordion is kept within a div class "container" and the images, specifically, are within a div class "wrapper". All of the text and links are within the body of the html and the images are all in css.
I understand how to create a image slideshow (just rotating images, no clickable images/links) in the html and the slideshow works when I moved an image from the css into the html. However, after doing this, the image is no longer within the "rules" of the accordion. Thus the image that I move into the html rotates, but is overlapping the text and is no longer an image slice like the rest of the accordion. I can move the slideshow image around on the page using css, but it still overlaps the text and other features within the accordion.
I've even tried moving the images in the html around to different locations within the body to see if the problem was related to where the images were placed, but this did not solve the problem.
So is there a way to use javascript and keep the images in the css so the accordion features are also maintained? I am stuck with this and don't know what to try next. Thanks.
<body>
<div class="container">
<h1 class="va-name"> Amy Danielsons </h1>
<h2 class="va-contact">Contact</h2>
<h3 class="va-resume">Resume
<h4 class="va-about">About</h4>
<h5 class="va-port"><a href="#">Online Portfolio</h5>
<h6 class="va-hatch"><img src="images/pattern.png" width="10" height="10" alt="hatch" />
</h6>
<div id="va-accordion" class="va-container">
<div class="va-nav">
<span class="va-nav-prev">Previous</span>
<span class="va-nav-next">Next</span>
</div>
<div class="va-wrapper">
<div class="va-slice va-slice-1">
<!--slider 1 images -->
<div>
<img src="images/testa.jpg" />
</div>
<div>
<img src="images/testb.jpg" />
</div>
<div>
<img src="images/testc.jpg" />
</div>
<h3 class="va-title">Cranbrook</h3>
<div class="va-content">
<p>Paragraph Title</p>
<p2>dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p2>
</div>
</div>
</div>
(css portion below: you can see where I deleted the url for the first image slice and moved the image (and added 2 more images) into the html above)
}
.va-slice-1{
background:#FFF
}
.va-slice-2{
background:#FFF url(../images/2d/liz.jpg) no-repeat center center;
}
.va-slice-3{
background:#FFF url(../images/2d/oldcar.jpg) no-repeat center center;
}
So is there a way to use javascript and keep the images in the css so the accordion features are also maintained?
To keep the images in the CSS, use an inline style attribute. Instead of
<div>
<img src="images/testb.jpg" />
</div>
Use
<div class="image-wrap" style="background: url(images/testb.jpg)"></div>
then set the correct height and width for .image-wrap either using javascript, or in your stylesheet.
Though I, like others, don't entirely understand your situation, this article explains how to grab the background-image's URL if you are using jQuery.
Essentially it parses
$('img').css('background-image');
To set the URL, use
$('img').css('background-image', 'url:("http://www.example.com/image.png")');
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');
}