I have a bug in my CSS when it comes to a responsive page with images.
Demo: https://jsfiddle.net/xr4getom/
You'll notice on this example that a dark background (#222) appears at times when you resize the window. Is there a fix for this that would just force the image to take up this area - while keeping the ratio correct?
I have omitted the CSS from here as it goes over the character limit but if you click the demo link, you can see it.
<section class="news-bloc">
<div class="news-container">
<h1>Latest News</h1>
<ul class="news-list">
<li>
<a href='#' target='_blank'><img alt='' class='img-responsive photo-thumb image-link' src='https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/c157.0.406.406/14504934_1825657564379158_1219547695887155200_n.jpg?ig_cache_key=MTQwMDU3NTA0ODg3NjAyNTIxNA%3D%3D.2.c'>
<p>View Post</p></a>
</li>
</ul>
</div>
</section>
Set the image in the background of your <a> instead of using <img> tag. Like:
HTML:
<ul class="news-list">
<li>
<a href='#' target='_blank' style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/c157.0.406.406/14504934_1825657564379158_1219547695887155200_n.jpg?ig_cache_key=MTQwMDU3NTA0ODg3NjAyNTIxNA%3D%3D.2.c');">
<p>View Post</p>
</a>
</li>
</ul>
CSS:
.news-list li a {
display: flex;
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
}
Have a look at this jsFiddle Demo.
Hope this helps!
Your <li> element is having width more than that of image. Try setting your li width to auto -
ul.news-list li {
float: left;
width: auto; <-- Changed here
margin-right: 1.63934%;
float: left;
margin-bottom: 1.63934%;
background-color: #222
}
Found a solution! :-)
ul.news-list>li>a {
width: 100%;
}
you can use margin-bottom:-5px; in the css code
Related
I am trying to add icons to my menu items. I have read many different tutorials on it, but the css that all tutorials recommend will not work for me, and I'm not sure what to do.
Here is my html and css:
<div class="hike-menu">
<ul>
<li class="icon">Menu Item 1</li>
<li class="icon">Menu Item 2</li>
<li class="icon">Menu Item 3</li>
<li class="icon">Menu Item 4</li>
</ul>
</div>
ul li {
list-style-type: none;
display: inline-block;
}
.icon {
background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
background-repeat: no-repeat;
background-position: top;
}
And I have also uploaded in onto a jfiddle if you would like to take a look. You can see the exact problem I am having with the icon not showing. https://jsfiddle.net/katherinekonn/g1e4cok3/5/
I should also note that it is absolutely necessary I use background-image for this, I am unable to place an img link directly into the html. Does anyone know how I can fix it? I would like the icon to be above the list items text.
Here is an image of what I am trying to create:
The main issue is related to the size of the icon you used. The actual size is much bigger than you required. So either you resize the image or apply background image size in css. Then apply some padding-top for the <LI> to avoid overlapping of text and icon.
I tried modifying your css in fiddle and it worked perfect for me. please see it below
ul li {
list-style-type: none;
display: inline-block;
}
.icon {
background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
background-size: 20px;
background-repeat: no-repeat;
background-position: top;
padding-top: 30px;
}
Please try this. It will work.
HTML
<div class="hike-menu">
<ul>
<li class="element">
<div class="icon">
</div>
<div class="text">
Menu Item 1
</div>
</li>
<li class="element">
<div class="icon">
</div>
<div class="text">
Menu Item 2
</div>
</li>
<li class="element">
<div class="icon">
</div>
<div class="text">
Menu Item 2
</div>
</li>
<li class="element">
<div class="icon">
</div>
<div class="text">
Menu Item 2
</div>
</li>
</ul>
</div>
CSS
ul li {
list-style-type: none;
display: inline-block;
}
.icon {
background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
}
.text {
display: block;
}
I have the image link which displayed on personal website.I am trying to re-size the image by creating css style sheets on this image since i was copy the code direct and paste to the page and i need to displayproperly on mobile devices
code
<div id="TA_selfserveprop634" class="TA_selfserveprop">
<ul id="FkGjsTFbWr" class="TA_links aICFqBWnArX">
<li id="v65BTuNt" class="Id2gL5m3F1"><a target="_blank" href= "https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
</li></ul></div>
<script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=634&locationId=307103&lang=en_US&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=true&display_version=2"></script>
</div>
</div>
CSS
.TA_selfserveprop{
width:10%;
height:10%;
}
.TA_links aICFqBWnArX{
width:10%;
height:10%;
}
.Id2gL5m3F1{
width:10%;
height:10%;
}
When refresh my page this CSS styles does not have any effects on image..
Can anyone let me know on how to rearrange the coding style so that the Size of the image displayed properly on my website.
If you want to make a div responsive and full screen at any device, you should use width: 100% and height: 100%.
#CDSWIDSSP {
width: 100%!important;
height: 100%!important;
}
.TA_selfserveprop {
width: 100%!important;
height: 100%!important;
}
body,
html {
width: 100%;
height: 100%;
}
#CDSWIDSSP .widSSPData {
height: 100%;
}
#CDSWIDSSP .widSSPData {
overflow: auto!important
}
<div id="TA_selfserveprop634" class="TA_selfserveprop">
<ul id="FkGjsTFbWr" class="TA_links aICFqBWnArX">
<li id="v65BTuNt" class="Id2gL5m3F1">
<a target="_blank" href="https://www.tripadvisor.com/">
<img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor" />
</a>
</li>
</ul>
</div>
<script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=634&locationId=307103&lang=en_US&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=true&display_version=2"></script>
</div>
</div>
please note that for height: 100% you need to set this for body and html.
I have some images inside of an <li> that I am wanting to make a link. Only the bottom half of the image is clickable. I have tried different structures and looked into jquery solutions, but want to keep it pure css.
<div class="link">
<ul>
<li>
<a href="url">
<img src="image">
</a>
</li>
</ul>
</div>
.link {
white-space: nowrap;
text-align:center;
}
.link li {
max-width: 23.3%;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.link img {
max-width:100%;
}
Add display:inline-block to the a link and make it wrap around the images, with height:100% and width:100%.
I found a deeper problem. My header was overlapping that area.
I am having trouble creating a different image to appear when you place your curser over the original image. Heres my code without the rest of my listed buttons:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
</ul>
</nav>
Css:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover {background: url(../img/Home_crack.PNG)}
Any suggestions?
EDIT: Okay great suggestions, however when I hover over the "home button" now the stuff in the float tweeks out. Heres the code with the full float properties:
HTML:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
<li class="left">
<a href="www.google.com" class="menu">
<img src="img/Menu_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="about">
<img src="img/About_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="contact">
<img src="img/Contact_2.png"></a></li>
</ul>
</nav>
CSS:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover img{display:none}
.home:hover {background: url(../img/Home_crack.PNG);}
.right{float:right}
Basically i wanted to separate 4 buttons.... one in the left float and one in the right float, then on the hover, the buttons would change to a different image....With the new img{display:none} the left float rapidly flashes.
If you want a different img on :hover, you can add it via the :after psuedo element with a background-image.
This approach works well for dynamic img dimensions.
jsFiddle here - different img will be displayed on :hover of a.
a:hover:after {
content: "\A";
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
background: url('http://...');
top: 0px;
left: 0px;
}
You're changing the background of the <a> tag, which happens to be completely filled with the <img>. As such, the background is effectively invisible because the img is completely covering it. Try putting in a
.home:hover img { display: none }
rule as well to hide the img when you are hovered. That'll allow the background to "show".
Try adding the following line, this will hide the orriginal image when hovering the link:
.home:hover img {
display: none;
}
I think the other image is being showed, but the default image won't dissapear and is simply before the hover image.
Now, I do also recommend you to change the display style of the a element to block and give it a fixed size like so because the a element will get a size of 0 when hiding the image element:
.home {
display: block;
width: 100px;
height: 100px;
}
Finally I recommend you to have the default image as a background in the a element too, just to make sure it will appear exactly the same as the hover image. Now you are using an img element to show the default image, a different element to show the hover image. I recommend you to prevent this, and try to use one single element. Simply add this line to achieve this:
.home:hover {
background: url(../img/Home_2.png)
}
Hope this helps!
In addition to everyone else here saying to add this to the css:
.home:hover img { display: none }
You will also need to add a height and width to the a tag that you are putting a background on or the tag will have no content in it and it will not show at all.
.home:hover {
background: url(../img/Home_crack.PNG)
width: [enter the width of the bg image];
height: [enter the height of the bg image];
}
I am currently building a website and require my footer to stick to the bottom of the page - I am struggling somewhat - beneath is an example of my HTML and my CSS - I need the footer to stay at the bottom if the page is small but grow with the page if it gets bigger.
HTML:
<div class="container">
<div class="main">
<!-- some content -->
</div>
</div>
<div class="clear"></div>
<div id="footer">
<div class="container">
<div class="footer_nav">
<h4>Site Map</h4>
<ul>
<li>Home</li>
<li>Example Page 1</li>
<li>Example Page 2</li>
<li>Example Page 3</li>
<li>Contact</li>
</ul>
</div>
<div class="footer_copy">
<p>©<?php echo date('Y');?> Oliver Fletcher<br/>
All Rights Reserved</p>
<h4>Where I learnt...</h4>
<img src="images/accreditations.jpg" alt="Team Treehouse">
</div>
<div class="footer_social">
<img src="images/twitter.png" alt="Twitter">
<img src="images/facebook.png" alt="Facebook">
<img src="images/linkedin.png" alt="LinkedIn">
<img src="images/google.png" alt="Google">
<h4>Get in touch</h4>
oli#thewebshare.co.uk
</div>
</div>
<div class="clear"></div>
</div>
</body>
CSS
html{
height: 100%;
}
.container{
width: 980px;
margin: auto;
min-height: 100%;
_height: 100%;
}
.main{
margin-bottom: -183px;
position: relative;
}
#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: relative;
padding: 20px 0;
height: 183px;
}
#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: fixed;
bottom:0px;
padding: 20px 0;
height: 183px;
}
Use position:fixed and bottom:0px
One problem I see is the duplicate use of the container class. You should have the container for the content and the container for the footer using separate class names, or you could use the css selector
body > .container
Otherwise, I'd try to switch the css for the .main to have the css rules below. The height and padding needs to be a equal fixed size.
.main
padding-bottom: 100px;
.footer
height: 100px; // FIXED HEIGHT IS IMPORTANT
There's a lot of examples of this on the internet. I used this one and found that it worked well. Hope this helped.
What you want is assign CSS elements to .clear under your #container and above your #footer. You want it essentially push the footer down so it sticks to the bottom.
This tutorial helped me, the whole page is dedicated to a sticky footer.
Sticky Footer Tutorial
Obviously there are many methods to this. Following this tutorial will do the trick as well:
http://www.cssstickyfooter.com/using-sticky-footer-code.html