I'm trying to place 6 images one next to another with css,
the whole thing should be able to scale pretty well in most displays (except for mobile for the moment)
so I've made this:
http://pelloponisos.telesto.gr/galleryTest/test/gallery.php#
(apparently I'm trying to make yet another carousel)
most of my images have a bigger width than height so when I scaled them I just put
width:x% in the li container and 100% for the image width.
but the sixth image is different and it causes quite a bit of trouble
I tried setting the height too but you can only scale the images based on one of the two.
The only thing that worked so far was to put a static height in the ul and then scale in both width and height but then it's not a fluid grid.
is there any way to make all li elements have a fluid height and then scale all images based on that? or if not
is there any way to make any image with different ratio scale to the one I specify in the css?
I stripped down your code a little bit, but this seems to get closer to the idea. The trick is to set the width in the container (.upper ul li) then for the images use: max-width:100%; height:auto. Also, the padding is now in %.
#carousel{
position:relative;
}
#wrapper{
margin:0 auto;
}
#slides{
width: 100%;
}
.upper ul li{
width: 200px;
max-width: 100%;
list-style:none outside none;
float:left;
padding-bottom:5px;
padding:2%;
}
img.galleryThumbnail{
max-width:100%;
height:auto;
}
.info{
display:none;
}
#buttons img{
position:absolute;
top:90px;
}
#buttons #prev img{
position:absolute;
left:29px;}
#buttons #next img{
position:absolute;
right:21px;
}
Related
I have a simple slider consisting of images and text-only slides. I'm trying to set a background colour overlay on the slides, but I'm having trouble positioning and setting an exact width of the overlay in percentage.
Here's a codepen of what I'm working with: http://codepen.io/anon/pen/RrewXV
.slide-text-half {
background:rgba(130,20,20,0.8);
color:#fff;
padding:0px;
height:100%;
width:inherit;
z-index:2;
position:absolute;
top:0;
}
Setting a 50% width on the slide-text-half class sends the background into a frenzy and I can't figure out why. Any suggestions?
Elements with position: absolute are sized according to its first parent that have a position different than static.
So if you want to size the div proportionally of the slide, you have to add a position: relative on the slides, and make sure they have the height of the slider with:
.slick-track {
height: 100%;
}
.slick-slide {
position: relative;
}
Here is a pen: http://codepen.io/tzi/pen/eJPmbZ
You need to add
.slick-initialized .slick-slide {
position: relative;
}
I created this fiddle (http://jsfiddle.net/HfpHf/1/) based on the following stackoverflow question/answer: https://stackoverflow.com/a/9236397
The relevant bits are:
.box-parent {
width:95%;
padding-bottom:95%;
height:0;
position:relative;
}
.box {
border-radius: 10%;
width:100%;
height:100%;
position:absolute;
left:0;
background-color:rgb(17, 17, 17);
color: #ffffff;
text-align: center;
}
The trouble is I don't really understand how or why it works. More specifically, what does setting height: 0 on the parent do and why does setting padding-bottom to the same percentage as width result in the child being a square?
The problem is that the li element doesn't have got specified height. So child elements have to be determinated only by its width.
We can't use height: 100% to specify parent-box because we don't know the height of li.
The only solution is use padding which is destined only by parent element's width as you can see here in percentage specifition. There is written Specifies the padding in percent of the width of the containing element.
I am new to responsive design, I want to make responsive menus, images, blocks and every thing in the website templates.
I ready that all width should be in percentage, I make this example
http://jsfiddle.net/hQBR6/
How can I make the form with it's input respond to different screen size without going below the ul??
Problem is, that you are mixing margin set in PX and widths set in %. When screen is resized below certain dimensions, there isn't enough space left for elements with margin that big and input falls below.
You should set your margins in % - if you are working on repsonsive design.
Here is how I modified your code to make it work:
ul#menu{
border:1px solid black;
display: inline-block;
float:left;
max-width:50%;
margin-left:5%; /* changed to percentage */
margin-top:36px; /* should be percentage as well*/
list-style-type:none;
}
ul#menu li{
display: inline-block;
float:left;
margin-right:36px; /* should be percentage as well*/
width: auto;
}
#header form {
display: inline-block;
margin-right:1%; /* changed to percentage */
float:right;
width:10%;
}
#header form input{
margin-top:28px;
background-color: #e0e0e0;
border-radius:4px;
border:none;
height: 26px;
color:#a6a6a6;
}
note: I played only with left/right margins and real dimensions are up to you.
Hope this helps
For your quick start please go through below link you will find nice examples to start responsive design.
http://twitter.github.com/bootstrap/
By using the property position:absolute; I have to mention the correct size of all layers (in my case 3 layers "#header", "#mybody", "#footer") where in my website #mybody's height is dynamic. So, I need #footer's position should be something like relative but using relative I am unable to set with:100%; Even if I set width:100% I am not getting complete 100% using relative. However I am getting 100% using absolute but I can't use absolute for above reason(s). Also I don't want footer to be fixed. How can I set my footer's width to 100% without using absolute or fixed position? Using width:100% with other than absolute or fixed doesn't resulting complete 100% to me.
Code:
mheadf {
position:relative;
width:100%;
height:35px;
border:thin solid black;
}
mbody {
position:relative;
width:800px;
height:500px;
border:thin solid black;
}
mfootf {
position: relative;
width:100%;
height:115px;
border:thin solid black;
}
-->
Using width:100%; should make the div 100% in width, assuming there are no margins or paddings on your body/div. Remove those and you'll be good to go.
I was trying to horizontally center an image (logo) for every screen size doing something like this
#container {position:relative width:100%; height:100%;}
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}
and it's not working. Do I maybe have to use a width for container in pixels?
#logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}
#logo { height:100px; margin:0 auto; width:500px; }
This is the standard way of centering an image by telling it to automatically determine the space on both the left and right of a fixed size container.
And an example.
I guess it depends on how you define "responsive", but if you mean responsive in the sense that content resizes to accomodate the width of the viewport, then all of the other answers don't meet this criteria since they rely on fixed pixel widths. For example, what happens if the view port is less than 500px?
A similar concept will work with percent widths, and actually be responsive, in that the thing you're centering will be flexible too:
#container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}
If you don't want the "logo" element to get to big (on huge screens), you can add max-width:600px; to limit it, but you'd need to add some media-queries to keep it properly centered on large screens.