I have a div named welcome-inputs and within other two left and right
The div named left needs to be on the left side welcome-inputs and the div named right right side of welcome-inputs.
left and right have width = 100px
Need for a line that is at the MIDDLE of the two, signaling the separation.
view the code: http://jsfiddle.net/gn1asdmh/3/
The red line must be in the middle of the images (the images represent left and right)
jsFiddle demo
Add a span element between .left and .right
<span class="middleLine"></span>
CSS:
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
text-align:center; /* ADD THIS */
}
.welcomeforms {
color: #6B6B6B;
margin: 0 auto;
width: 100px !important;
}
.left {
float: left;
/*border-right: 3px solid red; REMOVE THIS */
}
.right {
float: right;
}
body {
background:blue;
}
span.middleLine{
display:inline-block;
border-right: 2px solid red;
margin-left:-1px; /* cause the border is 2px */
height:100%;
}
JSFiddle
The other way to resolve it.
.left {
position:absolute;
top: 0;
left: 0;
}
.right {
position:absolute;
top: 0;
right: 0;
}
If you add position: relative to .welcome-inputs, you can use an ::after or ::before pseudo-element on .left or .right like this:
.left::after {
border-right: 3px solid red;
content: "";
height: 100px;
position: absolute;
top: 0;
left: calc((100% - 3px) / 2); // or use '50%' for better compatibility, but less exactness
}
and get rid of the border-right on .left
JSFiddle Here
Just use generated content on the parent element. There is no reason in the given example to use structural markup for this.
Updated fiddle, http://jsfiddle.net/gn1asdmh/26/
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
position: relative;
}
.welcome-inputs::before {
content: '';
display: block;
position: absolute;
outline: 1px solid red;
left: 50%;
width: 0;
height: 100px;
}
.welcomeforms {
color: #6B6B6B;
margin: 0 auto;
width: 100px !important;
}
.left {
float: left;
}
.right {
float: right;
}
body {
background:blue;
}
The cleanest way to do it would be to use an HTML table. This will keep it responsive. Try something like the below code.
.welcome-inputs {
width: 100%;
}
#leftInput,
#rightInput {
width: 100px;
}
#separatorInput {
text-align: center;
}
#dividingLine {
display: inline-block;
height: 100%;
width: 5px;
background: red;
}
<table class="welcome-inputs">
<tr>
<td id="leftInput">
<img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
</td>
<td id="separatorInput"><div id="dividingLine"</td>
<td id="rightInput">
<img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
</td>
</tr>
</table>
Even better: no need to use any empty/dummy elements. We rely on using pseudo-elements instead. In this case I will use ::before:
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
position: relative; /* new property added to original one */
}
.welcome-inputs::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 3px;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
Just remember to declare position: relative on the parent element. See fiddle here: http://jsfiddle.net/teddyrised/gn1asdmh/28/
p/s: You might want to use vendor prefixes for transform, to maximise cross-browser compatibility.
to add some idea to these answers , you may think as well of :box-sizing, calc() for instance , or even a simple background image/repeat/sizing
Related
Trying to make an image timeline interface, and I'm a little stuck. The marker is always at the center so the first element has padding-left: 50% which is working fine. However, I also want the last element to have padding-right: 50% so I can scroll all the way to the end of the last element.
Here's the jsfiddle: https://jsfiddle.net/da3hk2xz/
As you can see #timeline:last-child is not being applied.
var timeline = document.getElementById("timeline");
for (var i = 0; i < 25; i++) {
var img = document.createElement("img");
img.src = "http://placehold.it/300x150?text=" + i
timeline.append(img)
}
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#timeline {
width: 100%;
height: 150px;
background-color: red;
overflow-x: scroll;
display: flex;
flex-wrap: nowrap;
position: absolute;
bottom: 0;
box-sizing: border-box;
}
#timeline:nth-child(1) {
padding-left: 50%;
}
#timeline:last-child {
padding-right: 50%;
}
#marker {
/* http://apps.eky.hk/css-triangle-generator/ */
width: 0;
height: 0;
border-style: solid;
border-width: 35px 17.5px 0 17.5px;
border-color: #007bff transparent transparent transparent;
position: absolute;
bottom: 115px;
/* 150 - 35 */
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#line {
width: 2px;
height: 115px;
/* 150 - 35 */
background-color: purple;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div id="timeline"></div>
<div id="marker-container">
<div id="marker"></div>
<div id="line"></div>
</div>
Simply changing the selectors in question from what you have to this below should work:
#timeline :nth-child(1) {
padding-left: 50%;
}
#timeline :last-child {
padding-right: 50%;
}
The reason for this is that the last "phrase" in the selector is the element to which the styles will be applied. In your fiddle, the last "phrase" was the #timeline element itself, thus it was receiving the padding. Putting a space between #timeline and :last-child made the :last-child phrase the last one, and since the space in the selector means "any decendant", the decendant will receive the padding.
In plain english:
#timeline:last-child: The last child, of a parent element, that also has an id of timeline.
#timeline :last-child: The last element that is a child of the element with an id of timeline.
Targeting the direct decendant would work as a safer and more efficient solution as well:
#timeline > :nth-child(1)
#timeline > :last-child
CSS is fun.
Tested this and it worked out
#timeline img:nth-child(1) {
padding-left: 50%;
}
#timeline img:last-child {
padding-right: 50%;
}
Here's a cool solution you might like:
Instead of padding, use pseudo flex items.
#timeline::before {
content: "";
flex: 0 0 50%;
background-color: red;
}
#timeline::after {
content: "";
flex: 0 0 50%;
background-color: red;
}
jsFiddle
There you go:
https://jsfiddle.net/da3hk2xz/1/
Your layout uses a bit much absolute positioning, so I had to change it around a bit. The main thing was that I added #right-padding and #timeImgContainer.
I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.
Link here
A bit of the HTML:
<div class="full-menu">
<div class="full-menu--middle">
<button class="menu-toggle menu-toggle--close"></button>
<div class="section group menu_items">
<ul>
<li>a bunch of options vvv</li>
</ul>
</div>
</div>
</div>
A bit of the CSS:
html,
body {
height: 100%;
width: 100%;
}
.main_menu {
display: none;
}
.full-menu {
visibility: hidden;
display: table;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.full-menu--open {
visibility: visible;
opacity: 1;
}
.full-menu--middle {
display: table-cell;
vertical-align: middle;
}
.menu-toggle {
background-color: transparent;
border: 0;
color: #fff;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu-toggle--close {
position: fixed;
top: 20px;
left: 20px;
}
.menu-toggle_black {
background-color: transparent;
border: 0;
color: #000;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle_black:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu_items{
overflow: scroll;
height: 100%;
}
.page_inner_ {
display: table-cell;
vertical-align: middle;
}
.page_container {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #ffffff;
}
Any help would be very much appreciated!
Thanks
Maybe you should give position: absolute; to .full-menu, instead of fixed.
Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu.
How to Fix Overflow Issues in CSS Flex Layouts:
"... add min-height: 0; to the flex child that has our overflow container ..."
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),
I’ve written this code which works. Basically, when user hovers a image, a text appears over the image.
It’s a gallery so i need to use $(this).childrenin order to make the correct element to show.
What i don’t understand, i can’t make the h2 .nom_realisation slide toogle. I’ve tried a couple of things without success.
I’m sure it’s pretty simple . If anyone can point me in the right direction ?
DEMO : http://jsfiddle.net/Vinyl/725hcc62/1/
CODE :
CSS
.hide {
display : none;
}
.text {
z-index:100;
position:absolute;
top:0;
left:0;
height:100%;
width: 100%;
text-align: center;
display: table;
background: rgb(134, 0, 0);
/* Fall-back for browsers that don't support rgba */
background: rgba(134, 0, 0, .7);
}
h2.nom_realisation {
color: #ffffff !important;
font-family:'Oswald', sans-serif;
font-size: 30px !important;
font-weight: 300 !important;
text-transform: uppercase;
text-decoration: none !important;
margin: 0;
padding: 0;
vertical-align: middle;
display: table-cell;
width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
color: #ffffff !important;
text-decoration: none;
}
.container_img img {
position:absolute;
left:0;
top:0;
}
.container_img {
height:232px;
width:232px;
position:relative;
}
.image_test {
width:232px;
height: auto;
}
HTML
<div class="container_img">
<div class="container_nom_realisation hide">
<div class="text">
<h2 class="nom_realisation">Lorem ipsum</h2>
</div>
</div>
<img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>
JavaScript / jQuery
(function ($) {
$(document).ready(function () {
$(".container_img").hover(function () {
$(this).children('.container_nom_realisation').show('slow');
$(this).children('.text').slideToggle('slow');
}, function () {
$(this).children("img").fadeTo(200, 1)
.end().children(".text").hide();
$(this).children('.container_nom_realisation').hide('slow');
//.end().children(".hover").slideToggle("slow");
});
});
})(jQuery);
.nom_realisation is not a chid of .container_img, so you need .find() instead of children.
You are going to have trouble slide animating a table-cell element. Either don't display it this way or (because I assume you use table-cell for the vertical centre, have another element acting as table cell wrapping your <h2>:
HTML
<div class="container_img">
<div class="container_nom_realisation hide">
<div class="text">
<div class='table-cell'>
<h2 class="nom_realisation">Lorem ipsum</h2>
</div>
</div>
</div>
<img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>
CSS
.hide {
display : none;
}
.text {
z-index:100;
position:absolute;
top:0;
left:0;
height:100%;
width: 100%;
text-align: center;
display: table;
background: rgb(134, 0, 0);
/* Fall-back for browsers that don't support rgba */
background: rgba(134, 0, 0, .7);
}
.table-cell {
vertical-align: middle;
display: table-cell;
}
h2.nom_realisation {
color: #ffffff !important;
font-family:'Oswald', sans-serif;
font-size: 30px !important;
font-weight: 300 !important;
text-transform: uppercase;
text-decoration: none !important;
margin: 0;
padding: 0;
width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
color: #ffffff !important;
text-decoration: none;
}
.container_img img {
position:absolute;
left:0;
top:0;
}
.container_img {
height:232px;
width:232px;
position:relative;
}
.image_test {
width:232px;
height: auto;
}
JavaScript
(function ($) {
$(document).ready(function () {
$(".container_img").hover(function () {
$(this).children('.container_nom_realisation').show('slow');
$(this).find('.nom_realisation').slideToggle('slow');
}, function () {
$(this).children("img").fadeTo(200, 1)
.end().children(".text").hide();
$(this).children('.container_nom_realisation').hide('slow');
//.end().children(".hover").slideToggle("slow");
});
});
})(jQuery);
JSFiddle
I do not know if that's what you want, but if it is what I'm thinking, you can do it with pure CSS...
<div class="container-img">
<div class="image-title">LOREM IPSUM</div>
<img class="image" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>
.container-img{
position: relative;
background: #cccccc;
width: 230px;
overflow: hidden;
}
.container-img .image-title{
position: absolute;
background: rgba(0,0,0,0.8);
opacity: 0;
margin: 0 auto;
padding: 200px 0 0 0;
width: 100%;
height: 100%;
min-height: 100%;
color: #ffffff;
text-align: center;
-webkit-transition: all 0.35s;
transition: all 0.35s;
z-index: 10;
}
.container-img:hover .image-title{
opacity: 1;
padding: 35px 0 0 0;
}
.container-img .image{
position: relative;
max-width: 100%;
z-index: 0;
}
Here is a Fiddle: http://jsfiddle.net/rk16vhwe/
I don't think you can a have an underscore in the ccs classname: nom_realisation
Try renaming it everywhere: as nomRealisation for example
Which characters are valid in CSS class names/selectors?
just get rid of:
$(this).children
Also, you are calling $(this) too many times! Call it once. Then use the variable.
var this = $(this);
I have the following code:
HTML CODE:
<table border=0 cellpadding=0 cellspacing=0 width=250px bgcolor=#FF0000>
<tr>
<td align=right><span id=spnMain></span>
</td>
</tr>
</table>
CSS CODE:
#spnMain {
background: url("theImages/searchButton.png") no-repeat;
background-position: 0px 0px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain span {
background: url("theImages/searchButton.png");
display: block;
height: 50px;
background-position: 0px -56px;
}
JS CODE:
$(document).ready(function () {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({
"opacity": 0
});
$("#spnMain").hover(function () {
$(this).children("span").animate({
"opacity": 1
}, 400);
}, function () {
$(this).children("span").animate({
"opacity": 0
}, 400);
});
});
Produces the following (the top is onload and the bottom when mouse is hovered:
How can I make the green button fade in on top of the purple button so it hides it?
I know you ask for a javascript solution but you can do the same thing with css only (if you want to)
Way 1, sprites, no animation though: http://jsfiddle.net/NicoO/WBjS5/
Way 2, two images, css transition (a bit hacky): http://jsfiddle.net/NicoO/WBjS5/6/
#spnMain
{
display: block;
height: 28px;
width: 28px;
background-image: url(**url to green button image**);
background-position: 0% 0%;
position: relative;
}
#spnMain:after
{
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
content:"";
transition-duration: 0.4s;
visibility: hidden;
opacity: 0;
background-image: url(**url to red button image**);
}
#spnMain:hover:after
{
visibility: visible;
opacity: 1;
}
Update the visibility property helps for IE8 support- no transition will occur, but the image will be swapped on mouse over. What should be good enough of a fallback for old "browsers".
#spnMain {
position: relative;
/* ... same as before ... */
}
#spnMain span {
position: absolute;
top: 0;
right: 0;
/* ... same as before */
}
And your answer is:
Fiddle link: http://jsfiddle.net/LNQq3/4/
CSS Code:
#spnMain {
background: url("http://s18.postimg.org/balg05zj9/gogo.gif?noCache=1393616120") no-repeat;
background-position: 0px -5px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain:hover {
background-position: -37px -5px;
}
Have you tried using an absolute positioned element within a relative positioned element (http://css-tricks.com/absolute-positioning-inside-relative-positioning/)?
I have put together a quick jsfiddle demonstrating this: http://jsfiddle.net/9xENQ/
I just grabbed a quick GO/STOP image sprite and didn't take the time to really look into the necessary background-position to make it line up perfectly. Just wanted to convey the concept.
The HTML:
<div class="button-container">
Hi here is a bunch of text with a padding right to keep it from bleeding into the image.
<span id="spnMain"></span>
</div>
The CSS:
.button-container {
position: relative;
padding-right: 160px;
width: 158px;
height: 163px;
border: 1px solid black;
}
#spnMain {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA") no-repeat;
background-position: 0px 0px;
width: 158px;
display: block;
height: 163px;
cursor: pointer;
position: absolute;
top: 0;
left: 100%;
margin-left: -158px;
}
#spnMain span {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA");
display: block;
width: 158px;
height: 163px;
background-position: -158px 0px;
position: absolute;
left: 100%;
top: 0;
margin-left: -158px;
}
Your JavaScript (as is):
$(document).ready(function() {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({"opacity" : 0});
$("#spnMain").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});