I'm trying to implement a responsive horizontally scrolled list of images.
For example:
<ul>
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
</ul>
The images are an unknown width and height ratio.
My Requirements:
I want the images to always be 100% height of the browser window at all times.
I want them to be adjacent to each other (without using float; so inline is probably best).
I don't want to break the width/height ratio of the images on window resize.
No javascript.
So far I've tried with this CSS, but I can't seem to get the images not to squash when the browser window is resized:
ul{
width:100%;
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
max-height:100%;
width:auto;
}
Any takers?
Edit:
I've put a simple fiddle together for an example of where I'm at with it.
Any help would be great...
Okay here we go. After much experimentation I've finally found what I believe to be the answer for most browsers. Seems to work on Firefox 3.5+, Safari 4+, Chrome 3+. I've also tested on an iOS device, an Android device, and IE, though not extensively.
*clears throat*
html, body{
width:100%;
height:100%;
}
html, body, ul, li{
padding:0;
margin:0;
border:0;
text-decoration:none;
}
ul{
width:100%;
height:100%; /* CHANGE */
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
max-height:100%;
height:100%; /* CHANGE */
width:auto !important; /* CHANGE */
}
The main factors seem to be making sure that the height properties are 100% all the way down to the last node in the list, including the img (on top of it's max-height declaration).
I've also noticed better success in older browsers appending the !important declaration after the width:auto property.
I'm surprised at the lack of hunger for a layout like this, so if this has helped anybody then please let me know.
I see what you mean by the distortion at low widths when using the %. So one solution would be to also implement some fallback absolute widths too, so that at lower resolutions the images don't re-size.
CSS
html, body{
width:100%;
height:100%;
}
html, body, ul, li{
padding:0;
margin:0;
border:0;
text-decoration:none;
}
ul{
min-width:150px
width:100%;
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
min-width:150px
max-height:100%;
width:auto;
}
http://jsfiddle.net/MkLd4/
Related
I kept searching on the Internet, but the only thing I get is how to avoid/prevent the div elements on wrapping/floating when resizing the browser. My problem is exactly the opposite: I have an horizontal menu and I'm trying to wrap down the elements (eg. Home, Contact etc.) once the browser is shrinking and then, to return to its initial state when the browser is maximized.
Here is the HTML document:
<div id="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
And the CSS is something like this:
#menu
{border:1px;
height: 40px;
width: 400px;
clear: both;
float: left;
position:relative;
top:20px;}
#menu ul
{list-style-type:none;
margin:0;
padding:0;
overflow:hidden;}
#menu li
{float:left;}
#menu a:link,a:visited
{display:block;
width:100px;
font-weight:bold;
text-align:center;}
I tried to change the height and width to auto, remove/shift the clear, float, overflow and position tag, I even changed the float:left in "#menu li", to float:none, but then the menu elements get fixed one after another and it stays that way, even if I resize the browser.
I also, divided each of the menu elements with div (is not in the code below), but without any succes.
Do I have to change the CSS code entirely or to do this with js, jquery etc.?
If so, how?
DEMO
This can be achieved simply by removing the fixed height widths.
Elements with unspecified widths are set to width:auto which is usually the size of the elements contents. Floated elements will wrap if they cannot fit on the page adjacently.
CSS
#menu{
border:1px;
clear: both;
/*height: 40px; Remove*/
/*width: 400px; Remove*/
float: left;
position:relative;
top:20px;
background:#58c;
}
#menu ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#menu li{
float:left;
}
#menu a:link,a:visited{
display:block;
width:100px;
font-weight:bold;
text-align:center;
}
You are setting the width of #menu to 400px which fixes that width, no matter how wide the browser window is. Use this one:
width:100%;
max-width:400px;
The navigation bar of my website does not extend to the full height of my webpage. I would like to extend it so it fits the page perfectly. Here is my code.
Html:
<div id="Nav">
<div id="NavContent">
<h1>Header</h1>
</div>
CSS:
#Nav {
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:9999px;
}
How can I fix this issue? Thanks.
you need to remove the natural padding and margin from the document and the h1 (which has default values)
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
padding: 0;
}
Try:
#Nav {
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:100%;
}
Fiddle : http://jsfiddle.net/7vLPb/
Fiddle(fullscreen) : http://jsfiddle.net/7vLPb/show/
Go and search 'css reset' and copy the code.
Basically a browser has margin,padding etc. already in place and this can get in the way. So many people use a css reset. Put the css reset at the top of your css document. This should remove the padding and margins that are in your way.
Also make sure you set the width of your navbar to 100%. Good luck!
Not sure if the title is the real issue, but my horizontally scrolled list of images is not playing nice. I want all the images to bunch up (effectively float) next to one another (which I've managed to achieve using display:inline thus far). But I want them to all be 100% height of the window/body, and it isn't playing nice.
Here's my HTML:
<body>
<div id="content">
<ul id="content-images">
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
</ul>
</div>
</body>
And the CSS:
html, body{
margin:0px;
border:0px;
padding:0px;
height:100%;
}
#content{
height:100%;
background-color:green;
}
#content-images{
height:100%;
white-space: nowrap;
}
#content-images li{
font-size:0;
display:inline;
height:100%;
}
#content-images img{
max-height:100%;
height:auto;
max-width:100%;
width:auto;
}
The problem is a small gap of about 2/3px that runs along the bottom of the li items. It is hard to tell if it is part of the body or part of the list items, but either way it is an annoying anomaly.
I'm viewing in Chrome. I've attached a screenshot. Note the bottom white line. To be clear, I'm happy for the images to run off the page on the x-axis, and for the client to scroll horizontally through the images, but I don't want any gaps on the vertical, between the images and the edge of the window.
Update:
I'm unable to replicate the issue in jsFiddle because the fiddle seems to have difficulty with styling the html, body and relatively-sized images. I haven't got the time or pateince to figure out why.
I've decided to go for a hack. A mixture of vertical-align:bottom on the img and an overflow-y:hidden on the html and body. This will make any whitespace after the list items redundant, as the viewable area will be restricted.
You can prevent this using vertical-align: bottom on your image tag, like so:
img {
vertical-align: bottom;
}
Hope this helped.
You're getting thing problem because of display: inline [Reason here]. Alqin is right, float:left will solve the problem, but you also have to remove display:inline. If you want horizontal slider, you can increase width of ul to sum of widths of images and use overflow-x:hidden or overflow-x:auto on its parent div.
PS: Its not a good idea to use height:100% on all elements. It will make your page look weird when the content overflows.
I changed the CSS to following, and also removed properties that I thought were unnecessary:
html, body{
margin:0px;
height:100%;
}
#content{
height:100%; /* a bad idea */
background-color:green; /* add this to body if you want whole body green */
overflow-x: auto;
}
#content-images{
height:100%; /* again, a bad idea*/
width: 3000px; /* sum of widths of images I used to test */
}
#content-images li{
font-size:0;
float: left;
}
#content-images img{
max-height:100%;
height:auto;
max-width:100%;
width:auto;
}
Have you tried removing the margin from the unordered list element?
#content-images{
height:100%;
white-space: nowrap;
margin: 0;
}
Use float left instead of inline:
#content-images li{
float:left;
}
That space is because inline elements have a space after them. Add an margin-bottom:-4px to images. Also give the images display:block. Play will all this, you should be able to fix your problem.
I have a container with a fixed height and content within this container. I've been using "em" for the font sizing, and its been working for modern version of FireFox and IE. However i went and checked it on my mobile and an old version of IE(6) and the content overflows past the bottom of the container into the footer. So far i've tried changing the height of this container to auto !important and setting the fixed height as a min-height, this did not work. Also i changed the em to corresponding px sizes but this did not work either. The HTML and CSS look something like this.
#container {
width:570px;
height:570px;
font-size:1.2em;
text-align:left;
}
#container p {
margin-left:35px;
margin-right:35px;
}
#foot {
width:570px;
height:60px;
clear:both;
}
<div id="container">
<p>Content1</p>
<p>Content2</p>
<p>Content3</p>
</div>
<div id="foot">
</div>
add overflow: hidden; to #container's css and a display: block; also height:auto !important;
#container {
width:570px;
height:auto !important;
display: block;
font-size:1.2em;
text-align:left;
}
I am using an inline-block list as a horizontal navigation bar with drop down menus. But I can't seem to get it to fill up the entire width of the screen. To make it more frustraiting, when I change the zoom level of the browser screen, the list resizes at a different rate from everything else. Thus, on some zooms it is too long and wraps to the next line, and on other zoom levels it is too small and doesn't take up the full space. It is doing the same thing in both firefox and ie.
My css file is:
#topNavBar{
margin:0px;
padding:0px;
list-style:none;
width:100%;
line-height:45px;
float:left;
clear:both;
display:inline-block;
}
#topNavBar > li {
background:#141414 none repeat scroll 0 0;
cursor:pointer;
float:left;
position:relative;
padding:0px 10px;
display:inline-block;
}
#topNavBar .tabs {
text-align:center;
display:inline-block;
white-space:nowrap;
}
And then my html file is a more complicated version of something like:
<ul id="topNavBar">
<li class="tabs">blah1</li>
<li class="tabs">blah2</li>
<li class="tabs">blah3</li>
</ul>
This is kind of tough to call without seeing the whole code and without seeing a live example, but here are my ideas based on the info you've provided:
Try getting rid of the float: left; on #topNavBar, if you want it to fill the whole width, there shouldn't be any reason to float it. Also, try changing #topNavBar to a fixed width in px not by % and i wouldn't set #topNavBar to display: inline-block; just leave it as display: block;.