Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
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.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I'm total CSS/HTML noob.
I would really appreciate if you help me out.
I need to fix my button:
decrease activation field (hover) to the actual size of the button (without shadow)
when I hover cursor over button, how to get rid of 1st image left overs?
THANK YOU!
jsfiddle link:
http://jsfiddle.net/cRqhT/125/
HTML:
<html>
<body>
<div>
<a id="button" href="http://mysite.com"</a>
</div>
</body>
</html>
CSS:
div {
width: 820px;
height: 820px;
background: url('https://gator1174.hostgator.com/~mskparik/facebook/thx.jpg')
}
#button{
display: block;
width: 204px;
height: 116px;
background: url(https://gator1174.hostgator.com/~mskparik/facebook/111.png) no-repeat top left;
position: absolute;
top: 90%;
left:10%;
}
#button:hover {
background: url(https://gator1174.hostgator.com/~mskparik/facebook/222.png) no-repeat top;
}
I simply added a corner bracket where appropriate, and it seems to have fixed both problems. See JSFiddle here.
<html>
<body>
<div>
<a id="button" href="http://mysite.com"></a> <!--Notice extra corner bracket-->
</div>
</body>
</html>
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 1 year ago.
Improve this question
This is my first time using html.
Im trying to replicate the look in this image :
https://prnt.sc/1152ms5
This is what im stuck on:
https://prnt.sc/1152n3s
Ive used float right, and float left to get my image to be to the right of my paragraph, but i cant get it to start at the top of the page. (if that makes sense)
I think my issue is the img colliding with some sort of border from ("Bem vindo")
Here is my html and css mess:
https://prnt.sc/1152non
https://prnt.sc/1152o40
You can add style to your section and display it in block way, the same for your image.
<section style="padding: 2rem; background-color: grey; display: block; float: left; height: 500px; color: white">
<h1>SOME CONTENT</h1>
</section>
<img style="display: block; float: left; width: 50%;" src="https://cdn.business2community.com/wp-content/uploads/2013/09/best-press-release-example.jpg" alt=""/>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
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.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
With the example HTML / CSS below, I cannot work out why this doesnt display the expected results in any browser (hosted in Visual Studio), however works perfectly when done as a JSFiddle. I'm probably missing something pretty obvious, but can anyone point out what that might be?
HTML:
<body>
<div class="wrapper">
<div class="navbar">
<p>Random white text which should appear in a grey banner at the top of the page.</p>
</div>
</div>
</body>
CSS:
body {
width: 100%;
margin: 0;
}
.wrapper {
display: table;
width: 100%;
}
.navbar {
width: 100%;
height: 200px;
background-color: #292929;
color: #ffffff;
text-align: center;
vertical-align: middle;
display: table-cell;
}
EDIT: I have tried this in various different browsers, including Firefox, Direfox Dev Edition, Edge, and IE, all with the same results (just plan black text on white screen).
Make sure to link your css file to your html file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
i've been trying to change my input submit button background's image, i followed many tutorials but none of them helped. The button still doesn't appear. Here is the snippet of code.
<input type="submit" name="submit" value="" alt="submit">
input[type="submit"] {
background: url(../icons/submit_icon.png) no-repeat 0 0;
display: block;
height: 25px;
text-indent: -9999px;
width: 28px;
border: 0;
}
I tried your code and it worked, here is the fiddle :
https://jsfiddle.net/268rLw9v/1/
I think your problem is because of the size of the image (or of the input), look in my example, I changed the width and height of the input because the image I use is bigger.
width: 250px; height: 280px; // I used that because of the image size
Be sure that your image have an appropriate size.
You can also try these css properties to see what happens :
background-size: cover;
background-position: center;
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Hi there I was wondering how I would make an image appear when I hover over another one.
I have some code but it just isn't working I think it should be something like this;
CSS-
a bikeq
{
display: none;
}
a:hover bikeq {
display: block;
}
HTML-
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
I fell like I am doing something wrong with the html part but I don't know what else to do.
Any help will be great thanks,
Zack
Keeping the HTML you have provided is not possible, as the elements are sibling. You can "fake" this effect with the following code:
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
.bikeq {
display: none;
}
.r_img:hover .bikeq
{
display: block;
}
When hovering the container of the two images, the image with .bikeq class will show up..
Try this:
html
<section class="r_img">
<a href="" class=”bike_img”></a>
</section>
css
a.bike_img { width: ?px; height: ?px; display: inline-block; background: url("img/bike.png"); }
a.bike_img:hover { background: url("img/bikeq_3.png"); }
Where ?px are the width and height of your image. You will also need to make sure that your image urls are corrrect, I just had a guess.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to move my right sidebar over to the right more. Just like how my left sidebar is. My website is marikastravels.com
Any help would be appreciated!
in your CSS change width to
.yui-t2 .sidebar {
width: 18.5%;
float: right;
}
Also, this will give more room for your center div which you can increase too e.g.
.yui-t2 .main-content {
width: 78.5%;
float: left;
}
I tested the above code in Chrome.
Both works.
<ul class="xoxo" style="float: right;">
<li>...</li>
<li>...</li>
...
</ul>
or
<style type="text/css">
.xoxo{
float:right;
}
</style>
#right-primary {
float: right;
}
I suggest bootstrap for all the other problems