I am creating a carousel and I am having trouble displaying the images depending of the width of the available width. My images are around 350 by 250 px and I am trying to stretch them to fill with the whole window
<style>
.mainLeftContent
{
width: 80%;
}
.slider
{
margin: 10px 0;
width: 100%; /* Update to your slider width */
height: auto; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
<div id ="mainLeftContent">
<ul id="MainContentPlaceHolder_caruselUl" class="slider">
<li><a href="Recipe.aspx?RecipeId=14013">
<img class="caruselImageClass" src="../images/RecipeImages/635635997646632016.JPG" /></a>
</li>
</ul>
</div>
Thank you for your time.
I solved my problem using java script and setting the width of the .slider dynamically.
Related
I'm currently working on the following website:
http://hmdesign.alpheca.uberspace.de/
As you can see, I already managed to create a list of div.project-item elements. Due to the use of inline-blocks, it also reduces the number of columns when you resize the window. What I want to accomplish now is, when you resize the window, that the elements scale up/down in a certain range (between min-width and max-width) until it reaches the maximum/minimum and that it THEN removes/creates a column. The problem now is that there is a huge empty gap after removing a column. It would be much smarter to still show lets say 3 smaller columns in that situation instead of 2 big ones.
I already tried to use a flexbox which didn't really help and also to use block elements instead of inline-block and float them to the left. Then the resizing works but I also want the whole thing to be centered (like now), which I didn't found a way yet to do with floated elements.
Relevant code below:
HTML:
<div class="content-wrapper">
<div class="project-list">
<div class="project-item">
<a href="#">
<img class="project-image" src="res/img/Placeholder.jpg">
<div class="project-overlay">
<div class="project-desc">
<span class="project-title"></span>
<span class="project-text"></span>
</div>
</div>
</a>
</div>
<div class="project-item"...
CSS:
/* Wrapper */
div.nav-wrapper, div.content-wrapper {
max-width: 1280px;
padding: 0 25px;
position: relative;
margin: 0 auto;
height: 100%;
}
/* Portfolio Projektliste */
div.project-list {
padding-top: 150px;
max-width: 1300px;
margin: 0 10px;
text-align: center;
font-size: 0;
}
/* Projekt Item */
div.project-item {
display: inline-block;
position: relative;
width: 400px;
height: auto;
margin: 10px;
overflow: hidden;
}
div.project-item:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
img.project-image {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
max-width: 100%;
}
div.project-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background-color: black;
opacity: 0;
}
You can set the width of div.project-item in % instead of a fixed width (px)
e.g
div.project-item{
width: 30%;
}
So when you resize the window it will adjust.
And if in some point you want to show only two, you can do it using medias
e.g
#media (max-width: 920px){
div.project-item{
width: 45%;
}
}
I agree with Yandy.
Try changing your div.project-item width to like 40% (this is for when it has two divs showing). Like so:
div.project-item {
display: inline-block;
position: relative;
width: 40%;
height: auto;
margin: 10px;
overflow: hidden;
}
Then add this code:
#media only screen and (min-width: 1347px) {
div.project-item {
width:31%
}
}
#media only screen and (max-width: 926px) {
div.project-item {
width:75%
}
}
All of the width percentages can be picked to your choosing for your project.
The one with the 926px is for the single div, and the 1347px is for the triple div.
I am trying to get a 'panel' effect going on this website. Everything remains static apart from the content in the middle. As the site progresses, only the centre content area will scroll down. The navigation menu and the header and (yet to be coded) footer will remain fixed. So far, i have accomplished this. But i want the image/slider in the centre to be the size of the panel. Currently, the slider resizes when you change screen size, which is great and what i want, however, i just need to slider to have the correct height to start with.
On my 13inch screen, the correct height is around 620px for the height. However, if i transfer onto a larger screen, obviously, the 620px is not correct and i cannot work out how to do this.
I have tried introducing height:80%; into the code for the slider, but this does not work.
The site can be found here:
https://mimi-fasi.myshopify.com/
I'm sure this is fairly basic stuff, but i cannot get it to work.
<div id="content">
<div class="flexslider type-header scaled-text-base">
<ul class="slides">
<li class="slide slide-1 flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
<a href="/collections/all">
<img src="//cdn.shopify.com/s/files/1/0727/2709/t/2/assets/slide_1.jpg?155" alt="Slide 1" draggable="false">
<div class="overlay-text posx-left posy-bottom">
<div class="inner">
<h1 class="text-1"><span class="scaled-text" style="font-size: 5.83333333333333%;">Welcome to</span></h1>
<h2 class="text-2"><span class="scaled-text" style="font-size: 5.83333333333333%;">Masonry for Shopify</span></h2>
</div>
</div>
</a>
</li>
</ul>
</div>
So, #content is effectively going to contain all of the products, which needs to be scrollable. The flexslider is what is too long at the moment, and i need it to be the full size of the screen, so that there is no scroll, if that makes sense.
CSS:
#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: absolute;
left: 260px;
top: 100px;
}
.flexslider {
position: relative;
zoom: 1;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.flexslider .slides {
overflow: hidden;
zoom: 1;
margin: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
Just to clarify, the image resizes when the screen size changes, which is exactly what i want. However, i want to set a max height for the div depending on the size of the screen, so that the slider/image fills the panel.
One last thing, this code:
.flexslider .slides img {
max-width: 100%;
display: block;
margin: 0 auto;
width: 100%;
}
Works fine for width, so if i change the max width/the width down, it all changes and work perfect. I am only attempting to do the same thing with the height, however, this does not work.
#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: fixed;
left: 260px;
top: 100px;
overflow-y:scroll;
}
I didn't get what the .slider does nor did I see it in action... But this css will make your div scroll-able, and changing the position to fixed will clip it in place, using the bottom:0 positioning will make it have the height desired.
This is a result of my previous question. I know that i need to set a specific percentage for the image in the centre of my page so that when the screen size increases/decreases, the image stays in proportion to this. Essentially, i need the image in the centre of my website to be the size of the 'panel', and fit entirely in that panel so that there is no scroll.
The site can be found here:
https://mimi-fasi.myshopify.com/
I'm sure this is fairly basic stuff, but i cannot get it to work.
<div id="content">
<div class="flexslider type-header scaled-text-base">
<ul class="slides">
<li class="slide slide-1 flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
<a href="/collections/all">
<img src="//cdn.shopify.com/s/files/1/0727/2709/t/2/assets/slide_1.jpg?155" alt="Slide 1" draggable="false">
<div class="overlay-text posx-left posy-bottom">
<div class="inner">
<h1 class="text-1"><span class="scaled-text" style="font-size: 5.83333333333333%;">Welcome to</span></h1>
<h2 class="text-2"><span class="scaled-text" style="font-size: 5.83333333333333%;">Masonry for Shopify</span></h2>
</div>
</div>
</a>
</li>
</ul>
</div>
So, #content is effectively going to contain all of the products (on the catalog screen), which needs to be scrollable, hence why #content cannot be fixed.
CSS:
#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: absolute;
left: 260px;
top: 100px;
}
.flexslider {
position: relative;
zoom: 1;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.flexslider .slides {
overflow: hidden;
zoom: 1;
margin: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
Just to clarify, the image resizes when the screen size changes, which is exactly what i want. However, i want to set a max height for the div depending on the size of the screen, so that the slider/image fills the panel.
One last thing, this code:
.flexslider .slides img {
max-width: 100%;
display: block;
margin: 0 auto;
width: 100%;
}
Works fine for width, so if i change the max width/the width down, it all changes and work perfect. I am only attempting to do the same thing with the height, however, this does not work.
Use this in your CSS:
html, body {
height: 100%
}
You have to set the height of each container of the <div> as well.
Here's the thing: I'm making a pure JavaScript full screen image slider, and I'm having a little trouble with my elements position.
The image's size needs to be dynamic, because it has to fit in every screen. I need all the elements aligned side-by-side, so I can animate the slider with a left/right effect.
Here's my issue: I can't get those elements aligned. They just stand vertically one below the other.
I really need those images with a 100% size, but that way I can't align them side-by-side. If i set a minor percentage (smaller then the parent size), or if I set a static value, they stand how I want.
What I need to do here?
You can find a live exemple here http://jsfiddle.net/9uF2b/
Here's some of my code:
<div class="wrap">
<div class="slider">
<div class="container" id="container">
<ul>
<li class="active">
<a href="/teste/">
<img src="img/1.jpg" alt="teste alt">
</a>
</li>
<li>
<a href="#">
<img src="img/2.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.wrap {
width: 100%;
height: 100%;
}
.slider {
width: 560px;
height: 560px;
margin: 0 auto;
}
#container {
width: 100%;
height: 100%;
// overflow: hidden;
}
img, a {
width: 100%;
height: 100%;
}
li {
display: inline;
}
ul {
margin: 0px;
padding: 0px;
}
Thanks in advance for any help you are able to provide!
Try to add white-space: nowrap; to your slider:
.slider {
width: 560px;
height: 560px;
margin: 0 auto;
white-space: nowrap;
}
Demo: http://jsfiddle.net/9uF2b/1/
This is because you are giving 100% height and width to img in in:
img, a {
width: 100%;
height: 100%;
}
You have to give height and width 50% to img tag only as:
img{ width: 50%; height: 50%;}
So now images will add up to 100% width of parent cotainer. If you use more than 2 images then do the math accordingly.
Hope that solves your problem.
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each