I have an html page that contains "links" to many sections of the page. I'm using a single page layout where if a link is clicked, you are not actually taken to a new page. Instead you are taken to the section of the page that you clicked on in the nav bar. I have a section for 6 images, each with a caption. I need the images to be in 2 rows with 3 images per row without using a table.(each image with its caption underneath) But I also need them to be responsive, so if the size of the browser is minimized then the images stack up on each other (caption still there). I tried using padding and margins but I wasn't able to get it to work so I don't have any CSS to post but I do have my HTML code. Can someone please help me out? Here is my code:
<div class="allimagesgallery">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption">CAPTION.</div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image4.jpg">
<img id="galleryimages" src="images/image4.jpg">
</a>
<div class="caption">CAPTION</div>
<a href="images/image5.jpeg">
<img id="galleryimages" src="images/image5.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image6.jpeg">
<img id="galleryimages" src="images/image6.jpeg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
it would help us if we knew what your css in "allimagesgallery" looked like.
A little reformatting like the code below might help:
/*-----css---------*/
.imagesgalleryrow img{
display: inline-block;
}
<!-- /// HTML \\\ -->
<div class="allimagesgallery">
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
Related
How can the picture be taken behind the ''top pick'' text?
The problem: https://iili.io/VQKa0F.jpg
Page which has the problem: https://awet123.blogspot.com/2022/04/testing-all-required-boxes-for-niche.html
Wrong place of .cg-our-top-pick. You should replace it to position after .cg-li-photo
Bad:
<div class="cg-layout-img">
<div class="cg-our-top-pick">TOP PICK</div>
<div class="cg-li-photo">
<a class="cg-aff-link" href="https://www.amazon.com/dp/B01M12RE4A?tag=kitlit-20&linkCode=ogi&th=1&psc=1" rel="nofollow noopener" target="_blank">
<img alt="Goxawee Cordless Drill Screwdriver" class="cg-img-1" src="https://m.media-amazon.com/images/I/413Spl-3a0L.jpg" loading="lazy" />
</a>
</div>
<div class="cg-li-ratebadge">
<div class="cg-rate"><span>9.4/10</span> <span>Our Score</span></div>
</div>
</div>
Good:
<div class="cg-layout-img">
<div class="cg-li-photo">
<a class="cg-aff-link" href="https://www.amazon.com/dp/B01M12RE4A?tag=kitlit-20&linkCode=ogi&th=1&psc=1" rel="nofollow noopener" target="_blank">
<img alt="Goxawee Cordless Drill Screwdriver" class="cg-img-1" src="https://m.media-amazon.com/images/I/413Spl-3a0L.jpg" loading="lazy" />
</a>
</div>
<div class="cg-our-top-pick">TOP PICK</div>
<div class="cg-li-ratebadge">
<div class="cg-rate"><span>9.4/10</span> <span>Our Score</span></div>
</div>
</div>
Result:
I'm trying to select title with CSS selector.
This is my css
.category-center :nth-last-child(-n+2) {
color: red;
}
<div class="category-center">
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">
This is awesome title
</h4>
</div>
</div>
</div>
Can somebody help me with this?
You can use .category-center .post-title a. It will target the <a> element which is inside the element with class post-title which is inside category-center element.
You could even use .post-title a but it will break the hierarchy of CSS which you already have for elements inside .category-center. Also, it will tightly bound the HTML with CSS so when in future if you place the HTML outside of .category-center then the styles will not apply and you will know that something is going wrong with that action.
.category-center .post-title a {
color: red;
}
<div class="category-center">
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">This is awesome title</h4>
</div>
</div>
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">This is awesome title</h4>
</div>
</div>
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">This is awesome title</h4>
</div>
</div>
</div>
Just target the class rather than going specific numnber of children in, as this means if you change your page redesign slightly, it will no longer work.
You can either put a class on your a tag, or target any a tag, on your h4 class, as below.
.post-title a {
color: red;
}
<div class="category-center">
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">This is awesome title</h4>
</div>
</div>
</div>
I want to use the media bottom bootstrap component but the text is top aligned despite adding the media-bottom class. Is this component broken or something. Any clean workaround?
Thanks
fiddle: https://jsfiddle.net/2yrrf6zx/2/
HTML code:
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
You are putting the media-bottom on the image and not on the text. If you use the following HTML, it should work as expected:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body media-bottom">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
Fiddle
I have created three images in a column and I set column-count: 3; plus border-width for those three images. Now I need to know about the hover state.
HTML:
<div class="wrap">
<h1 class="content-title"><span>Popular</span></h1>
<div class="col-3">
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="olymbic.html">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="#">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="#">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
</div>
</div>
When I hover an image, it needs to look like this:
.
And here is my jsfiddle: http://jsfiddle.net/6g7v899q/
May I know, how to do this?
Thanks in advance.
something like this then ?
img{margin:40px;border:25px solid white;}
img:hover{border-left:25px inset gray;border-right:25px outset gray;border-top:25px outset white;border-bottom:25px inset white;}
<img src="http://lorempixel.com/200/200" width="200" height="200" />
At the bottom of this page http://kimcolemanprojects.com/cyanotype-hats.html there is a section with the title "Related Projects".
I can't move this title down from the grid of images above. I think there must be an error in the Html structure, but I can't find it. I have given the element padding and margin but it still will not move.
This is a section of the html code from that page:
<div class="container">
<div id="header">
<h1>KIM COLEMAN PROJECTS</h1>
<div id="nav">
<ul>
<li id="work">
Work
</li>
<li id="about">
About</li></ul>
</div><!--end nav-->
</div><!--end header-->
<div class="main-individual">
<!-- grid of Work -->
<a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
<div class="view view-sixth">
<img src="images/hats/small-velour 2.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Velour trilby with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-5" class="hidden">
Velour trilby with Cyanotype ribbon</div>
<a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
<div class="view view-sixth">
<img src="images/hats/small-balaclava.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Balaclava with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-1" class="hidden">
Balaclava with Cyanotype ribbon.
</div>
<span class="similar"><h6>Related Projects</h6></span>
<a href="unique.html" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/uniques.jpg" />
<div class="mask-small">
<div class="mask-text">
<h2>Unique</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Glare</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/act-natural-glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Act Natural Glare</h2>
</div>
</div>
</div></a>
</div>
</div>
You could reduce the margin in the .view-small class, e.g. to margin: 20px 2%. Is this what you meant?
Update: Try to set the line-height: 30px; in .similar class. This moves the title down to the small images.