I have shop on Prestashop 1.6. I created a third view in product list. With one thing, I can't handle by myself. When You move cursor over image (in third view), it display next to it with large size and this is ok. How can I move this image a little bit more to right. If I use margin-left or padding-left, image is flashes. I hope You know what I mean.
<div class="left image">
<a href="#">
<img class="replace-2x img-responsive" src="/1-home_default/faded-short-sleeve-tshirts.jpg" width="250" height="250"></a></div>
.left {
float: left;
margin-left: 10px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.image{
width:32px;
height:32px;
}
.image a:hover img{
display: block;
position: absolute;
z-index: 999;
}
Thanks for help.
Kind regards
Try using an invisible border on the image that loads.
border-left: 10px transparent;
This should give you the space you need, and stop the flashing that occurs when using margin. However the image will still show when hovering this border. It really depends what outcome you desire.
Related
I have an image that is also a link to another page, but the picture is way too big. I tried to make it 40% smaller by making the shirt-pic class's width 40% smaller, it didn't work.
<a class="shirt-pic" href="pages/original.html"><img src="images/original.png" alt="shirt"/></a>
.shirt-pic {
width:40%
height: auto;
}
Also, I have centered my logo image link at the top of the screen and its too big, I need to resize that too, but I am already using the width property to center it because w3 schools said to set it to 50% for it to work.
<span id="brand-logo"><img src="images/logo.png" alt="Logo"/></span>
#brand-logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
background-color: FFFFFF;
}
Should I just resize it in the html? Is there no way to do it with css?
Anchor tags have a default display type of inline, so you can't directly size them. You can target the image though:
.shirt-pic img {
width: 40%;
height: auto;
}
<a class="shirt-pic" href="pages/original.html"><img src="https://i.stack.imgur.com/1oG1X.jpg" alt="shirt"/></a>
<img class="shirt-pic" src="images/original.png" alt="shirt"/>
you need give class in image
.shirt-pic {
width:200px;
height: auto;
}
or
<a class="shirt-pic" href="pages/original.html"><img src="images/original.png" alt="shirt"/></a>
.shirt-pic img{
width:40%
height: auto;
}
I'm trying to align multiple images in a single div element which is <nav_bar>. These images will act as navigation links to the different webpages on the website. The problem is, initially I was able to position the (home) image using values I put into the css. However, when I put the second image (computericon), it went behind the (home) image. TO fix this, I gave them position: inline; property. Now I can't move either of the images to my liking. They're just stuck there. No amount of padding or margin adjustment is making them move. The fix to this is surely easy but I'm quite new to website design and development and so I cannot seem to get around this issue. Any sort of help would be greatly appreciated.
Thank You.
Here's the html code:
<div id = "nav_bar">
<img id= "home" src= "home.png" height= "50px" width= "70px">
<img id= "pc" src= "computericon.png" height= "50px" width= "70px">
</div>
And here's the CSS code:
#home {
left: 188px;
position: inline;
}
#MAIN_CONTENT_CONTAINER {
padding-top: 20px;
}
#nav_bar {
height: 60px;
background-color: #3c3c3c;
margin-left: 10px;
}
#home:hover {
background-color: #b4e1cf;
position: inline;
}
#computericon {
left: 80px;
position: inline;
}
Image is attached.The two icons are just stuck there.
Try:
position: relative;
float: left;
Add div with style display:block;clear:both right after these images (to clear floats).
Remove the left property.
There is no such thing as position: inline;.
You should use position: relative; but then the left coordinate will count from the box-side of the previous element.
Depending on what you need to achieve, it may be better to use
display: inline-block;
vertical-align: middle;
on them, use only margins or paddings and forget left and such.
I think that one of your problems is that you were calling your second image with the wrong id. I changed the id to what you were calling it as in the css and then added a class to both of the nav items. Is this what you were looking for?
#MAIN_CONTENT_CONTAINER {
padding-top: 20px;
}
#nav_bar {
height: 60px;
background-color: #3c3c3c;
margin-left: 10px;
}
.navItem {
margin-left: 20px;
margin-top: 5px
}
.navItem:hover {
background-color: #b4e1cf;
}
<div id = "nav_bar">
<img id="home" class="navItem" src= "home.png" height= "50px" width= "70px">
<img id="computericon" class="navItem" src= "computericon.png" height= "50px" width= "70px">
</div>
Hope this helped!
First off, it's always a good idea when you're asking something to include a JSFiddle instead of just pasting the whole code in the answer. I did it for you and took the liberty of changing the images to better show the result: https://jsfiddle.net/2fjg6g3r/
The right choice would be inline-block, what I used in the fiddle.
#nav_bar > img {
display: inline-block;
height: 100%;
width: auto;
margin-right: 5px;
}
I also noticed you're selecting a single element at a time, so I'd suggest taking a look at more CSS selectors to make your code cleaner and less repetitive.
I am putting together a simple website to catalog my DIY projects. I have a logo that I would like to have sit alone on the front page. Clicking this image would then link you to a home screen. I have the link working properly, and the image is centered nicely on the cover page (about 800px wide). The problem I am facing is that the clickable area for the link seems to extend past the right and left edges of my home screen.
Currently, the code for the image is as follows:
img.cent_img
{
margin: 0 auto;
display: block;
border: solid 3px #9966bb;
}
img.cent_img:hover
{
margin: 0 auto;
display: block;
border: solid 3px #997777;
}
<a href="home.html"><img src="../images/logo.png" class="cent_img" alt="XXX"
TITLE="YYY" width="800" height="330"/></a>
Does anyone know why the link is clickable beyond the edges of the image?
N.B. it is only clickable to the left/right. Above and below the image it functions as expected.
It happens because you center the image, not the link. The image creates margins on left and right side, which are within the <a> tag, making that area clickable.
Put your code into a <div>, and then center that <div>.
Example:
http://jsfiddle.net/eW9V9/
#logo {
width: 200px;
height: 100px;
margin: 0 auto;
display: block;
}
#logo img
{
border: solid 3px #9966bb;
}
#logo img:hover
{
border: solid 3px #997777;
}
<div id="logo">
<a href="home.html">
<img src="http://www.google.com/images/srpr/logo11w.png" class="cent_img" alt="XXX"
TITLE="YYY" width="200" height="100"/>
</a>
</div>
I'm trying to learn HTML/CSS and JavaScript+jQuery by using Codeacademy and working on my own little project to practice. However, I am stuck with a very simple problem:
I want a parent div to be displayed across the entire page. I can do this successfully (see fiddler). When I resize the browser screen, however; my parent div no longer fits across the entire page, which causes its right most child div to be displayed outside of the parent div (see fiddler). Basically, I want my parent div to always wrap its child divs, and to always be displayed across the entire screen.
Fiddler Links:
Link 1
Link 2
Relevant HTML:
<div id="topnav">
<a id="logo" class="navlink clearfix">DreamTeam</a>
<a id="logo" class="navlink clearfix">Strikers</a>
<a id="logo" class="navlink clearfix">Midfielders</a>
<a id="logo" class="navlink clearfix"><div class="navlink clearfix">Defenders</a>
<a id="logo" class="navlink clearfix">Goalkeepers</a>
</div>
Relevant CSS:
/* ID FOR PARENT DIV */
#topnav {
position: relative;
background-color: #EDEDED;
height: 70px;
width: 100%;
white-space: nowrap;
}
#logo {
width: 300px;
font-weight: bold;
margin-left: 5px;
font-size: 28px;
height: auto;
}
#lastlink {
border: none;
}
/* CLASS FOR CHILD DIVS */
.navlink {
position: relative;
font-family: Century Gothic;
height: auto;
font-size: 24px;
text-align: left;
line-height: 65px;
width: 175px;
border-right: 1px solid #bdbdbd;
}
Any help would be appreciated. I've gone through many Google searches and other stackoverflow posts, but nothing seems to work for me unless I completely missed an appropriate post. Using things like "overflow: hidden" or creating a wrapper div didn't really work for me. Thank you in advance for any suggestions. It would be great if anyone could point me to an appropriate post that I might have missed too.
How about get rid of the div tag inside a tag. Because you can use class with a tag.
Look at the following example provided by StackOverflow user starx
CSS
a.divlink {
display:block;
width:500px;
height:500px;
float:left;
}
HTML
<div>
<a class="divlink" href="yourlink.html">
The text or elements inside the elements
</a>
<a class="divlink" href="yourlink2.html">
Another text or element
</a>
</div>
Click here for more details
I managed to find a solution to my problem. The problem was not my invalid markup; it was actually the CSS for my #topnav ID. Here's how I changed that ID to get the result I wanted:
#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
The key changes are below the height property.
Right then, I've just been playing with my site, and adding a "new" banner onto some of the images, I've done this the simplest way I could think which is as follows..
<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /></a>
Now this works fine when viewed on a desktop as the images are already the right size for the site, but when I view it on a mobile device the .png image is scaled down, but not the background image..
I know I'm missing something from the css, but as I'm still learning, I don't know exactly what its missing, which is where you guys come in..
here is a little more of my html..
<div class="thumbnail">
<a href="#">
<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" />
</a>
</div>
And here is the mobile css in question..
.thumbnails
{
}
.thumbnails .thumbnail
{
border-top: solid 1px #e5e5e5;
padding-top: 2em;
margin-top: 2em;
}
.thumbnails .first
{
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.thumbnails .thumbnail img
{
margin-top: 5px;
height: 180px;
margin-right: 8px;
}
.thumbnails .thumbnail blockquote
{
margin-left: 143px;
}
So basically, I just need to know, how to make the background image scale down like the foreground image (the .png image)
I'm sure someone can help, so many thanks in advance.
EDIT: Here is a quick fiddle, so you can see whats going on... http://jsfiddle.net/bBMdp/
Thanks
Try this:
.thumbnails .thumbnail img{
margin-top: 5px;
height: 180px;
margin-right: 8px;
background-size: 100% 100%;
}
Or:
.thumbnails .thumbnail img{
margin-top: 5px;
height: 180px;
margin-right: 8px;
background-size: cover;
}
Source(s)
MDN - background-size - CSS
Use background-size:XXpx XXpx; first value is take width and second value is take height.
-webkit-background-style: cover;
-moz-background-style: cover;
-o-background-size: cover;
background-style: cover;
This will scale down the background so it's only ever big enough to cover the whole box.