This question already has answers here:
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 6 years ago.
As the title says I have a <button> tag which has the CSS display: block; which should automatically make the element span the width of the container right? I have other buttons on the page but they are <a> tags but with the same css class as the <button> tag.
Website can be found here: http://www.cqwebdesign.co.uk/stirlinggrey/ as you can see each section as a button link at the bottom. However the one in quest is at the bottom of the page in the section with the title: "TO RECEIVE YOUR FREE GUIDE AND QUOTE"
Codepen version: http://codepen.io/anon/pen/zoOQQL
HTML:
This is a button
<button class="btn">This is a button</button>
CSS:
.btn {
font-size: 16px;
font-family: Open Sans;
color: #fff;
border: 0;
background: #000;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
line-height: 1.5;
display: block;
margin-bottom: 10px;
}
Thanks
If your issue is that the button needs to be centred, you need to do clear: both; in order to clear it from being affected from the floated elements above.
Block level elements take up the full width, but it does not affect the width of the element itself. Use the width: ; tag to change this.
Hope this helps :)
Related
This question already has an answer here:
What is the point of CSS collapsing margins?
(1 answer)
Closed 5 years ago.
The margin-bottom style is not working for <h1> tag as seen in the following image. The margin between heading and anchor tag buttons is not the same as specified for <h1>. What is the reason for the same?
Code:
<div>
<p>Hellos!</p>
<h1>I'm Evans Gene<br>What's Up!</h1>
About me
See Profile
</div>
.pBtn {
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
font-weight: 400;
margin: 20px 10px 0px 0px !important;
padding: 10px;
text-decoration: none;
}
The issue is the following:
Anchor tags can be used as buttons but <a> is different than <button>. And here, the orange highlighter depicting the margins of the <h1> sticks to the top of the text in <a>, instead of its top border, because it has border around it to make it look like a button, but semantically it is not a button.
To show the difference, just changing the <a> to <button> will shift downwards due to <margin-bottom> of <h1>.
Edit: From the comment of UncaughtTypeError User.
The issue is actually with the display type properties of the buttons in question, by default anchor tag elements (a) are computed as display: inline, this should be updated to display: inline-block to attribute block type properties to the elements (like margin values).
Inside of a parent element which is a paragraph, there is text and a couple of anchor links. These anchor links have their display set to inline-block and the visual result looks like this:
https://imgur.com/a/aLR3Q
Now if I would change the display to inline, the result looks like this:
https://imgur.com/a/TFof9
My question is, why does having the display of the anchors set to inline-block instead of just inline cause this, let's just say "soft line break" ? Because I thought that in terms of line-breaks, both of the displays act in the same way, and don't break at all.
Codepen link for the code: https://codepen.io/Kestvir/pen/zpvmYV
The code for the parent element:
.footer__copyright {
border-top: 1px solid #777;
padding-top: 2rem;
width: 80%;
float: right;
}
The code for the anchors:
footer__link:link, .footer__link:visited {
color: #f7f7f7;
background-color: #333;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
transition: all .2s;
}
The anchors are:
Jonas Schmedtmann
and
Advanced CSS and Sass
The line break happens because the the inline block cannot be split across multiple lines like a normal inline element. It is simply one entire "block unit" that is displayed inline. If that entire unit does not fit, then it will all be wrapped down to the next line.
This question already has answers here:
Is there any way to make the HTML underline thicker?
(5 answers)
Closed 8 years ago.
I have some bold text and would like to underline to appear bold as well.
HTML
<p>Home Page</p>
CSS
p {
text-decoration: underline;
}
jsFiddle
I tried several thing but they didn't work well.
You can use border-bottom with some padding:
display:inline-block;
border-bottom:solid 2px red;
padding-bottom:2px;
JSFiddle
Edit:
To achieve the effect you want, you can wrap the text with a <span>: JSFiddle
One possible approach is to use pseudo-element :after to mimic border. Benefit in this case is that it's easy to control "border" offset with margin-top. For example:
p {
display: inline-block;
}
p:after {
content: '';
display: block;
height: 2px;
background: red;
margin-top: -1px;
}
<p>Home Page</p>
I would like to create links that have icons included in the link.
For example, take a modified version of the chat/meta/faq links from Stack Overflow.
Here is one attempt.
HTML
<div id='clickable'>
<a href="#chat">
<div class='so-icon'></div>
chat
</a>
...
</div>
CSS
#clickable div {
display:inline-block;
vertical-align: middle;
}
.so-icon {
background-image:url(http://www.madhur.co.in/images/icon_stackoverflow3.png);
width: 30px;
height: 30px;
}
a {
text-decoration: none;
margin-right: 10px;
}
a:hover {
text-decoration: underline;
}
The one problem with this design is that the underline (hover over the link to see) appears on more than just the link text, but also on some whitespace before that.
A couple of solutions I can think of are:
Having two separate <a> elements, one for the icon, and one for the text. Violates DRY.
Not using a elements at all, but rather javascript, to implement the link functionality, while styling both the icon and text/span elements separately.
Isn't this something that should be possible to accomplish using CSS only, and not having to recourse to javascript?
Here we go, a solution with no additional markup or pseudo-elements, based on #sandeep's.
http://jsfiddle.net/z4Gs2/2/
like this??
http://jsfiddle.net/HBawG/
a p:hover {
text-decoration: underline;
}
I tried to edit your work
Hope i helped.
You can apply the background image directly to the tag. Something like this:
chat
meta
faq
with the CSS:
.so-icon {
background:url(http://www.madhur.co.in/images/icon_stackoverflow3.png) no-repeat left center;
width: 30px;
height: 30px;
}
a {
display: inline-block;
text-decoration: none;
padding-left: 35px;
margin:10px;
line-height: 30px;
}
a:hover {
text-decoration: underline;
}
You should remove the carriage return between your div (image) and your hyperlink text (to avoid undesired blank spaces)
Then you should modify the css of .so-icon class adding margin-right: 5px (for example)
You can find the modified version of your example here
http://jsfiddle.net/q2vE4/4/
I have a navigation layer, and I cannot seem to get the links to center within.
This is the stylesheet I am using
.Layer1 {
position:absolute;
width: 10%;
height: 95%;
list-style-position: outside;
list-style-type: disc;
background-color: #D2FFFF;
}
.Layer1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #0066FF;
text-decoration: none;
text-align: center;
}
Using standard a href links makes no difference, nor does specifying the style to be a href. I am wondering what I am missing.
Have you tried adding:
text-align: center;
to .Layer1 {}?
I am assuming by your style properties that you are applying them to a <ul> element. They have pretty wacky default padding/margin properties (a good reason to always use a reset). If you set the text-align: center; as suggested by Stuart AND then set padding: 0; it will be centered as you might expect. Just tested it on IE and FF.
Links are inline elements, so setting text-align center on them won't achieve anything. Try making the link a block with an assigned width and then applying text-align center.
Is layer 1 a div or a ul? if it is a div, text-align: center should work, as long as you haven't set display: block on your a tags.
to center a block element, you need to use margin: auto. to center an inline element, it is text-align: center. if that doesn't work, it has to do with your markup, or some other way that styles are getting overridden. I would highly suggest using firebug to see what is going on, I used to have these "wtf is going on" moments all the time with html, but since getting good with firebug they rarely last more then a few minutes.
The other thing is text-indent is for indenting the first line of a paragraph. use padding-left to add whitespace inside a block element, or margin-left to add it outside.