i am trying to create a responsive fullscreen horizontal gallery scroll.
i have worked it out but the results are not okay.
Actuallt the image should be fully strecthed to an li. i's vertically scrolling.
secondly the li's are not shoing fine on firefox, but on chrome it works fine.
please help.
thanks.
my code snippet
ul {
display: inline-block;
height: 100px;
white-space: nowrap;
margin: 0;
padding: 0;
}
li {
display: inline-block;
max-height: 100%;
width: 25%;
}
here is the fiddle
FIDDLE
Thanks.
demo with li.image = 25%
Full li image demo
body {
width:100%;
margin: 0;
padding: 0;
}
you have missing width from body tag
Keep in mind that width: 100%; on slides class wont work unless the parent of this class has width defined in it (which is body here)!!
Since you li height is fixed, you can use img width as 100%
slides {
width: 100%;
overflow: auto;
margin: 0;
padding: 0;
}
ul {
display: inline-block;
height: 100px;
white-space: nowrap;
margin: 0;
padding: 0;
}
li {
display: inline-block;
height: 100px !imoprtant;
width: 25%;
}
li img{
width: 100%;
}
DEMO
Related
I have a weird problem, I am pretty bad with CSS therefor I come up with this exercise where I want to build a image slider, which is inside a div called slider-div with width of 1000px, from a array, 10 images are loaded into the div and only 5 are visible so the user have to scroll.
To learn more I added two buttons which should scroll 100px (left or right),
I have a problem with those buttons, they stick to the parent slider-div / Background. I hoped they would always stay on the top and don't move. User can decide to scroll to the end or hit the buttons.
I am using display: flex; flex-direction: row; to get the images into a row.
How can I fix button to the visible edge of a div?
Only solution I worked out is:
position: fixed;
right: 33.6%;
but it is very unprofessional :( also bad when I changing the layout somewhere else.
Can you please look over and tell me where the mistake is what is missing?
Here is the link to codepen:
https://codepen.io/miomate/pen/pBQBya
Code:
.div-1 {
max-width: 1000px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
position: absolute;
}
button{
/* position: absolute; */
top:35%;
}
.images {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.x {
position: absolute;
top: 30%;
}
.div-2-1{
}
.div-2-2{
right: 0;
}
The images aren't loaded but the result ist the same.
Thank you very much.
This is my solution using the "bottom" property of css.
body {margin: 0 0 0 0;}
.div-1 {
max-width: 1000px;
height: 300px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.images {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.x {
position: absolute;
bottom: 0;
}
.div-2-1{
left:0;
}
.div-2-2{
right: 0;
}
Page is here
I am using a sticky footer, which works fine everywhere but my portfolio page. The gallery is relatively positioned, and is overflowing from it's parent div. The footer is sticking to the bottom of the parent, rather than the page.
Help? Preferably in a way where I don't have to rewrite all my code?
Please try this one i hope it will helpful to you.
html, body {
height: 100%;
}
header {
background: #fff;
position: relative;
z-index: 100;
}
.content2 {
clear: both;
margin: 0 auto;
padding: 0;
text-align: center;
width: 70%;
}
.gallery {
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
position: relative;
width: 100%;
}
#footer-block {
bottom: 0;
position: fixed;
width: 100%;
}
Thanks
Fixed it by coding body and html to 110% height, footer wrapper to 100% height, and adding page wrapper with 100% height.
Id like to make a horizontal list, with image contents. The image size should follow the height of the ul, which reacts to the height of the container.
here is the fiddle: http://jsfiddle.net/nLcrW/
#container{
display: block;
position: absolute;
top: 15%;
height: 70%;
background: cyan;
}
.HList{
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
}
.HList-Item{
display: inline-block;
height: 100%;
}
.HList img{
height: 100%;
}
Try to scale the container window in the fiddle. The images will overlapp when scaled up, and stretch when scaled down in Chrome and Firefox. It works perfectly in Safari.
Is there an other way to make this working, or a workaround for these browsers?
Here's an update of your FIDDLE.
Just adjust the size of the HList-Item, make the image 100% of that.
You can now play with the styling, add whitespace, remove it, embed the images in an anchor, etc.
CSS
#container{
top: 15%;
height: 70%;
background: cyan;
}
.HList{
list-style: none;
}
.HList-Item{
display: inline-block;
height: 5%;
width: 18%;
}
.HList img{
height: 100%;
width: 100%;
}
I need create element, that cover whole page except 20px margin on all sides. I try this and it works in webkit browsers and Firefox, but Internet Explorer (10) and Opera have problem with this :-( . Any idea how to solve this?
HTML
<div id="first">
<div id="second">
Hello world!
</div>
</div>
CSS
head, body
{
width: 100%;
height: 100%;
}
body
{
position: absolute;
margin: 0;
background-color: blue;
display: table;
}
#first
{
display: table-cell;
height: 100%;
width: 100%;
padding: 20px;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
I'd suggest:
#first {
display: table-cell;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
Which will position the element 20px away from each of the sides. However I'd suggest not using display: table-cell; since that requires a parent element to have display: table-row which itself then requires a parent element with display: table.
Also, it looks like you're trying to emulate table-based layouts, if you could list the overall problem you're trying to solve you may get better/more useful answers.
Try a solution like this:
http://jsfiddle.net/cyHmD/
Never use position:absolute and display:table on body - leave those properties as they are since body is your base from where you build the rest of the site - at most use position:relative on body tag. box-sizing changes how the browser box model is calculated - for example instead of calculating 100% width + 20% padding + 20% border = 140% it calculates as 100% width + 20% padding + 20% border = 100%.
This solution will work from IE7 on including IE7.
head, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
background-color: blue;
}
#first
{
position:absolute;
width:100%;
height:100%;
padding:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
How about this? Simply replace required margin with border:
#first
{
display: table-cell;
height: 100%;
width: 100%;
border: 20px solid blue;
background-color: white;
}
Not only that but also keep them side by side no matter how the window resizes. Will I have to use a table to accomplish this? Is there a better way?
Note: HTML 4 and HTML 5 answers welcomed.
An example of what I'm working with.
if you had the following styles set you should be fine:
.page
{
width: 100%;
}
#sidebar
{
padding: 0;
margin: 0;
float: left;
display: block;
width: 20%;
}
#main
{
padding: 0;
margin: 0;
float: left;
display: block;
width: 80%;
}
if you want some space between these elements account for it in your style:
#main
{
padding: 0 0 2% 0;
margin: 0;
float: left;
display: block;
width: 78%;
}
You'll also want to clear the floats after #main with a <div style="clear: left"></div> or a clearing element or wrap them in another element which has a clearfix style