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%;
}
Related
Basically I have a floating image, which has some arbitrary size based on the image being loaded (capped to some max-width %), with a caption below. (In the examples, I set a fixed size just for demonstration.)
Initially, I had a problem getting the figcaption to auto-fit to the size of the image above it. I used the display: table-caption style to get that to work in Firefox, but it breaks in Chrome.
<div>
<figure>
<img />
<figcaption>This is some text. This is some text. This is some text. This is some text. This is some text.</figcaption>
</figure>
</div>
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
figure {
position: relative;
max-width: 85%;
margin: auto;
display: block;
}
img {
width: 300px;
height: 150px;
background: #000;
}
figcaption {
display: table-caption;
caption-side: bottom;
width: 100%;
}
https://jsfiddle.net/45jk62s8/
In Chrome, for me, the figcaption looks all scrunched up, not the same width as the image.
If I change the figure element to display: table, it works in Chrome but not Firefox.
figure {
display: table;
}
https://jsfiddle.net/45jk62s8/1/
In Firefox, for me, the figure is no longer horizontally centered and the figcaption width is not constrained. I tried width: fit-content but that doesn't work since the figcaption is allowed to run long.
I assume it has something to do with the wrapper div I use to center the figure, but I can't figure out a cross-browser solution to this at the moment. The figure does need to be fixed and centered, such that even if the behind content is scrollable, the figure is always centered in the page.
This CSS seems to create the desired output in Firefox and Chrome. It uses table, table-cell and table-caption for all the components and removes the 100% width on the caption.
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
}
figure {
position: relative;
max-width: 85%;
margin: auto;
display: table;
}
img {
width: 300px;
height: 150px;
background: #000;
display: table-cell;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
I've got a portfolio-like page, displaying images in a grid with a title on top of it. The title is set to inline-block and has a background color, width depends on the length on the title.
Whenever a title becomes too long to fit within the parent article it wraps to a second row; no problem.
But why does the auto width result in 100% now?
.content{
background: pink;
width: 33%;
float: left;
height: 200px;
overflow: hidden;
position: relative;
}
.title{
position: absolute;
bottom: 10%;
left: 0;
text-align: center;
}
h2{
display: inline-block;
font-family: Arial;
background: rgba(255,255,255,0.6);
}
Example:
https://jsfiddle.net/6qtw7duf/
Ok..let's explain this in simple term
I'm seasoned webdesigner, so I don't know much about this art.
I got three elements placed horizontally (left/center/right) which have fixed size:
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
and inside every div there are few images, that are centered horizontally and general style for img is:
img {
max-width: 100%;
}
to make them fluid.
But since divs are not flexible, images inside them also won't change their size when resizing browser window.
Is it possible to set fixed size on any html element and still somehow make it fluid?
I know I could use percentages instead pixels, but I've got also problems with setting proper height for .banner-box using percents - box doesn't stretches to desired 400px, only to 281px.
Here's html:
<div id="footer">
<img src="footer-line.png" alt="Footer.png" />
<p><span>some span</span> blah</p>
<p>mail: <span>mail#domain.com</span></p>
</div>
And whole css for my simple webpage:
html {
background: url('mu-media-background-1920.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
img {
max-width: 100%;
}
#container {
width: 1200px;
margin: 5% auto;
text-align: center;
}
#header {
display: block;
clear: both;
position: relative;
width: 100%;
margin: 0 auto;
}
#content {
display: block;
width: 95%;
height: auto;
margin: 10% auto 5% auto;
}
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
.banner-text {
position: relative;
display: block;
top: 7%;
margin: 0 auto;
}
.see-more-button {
position: absolute;
display: block;
margin: 0 auto;
left: 0; right: 0; bottom: 0;
}
#virtual-studio {
float: left;
}
#mu-animation {
float: right;
}
#shadows {
display: block;
clear: both;
position: relative;
width: 100%;
}
#shadows img {
display: block;
clear: both;
position: relative;
margin: 0 auto;
}
#footer {
display: block;
clear: both;
width: 95%;
margin: 0 auto;
font: 15px Arial, Helvetica, sans-serif;
}
#footer p {
display: table;
clear: both;
position: relative;
margin: 0 auto;
color: #AFBEA5;
text-align: center;
width: auto;
}
#footer span {
font-weight: bold;
color: #BDC9AF;
}
I'm preparing responsive layout, so it would be best (afaik) to use only percentages.
Here is a good hybrid approach that has worked well for me in the past.
As you've already mentioned you could use percentage widths to build a fluid layout, and then restrict/fix specific div sizes with max and min values. So for example:
#container {
width: 100%;
max-width: 1200px;
}
Here is a working example with the banner boxes restricted to max 300px width and min 400px height (I added some padding and borders so you can see what is going on): jsfiddle
In the end you'd still have to adjust your responsive media queries to deal with your fixed elements, but this way you'd only have to change a few min and max values.
You will need to use media queries and define fixed widths/heights for .banner-box for each screen break point that you choose.
You'll have to play with the sizing and see which sizes fit best for which break points.
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
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;
}