I would like a horizontally scrollable gallery like the one on the image.
My current markup is this (it is slim.):
.col-xs-12
.row-fluid.clearfix
ul.ace-thumbnails
- #equipment_uses.each do |gear|
= content_tag_for(:li, gear) do
a.cboxElement data-rel="colorbox" href="#" title=("Photo Title")
= image_tag gear.image, size: '80x80', alt: "150x150", class: 'img-thumbnail thumbnail'
If I set the 'overflow-x: scroll' fro the .col-xs-12 div and 'width:10000px' for the '.row-fluid.clearfix' div then it is working but the horizontal div too long. I would like to outspread the width of the .row-fluid.clearfix to be to total width of the images.
This is not exactly an answer, but this page has some great tutorials on exactly this topic, covering a few different versions. I would have left a comment rather than an answer but my reputation has prevented this.
Basic horizontally scrolling list of images using HTML & CSS:
HTML:
<ul class="images">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
CSS:
ul.images {
margin: 0;
padding: 0;
white-space: nowrap;
width: 900px;
overflow-x: auto;
background-color: #ddd;
}
ul.images li {
display: inline;
width: 150px;
height: 150px;
}
The trick in the CSS is to set the lis to display:inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done.
The scrolling is then simply overflow-x:auto and the rest is obvious. Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.
See demo
Related
So I have been trying to make a horizontal scroll menu for a bunch of thumbnails. I have found great info on how to make it scroll horizontally, however my thumbnails still stack on top of eachother and still scroll vertically within my div. I want all of my thumbnails in one row that scrolls horizontally when there is overflow in the 'x' direction. I also would like my div to stay at a height that is proportional to the width of the thumbnails. Right now if I do auto, the container div changes to a height big enough to show all 50 images in multiple rows instead of just one row. Here is my code
HTML (.ejs file):
<div class="thumbnail-container">
<ul class="thumbnail-list">
<% for (var i = 0; i < listData['photos'].length; i++) { %>
<li>
<span><img class="thumbnail-image" src="http://www.realcove.net/<%=listData['photos'][i]%>"></span>
</li>
<% } %>
</ul>
</div>
CSS:
.thumbnail-container {
overflow-x:scroll;
height: 75px;
width:100%;
padding: 0 15px;
}
.thumbnail-list {
white-space:nowrap;
}
.thumbnail-image {
display: block;
padding:2px;
max-width: 100px;
height:auto;
}
I'm very close, I've done research, and it's just barely not doing what I want it to. Any thoughts on what I need to fix, or errors I may have?? Your help is greatly appreciated, thanks.
your li element still has a display property that makes the elements to stack vertically.
You can change it to display: inline-block;
As for the other question you mentioned. Setting the container height to auto will make the height of the container proportional to the thumbnail. This will work after you set the display property to inline-block;
.thumbnail-list li {
display: inline-block;
}
jsfiddle example
https://jsfiddle.net/e99wfqku/1/
I've been trying to create a navigation bar that meets the following criteria:
Spans 15% height.
Spans 100% width.
Navigation bar is aligned to the top of the site.
Elements within the navigation bar are vertically centered within it.
The last menu option is aligned to the far right of the navigation bar.
I've been playing with <div> and <ul> to implement the elements. I've spent a lot of time on it and researched it. I can't seem to find a way to vertically center the elements, which are images, if I use a percentage height. I assume this issue is because the <header> and <nav> elements are block elements, as is the div element, being that "vertical-align" only works on inline elements.
Questions, for those wise enough to provide what are probably easy answers:
Can I use "vertical-align" on block elements if I override the "display" element to the "inline" value? It seems like the answer is negative.
Can I right-align one <li> within a <ul> while the other <li> are left-aligned?
The only way I can get it to work is to use fixed height values on the navigation bar as well as padding around the elements. Is that my only option or does anyone know of a way I can make it work with a percentage height?
Basic code to express what I'd like to do (assuming all the <html> and other foundational tags are there, too; and I am aware the code below doesn't work but it shows the basic idea):
<style>
html, body {
height: 100%;
width: 100%;
}
.menu_bar {
display: inline; /* This element seems to mess things up pretty bad so I assume I can't do it
that way. I was only using it so my <ul> would be within an inline element which would allow me
to use vertical-align. */
height: 15%;
width: 100%;
background-color: #000000;
}
.menu_items {
height: 100%;
width: 100%;
}
.menu_logo {
vertical-align: middle;
text-align: left;
}
.menu_option1 {
vertical-align: middle;
text-align: left;
}
.menu_option2 {
vertical-align: middle;
text-align: left;
}
.menu_option3 {
vertical-align: middle;
text-align: right;
}
</style>
<body>
<header>
<nav>
<div class="menu_bar">
<ul class="menu_items">
<li class="menu_logo"><img src="images/logo.gif"></li>
<li class="menu_option1"><img src="images/option1.gif"></li>
<li class="menu_option2"><img src="images/option2.gif"></li>
<li class="menu_option3"><img src="images/option3.gif"></li>
</ul>
</div>
</nav>
</header>
</body>
I have recently started to learn HTML and CSS. To practice what I learn, I am building a site on my computer. Now, I want the main page to be a table of contents for the website with the links to the other parts of the site in two columns that are split by a picture in the center of the page. The code below almost works as it does set the two columns at the left and right parts of the page. However, no matter what I try, I can't get the image to stay in the middle of the page. I managed to get in dead center using a mix of the margin and width properties earlier, but it wouldn't stay in the center if I shrunk the page (I did still have the image set with display:inline, so that might explain it but it's the only way I have been able to get the columns and the image in one line). I have also tried different variations using margin set to auto and using float set to center.
How do I set the page to where I have a column of links on each side of the image and it is all in one container?
The code I have so far for the table of contents section:
<div class="Table-of-Contents">
<ul class="ToCLeft-Column">
<li> A Little bit about my life </li>
<li>This is my family</li>
<li>On a more serious note
</li>
</ul>
<img src="images/try_science.png" alt="Test Center" class="Center-Image"/>
<ul class="ToCRight-Column">
<li>My Interests</li>
<li>If you want to get in touch with me
</li>
</ul>
</div>
And the corresponding CSS:
.ToCLeft-Column{
display: inline;
float: left;
}
.Center-Image{
display: inline;
width: 100 px;
margin: 10 px auto 10 px auto;
text-align:center;
}
.ToCRight-Column{
display: inline;
float: right
}
To align the table to the center of the page,
Create a container outside table.
Add this to the table's css: margin : 0px auto;
This will only align the table to the center of the page. To align the image to the center of the table, give equal width to the two uls.
Here's the demo: http://jsfiddle.net/HdNgJ/9/
Now building a page that looks neat even on page shrinks to the extent of a mobile screen is another game altogether. It is called building a responsive design.
use this css
.ToCLeft-Column{
display: inline;
float: left;
}
.Center-Image{
display: inline;
width: 100 px;
margin: 10px;
text-align:center;
float: left;
}
.ToCRight-Column{
display: inline;
float: left;
}
i hope you have given proper width to all your columns.
I am facing a weird problem. I have an un-ordered list of images. List has 4 Items. I want to include it in responsive page and all I want is that all items should have a 25% width and the list itself should span the width of whole screen. Well it all sounds easy and straight-forward but for some odd reason I can't assign 25% width to the list-items and only three items accommodate in one line if I assign width:25%.
If I reduce the width to 24.4% the items are in line. But then again weirdly when I resize browser one of the item goes into 2nd line.
I am using Google chrome. Here is the HTML:
<ul class="imgs">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
Here is the CSS:
.imgs {
width: 100%;
list-style: none;
margin: auto;
padding:0px;
}
.imgs li {
width: 24.4%;
margin: 0px !important;
padding: 0px !important;
display: inline-block;
}
And here is the Fiddle Demo:
http://jsfiddle.net/7HXw7/2/
WIth inline-bock elements, the browser will interpret the space between the li's as actual spaces and that's why your elements aren't lining up. If you just remove the space, it'll line up. See code:
<ul class="imgs"><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>
Or the fiddle, here: http://jsfiddle.net/dgvc9/
Alternately, if you find this as annoying as would think you do, you can make the li's block elements and float them left.
See alternate fiddle: http://jsfiddle.net/8Gxvd/
Try adding:
float: left;
to .imgs li
Fiddle
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}