I want to divide header into three columns for three images. but they overlap.
How do i divide div header into three columns.
This is my code:
<div data-role="page" id="loginpage" class="loginbody">
<div data-role="header" style="background-image:url('images/Login/header_bg.PNG');">
<img id="headerselect" alt="" src="images/Login/.PNG" class="ui-btn-left"></img>
<img alt="" src="images/Login/.PNG"></img>
<img alt="" src="images/Login/.PNG" class="ui-btn-right"></img>
If the images are static (always the same 3 images) the best idea is to fuse all of them so that you have to include only one image.
If they change from time to time, you could insert 3 divs inside the header, all of them with 'float:left'
Please tell me if you need it explained a little more
Give display: block to img tags in the header, and use float: left to make columns.
[data-role="header"] img {
dispaly: block;
float: left;
}
Check the DEMO here.
Here is a great way of positioning any elements in the header:
HTML:
<div data-role="header" id="header" style="background-image:url('images/Login/header_bg.PNG');">
<ul>
<li><img id="headerselect" alt="" src="images/Login/.PNG" class="ui-btn-left" /></li>
<li><img alt="" src="images/Login/.PNG" /></li>
<li><img alt="" src="images/Login/.PNG" class="ui-btn-right" /></li>
</ul>
</div>
and the CSS:
#header ul li {
display: inline;
}
allows you to position with ease as well!
Here's a fiddle: http://jsfiddle.net/DJSrA/4H5qs/
Related
I having a gallery on my website where all images equal by width but different by height.
My website link
I would like to make them to scale with same height and full all width.
You can follow this ( How to create a responsive image gallery with CSS flexbox ) blog, it will give you exactly what you want. It shows how to make a responsive image gallery using css flexbox.
Definition of
flex-grow property (w3schools), specifies how much a flex item will grow relative to the rest of the flex items.
Definition of
flex-shrink property (w3schools), specifies how much a flex item will shrink relative to the rest of the flex items.
Definition of
flex-basis property (w3schools), specifies the initial length of a flex item.
Definition of
object-fit property (w3schools), specify how an or should be resized to fit its container.
Below code is taken from the link provided above.
.image-gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
}
.image-gallery > li {
height: 300px;
flex: 1 1 auto; /* shorthand for flex-grow, flex-shrink, flex-basis */
}
.image-gallery li img {
object-fit: cover;
width: 100%;
height: 100%;
vertical-align: middle;
}
<ul class="image-gallery">
<li>
<img src="https://images.unsplash.com/photo-1541411438265-4cb4687110f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8aGQlMjBwaG90b3N8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="" />
</li>
<li>
<img src="https://images.unsplash.com/photo-1503249023995-51b0f3778ccf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGQlMjBwaG90b3N8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="" />
</li>
<li>
<img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBwaG90b3N8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="" />
</li>
<li>
<img src="https://images.unsplash.com/photo-1614160859544-177611d11f6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8aGQlMjBwaG90b3N8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="" />
</li>
<li>
<img src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8aGQlMjBwaG90b3N8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="">
</li>
<li>
<img src="https://images.unsplash.com/photo-1597283712405-819a6021326c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGhkJTIwcGhvdG9zfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</li>
<li>
<img src="https://images.unsplash.com/photo-1571348264903-c3af9582e4ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGhkJTIwcGhvdG9zfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</li>
<li>
<img src="https://images.unsplash.com/photo-1550041771-aef92f14a6d5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGhkJTIwcGhvdG9zfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</li>
<li>
<img src="https://images.unsplash.com/photo-1601314167099-232775b3d6fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGhkJTIwcGhvdG9zfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</li>
</ul>
You can also create a div under the main div and set all images as a background image. and apply the same height to col-div(Child div) through CSS and background CSS property.
For Example as per your site reference :
<div id="pictures_gallery">
<div class="col-div" style="background-image:url('your image path here');"></div>
<div class="col-div" style="background-image:url('your image path here');"></div>
</div>
I want to create product list page and mouseover gallery like [this page][1]
I tried with vertical carousel like that Fiddle
But it is not working like Zalando and jcarousel is not working 1.9.1+ jQuery version. I need a structure that works like Zalando.
Here we are! I've encapsulated your entire product (lets call it .product-item) in a <div> so when hovering the main image (or the other options when visible) you can toggle the visibility of the options:
Make the options hidden by default (CSS):
#name-carousel {
float: left;
display: none;
}
Encapsulate your product in a container (HTML):
<div class="product-item"> <!-- This is the container -->
<div id="name-carousel" class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li id="carousel-selector-1"><img src="http://placehold.it/100x50&text=slide1" /></li>
<li id="carousel-selector-2"><img src="http://placehold.it/100x50&text=slide2" /></li>
<li id="carousel-selector-3"><img src="http://placehold.it/100x50&text=slide3" /></li>
<li id="carousel-selector-4"><img src="http://placehold.it/100x50&text=slide4" /></li>
<li id="carousel-selector-5"><img src="http://placehold.it/100x50&text=slide5" /></li>
</ul>
</div>
<div class="bigProductimage">
<img data-img="http://placehold.it/400x200&text=slide0" src="http://placehold.it/400x200&text=slide0">
</div>
</div>
Toggle the options visibility when hovering (jQuery):
productItem.hover(function() {
$("#name-carousel").fadeToggle();
});
Here is the updated fiddle for you: http://jsfiddle.net/CliffBurton/6svy9ocy/3/
I'm trying to create a simple slider
I have main images and thumbnails
I want to animate the thumbnails container to the right position, put i don't want to use integer i want to use width value from a variable
My HTML code is some thing like that
<div class="Slider" >
<ul class="main-image">
<li><img src="images/gal-1.jpg" alt=""/></li>
<li><img src="images/gal-2.jpg" alt=""/></li>
<li><img src="images/gal-3.jpg" alt=""/></li>
</ul>
<div class="thumbnails-holder">
<a class="prev"></a>
<div class="thumbnails-items">
<a class="thumbnails-item">
<img src="images/gal-1.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-2.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-3.jpg" alt=""/>
</a>
</div>
<a class="next"></a>
</div>
</div>
My J query code
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function(){
$(this).parents().find(".thumbnails-items").animate({
right: '-=95'
})
})
is there a way to write it like right: '-=ThumbWidth'
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function() {
$(this).parents().find(".thumbnails-items").animate({
right: '-=' + ThumbWidth
});
});
I have code something like this :
<ul>
<li>some text <img src="path" style="height:15px;width:25px;" /></li>
<li>some text <img src="path" style="height:15px;width:25px;" /></li>
<li>some text <img src="path" style="height:15px;width:25px;" /></li>
</ul>
What i want is , the "some text" and img should come neatly, as if they are 2 cols in a table . Also, if text is small like "ab" , then the image should not change its position , i mean, shouldnt come near, it should be always at far distance like some 80px after "some text" . And,if text length is more than 80, img should lie after text only . Will provide more information if necessary .
Thanks
<li><span style="min-width:80px; display: inline-block;">some text</span>
<img src="path" style="height:15px;width:25px; float:left;" /></li>
This will works...
You can solve the problem by adding a couple of span tags inside the list items and some CSS as follows:
<style type="text/css">
li {
clear: left;
}
li span {
display:block;
float: left;
width: 140px;
}
li img {
float: left;
}
</style>
<ul>
<li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
<li><span>some text bla bla bla</span><img src="path" style="height:15px;width:25px;" /></li>
<li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
</ul>
You can check out the result of this here:
http://jsfiddle.net/magnusohlin/xhLmx/
I'm trying to use javascript to show the caption of an image only when it's being hovered, and have a default caption displayed when no image is hovered.
<ul class="logos">
<li class="image-1"></li>
<li class="image-2"></li>
<li class="image-3"></li>
<li class="image-4"></li>
<li class="image-5"></li>
</ul>
<div class="captions">
<p>Default caption</p>
<p>This is a caption for the first logo</p>
<p>This is a caption for the second logo</p>
<p>This is a caption for the third logo</p>
<p>This is a caption for the fourth logo</p>
<p>This is a caption for the fifth logo</p>
</ul>
Any advice on how I could implement such an effect with javascript?
There's a better way to structure your page:
<script language="javascript" type="text/javascript">
// sets the caption for the clicked img
function caption(img){
// finds the element with an id="caption"
var ctrl = document.getElementById("caption");
// sets the text of the element = the alt property of the img
alert(img.alt);
ctrl.innerText = img.alt;
// sets the css display property = block (shows the element)
ctrl.style.display = "block";
// hides the defaultCaption element
document.getElementById("defaultCaption").style.display = "none";
}
// shows the defaultCaption and hides the caption div
function clearCaption() {
document.getElementById("defaultCaption").style.display = "block";
document.getElementById("caption").style.display = "none";
}
</script>
<ul class="logos">
<!--
alt : an alternative text description for an image
onmouseover : event handler that fires as the mouse moves over image
onmouseout : event handler that fires as the mouse moves off the image
-->
<li><img class="image-1" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-2" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-3" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-4" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-5" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
</ul>
<div id="caption" style="display:none"></div>
<div id="defaultCaption">default caption text</div>
UPDATED:
Hadn't spotted that the image tags were malformed? - I've rewritten it as a list of images.
If your want li elements then change alt to title (in the elements and the code).
You even do not need JavaScript. You can achieve it via CSS.
See it in action at jsFiddle: http://jsfiddle.net/phusick/n6wTr/
Markup:
<div class="container">
<ul class="logos">
<li class="image i1">
<p class="caption">1st caption</p>
</li>
<li class="image i2">
<p class="caption">2nd caption</p>
</li>
<li class="image i3">
<p class="caption">3rd caption</p>
</li>
</ul>
</div>
CSS:
div.container {
position: relative;
padding-top: 2em;
}
li.image p.caption {
position: absolute;
top: 0;
left: 0;
display: none;
}
li.image:hover p.caption {
display: block;
}