Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I can only change the pictures using HTML and CSS. Clicking on the middle image, I want to see her big form, click the picture on right and see her big picture.
you can use image size:
img.resize {
width:500px; /* you can use % */
height:500px;
}
and for selected image you can use this link:
https://www.w3schools.com/cssref/css_selectors.asp
You can use element.active of Css
img:active {
width:200px;
height:220px;
}
You could use the CheckBox Hack for that.
When the checkbox is clicked, you increase the height and width of the image
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am trying to set my logo in between the menu. I am able to add logo but not able to make it work properly. My logo shows in a single line but all the other menu items show in a line. I want to show the whole menu in a line. Here is my website link: http://savourthemoment.fr/home
Thanks in advance for your help.
There are two modifications to be done.
1. The link which contains your image element is 1040 px wide. I changed it to:
a{
width: 104px;
}
However its better to reference it using an id or class rather than using the anchor tag as it will manipulate width of all the anchor tags.
The width of the image is set at 10 %. Change it to a 100% so that it occupies the entire width of its parent element.
img.savour-home-logo{
width:100%;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I was wondering if anyone knows why I can't click the "Get Directions" link at the top of the page.
http://progressivespineandsports.com/
There is a target of blank attribute on the link but I don't think that this has anything to do with the link not working.
add
.block.header {
position: relative;
z-index: 1;
}
to your css, for a quick fix.
The problem is that the #content div lays upon/above your header div.
Because div.block.header has a height of 0, all its children are float. So div#content stacks above the link, prevents you from clicking the header link.
Add overflow: hidden to div.block.header, or other clearfix tricks.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I tried to set the background-color to a div, but the top of the div remain uncolored.
I tried padding-top and padding-right, but it is not working.
I need some help,please.
Thank you.
*{
padding:0 ;margin:0;
}
Every browser has its own user agent style sheet. So you have to overide it before starting HTML/CSS.
Use the above code.
for detailed explanation refer here
I think that your problem is in the body.
Add this to your css file
body{
margin:0;
padding:0;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I need to have two cells equal in their height and they need to be one below the other.
the height of them should be change base on the windows size. (I know the windows size with js)
is there possible ? screenshot of the layout is attach.
quite easy. just like this: http://jsfiddle.net/wuo6yyme/
html, body {height:100%}
.container {height:100%}
.div1, .div2 {
height:49%;
width:100%;
background-color:red;
}
.div1 {margin-bottom:2%;}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?
Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">
You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.
You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.