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/
Related
I want to make the button always aligns vertically on the middle of the image responsively. I can make the image responsive using .img-responsive, however I can't make the arrow to be always on the middle of the image. I suspect the issue is because I can't make the height of the arrow's div to be equal the height of the image. Any way to do so?
Here is my jsFiddle..
PS: for those who can come up with better words please change the title.. ^^
CSS only solution. Using the display table and table-cell combo, you can achieve what you are looking for. I had never really tried it before, as far as I know, but searched around a bit and found a solution which gave me a good starting point to achieve what I needed.
The trick is to have a container which will possess the display table property. Inside that wrapper, you will have all your other elements, which will possess the table-cell property, in order to have them behave properly and stack themselves next to each other, as table-cell would to do.
By giving your table-cells a 100% height, they will adapt themselves to the height of the wrapper, giving you the chance to use the handy little table property going by the name: vertical align. Use the middle vertical align property to center perfectly your nav buttons.
Give your image the max-width 100% property for proper responsive behavior. But don't use bootstrap's own image responsive class because it contains css properties we don't want and that messes up our layout.
I reworked the html a bit, so that each element align perfectly, in the correct order.
WORKING EXAMPLE JSFIDDLE
HTML:
<div class="row">
<div class="col-xs-12">
<div class="image-container">
<div class="prev-btn nav-btn"> < </div>
<div class="inner-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
</div>
<div class="next-btn nav-btn"> > </div>
</div>
</div>
</div>
CSS:
.image-container{
display:table;
height: 100%;
text-align:center;
}
.inner-container{
display:table-cell;
width: 100%;
height: 100%;
padding: 0 15px;
vertical-align: middle;
text-align: center;
}
.inner-container img{
width: 100%;
height: auto;
max-width: 100%;
}
.nav-btn{
font-size:50px;
font-weight:700;
font-family: monospace;
color: #000;
cursor:pointer;
}
.nav-btn:hover{
color: #B6B6B6;
}
.prev-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.next-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Here's a simple solution in Javascript/Jquery. The trick is to adjust the position of each NAV buttons according to the height of the image each time the browser id resized. Dividing the image height by 2 will get you the center of the image, aka the position where you will want your buttons to be. Using only this value will no be enough, you also need to get the center value of your nav buttons. Substracting each values will give you the real position value for your buttons. The ScreenResize function will then update the position each time the image is scaled responsively.
$(function(){
//Call On Resize event on load
screenResize();
//Bind On Resize event to window
window.onresize = screenResize;
});
function screenResize() {
//Adjust Nav buttons position according to image height
$('.nav_btn').css({
'top': (($('.center-block').height() / 2)-($('.nav_btn').height() / 2))
});
}
Also, change the line-height of your buttons to this, it will help:
.nav_btn p{
line-height: 1.25;
}
Finally, use Media-Queries to change buttons font-size and line-height if necessary. Also, like user Valentin said, using images for the nav buttons could also be easier, you wouldn't have to use media-queries.
Example JSFIDDLE
The page I'm working on has a responsive view.
Products are listed on the page and the product listing scales with the page width.
I want to position the product image in the centre of it's container so that the image takes up the width and size of it's container AND is always centred with the image centre in the centre of .product
<div class='product'>
<div class="image_wrapper">
<a href="/products/1">
<img scr="http://awesome.image.com/1.jpg">
</a>
</div>
</div>
since the page is responsive, the content width and height are variable
Can anybody advise?
Update
I've created this fiddle to better explain the problem:
As the screen size gets smaller, the image should remain positioned in the centre, with the tower staying centred. The black shading on the edges should slip out of view if the image is wider than it's container
http://jsfiddle.net/gavinmorrice/aUL29/
Here is the solution my friend :)
.product {
width: auto;
margin: auto;
}
#image_wrapper {
width: 100%;
display: table;
background-image:url("http://drinkdeals-1-asia.s3.amazonaws.com/development/venues/9a6f8955a3ab7670217425cb50c171ea/wide_venue.jpg");
height:300px;
background-position:center;
background-repeat:no-repeat;
}
Change your CSS to the above and then remove the image tag from your HTML and CSS :)
have you tried using
.image_wrapper img{
min-width:100%;
}
hope it helps
you image_wrapper div has to get the css as follows:
.image-wrapper {
display: table;
width: 100%;
}
the img element has to get following code and it will be rendered completly in the middle
img {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Also in this Blogpost you will find further information about centering elements horizontal and vertical.
Here is example: [http://jsfiddle.net/9X6zD/2/][x]
Parent must have position:relative, and element margin:auto; and display: block;
[demo][1]
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 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
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.