I want to create a scrollable area for the text (class text), who have the size of the picture (class picture).
<div class="wrapper">
<div class="picture">
<img src="..." >
</div>
<div class="text">
<p>....</p>
</div>
</div>
The only way, I have found is set the size for the wrapper but if the picture have height more importe than the wrapper, she is crop.
So make it's possible to realize a scroll area for text with the size of picture?
I assumed they are columns. Not possible for rows with CSS.
Try this, if you have extra paragraphs wrap them in a div and change the selector accordingly.
.wrapper {
display: flex;
}
.picture,
.text {
flex: 1; /* example */
position: relative;
}
.text p {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
overflow: auto;
}
Related
I have a series of full-screen divs in Visual Composer and I want an arrow at the bottom of each one indicating to users they should scroll for more content. I tried absolute positioning on the divs containing the icon with no luck. All I've done is move the icon a few pixels to th
<section class="l-section wpb_row height_full valign_center width_full with_img" id="home">
<div class="l-section-img loaded" data-img-width="1920" data-img-height="809">
</div>
<div class="l-section-h i-cf">
<div class="g-cols vc_row type_default valign_top">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="w-image align_center" id="mainlogo">
<div class="w-image-h"><img src="logo.png" class="attachment-full size-full">
</div>
</div>
<div class="ult-just-icon-wrapper">
<div class="align-icon" style="text-align:center;">
<a class="aio-tooltip" href="#whatis">
<div class="aio-icon none " style="display:inline-block;">
<i class="Defaults-chevron-down"></i>
</div>
</a>
</div></div></div></div></div></div></div>
</section>
Existing CSS:
.aio-icon.none {
display: inline-block;
}
.aio-tooltip {
display: inline-block;
width: auto;
max-width: 100%;
}
.vc_column-inner {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
}
.wpb_column {
position: relative;
}
.vc_column_container {
display: flex;
flex-direction: column;
}
.vc_row {
position: relative;
}
.l-section-h {
position: relative;
margin: 0 auto;
width: 100%;
}
The icon itself is the Defaults-chevron-down.
Do you have an idea how to position that icon properly?
I also struggled a little with this. But there is a rather quick and dirty fix for this:
Just put another row below the full height row. Place your icon there and give this element a top margin of i.e. -200px.
For some strange reason the rather logical approach to put the icon in the full height row itself and to position it absolute to the bottom is not properly supported by the source generated from WPB.
I had this issue this week. The way I resolved it was added the icon in that row/section (in my case a single image element with a custom link to a .svg) and added a class to it.
The CSS for the class was then:
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top:-30px;
(I added a negative margin top as I noticed the icon was cutting of a little on my Google Pixel phone with the fixed bottom bar so that pulled it up a little.)
<div class="container" style="position: relative; height: 500px">
<div class="stack1">
multi line content
</div>
<div class="stack2">
multi line content
</div>
</div>
I want both 'stack2' and 'stack1' to be docked to the bottom of container with 'stack1' on top of 'stack2'.
I know how to do it with just one stack, by setting the div as absolute and bottom:0
Any help? thanks.
.stack1,
.stack2 {
position: absolute;
}
.stack2 {
height: 100px;
bottom: 0;
background: red;
}
.stack1 {
bottom: 100px;
background: green;
}
The height of stack2 should be the bottom value of stack1. See: http://jsfiddle.net/355nZ/
EDIT:
If the height of the two items is unknown, you'd have to nest the two blocks in another container that you could then stick to the bottom. Like so: http://jsfiddle.net/355nZ/1/
I have a div where the elements need to be centered:
<div style="width:800px;margin:0 auto;color:#000;"><h3 style="float:left;color:#000;margin:0 10px;"> Test </h3><h4 style="float:left;padding-top:3px;"> | </h4><h3 style="color:#000;float:left;margin:0 10px;"> Test </h3></div>
However, the elements all just stay to the left. How do I fix this and center all the h3's and h4's?
Here is my example: http://approvemyride.ca/reno/
http://jsfiddle.net/ZeJdc/
HTML:
<div>
<h3> Test </h3>
<h4> | </h4>
<h3> Test </h3>
</div>
CSS:
div {
width: 800px;
margin: 0 auto;
color: #000;
text-align: center;
}
h3 {
color: #000;
margin: 0 10px;
display: inline-block;
}
h4 {
padding-top: 3px;
display: inline-block;
}
Check that out and let me know what you think, if it doesn't look centered when you first open it try stretching the little divider to the left to give the results pane more room.
To clarify, display:inline-block is what's allowing all the headers to be displayed on the same line while text-align:center is what's centering all of your header elements inside the <div>.
Whenever I face any floated container to center horizontally I use the followings. Try wrapping your markup (which needs to be centered; the div in your case) with these:
<div class="center_outer">
<div class="center_inner">
<!-- Put your contents here (which needs to be centered) -->
</div>
</div>
CSS:
.center_outer
{
position: relative;
left: 50%;
float: left;
}
.center_inner
{
position: relative;
left: -50%;
}
Check: http://jsfiddle.net/jduDD/1/ (I have removed the width style)
I want an html image to be flush with the bottom of a div tag. I can't seem to find a way to accomplish this.
Here is my HTML:
<div class="span8">
<img src="/img/play-shot1.jpg" class="text-center shadow">
</div>
The problem is that the div is nested within other divs that have padding or margins.
Add relative positioning to the wrapping div tag, then absolutely position the image within it like this:
CSS:
.div-wrapper {
position: relative;
height: 300px;
width: 300px;
}
.div-wrapper img {
position: absolute;
left: 0;
bottom: 0;
}
HTML:
<div class="div-wrapper">
<img src="blah.png"/>
</div>
Now the image sits at the bottom of the div.
Using flexbox:
HTML:
<div class="wrapper">
<img src="pikachu.gif"/>
</div>
CSS:
.wrapper {
height: 300px;
width: 300px;
display: flex;
align-items: flex-end;
}
As requested in some comments on another answer, the image can also be horizontally centred with justify-content: center;
< img style="vertical-align: bottom" src="blah.png" >
Works for me. Inside a parallax div as well.
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/