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.)
I've got this strange issue with my body content container. I want it to be as tall as the view port so I set its height to 100vh in the css. It works in all pages except for the one where I try to make a bootstrap grid inside this body content container.
Here you can see how it looks:
The blue-ish div is my body content.
When I zoom all the way out, they blue div's height is indeed 100vh.
Inside of it I've got this
<div class="container body-content">
<div class="row text-center">
#foreach (var item in Model.Products)
{
#Html.Partial("ProductColumn", item)
}
</div>
</div>
where Html.Partial renders on every iteration something like this:
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 product-column-wrapper">
<div class="product-column">
//product title
<div id="thumbnail-container">
<a class="d-block mb-4 h-100" asp-route="#WebConstants.Routes.ProductDetails" asp-route-id="#Model.Id" asp-route-title="#Model.Name">
<img id="thumbnail" src="#Model.ThumbnailSource" class="img-responsive img-thumbnail" alt="#Model.Name">
</a>
</div>
//price
//Edit, Delete buttons
</div>
</div>
Here is some of my css classes:
body {
padding-top: 50px;
padding-bottom: 20px;
}
footer {
color: white;
font-size: 13px;
text-align: center;
vertical-align: middle;
max-height: 15px;
}
.body-content {
background: aliceblue;
border-radius: 5px;
padding: 10px;
height: 100vh;
}
If anyone could help me find out how to stretch the body content in this scenario, that would be great.
Instead of height: 100vh try using min-height: 100vh. E.g.
.body-content {
background: aliceblue;
border-radius: 5px;
padding: 10px;
min-height: 100vh;
}
I got this CSS layout: http://www.cssdesk.com/Lgg4q
HTML
<div id="wrap">
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
</div>
CSS
body {
background-color: grey;
font: 18px/ Times;
color: black;
}
body, html {
height: 100%;
width: 100%;
}
p { text-align: justify; }
#wrap {
width: 80%;
margin-left: 10%;
padding-top: 2%;
position: absolute;
font-size: 14px;
background: yellow;
}
.info {
margin-right: 5%;
padding-top: 2%;
float: left;
}
.img-wrap {
position: relative;
display: inline-block;
max-width: 100%;
float: left;
margin-right: 1%;
margin-top: 1%;
}
When you resize the browser window (smaller), you can see that the behavior of the divs basically breaks the design. How to handle this problem?
My thought was to give the #wrap a height, but that won't work like it should.
Here's how I'd do it. http://jsfiddle.net/joplomacedo/TYjd5/ (I couldn't figure out how to save the changes in cssdesk so I transfered it into jsfiddle)
Basically, I added a 'wrapper', which I called block around each of the image and info blocks. I gave them a width and floated them. This way, when the browser is resized, the info and the image always go together.
Was this the behavior you were looking for. What would you want to happen on the browser resizing?
You can use min-width on #wrap and set a pixel value to prevent it from breaking.
DIV elements don't behave well when used with percentages or I can say they are not meant to be used so. You have two options in this kind of situation:
Make the design of your page in such a way that it looks like it's not responding to the browser's window resize. Take as an example this very website.
Resize your containers accordingly when the browser's window is resized. To do this you will need to use Media Css classes or maybe jQuery.
This is probably a variation on something that has been solved dozens of times but CSS really makes me feel like a fool.
I am trying to build a widget that can be positioned and sized in a variety of ways. It's a pretty simple layout - fixed-height header, fixed-height footer, and a body that takes up the remaining space. The overall width and height varies. The content of the body needs to scroll. I have the overall container, header, footer, and body sizing ok.
But what I want is for the body to scroll when it needs to WITHOUT shrinking content to the left when the scrollbar appears. That is, I want the body to be as wide as it can MINUS the scrollbar that would be there iF it needed to scroll, so that when it DOES need to scroll there is no shrink. In effect, I want this:
| - - - unknown width - - -|
+--------------------------+
| content |*|
| might |*|
| scroll |*|
+--------------------------+
I want the content that might scroll to be as wide as it can MINUS the potential scrollbar width (|*| region).
What I have now is something like this:
<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
<div id="scrollContent" style="???">
</div>
</div>
I have tried margins, padding, even %-widths for the inner-most div and all 'do the shift' thing. I also need this to work in FF3, IE7/8 and (fantasy?) IE6.
Use overflow: scroll instead of overflow: auto - that'll force a scrollbar to always appear.
The answer by Mattias Ottosson to another question offers a crucial piece of information - the vw units are based on the viewport width including the scrollbar, while percentages will be based on the available width which doesn't include the space taken up by the scrollbar. In other words, for an element taking up the full width of the page, the width of the scroll bar can represented as calc(100vw - 100%)
If we have a top-level element taking up 100% of the available width, then we can use this to control what changes size when the scrollbar becomes visible. Let's say our goal layout is something like this:
.app {
display: grid;
grid-template-columns: 1fr 50vh 1fr;
}
Where we want the middle column to be 50% as wide as the viewport height and the rest of the width divided between the left and right column. If we used that, then the addition of a scrollbar means that the horizontal space lost to the scrollbar (about 15px on chrome) is taken out of the width of the left and right columns equally. This can cause an ugly shift when a ui change causes the scrollbar to appear while the main content in the grid remains the same or similar. See the first snippet below.
We can use the calculated width of the scrollbar to instead only shrink the right column:
.app {
display: grid;
grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
}
See the second snippet below. Unfortunately this means the fr units can't be used and the width of the columns must be specified a little more manually. In this case the width of the left column is half of the viewport width minus the 50vh taken up by the center column. The width of the right column is the space remaining from the available width (100% rather than 100vw) after subtracting the combined width of the left and center columns. This is clearer in the formula:
calc(100% - ((100vw - 50vh)/2) - (50vh))
which reduces to the one above
First snippet, ugly jump when scrollbar appears
$('button').click(() => {
$('.footer').toggle()
})
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
font-family: 'Archivo', sans-serif ;
}
.app {
margin: auto;
display: grid;
grid-template-columns: 1fr 50vh 1fr;
text-align: center;
height: 100%;
width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
padding: 10px;
min-height: 50vh;
border: 1px solid black;
}
.left-column {
border-right: none;
background-color:#def;
}
.center-column {
background-color:#e1ebbd;
}
.right-column {
text-align: left;
border-left: none;
background: #fb1;
}
.footer {
grid-column: 1 / span 3;
height: 2000px;
background: #753;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="left-column">
Left
</div>
<div class="center-column">
Center
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><br>
<button>Toggle footer</button>
</div>
<div class="right-column">
Right
</div>
<div class="footer">
</div>
</div>
</body>
</html>
second snippet, right column shrinks when scrollbar appears
$('button').click(() => {
$('.footer').toggle()
})
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
font-family: 'Archivo', sans-serif ;
}
.app {
margin: auto;
display: grid;
grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
text-align: center;
height: 100%;
width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
padding: 10px;
min-height: 50vh;
border: 1px solid black;
}
.left-column {
border-right: none;
background-color:#def;
}
.center-column {
background-color:#e1ebbd;
}
.right-column {
text-align: left;
border-left: none;
background: #fb1;
}
.footer {
grid-column: 1 / span 3;
height: 2000px;
background: #753;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="left-column">
Left
</div>
<div class="center-column">
Center
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><br>
<button>Toggle footer</button>
</div>
<div class="right-column">
Right
</div>
<div class="footer">
</div>
</div>
</body>
</html>
The only way you can "get" and use the scrollbar-width with pure CSS is to actually have the scrollbar be there. Now, we don't want to force the scrollbar be visible all the time, so what we have to do is this:
Make a container for all of the website's content that always has the scrollbar shown, and hide it. It's surprisingly simple!
I've created a Fiddle. Here it is as a snippet:
/* The trick: */
html {
overflow-x: hidden;
}
body {
margin: 0;
width: 100vw;
}
body > * {
overflow-y: scroll;
margin-right: -100px;
padding-right: 100px;
}
/* Other styling: */
body {
font-family: sans-serif;
user-select: none;
--color: rgb(255 191 191);
}
header {
position: sticky;
top: 0;
z-index: 1;
--color: rgb(191 191 255);
}
body > * > div {
background-color: var(--color);
border: 3px solid;
margin: 10px;
padding: 10px 20px;
font-size: 20px;
font-weight: bold;
}
label::before {
position: relative;
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin: 0 10px;
top: .2em;
border: 1px solid;
border-radius: .1em;
}
input:checked + label::before {
background-color: var(--color);
box-shadow: inset 0 0 0 1px #FFF;
}
input {
display: none;
}
input:not(:checked) ~ div {
display: none;
}
input ~ div {
height: 200vh;
}
<header>
<div>I am sticky!</div>
</header>
<main>
<div>Hello world!</div>
<input id="foo-2" type="checkbox" />
<label for="foo-2">Click me</label>
<div>Let's scroll</div>
</main>
The trick is giving the containing elements a negative margin and positive padding to the right. The offset used for these two properties can exceed the scrollbar-width, so making it 100px is plenty — I can't imagine any browser or website having scrollbars wider than 20px, let alone 100px.
By the way: The reason I'm applying these styles to every direct child of body, instead of having a single #container element, is because otherwise position: sticky wouldn't work. To have that feature work on an element, it can only have one anscestor with scrolling capabilities.
html contains #container contains sticky element -> does not work
html contains sticky container -> does work
Why not displaying always the scrollbars, even when there is no need to scroll?
You can achieve this by setting overflow:scroll; to the container.
Add another wrapper inside the element that will have the overflow:auto style and set it to about 18px narrower. The scrollbar should appear in that 18px gap.
I had a problem that is similar that I used the below solution for, I am not sure if this can be a solution to what you want to do, but it could be.
I had a div that resized to content automatically, and then the scroll was added, shrinking the inside, so that the table in it wrapped text, instead of making the container that much wider. The unwanted effect is seen in the below Old example, if the textarea is resized downward and the scroll appears.
My ugly solution was to add a div inside the overflow-y:auto-div, that had display:inline-block, and to add yet another small inline-block div after it, that was 19 pixels wide (reserved for scrollbar) and a pixel high. That little div would appear beside the real div when the browser resized the div to the content, and when the scrollbar appear, the small div is pushed down under the real div, and the real div keeps it's with. It will cause a one pixel bottom "margin", but hopefully not a problem. When no scrollbar ppears, there is 19 pixel of unused space beside the real div, as described in the Question.
(The outermost div is just there to replicate my setup/problem.)
Old:
<div style="display:inline-block">
<div style="max-height:120px; overflow-y:auto; border:1px solid gray">
<table border=1><tr>
<td>I do not</td><td>want this to</td>
<td>add breaks in the text.</td>
</tr></table>
<textarea rows=3 cols=15>Resize me down</textarea>
</div>
</div>
<br>
New:
<div style="display:inline-block">
<div style="max-height:150px;overflow-y:auto; border:1px solid gray">
<div style="display:inline-block">
<table border=1><tr>
<td>I do not</td><td>want this to</td>
<td>add breaks in the text.</td>
</tr></table>
<textarea rows=3 cols=15>Resize me down</textarea>
</div>
<div style="display:inline-block; width:19px; height:1px"></div>
</div>
</div>
<br>
I know that you want achieve this with CSS only, but I am giving a jQuery solution in case someone might find help.
Using jQuery, you can get the scrollbar size and then apply a margin to the container.
Something like this:
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}
The above code snippet will add a margin if the height of all the content is greater than the container height.
We can also remove the horizontal scrollbar if it isn't needed:
body{
overflow-x:hidden;
}
You can do it with using this css on the content element: `calc(100% - 15px)`.
// calc(100% - the width we want to give on right hand side of content)
Please read below to check how will it work.
Definitely the most easy and less messy way to fix it using the overflow:scroll.
But if you do not want to show the scroll when it is not required then you should use the width in with respect to viewport (vw) instead of using 100%. As scrollbar comes in the viewport width, if we are aware about the width of scrollbar then we can accomplish our task using the below formula. Here i am setting the content width as viewport width minus the width of the scrollbar(let say 15px).
You need to provide width as: calc(100% - 15px). You can provide width in %, em etc.
The best would be if you override the width of scrollbar like below and then use that width value in your formula to subtract.
/* width */
::-webkit-scrollbar {
width: 10px;
}
#content {
width: calc(100% - 10px).
}
Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79. And this CSS only works in webkit browsers, so it might not work in IE.
So you can use 20px of maximim width to subtract becasue scrollbar can never take width more than 20px. Please find below the working code.
.scroll {
height: 100px;
overflow: auto;
border: 1px solid black;
width: 75%;
}
.zui-table {
width: calc(100% - 10px);
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<div class="scroll">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
</div>
I had a similar scenario where I had a grid - heading row and actual data rows below it. The Data rows may be too much and get scrollbar, which will cause the cells in the rows to missalign from the cells in the heading row.
I solved this by using position:absolute on the right column in the rows, which contains a couple of buttons. Don't know if this will be applicable to your case, but it was perfect for mine.
Here is an example:
function toggleMoreRows() {
document.getElementById('grid-body').classList.toggle('more-rows');
}
body {
font-size: 13px;
font-family: Arial, Verdana, sans-serif;
}
.grid-heading {
width: 500px;
background: #CCC;
font-weight: bold;
}
.grid-body {
width: 500px;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.row {
height: 32px;
display: flex;
align-items: stretch;
position: relative;
}
.row.hidden {
display: none;
}
.more-rows .row.hidden {
display: flex;
}
.cell {
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.cell.actions {
width: 200px;
height: 100%;
justify-content: space-around;
position: absolute;
left: 300px;
top: 0;
}
<p><button onClick="toggleMoreRows()">Toggle more rows</button></p>
<div class="row grid-heading">
<div class="cell">First name</div>
<div class="cell">Last name</div>
<div class="cell">Age</div>
<div class="cell actions">Actions</div>
</div>
<div class="grid-body" id="grid-body">
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
</div>
The problem is once you hover over the container and the scrollbar appears, then the content width shrinks. So even if you use a nested container whose width is equal to the container minus its scrollbar, the width of nested container will also shrink.
One solution is to increase the size of the contents by the width of the scrollbar on hover. Here is a solution that doesn't need to use any nested outer containers (categoryCont is the scrolling container and each menuBlock is one of the items to be scrolled):
<div id="categoryCont" style="position:relative;width:200px; overflow:hidden;">
<div class="menuBlock" style="width:200px">a</div>
<div class="menuBlock" style="width:200px">b</div>
<div class="menuBlock" style="width:200px">c</div>
...
</div>
<style type="text/css">
#categoryCont:hover{
overflow-y: auto;
}
#categoryCont:hover .menuBlock{
/* Increase size of menu block when scrollbar appears */
width: 218px; /* Adjust for width of scroll bar. */
}
</style>
One issue with the above is that the width of scrollbar differs slightly in different browsers. One of the following should help:
By using px
Make the content an absolute value with left indent as an absolute value
<div class="menuBlock" style="width:200px">
a
</div>
changes to
<div class="menuBlock" style="width:200px">
<span>a</span>
</div>
<style>
.menuBlock span{ /* Good cross-browser solution but cannot use % */
position:absolute;
left:70px;
}
</style>
By using %
You need both CSS and jQuery(First step is same)
<div class="menuBlock" style="width:200px">
a
</div>
changes to
<div class="menuBlock" style="width:200px">
<span>a</span>
</div>
<style>
.menuBlock span{ /* Good cross-browser solution but cannot use % */
position:absolute; /* This one does not use 'left' */
}
</style>
<script>
// Indent left 30% because container width remains same but content width changes
var leftIndent = (30/100) * $("#categoryCont").width();
$(".menuBlock span").css({"left":leftIndent});
</script>
I'm not really sure what your asking (sorry, I have very little CSS experience), but I think you want to set the width of an HTML div element to 100% with CSS, without having a scroll bar appear. Here is a solution.
#element {
background-color: blue;
height: 40px;
position: relative;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="element"></div>
</body>
</html>
A scroll bar appears because of the position, margin and padding properties of the div element. If you set the margin-right, margin-left, padding-right, and padding-left properties to 0, and you set the position property to relative, no scroll bar will appear.
* {
overflow: hidden;
}
simple way to hide the scrollbar
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/