I have been trying to show a hidden div on the hover of another div and I cannot understand why it does not work.
I have a fiddle. JSFiddle
HTML:
<div class="mcs-div">
<a href="#">
<img src="http://lorempixel.com/100/100/" alt="Napit Graphic" />
</a>
</div>
<div class="mcs-div-content">
<p>
Ut arcu enim, dictum quis ultrices id, sagittis eget nulla
</p>
</div>
I have tried all the selectors in the hidden div to be displayed, but nothing is working.
CSS:
.mcs-div-content {
display: none;
}
.mcs-div:hover .mcs-div-content {
display: block;
}
To understand why this isn't working, try removing the ":hover" from the CSS rule and look at it again.
.mcs-div-content isn't contained inside .mcs-div, so that rule will never actually find any elements that fit it. Try replacing the second rule with:
.mcs-div:hover + .mcs-div-content {
display: block;
}
The + means "next-sibling element".
Add "~":
.mcs-div-content {
display: none;
}
.mcs-div:hover ~ .mcs-div-content {
display: block;
}
mcs-div-content not is a child of mcs-div try
<div class="mcs-div">
<a href="#">
<img src="http://lorempixel.com/100/100/" alt="Napit Graphic" />
</a>
<div class="mcs-div-content">
<p>
Ut arcu enim, dictum quis ultrices id, sagittis eget nulla
</p>
</div>
</div>
Related
this is my first time posting, I hope I respected all the guidelines. If not, I'm sorry!
I'm trying to create a responsive website design with the following specs:
1. Large background image, that does not change
2. set of (not yet determined amount) radio(?) buttons below
-> buttons need to be mutually exclusive
3. image overlay with some text, that changes when the respective radio button is pressed
4. when in mobile mode only two buttons should be shown at the same time and two arrows appear to cycle between all possible buttons.
My problem starts at 4):
- I dont have the faintest idea where to start
- I dont know if there is a name for this type of behaviour, that I simply never heard of (which makes googleing a little hard^^)
I thought about Flex-boxes, but all I could manage was to wrap the buttons, but thats not really the same as hiding them.
I also thought about making the buttons simply disappear (display:none), but I'm not so sure on how to do that. (maybe putting additional rules for the bootstrap classes?)
On top of it all, the design needs to be laid out in such a way, that the customer can decide how many buttons there will be, e.g. I have no way of knowing beforehand how many there are, nor can I group them by adding specific classes.
My Question alas is this: can I dynamically embed the radio buttons on slider pages, which i can scroll through, but only if it is in a small screen? (my guess is, this is not a simple css matter)
edit: specified question
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://kit.fontawesome.com/82bfdd8cdc.js"></script>
</head>
<body>
<div class="">
<div class="bg-screen">
<img src="img/test.jfif" alt=" " class="bg-screen-img">
<div class="bg-screen-textarea">
</div>
<p class="bg-screen-text dummy"></p>
<div class="radio">
<label>
<input type="radio" name="radio" />
<div class="radio-box box-1">
<i class="fas fa-socks fa-3x"></i>
<span>Choice 1</span>
</div>
<div class="bg-screen-text text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla at volutpat diam ut venenatis tellus. Odio ut sem nulla pharetra diam sit
amet. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</div>
</label>
<label>
<input type="radio" name="radio" />
<div class="radio-box box-2">
<i class="fas fa-user-tie fa-3x"></i>
<span>Choice 2</span>
</div>
<div class="bg-screen-text text-2">Sit amet facilisis magna etiam tempor orci eu lobortis. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat.
</div>
</label>
<label>
<input type="radio" name="radio" />
<div class="radio-box box-3">
<i class="fas fa-building fa-3x"></i>
<span>Choice 3</span>
</div>
<p class="bg-screen-text text-3">Risus ultricies tristique nulla aliquet enim tortor at auctor urna.</p>
</label>
<label>
<input type="radio" name="radio" />
<div class="radio-box box-4">
<i class="fas fa-building fa-3x"></i>
<span>Choice 4</span>
</div>
<p class="bg-screen-text text-4">Fringilla ut morbi tincidunt augue. Velit euismod in pellentesque massa placerat duis ultricies lacus. </p>
</label>
<label>
<input type="radio" name="radio" />
<div class="radio-box box-5">
<i class="fas fa-building fa-3x"></i>
<span>Choice 5</span>
</div>
<p class="bg-screen-text text-5">Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam.</p>
</label>
</div>
</div>
</div>
</body>
</html>
input {
display: none;
}
input+div{
background: rgba(76, 175, 80, 0.3);
border: 1px solid grey;
}
input:checked+div {
background-color: green;
}
label {
display: inline-block;
margin: 0 1%;
}
/*removing clickability of text itself inside the labels for the radio-buttons*/
label span {
/* Firefox */
-moz-user-select: none;
/* Internet Explorer */
-ms-user-select: none;
/* KHTML browsers (e.g. Konqueror) */
-khtml-user-select: none;
/* Chrome, Safari, and Opera */
-webkit-user-select: none;
/* Disable Android and iOS callouts*/
-webkit-touch-callout: none;
}
label div i{
margin: 15% auto;
}
input:checked~.bg-screen-text {
display: inline-block;
margin: -25% 10%;
text-align: center;
color: white;
}
.bg-screen{
width: 100%;
text-align: center;
}
.bg-screen-img{
margin: 3% 7%;
height: 25%;
background-color: grey;
}
.bg-screen-text {
display: none;
position: absolute;
text-align: center;
left: 7%;
right:7%;
margin: 0 10%;
}
.radio {
position: relative;
top: -150px;
margin: 3% 7%;
text-align: center;
}
.radio-box {
position: relative;
height: 170px;
width: 170px;
display: inline-block;
text-align: center;
}
.radio-box span {
position: absolute;
transform: translate(0, 90px);
left: 0;
right: 0;
}
Thanks!
I got it working with the help of slick carousel. (https://github.com/kenwheeler/slick/)
This pretty much gave me all the functionality without having to code it myself.
This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 7 years ago.
I'm using Twitter Bootstrap and am trying to vertically center text next to an image that is larger than the current text.
I can't use line-height because the text goes over more than one line and I also want to allow for possible additions to the text; so I went to the display: table; display: table-cell; method but it still refuses to work.
Here is my HTML for the respective section:
<div class="fs">
<div class="container">
<div class="wrapper row">
<div class="icon col-md-2">
<a href="" target="blank">
<img src="fs-icon.jpg" width="170" height="76" alt="Flying Solo Icon">
</a>
</div>
<div class="text col-md-10">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt, lacus sed pharetra luctus, odio purus faucibus nunc, mattis molestie sapien libero sit amet leo.
</span>
</div>
</div>
</div>
<!-- Container Ends -->
</div>
<!-- FS Ends -->
CSS:
#about .fs {
padding: 30px 0;
}
#about .fs .wrapper {
display: table;
}
#about .fs .icon {
display: table-cell;
}
#about .fs .text {
display: table-cell;
min-height: 76px;
vertical-align: middle;
}
... and here it is on CodePen: http://codepen.io/anon/pen/XbdRXE
I think the CSS may be clashing with the behavior of the default Bootstrap CSS. However, you could bypass this method altogether and try using this as a custom class:
.vertical-center {
display: inline-block;
vertical-align: middle;
float: none;
}
Just apply it to your span element.
Hi I am trying to make a carousel on my wordpress website with bootstrap. I would like to put four block links next to it. I have the blocks there and the images are scrolling fine, However I believe the carousel is changing the height of the image.
I have images (640 x 360) and I made the 4 blocks 90 pixels high. I did this so the blocks would be flush with the bottom of the carousel. Except the blocks are too big. I don't understand what the problem could be. And I have searched through all of the CSS.
Here is my code:
<!--==========================================-->
<!-- Carousel -->
<!--==========================================-->
<div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!--Carousel item 1-->
<div class="item active">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 2-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 3-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!--==========================================-->
<!-- Side Buttons -->
<!--==========================================-->
<div>
<ul class="nav nav-tabs nav-stacked">
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
</ul>
</div>
The reason why your image is resizing which is because it is fluid. You have two ways to do it:
Either give a fixed dimension to your image using CSS like:
.carousel-inner > .item > img {
width:640px;
height:360px;
}
A second way to can do this:
.carousel {
width:640px;
height:360px;
}
add this to your css:
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
Put the following code in your CSS, this works with Bootstrap 4:
.w-100 {
width: 100% !important;
height: 75vh;
}
I had the same problem. You have to use all the images with same height and width. you can simply change it using paint application from windows using the resize option in the home section and then use CSS to resize the image. Maybe this problem occurs because the the width and height attribute inside the tag is not responding.
Put the following code into head section in your web page programming.
<head>
<style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
replace your image tag with
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" style="width:640px;height:360px" />
use style attribute and make sure there is no css class for image which set image height and width
Use this code to set height of the image slider to the full screen / upto 100 view port height. This will helpful when using bootstrap carousel theme slider.
I face some issue with height the i use following classes to set image width 100% & height 100vh.
<img class="d-block w-100" src="" alt="" > use this class in image tags & write following css code in style tags or style.css file
.carousel-inner > .carousel-item > img {
height: 100vh;
}
Give class img-fluid to your div carousel-item.Finally it will be:
<div class="carousel-item active img-fluid">
<img class="d-block w-100" src="path to image" alt="First slide">
</div>
This worked for me, max-height allows the images to auto adjust instead of cropping them
<div class="carousel-item">
<img src="image-link" class="d-block w-100" alt="image" style="max-height:100vh;">
</div>
Had the same problem and none of the CSS solutions presented here worked.
What worked for me was setting up a height="360" without setting any width. My photos aren't the same size and like this they have room to adjust their with but keep the height fixed.
This css is work for me # Bootstrap 5 (You can change width & height)
.carousel-inner > .carousel-item > img {
width:640px;
height:360px;
}
i had this issue years back..but I got this. All you need to do is set the width and the height of the image to whatever you want..what i mean is your image in your carousel inner ...don't add the style attribut like "style:"(no not this) but something like this and make sure your codes ar correct its gonna work...Good luck
Not just a simple image next to a paragraph< but with some spaces like this
(source: gyazo.com)
So far of what I've done :
<div class="span6">
<span class="head">Header</span>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
<span class="paragraph">
This is Photoshop's version of Lorem Ipsum.
Proin gravida nibh vel velit auctor aliquet.
Aenean sollicitudin, lorem quis bibendum auc
tor, nisi elit consequat ipsum, nec sagittis sem nibh i
</span>
</div>
.span8 {
width: 620px;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
}
.paragraph {
font-size: 14px;
width: 300px;
}
And it looks like this
(source: gyazo.com)
Ignore the line, it's a cropper image off the web.
What am I doing wrong? how can I fix this.
Thanks!
Here is a jsfiddle for you: http://jsfiddle.net/Xxw85/
The code should look more like this:
<div class="span6">
<p>Header</p>
<div class="head">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgMvCRHrTA30jksWsHfDZ4GwWfjJhM8Ck2RAtA_OLeOpnGRTrEXw"/>
</div>
<div class="paragraph">
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auc
tor, nisi elit consequat ipsum, nec sagittis sem nibh i
</div>
<div style="clear:both"></div>
</div>
and css:
.span6 {
width: 620px;
background-color:#efefef;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
color:red;
}
.paragraph {
font-size: 14px;
width: 300px;
float:left;
}
Good luck.
Consider this fiddle. I have used div element instead of the span element inside the parent div.
<div>
<div class="head">Header</div>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
</div>
And float the content to the right by adding this.
.paragraph {
float:right;}
http://jsfiddle.net/AaXTm/8/
The width of the element was less than the parent element and since you didn't use any floats or clear, the elements were visible inline.
i've been going over this one for about two days.
example
it's a fairly complicated design, so to reduce code pasted here i've recreated the main structure on this jsfiddle and included the simplified code at the end of this post:
http://jsfiddle.net/rwone/zwxpG/10/
scenario
i have a container with numerous <li>'s containing a div (containing dynamic content from a database) that initially has the property display: none.
on hovering over an image in these <li>'s however, i wish to show the div.
it is working, however the div appears to be beneath other elements in the container which has a fixed height and overflow-y: auto.
what i've tried
i have tried combinations of z-index's and absolute and relative positioning, but i haven't been able to find a solution yet.
i've isolated two causes in the code below and the jsfiddle (shown as /* comments */) but these do not work on the live test site.
question
my question is therefore, is there another way to enforce that the hover state div is shown on top of and outside of the container that is enclosing it?
it is not an ideal solution that i can fix these issues in the jsfiddle but not the live site, but i just thought i'd ask if there was another way to approach this altogether?
thank you.
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<ul>
<li>
hover me #1
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
<li>
hover me #2
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
</ul>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 50px;
/* cause one - on its own, this causes the undesired 'underneath' effect */
overflow-y: auto;
}
ul li {
display: inline;
/* cause two - on its own, this causes the undesired 'underneath' effect */
position: relative;
}
#container_c {
display: none;
}
ul li:hover #container_c {
background: #00AFF0;
display: block;
width: 200px;
height: 200px;
position:absolute;
top: -20px;
left: 50px;
z-index: 999;
overflow: hidden;
}
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
update
in response to answer below, here is further information on the actual content that is being displayed upon hover (everything within the #container_c div). each <li> has its own unique content:
<li class=".class1 .class2">
<img src="http://path/to/image.jpg">
<div id="container_c">
<h4>title</h4>
<div id="container_c_left">
<span id="cl1">text</span>
<span id="cl2">text</span>
<span id="cl3">text</span>
</div>
<div id="container_c_right">
<span id="cr1">text</span>
<span id="cr2">text</span>
</div>
<span id="cc1">text</span>
<span id="cc2"><a class= "linkclass" href="http://path/to/link.html">link</a></span>
</div>
</li>
You only want to display one of these hover elements at a time?
Put a single DIV outside of the main body and make it hidden.
Then use javascript to adjust its position and content every time you hover over an LI.
No need to give every LI its own DIV.
Store the contents inside a data attribute
<li id=something data-some-content="Hello joe">
Then you can retrieve it with jQuery like so
$("#something").data('some-content')
Your CSS styles are correct but in your HTML you have two <div> elements with the id='container_c' and that's invalid, IDs are unique and you can't give same id to two or more elements. If you two ore more elements to be given same style then try class='container_c' and in the CSS change the #container_c to .container_c
Check this fiddle for the fixed version
http://jsfiddle.net/DeepakKamat/zwxpG/13/
the solution was a mixture of #NoPyGod's jquery suggestion and to have a better understanding of how absolute and relative positioning work.
basically, when absolute and relative positioning are applied to a div, this position is relative to the position of the last element that had absolute or relative positioning defined and is a 'container' of the div you are working with.
to escape from the 'container' that had overflow: auto and a fixed height and width, i had to remove erroneous positioning back till a parent div that was not constrained by overflow and height and width restraints that were impacting on the hover state div.
a working jsfiddle is here:
http://jsfiddle.net/rwone/eeaAr/
i also implemented #Deepak Kamat's suggestion to only have one id per page and change the rest of the div's to be identified by classes.
i subsequently read the article below that made more sense to me this time and after working in this context:
http://css-tricks.com/the-difference-between-id-and-class/
thank you to all for your assistance!
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
some amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
more amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
even more amazing html
</div>
</div>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 100px;
overflow-y: auto;
}
.hidden_db_data_div {
display: none;
background: #00AFF0;
width: 120px;
height: 150px;
color: red;
position:absolute;
overflow: hidden;
z-index: 999;
}
img {
width: 50px;
height: 50px;
}
.magic {
display: inline;
}
#container_a { position:relative; }
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
script
$(".magic").hover(
function () {
$(this)
.find('.hidden_db_data_div')
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'})
.fadeIn(200);
},
function() {
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}
);