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.
Related
I have a image in a div having id container but it is messing the things up. It is not centering plus the box-shadow is not shown on image. I added margin:auto but It did not helped me. I think margin:auto centers all fixed-width elements but in my case, you know image is resized by CSS. Any other solution ? Maybe absolute positioning work but the container height will get zero. I don't want to use Javascript/jQuery.
I have this bin for ya!
Use margin:auto but also add display:block:
#container > img {
max-width:100%;
max-height:550px;
height:auto;
display: block;
margin:auto;
}
UPDATE:
If you don't want the image to overrun your shadow, do this:
#container > img {
max-width:100%;
max-height:542px;
height:auto;
display:block;
margin:4px auto 4px;
}
try margin-left:auto margin-right:auto
I'm trying to make a simple, fluid, responsive two column layout (just for the sake of learning CSS), consisting of a sidebar and a main section.
I was able to create the sidebar with 100% height, position the main content at its side, but when I put a H1 inside my main section... tada! Its margin created a margin for the sidebar as well.
Here's a minimum code that presents the problem:
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#sidebar {
display:block;
position:absolute;
width:25%;
min-height:100%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#main {
margin-left:25%;
display:block;
}
h1 {
padding:2%;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
</style>
</head>
<body>
<header id="sidebar">
Let's reach for the stars!
</header>
<section id="main">
<h1>Nope!</h1>
</section>
</body>
</html>
I've tested it in Chrome and Firefox, happened in both.
I've created this JSFiddle, and thanks to a comment from cimmanon, the behavior is the same.
Well, I'm lost. Am I missing something really simple?
Is this approach a good way to make a two column layout? I inspired myself reading the CSS from the Svbtle blogs.
Generally speaking, absolute positioning should be avoided unless you really do want the element removed from the document's flow. If you have a page where #main ends up having shorter content than #sidebar and the user's display isn't tall enough to display all of #sidebar's contents, you're going to have your content clipped off.
My favored way of achieving equal height columns is to use the display: table CSS properties.
http://jsfiddle.net/PmkCQ/3/
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
body { display: table }
#sidebar {
width:25%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#sidebar, #main {
display:table-cell;
vertical-align: top; /* optional */
}
h1 {
padding:2%;
margin-top: 0;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
There's other ways, of course, but this one is less brittle than floats or absolute positioning. The only down side is that IE7 doesn't support these properties, so they'll continue using the element's previously defined (or default) display setting (for div, it will be block).
Add display: inline-block to the h1 and it won't influence the side bar. Then you can set any margin you want.
The reason it seemed fine in JSFiddle is probably the styles applied from their styles (inspect the h1 and you'll see it has margin:0).
I have a <ul id="slide-holder"> which contains several <li class="slide">.
css:
#slide-holder{
position:absolute;
width: 720px;
height: 540px;
background-color:#FFF;
display: block;
list-style:none;
}
.slide{
width:720px;
height:540px;
display:inline-block;
list-style:none;
}
html:
<ul id="slide-holder">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
The problem is that instead of having each <li> element next to each other with a huge horizontal scroll bar being displayed, everything is displayed as a block i.e. vertical scroll bar is shown.
I was wondering if the window has a maximum limit of width that cannot exceed or if it is just a minor css issue?
Try to float your lis:
.slide{
float:left;
width:200px;
height:540px;
list-style:none;
}
ul .slide:last-child {
clear:both;
}
This is a css property and not an issue. The overflow will by default be wrapped, thus rendered on a new line. This is expected behavior, as you want your text (inside a <p> tag for example) to be rendered on new lines, when they reach the right edge of its parent.
This is default for all elements, so to remove the wrapping, you need to change the white-space property in your css:
ul{ white-space: nowrap; }
An example of non-default wrapping is seen in notepad. You need to select "wrap text", if you want to get rid of horizontal scrollbars.
jsFiddle here
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;.
I cant seem to get this to work.
http://www.keironlowe.host56.com
What I need is the banner with the low opacity image on it to be centered no matter the resolution, Ive tried a wrapper but because the wrapper is a width of 800 it cuts of the image, i've tried margin:0 auto; and i've even tried using the tag but it still doesnt center in higher resolutions.
You shouldn't need the tags in #Logan's example. That tag is deprecated anyway. Setting a width (not auto) and setting margin-left and margin-right to 'auto' in your stylesheet should handle the centering just fine.
Try taking the centering and pic out of the CSS and into the HTML. the css would look like this:
#banner {
background-color:#000000;
height:350px;
width:auto;
margin:0 auto;
}
and your HTML would look like this:
<div id="banner">
<center>
<img src=".....">
</center>
</div>
That is what I would do.
First, get rid of that <center> tag you have around the <div id="banner"></div>. You don't need it and it's deprecated.
Then, swap out your current CSS of the following block:
#banner {
background-color:#000000;
background-image:url(../IMG/Banner_BG.png);
background-repeat:no-repeat;
height:350px;
width:auto;
margin:0 auto;
}
For this:
#banner {
background:url("../IMG/Banner_BG.png") center #000000 no-repeat;
height:350px;
margin:0 auto;
}
Swapped out the many background attributes for the shorthand. Since you're showing the image as a background, added in the background-position property of center. This will now bullseye your image into the centre.