UPDATE:
I rebuilt the page with all relatively-positioned elements and the thing is still stuck when I navigate via pageid. I think it's definitely a Safari-specific overlap conflict and it is super annoying. Any ideas out there?
I'm working on a microsite that uses pageid's to navigate through full-page div's, arranged vertically with the overflow hidden. It works just fine on every browser, including mobile, except desktop versions of Safari.
The div's scroll when the page is refreshed to the specific pageid, and will scroll if the text is highlighted and dragged, but if you start at page 01 and navigate to page 02 (like you're supposed to), the content will not scroll.
It seems like it might be an overflow conflict, but I tried to do this with the page div's scrolling horizontally to separate the x- and y-axis issue and I got nothing. It's acting more like there's a transparent layer in between me and the scroll...
Check out the microsite here: http://www.kevinjbeaty.com/trailtool-stackoverflow
Note that it works just fine everywhere else.
This is the basic html:
<div class = "viewbox">
<div id= "page01" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page02" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
<div id= "page03" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page04" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
</div>
and the basic css:
.viewbox {
position: relative;
height: 100%;
width: 100%;
display: block;
overflow: hidden;
background-color: black;
z-index:0;
}
.page {
position: relative;
height: 100%;
width: 100%;
display: block;
z-index:1;
overflow: scroll;
background-color: white;
z-index:10;
}
.content {
position: absolute;
padding: 2%;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.contentscroll {
position: absolute;
padding: 2%;
overflow-y: scroll;
overflow-x: hidden;
display: block;
z-index: 200;
}
Got it! Wow.
I changed the body "overflow" to "hidden" and got rid of the ".viewbox" wrapper altogether and viola! Stupid simple...
Related
I have in my page the following section:
Screenshot of the bottom of my page
Basically i have a fixed div with some buttons that we show on the bottom of the page. The thing is, sometimes we include only one button, sometimes we include four or five. When you resize the page, the buttons get pushed down, this is the normal behaviour I guess:
What happens when I resize
I was wondering, is it possible to reverse the direction the buttons are being pushed towards? As in, force the div to take more space above itself, and not downwards, therefore keeping the buttons visible?
Our fixed element has the following CSS, in case it is useful
.actions_fixbar {
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
z-index: 9;
background: #fff;
height: 50px;
box-shadow: 0px 0px 5px 0px #ddd;
}
Remove height attribute.
let a = 1;
function addButton() {
$('#footer').append('<button>Button '+ ++a+'</button>');
}
#footer {
position: fixed;
width: 100%;
bottom: 0;
background: #c4c4c4;
}
button {
width: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addButton()">Add more button</button>
<div id="footer">
<button>Button 1</button>
</div>
Try this with bootstrap.The buttons are just placeholders for a quick demo.Replace them with your actual elements
<style>
footer{
position: fixed;
bottom: 0;
width: 100vw;
}
</style>
<footer>
<div class="container">
<div class="row ">
<div class="col">
<button>Back</button>
</div>
<div class="col">
<button>Submit</button>
</div>
<div class="col">
<button>Request to update</button>
</div>
<div class="col">
<button>Export by default</button>
</div>
</div>
</div>
</footer>
I'm looking to learn how I can position images in CSS, multiple ones, without affecting my footers position, size, etc.
I coded some CSS I thought would work, but it messed up my footers position. (It wouldn't stay at the bottom.)
So, I fixed that issue but found the code I wrote for the image position messed with the footers position.
I don't really know how, but I would like to have my images positioned, perhaps by px/space.. they just need to look good in a row spaced.
The example is in red, is how I want it to look.
look here for an example of how I want it to look.
HTML
<div class="batesimg">
<p><strong>Bates</p></strong>
<div class="shadow"> <!-- makes a shadow, surrounding the characters picture. -->
<img src="images/bates.png" alt="Bates" width="150" height="150"> <!-- defines the img -->
CSS
/* Bates profile picture. */
.batesimg { /* or whatever class name works for you */
position: auto;
left:250px;
top:250px;
margin-right: 500px;
}
NOTE, the css above isn't positioning the image how i want it, showed in the image example, can someone help me positiong the image like i have it in my example image?
Thanks!
You want to repeat same type of pattern of name,img and descriptions. We will call this 'card'. Now you have two problems in hand.
1) Placing multiple cards in page. For this use some layout like flexbox.
2) Setting inside of card properly..
/*1st Problem*/
#flex-container{
display: flex;
flex-wrap:wrap;
width: 600px;
justify-content: space-around;
}
#flex-container>div.card{
flex-grow:0;
flex-shrink:0;
}
/*1st Problem ends*/
/*2nd Problem*/
.card{
width: 200px;
height:calc(200px + 2em);
}
.card>.name ,.card>.desc{
width: 100%;
text-align: center;
}
.card>div.img{
position: relative;
margin-left: 25px;
width: 150px;
height: 150px;
border-radius: 100%;
}
/*2nd Problem ends*/
.card:nth-child(1) div.img{background-color: red;}
.card:nth-child(2) div.img{background-color: green;}
.card:nth-child(3) div.img{background-color: blue;}
.card:nth-child(4) div.img{background-color: yellow;}
/*Centering Content*/
#flex-container{
margin: 0 auto;
/*top,bottom both zero.. and left,right both auto..
handling margin is complicated..read about them
*/
}
<div id="flex-container">
<div class="card">
<div class="name">Name1</div>
<div class="img"></div>
<div class="desc">Desc1</div>
</div>
<div class="card">
<div class="name">Name2</div>
<div class="img"></div>
<div class="desc">Desc2</div>
</div>
<div class="card">
<div class="name">Name3</div>
<div class="img"></div>
<div class="desc">Desc3</div>
</div>
<div class="card">
<div class="name">Name4</div>
<div class="img"></div>
<div class="desc">Desc4</div>
</div>
</div>
For any other problem visit Flexbox
Im working on a site right now, and I have run into the problem with my text. When I zoom out, the text begins to stack and actually goes out of my div. I have the div at a fixed width and height, and have it wrapped out in other divs, and cant figure this out for the life of me. Only the text moves though, everything else stays put. It looks kinda likes this
Desired:
this is my text
in the way that
I want it to be
actual:
this
is
the
text
As I zoom out the text tends to stack up and push out of the div.
.content {
width: 960px;
margin: 0 auto;
}
.contentleft{
float: left;
width: 480px;
}
.contentright{
float: right;
width: 480px;
}
.boxone {
float: left;
clear:both;
height: 211px;
width: 230px;
background-image:url(../images/rec1.png);
}
.textone {
width: 220px;
height: 200px;
overflow:hidden;
clear: both;
}
HTML
<div class=content>
<div class=contentleft>
<div class=boxone>
<div class=textone>
<p> TEXT TEXT TEXT TEXT </p>
</div>
<div class=learnone>
</div>
</div>
<div class=boxtwo>
</div>
</div>
<div class=contentright>
<div class=boxthree>
</div>
<div class=boxfour>
</div>
</div>
</div>
what can I do to stop that text from moving?
It's a browser behaviour to zoom all the items in the page, but as a developer you can specify a font-size in pixel.
font-size:12px;
Try simple just increasing the width of the div.
Example
.contentleft {
width: 800px;
}
I dont really understand how is possible that a
<div style="clear:both"></div>
doesn't work in Chrome. I have this layout:
<div id="header">...</div>
<div id="content">
<div id="col1">...</div> <!-- float left -->
<div id="col2">...</div> <!-- float left -->
<div id="col3">...</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>
So, I've used the clear:both before the footer and/or after the col3.
It does not work either in IE7 but, in this moment I dont really care.
Can anyone help me please?
I Add more informations:
#content {
padding-top: 19px;
display: block;
}
#col1,
#col3 {
width: 21%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
#col2 {
width: 58%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
SOLVED: Im sorry.... the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow...
Hope i ve been clear in the explanation..
However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
It actually works. You are just not using it properly.
If you use clear:both the following element will be effected only. So for instance,
floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left
Imagine that each text between "|" is a block element. If you float the elements and use the clear like the example above, the code should display something like above.
Check here for a live example: Try removing the clear attribute and you will see how the browser places "DOES NOT WORK".
http://jsfiddle.net/6VjSL/
clear:both works just fine in Chrome/IE7. See this example of how to properly use it. http://jsfiddle.net/turiyag/LvMRY/2/
Can you post a link to your site, or your full actual code?
CSS:
div {
border: 1px solid black;
}
.floaty {
height: 50px;
width: 50px;
float: left;
background: green;
}
.cleary {
height: 100px;
width: 200px;
clear: both;
background: cyan;
}
HTML
<html>
<head>
</head>
<body>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="cleary">Cleary</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
</body>
</html>
use clear:none; in the css property. It will work in chrome
Is better for semantic to use a class for this things. The correct way to go is:
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div id="col1">...</div> <--- float left
<div id="col2">...</div> <--- float left
<div id="col3">...</div> <--- float left
<div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>
CSS:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done.
Then it does not work anywhere ? :o)
You are probably applying the float:left to the clear:both divs too...
this works in all browsers:
http://jsfiddle.net/kKwkd/
HTML
<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
<div id="col1">bbb</div> <!-- float left -->
<div id="col2">ccc</div> <!-- float left -->
<div id="col3">ddd</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>
CSS
#header, #footer{
border: 1px dashed blue;
}
#col1,#col2,#col3{
float: left;
border: 1px solid red;
padding: 50px;
margin: 10px;
}
the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
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/