So, I'm pretty newbie and don't really know how to do this.
I am trying to create a main menu with a few buttons. I used center, padding and margin. (Not really sure if matters). I just noticed that the button is center (obviously), but the clickable thing is on the whole line of the button:
(Don't look at the text, it's not in English). I can click that whole thing until the button. Even after, the whole line before and after the button is clickable.
How can I fix it?
.button {
border: solid;
border-color: darkblue;
font-family: sans-serif;
text-align: center;
text-decoration: none;
font-family: sans-serif;
display: inline-block;
font-size: 15px;
margin: 1px 1px;
border-radius: 10px;
background-color: rgba(90, 203, 255, 0.979);
border: none;
color: black;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
That's the button parameters and that's the button itself:
<a href="keks">
<center><button class="button">Кекс</button>
</center>
</a></tr>
The reason the whole line is clickable is that you have wrapped your <button> inside another clickable element <a href="keks">.
That is not allowed. Interactive elements (that have a click default behaviour) cannot contain other interactive elements.
Also note that HTML does not have an element <center>. The old center element has been marked obsolete and removed from the specification decades ago.
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
}
.button {
border: solid;
border-color: darkblue;
font-family: sans-serif;
text-align: center;
text-decoration: none;
font-family: sans-serif;
font-size: 15px;
margin: 1px 1px;
border-radius: 10px;
background-color: rgba(90, 203, 255, 0.979);
border: none;
color: black;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
</style>
</head>
<body>
Kekc
<!--OR-->
<button class="button" onclick="window.location.href=('kekc')">Кекс</button>
</body>
</html>
Just remove the center tag inside the anchor tag and place it outside the anchor tag.
<center>
<a href="keks" class="button">
Кекс
</a>
</center>
Since you are using the center tag inside the anchor tag is conisdering the whole area to be a clickable.
Related
My CSS stylesheet loads almost all the contents but it is not loading my CSS for button. It's strange because all other things are working fine. I use opera. I have posted the CSS below which is not loading, also how I load the CSS.
<link rel="stylesheet" type="text/css" href="/style.css">
.button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
JS fiddle https://jsfiddle.net/hpsj2e0L/
It works fine in the fiddle but not in my site.
The problem with your code is that you are writing CSS inside your HTML file without wrapping it into a <style> tag. Like this:
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also, you don't need both selectors if you are applying the style to a <button> you can just use button.
.button is only necessary if you are going to apply it as a class like in <div class="button"></div>
Check other style files to button class. Try give the different class name or load your style file later than others.
make sure you put your css in style tag or in css file
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also check if you have .button class in your html or maybe its button tag
I might be missing something basic. It's so simple:
.items {
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
jsFiddle
Moving the class from the anchor to the div will make it (the border) disappear all together.
Well, your <a class="lamgswitch"> does not have any content... The float: left; makes the <div class="items">float out of it...
So try to remove it, and replace it with display: inline-block;, as the div is a block component, and you placed it inside an inline component (a)...
.items {
display: inline-block;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
Place the <a> tag inside the <div> rather than the other way around.
.items{
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px ;
}
.langswitch{
border: 3px solid #86D1DA;
border-radius: 5px;
}
<div class="items">Italiano</div>
Hope this helps.
Technically, placing the <a> inside the <div> is the semantically correct way to do this as described in the other answer.
If you really HAVE to do it this way, you need to change the display of the <a> tag from inline to inline-block.
I styled this button with CSS and the style doesn't seem to be applied to the button. Links to websites. http://randomstufffrommybrain.neocities.org/TheRandomPage.html
The HTML:
<head>
<link rel="stylesheet" href=CSSFORTherandompage.css>
</head>
<div id="Button5">
<button><a href=Newsitetestcode/Newwebsitemainpage.html>New website</a>
</button>
</div>
The CSS:
#Button5 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
The style does not appear on button because you have added style on the div#Button5 but not button.
Apply this change in css
button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
JSFIDDLE
All <link> tags should go inside the <head>
Make sure you have your external CSS in the same folder as your HTML, as indicated in your link tag. If it is in another folder, give the appropriate path.
For further debugging, you can employ some JS:
function sheetLoaded() {
// Do something interesting; the sheet has been loaded
}
function sheetError() {
alert("An error occurred loading the stylesheet!");
}
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
You need to put the link tag in the head section of your HTML file.
Note: This element goes only in the head section, but it can appear any number of times.
Reference
I'm making a website and want to have a link inside a div that changes colour when hovered over, however I've come across a problem. Pre hover, I want a border around the div the same colour as the text in the link inside. The background colour should be white. Then, upon hover, I want the background colour to change to the colour of the text and border, and the text to become white. Because I have padding inbetween the link and div border, it doesn't quite work as intended. Here is the source html/css:
HTML:
<div id="home">
HOME
</div>
CSS:
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {
background: #ffffff;
color: #00a651;
text-align: center;
}
#home a:hover {
background: #00a651;
color: #ffffff;
}
When anywhere within the div is hovered over other than the link, nothing happens, and when you hover over the link the padding remains white. What do I need to do to make it so the colour change happens when anywhere on the div is hovered over, and the whole divs colour changes? Thanks, Brandon :)
#home {
font-size: 30px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {background: #ffffff;
border: 4px solid #00a651;
padding: 10px 20px 10px 20px;
color: #00a651;
text-align: center;
}
#home a:hover {background: #00a651;
color: #ffffff;
}
<div id="home">
HOME
</div>
You need to add the hover event to the div and the anchor:
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {
background: #ffffff;
color: #00a651;
text-align: center;
}
#home:hover {
background: #00a651;
color: #ffffff;
}
#home:hover a {
background: #00a651;
color: #ffffff;
}
<div id="home">
HOME
</div>
I recommend using the jQuery library, if you know how to use it:
Link your jQuery download to your main html file or use a CDN.
In your JavaScript file add a hover event on your link and use the css effect to to change the color of the div once you hover over the link. Then add another css effect so the link changes color as the div does. Like this:
$(document).ready(function(){
$('a').hover(function(){
$('#home').css("background-color","#00a651");
$('a').css("color", "chooseacolor");
});
});
I am not entirely sure what you are asking of, so this is the best answer I can give!
I don't think using :hover on DIV elements is a good idea. As I know, this practice is not fully supported on all browsers of all versions. Why not use some JS?
But, anyway, if you need all area (including padding) in the DIV become clickable - you should rather make it "display:block" in CSS.
$(document).ready(function() {
$('#home').hover(function() {
$(this).css('background-color', '#00a651').find('a').css({
backgroundColor: '#00a651',
color: '#FFFFFF'});
}, function() {
$(this).css('background-color', '#FFFFFF').find('a').css({
backgroundColor: '#ffffff',
color: '#00a651'});
});
});
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {background: #ffffff;
color: #00a651;
text-align: center;
}
/* There is no need to use :hover anymore if using a script */
<!-- this goes to the HEAD section if not arleady there -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="home">
HOME
</div>
In a website I'm developing, I am making a menu that appears when one hovers over a navigation menu item. However, only half of the hover menu appears.
HTML:
<div class= "navn">
<ul>
<li>
<a class="btn" href="about_contact.html">
About Us
<div class="tooltip">
Contact Info, and <b>stuff</b> <!--the txt inside the hover thing-->
</div>
</a>
</li>
</ul>
</div>
CSS:
.btn {
/* irrelevant: some styling to make the anchor tags look nicer */
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
text-align: center;
white-space: nowrap;
margin: auto;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
font-family: 'Lucida Sans', 'Arial', 'sans-serif';
}
.btn:hover .tooltip {
display: block;
}
.tooltip {
background-color: white;
color: black;
position: absolute;
display: none;
border: 1px solid black;
}
What I see:
Why is this happening? What can I do to stop this?
Sorry for no JSFiddle
Edit: I know I can use a standard tooltip on the <a> tag, but I want to have formatted text in the tooltip.
Maybe Your <div class="navn"> has a not enough height. Try to extend that and see what happened. Or set z-index on tooltip.
Set ul{ height: 60px; //for example}. I think it help you.