I'm trying to achieve the image-popup-on-hover-over-text similar to Wikipedia. The CSS is working fine except when viewed on a mobile device. Since the popup text can be on the far right or left (depending on the mobile device's screen width), the popup can exceed the width of the screen resulting in the size of the div exceeding the width of the rest of the page.
I've tried positioning the div using the commented out portions of the CSS. If the text is on the far right or left, it pushes the page wider.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height: 1.2;
font-size: 12px;
font-size: 1.0rem;
}
html { font-size: 90%; }
body {
background-color: black;
box-sizing: border-box;
}
img {
width: auto ;
max-width: 100% ;
height: auto;
margin: 0 auto;
}
.top-page {
width: 90%;
position: relative;
top: 0px;
margin: 0 auto;
background: #fff;
}
.flex-container {
display: flex;
flex-wrap: wrap;
margin: 10px 10px;
/*
flex-flow: row;
align-items: center;
justify-content: center;
*/
}
.popup_on_mouseover {/* - parent div - style for keyword */
position: relative;
display: inline-block;
border-bottom: thin dotted;
background: #ffffb3;
font-size: 1.2rem;
font-weight: bold;
}
.popup_on_mouseover:hover {
text-decoration: none;
background: #ffff00;
z-index: 66;
}
.popup_on_mouseover div {
position: absolute;
transform: translateX(-50%);
/*
left: 50%;
left: calc(50vw - 150px);
transform: translateX(-50%);
transform: translateX(50%) translateX(-150px); /* nested */
*/
top: 40px;
visibility: hidden;
width: 300px;
height: 280px;
background-color: rgba(0,0,0,0.85);
text-align: center;
padding: 15px 5px 5px 5px;
z-index:66;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 24px 30px -4px rgba(175,175,175,0.87);
box-shadow: 0px 24px 30px -4px rgba(175,175,175,0.87);
}
.popup_on_mouseover:hover div {
visibility: visible;
}
.hold-text {
padding-right: 20px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 10px;
text-align:left;
}
img.resizeImg280x210 {
display: block;
width:280px;
max-height:210px;
margin-left: auto;
margin-right: auto;
}
.plainbrown12 {font-size: 1.2rem; color: #59493d }
.white12 {font-size: 1.2rem; color: #FFFFFF }
</style>
</head>
<body>
<div class="top-page">
<div class="flex-container">
<div class="hold-text plainbrown12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
<div class="popup_on_mouseover">currency
<div>
<img src="https://i.stack.imgur.com/mgV0R.png" class="resizeImg280x210">
<br>
<span class="white12">currency</span>
</div>
</div>
, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
<div class="popup_on_mouseover">dude
<div>
<img src="https://i.stack.imgur.com/SUW9T.jpg" width="280" height="210">
<br>
<span class="white12">dude</span>
</div>
</div>
. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
<div class="popup_on_mouseover">dice
<div>
<img src="https://i.stack.imgur.com/DOCT3.png" width="280" height="210">
<br>
<span class="white12">dice</span>
</div>
</div>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
Best case scenario would be to calculate the screen width and show the popup image just below the text, and for any screen width which puts the popup div off screen, move the div to it's on the left/right side of the parent div.
popup text is in the center of the page, no issues
popup text on left margin, image is off the page
From what I'm seeing, the text which triggers the pop-up can be basically anywhere on the line - at the beginning, middle or end. In this case, as the popup is position in relation to this, you cannot use CSS to adapt to that - you need JS.
Basically it would be along the lines of:
- mouseenter/mouseleave events to show/hide
- get the position of the 'hover' target
- check if it is near the side of the screen (half its size + the size of the pop-up itself)
- if it is too close, (and so it would not contain the whole image), make adjustments to it's position.
Related
A simple layout that I want to achieve with minimal html tags
Only <img> & <h1> & <p> and no other extra tags
flex + column + wrap
The first column has only one image
The second column contains the title and crossword
The width and height of the parent layer are fixed
The result is that part of the text will overflow
Only add width to <p> to prevent
Is there any way to automatically break text without adding width?
HTML
*{
margin: 0;
padding: 0;
}
.out{
width: 600px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto;
font-family: Verdana;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
img{
/* margin-bottom: 20px; */
margin-right: 20px;
}
p{
line-height: 1.6;
overflow-wrap: break-word;
}
<div class="out">
<img src="https://picsum.photos/id/230/200/200" alt="">
<h1>This is Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>
Another solution as per your expecation:
* {
margin: 0;
padding: 0;
}
.out {
width: 600px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto;
font-family: Verdana;
display: flex;
}
img {
/* margin-bottom: 20px; */
margin-right: 20px;
}
p {
line-height: 1.6;
overflow-wrap: break-word;
margin-left: -200px;
margin-top: auto;
margin-bottom: auto;
}
h1 {
position: relative;
white-space: nowrap;
}
p::before {
content: "";
width: 100%;
}
<div class="out">
<img src="https://picsum.photos/id/230/200/200" alt="">
<h1>This is Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>
Here is my solution
* {
font-family: 'poppins';
}
.card {
display: flex;
padding: 15px;
border: 1px solid #8f8f8f;
}
.content {
margin-left: 10px;
}
.content h6 {
margin-top: 0;
font-size: 32px;
margin-bottom: 5px;
}
<div class="card">
<img src="//via.placeholder.com/150">
<div class="content">
<h6>This is title</h6>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
</div>
</div>
one of the answer in this question is using pure css approach:
HTML:
<div id="summary">Sample</div>
<div id="detail">Detail of this summary</div>
CSS:
> #summary:hover + #detail, #detail:hover { display: block; }
> #detail { display: none; }
my question is how can we include the click event where it is act like a on-off button?
Make the #summary div an anchor and add styles on it focus also.
#summary:hover+#detail,
#detail:hover {
display: block;
}
#detail {
display: none;
}
#summary:focus+#detail,
#detail:focus {
display: block;
}
<a id="summary" href="javascript:void(0);">Sample</a>
<div id="detail">Detail of this summary</div>
.summary:hover+.detail,
.detail:hover {
display: block;
}
.show.detail {
display: block;
}
.detail {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<a class="summary" href="javascript:void(0);">Sample1</a>
<div class="detail">Detail of this summary</div>
</div>
<div class="wrapper">
<a class="summary" href="javascript:void(0);">Sample2</a>
<div class="detail">Detail of this summary</div>
</div>
<div class="wrapper">
<a class="summary" href="javascript:void(0);">Sample3</a>
<div class="detail">Detail of this summary</div>
</div>
<script>
$(".summary").on("click", function() {
$(this).next().toggleClass("show");
})
</script>
CSS Solution
Use a checkbox and sync it to a label. The checkbox can be hidden so it appears that the label is the only button.
<input id='ID' type='checkbox' hidden>
<label for='ID'>Click the label the checkbox gets clicked as well</label>
label for attribute value must match the checkbox's id as demonstrated above.
Place the content below the checkbox. Set its max-height: 0; and overflow:hidden
<input id='ID' type='checkbox' hidden>
<label for='ID'>Click the label the checkbox gets clicked as well</label>
<article class='content'>...</article>
Set the following CSS ruleset:
#ID:checked + label + .content { max-height: 1000px}
The + is an Adjacent Sibling Combinator it basically targets the immediate sibling to the right or below a selector (basically the next element).
The demo follows the basic concept as described above, but there are more elements and transitions so be aware of positions and how they relate to the CSS when checkbox is :checked and when it isn't.
Demo
*,
*:before,
*:after {
margin: 0;
padding: 0
}
.menu {
margin: 20px auto;
visibility: hidden;
width: 92%;
}
.trigger {
visibility: visible;
}
.trigger label {
display: block;
min-height: 20px;
cursor: pointer;
border: 3px ridge crimson;
border-radius: 4px;
padding: 3px 0 0 5px;
}
.content {
max-height: 0;
overflow: hidden;
transition: all .75s;
}
img {
display: block;
margin: 5px 5px 0;
float: right;
}
#chx:checked+.menu .trigger,
.trigger:hover {
background: rgba(0, 0, 0, 0.8);
color: orangered;
}
#chx:checked+.menu .content,
.trigger:hover+.content {
max-height: 1000px;
transition: all .75s;
visibility: visible
}
<input id='chx' type='checkbox' hidden>
<figure class='menu'>
<figcaption class='trigger'>
<label for="chx">TRIGGER</label>
</figcaption>
<article class='content'>
<img src='https://yt3.ggpht.com/-7DsR5xtp9pM/AAAAAAAAAAI/AAAAAAAAAAA/nO22Um9xa28/s100-mo-c-c0xffffffff-rj-k-no/photo.jpg'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</figure>
So you want to include the menu only on a click? I found a way to do it, only with a small amount of JavaScript:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
Put this into your page and it'll work.
I've got a <blockquote> which I want to style with a double top border as shown in this image:
The tricky part is I want to stick with one element, the <blockquote> element, as the HTML will be generated by a WYSIWYG.
This is what I've got so far:
blockquote
background: #fafcfc
border-top: 1px solid #dfe7e9
border-bottom: 1px solid #dfe7e9
font-size: 19px
font-style: italic
font-weight: 300
padding: 45px 40px
margin: 35px 0
Keep in mind that I'll probably need :before and :after for the double quote strings.
Linear-gradient method
This technique makes use of linear-gradients. Be sure to vendor-prefix it for production.
Here's a fiddle.
blockquote {
background-image: linear-gradient(to right, rgba(41,137,216,0) 0%,rgba(37,131,210,0) 42%,rgba(37,131,210,1) 42%,rgba(36,129,208,1) 58%,rgba(36,129,208,0) 58%,rgba(32,124,202,0) 99%);
background-position: top;
background-size: 100% 8px;
background-repeat: no-repeat;
}
Background image method
If you would rather have the blue bar fixed width and resizable, you could use a base64-encoded 1 pixel image as the background instead, as per #Joint's suggestion.
Here's a fiddle.
blockquote {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNUabzwHwAEvAJ2QlOyvQAAAABJRU5ErkJggg==);
background-position: top;
background-size: 120px 8px;
background-repeat: no-repeat;
}
You can change the background-size to whatever you need it to be.
Another option is to add this blue border as image and set it as background of blockquote ;)
DEMO:
http://plnkr.co/edit/PMcA6au98ids02jXh7YV?p=preview
Solution using background image while reserving psuedo elements for blockquote:
blockquote
{
width: 300px;
/*box-shadow: inset 1px 22px 1px -17px magenta;*/
background-image: url('http://i.imgur.com/ND7TghA.jpg');
background-repeat: no-repeat;
background-position: top center;
border-top: solid 2px #dde7e9;
border-bottom: solid 2px #dde7e9;
height: auto;
padding: 15px;
position: relative;
}
blockquote:before, blockquote:after {
position: absolute;
}
blockquote:before {
content: '"';
top: 5px;
left: -5px;
}
blockquote:after {
content: '"';
bottom: 5px;
right: -5px;
}
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>
Here's my take on it.
Use blockquote:first-child:before and blockquote:first-child:after for your quotes. Or ::last-child:before
You keep the ability to add backgrounds and stuff.
blockquote {
margin: 35px 0;
background: #fafcfc;
border-top: 1px solid #dfe7e9;
border-bottom: 1px solid #dfe7e9;
font-size: 19px;
font-style: italic;
font-weight: 300;
padding: 45px 40px;
}
blockquote:before {
content: '';
position: absolute;
width: 4%;
left: 48%; /* 2*left+width=100% */
top: 35px; /* =blockquote margin */
border-top: 5px solid blue;
}
http://codepen.io/anon/pen/amPwOK
You must add some absolute block element to you blockquote, you can do this by add in css:
blockquote:before
content: ' ';
display: block;
position: absolute;
width: 30px;
height: 5px;
background: blue;
top: 0;
margin: auto;
left: 0;
right: 0;
And do not forget to add position: relative; to your blockquote css.
Edit:
To use :before and :after for quote you can add some container like <p> or <span> inside blockquote and then add this for it.
Text with column width of col-lg-5 col-md-3are overlapping on the image of col-lg-5 col-md-3. Why is this happening is it a compulsion that I must use a container tag in Bootstrap and here is the JSfiddle link https://jsfiddle.net/oukdwoot/7/
HTML
<header>
<div class="wrapper">
<img src="https://placehold.it/84x33">
<ol class="menu">
<li>Contact
</li>
<li>Work
</li>
<li>About
</li>
<li>Journal
</li>
</ol>
</div>
<div class="main-wrapper">
<div class="row">
<div class="col-lg-5 col-sm-3">
<img src="https://placehold.it/468x307">
</div>
<div class="col-lg-5 col-sm-3">
<h2>Duis aute irure dolor in henderit in voluptate.</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo doconsequat, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur...</p>
</div>
</div>
</div>
</header>
css
header {
background: #242424;
width: 100%;
height: 126px;
border-bottom: 4px solid #1e1e1e;
}
header .wrapper img {
display: inline-block;
margin-top: 49px;
}
.wrapper {
width: 70%;
margin: 0 auto;
margin-bottom: 8%;
}
.menu {
display: inline;
}
.menu li {
display: inline-block;
list-style: none;
float: right;
width: 15%;
margin: 0;
padding: 0;
border-left: 2px solid #1e1e1e;
padding: 55px 0 50px 0;
text-align: center;
vertical-align: center;
color: white;
font:bolder 1em Helvetica, arial, serif;
letter-spacing: 2px;
}
.menu li:first-child {
border-right: 2px solid #1e1e1e;
}
.menu li a {
color: white;
text-decoration: none;
}
.menu li:hover {
border-bottom: 4px solid #58C93A;
color: #58C93A;
background: #262626;
}
.main-wrapper {
width: 70%;
margin: 0 auto;
}
You may want to use the img-responsive class. It just the image is overflowing outside of the bootstrap DIV, which is normal behaviour in CSS for images.
<div class="main-wrapper">
<div class="row">
<div class="col-lg-5 col-sm-3">
<img src="https://placehold.it/468x307" class="img-responsive">
Plus, it makes your image... responsive.
You need to use the img-responsive class in your img tag.
<img src="https://placehold.it/84x33" class="img-responsive" />
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; height: auto; and display: block; to the image so that it scales nicely to the parent element. - Bootstrap CSS
See more about Boostrap CSS's img components above.
Google brought me here in 2022. Just to give an update for bootstrap 5, use: .img-fluid.
<img src="..." class="img-fluid" alt="...">
Explanation:
"Responsive images
Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element."
See: https://getbootstrap.com/docs/5.0/content/images/
I've got a simple page with a header element consisting of a logo image within an anchor tag nested in a h1 element and a nav element with 4 links. Below that I've got two elements each holding an image and text. I'm wondering why my header breaks apart when I resize the browser window, and why the text is not wrap around their respect images and landing to the right of them. I've also noticed that when I hover passed the logo there's a slight area where it is still a link where it shouldn't be. I'd really appreciate any assistance here, as I'm looking to understand what's happening under the hood with the css.
http://s27.postimg.org/7eyff3ivn/header_break1.png
http://s28.postimg.org/fwg9lohjh/header_break2.png
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Acme</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
<h1><img src="images/logo.png" alt="Respond"></h1>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<section class="first">
<h2>Image 1</h2>
<figure>
<img src="images/featured.png" alt="Image 1" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam<br>
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<section class="second">
<h2>Image 2</h2>
<figure>
<img src="images/featured.png" alt="Image 2" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<footer>
<p id="copyright">© 2014 ACME</p>
</footer>
</body>
</html>
CSS
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 16px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
body {
font-family: Helvetica Neue, Helvetica, Arial;
background: white;
color: #555;
}
header {
width: 100%;
overflow: auto;
border-bottom: 1px solid black;
}
/* Logo H1 */
header h1 {
float: left;
}
header h1 a {
display: block;
text-decoration: none;
margin-top: .5em;
margin-left: 5.5em;
width: 25%;
}
/* Navigation*/
nav {
width: 75%;
overflow: auto;
}
ul {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 20em;
}
ul li {
float: left;
}
ul li a {
display: block;
text-decoration: none;
margin: 5px;
margin-top: 1.5em;
padding: 2px;
font-size: 1.2em;
}
ul li a:hover {
border-bottom: 1px solid #6FC36E;
}
/* Content*/
section {
text-align: center;
margin: 0.625em auto;
overflow: auto;
}
section h2 {
margin-top: 1em;
margin-bottom: 1em;
}
section img {
max-width: 100%;
}
.first {
width: 45%;
float: left;
margin-left: 2%;
}
.first figure {
width: 75%;
}
.second {
width: 45%;
float: left;
margin-left: 2%;
}
.second figure {
width: 75%;
}
/* Footer*/
footer {
clear: both;
text-align: center;
}
This answer only addresses the problems you are having with your navigation.
I would remove the following properties from ul in your css.
float: right;
margin-right: 20em;
You don't need to float the menu to the right and the margin decreases the available space for your menu. The 75% width you set in your CSS should do enough to constrain your menu size.
The only wrapping of your nav that will occur is when the width of nav is less than the width of the elements in your menu. If you want to prevent this you can enlarge the width of the nav or take a different approach.
Hope this helps.