I am trying to create a button for my link which has the name on the button
and allows the user to click on it and go to the link.
Also I'm not sure why but my link "click-able range" seems to be extended.
Here is the Code:
<body>
<div id="container">
<div id="link">My Favorite Website</div>
</div>
</body>
Here is the CSS:
#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}
#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
Thanks!
Your link is inline element so you need to make it block or inline-block to add your styles so:
CSS
a {
display:inline-block;
}
Having a block element within an inline one is causing your problems.
By default, anchors are displayed inline. You need to display it a little differently, as inline-block:
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
display:inline-block;
}
JSFiddle
Remove div tag into a tag..
Demo
<div id="container">
My Favorite Website
</div>
just add this to #link in css
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
is an inline element. To make it behave like a block level element, you need to define its display property in CSS.
a {display:block;} or a {display:inline-block;}
and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.
Block level elements take the entire width of its container.
You need to redefine its bevavior.
link{display:inline-block;} or #link{display:inline;}
Related
Navbar component-
body {
margin-top: 0;
padding: 0;
font-size: 18px;
}
.container {
width: 95%;
margin: 0 auto;
}
header {
margin-top: 0;
background: blue;
padding: 1em;
}
a {
color: white;
text-decoration: none;
}
a.logo {
font-weight: bold;
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
display: flex;
}
li:hover {
filter: brightness(50%);
}
li a {
padding: 1em;
}
<header class="head">
<div class="container">
Home
<nav>
<ul>
<li> hello</li>
<li> whatsup</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<router-outlet></router-outlet>
</div>
I am using chrome I notice a thin white strip of space at the top and the left and the right of the header component containing the navbar. How can i remove this such that the white space is replaced by navbar color ie. blue.
I am new at css, and Would be good if an explanantion of the cause could be provided.
Thanks
body {
display: block;
margin: 8px;
margin-top: 8px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;
}
Added the css that displays on the inspect element for further clarity
I changed the margin-top:0 with the margin:0 for the body.
I hope it would work.
body {
margin: 0;
padding:0;
font-size: 18px;
}
Styling inline for body was one workaround that worked incase the browser doesnt recognize body css(assuming there wasnt any errors in the css ofcourse) and applies default styling.
From the update in your question where you show us the CSS being applied, as seen in the element inspector, we can see that your CSS is not being picked up by the browser at all.
Its difficult to tell why, but here are a few things that can help you fix it:
If it is in an external CSS file, check that the file is being included
Check for typos in the CSS for the body
Check for typos or misplaced } in any CSS before the body CSS - an error in preceding CSS could prevent the rest of the CSS in that file from being applied
Try adding that CSS directly into the HTML in a style tag to see if it works there... if so:
Try deleting the CSS and retyping it manually - Very occasionally I've seen issues where code copied from the internet or elsewhere can have hidden characters that cause problems.
I have some HTML generated from a text editor macro. The output looks something like this:
<div class='source-block'>
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
The only CSS I currently have applied to any of these elements so far is on the pre:
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
I am trying to place my copyBtn directly to the right of the <pre>. Because of the way this text editor macro works, I cannot put the button inside the src-container, which is "automagically" generated. However, I can move the button before or after the src-container div.
Can I achieve this with CSS? I've tried some stuff using float with :last-child and z-index but no success... Is this even possible given the macro limitation (i.e., I cannot easily place HTML inside this src-container class)?
Thanks!
You can use flexbox to position the flow of the child element within the source-block (parent). You can use this to put them next to each other and position the vertical position with align-items: center;
More about flexbox here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Can I use Flexbox (browser support):
https://caniuse.com/#feat=flexbox
/* changed CSS */
.source-block {
display: flex;
align-items: center;
align-content:flex-start;
}
/* provided CSS*/
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
/* misc styling */
.copyBtn {
margin-top: 2px;
}
<div class="source-block">
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
Set all the class named src-container.
<style>
.src-container {
dispay:inline;
}
</style>
Or, set the single button.
button[name="******"] {
position: absolute;
}
Easiest solution: move the button before the .src-container and float it.
.copyBtn {
float: right;
}
Second solution: don't need to move the button, just position it absolutely, adjusting the top position to where you see fit. Only requirement is making sure the element that contains all these (typically the body) should have position set (usually so, but not always).
.copyBtn {
position: absolute;
top: 10px; right: 10px;
}
There are more advanced techniques, like auto aligning the button, but as your layout is clearly known, this should do enough for your purpose.
A simple solution would be to use float: left on the src-container to make the button go to the right of it. You could also use float:right on the copyBtn. These make the block elements go next to each other.
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
.src-container {
float: left
}
<div class='source-block'>
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
I am trying to create the button by anchor tag without button tag and I am writing css for that but it's doesn't take margin-top.
My css code is:
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
margin-top:20px;
}
Above code define margin top can be work in below html code with button tags:
<button class="btn">+view more</button>
But margin top does not work in below html tags:-
+view more
I am really confused how and where this can be happened. I am googling from last 2 hr but I don't get the exact answer so I feel greatfull if anyone can solve this issue. Thank you!!!
Set your a element to be inline-block. This will add, among the capabilities of the block level elements, the top margin capability, yet keep it in line with the rest of your content:
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
margin-top:20px;
display: inline-block; /*this is it*/
}
<button class="btn">+view more</button>
+view more
a is not a block level element. Try to set display: block or display: inline-block to the a tag and it will work.
There are other HTML elements that are set to display: inline by default:
Inline_elements (MDN)
Use display: inherit and then give the margin-top, it'll work
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
display: inherit;
margin-top:20px;
}
add display:block or overflow:hidden for the button class.
I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
As you will notice, the button doesn't appear as inline. Why is this? How can I make this button inline, just like its sibling a?
Issue
By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?
Trying to set a button to display:inline seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect. <button> is not a replaced element.
In fact, the HTML5 specification, Section 10.5.2 The button element makes this requirement:
When the button binding applies to a button element, the element is
expected to render as an 'inline-block' box rendered as a button whose
contents are the contents of the element.
The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.
Add line-height:17px; to a, button and that should make them the same:
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
line-height: 17px;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
I'm trying to make a mobile version of my site. Here is the code for the "banner":
<center>
<div id="banner">
<img src="graphics/banner.png" />
</div>
</center>
And using this CSS:
#banner img a {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
When I try it like that it won't work. Everything that was written apparently gets ignored, but if I remove the a, it works normal. But I need it to do that just if the <img> is surrounded by <a>. Why it won't work?
#banner img a means "An a element contained in an img element contained in an element with the id *banner".
You want: #banner a img if you want to select the img element.
I think that you want to have a comma between the HTML elements you want to apply the style to. Try #banner img, a{
...
} instead.