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>
Related
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>
I have been trying to do an image gallery for my portfolio but I want them images without borders and next to each other both horizontally and Vertically. Unfortunately All my attempts have been unsuccessful.
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
#thumbs {
width: 20%;
height: 50px;
color: #090;
float: left;
font-size: 0px;
}
<div class="portfolio">
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
</div>
http://www.adhemas.com/ is kind of what I'm trying to achieve, except my images are all the same size (although I would not mind a how to make them different sizes but still stacked)
Element IDs should be unique within your entire document. If you have more than one element with the same ID, your HTML is invalid, which is likely to cause your web page to stop working as intended.
Source: Can multiple different HTML elements have the same ID if they're different types?
I suggest you use classes instead, which support having multiple elements with the same class.
Give all your elements a class of thumbs instead of an id. Then you can use .thumbs instead of #thumbs in your CSS rule to style your elements.
First thing to fix is the id. You cannot reuse the id in the html.
Next you need to set the a and the img to be constrained inside the .thumb element.
Something like the following
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
.thumbs {
width: 20%;
color: #090;
float: left;
font-size: 0px;
}
.thumbs a {display:block;}
.thumbs img{width:100%;}
<div class="portfolio">
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/1">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/2">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/3">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/4">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/5">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/6">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/7">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/8">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/9">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/10">
</a>
</div>
</div>
Removing the <div> tags completely and setting the <img> CLASS (don't use ID's more than once) to thumbs stacks the images nicely next to each other with no margins (thanks to your left float). Unless there's a reason to keep the <div>'s I suggest removing them as they're just in the way, they're also block elements which goes against the inline layout you're after.
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.