While making some buttons I've run into this issue where the empty spaces/margins beside the buttons are clickable, which is what I'm trying to get rid of now. I've been looking over similar posts that go over this kind of thing but I've had no luck in applying those answers to my code, and unfortunately my messing around with it hasn't helped a whole lot either. This thing is kind of driving me crazy at this point and any bit of help would be greatly appreciated :')
Here's the code itself:
button {
background-color: #edca6e;
border: none;
color: #523e5c;
padding: 8px 60px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
font-family: 'Lucida Console';
margin: 30px;
cursor: pointer;
}
<center>
<img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
<!--portfolio, about, contact, misc.-->
<br><br><br>
<button>text</button>
<button>text</button>
<button style="margin:30px;">text</button>
<button>text</button>
</center>
If anything else needs to be clarified, please let me know :)
When u wrap your button with <a> tag, the whole component of button will be clickable (include the margin). Although it is not practicable to use <a> with <button>, still I have a solution that you can overcome your current issue.
To make the margin not clickable, you can apply the margin in <a> tag and move the display attribute from <button> style to <a> style, Kindly refer to following code:
CSS:
button {
background-color: #edca6e;
border: none;
color: #523e5c;
padding: 8px 60px;
text-align: center;
text-decoration: none;
font-size: 30px;
font-family: 'Lucida Console';
cursor: pointer;
}
a{
display: inline-block;
margin: 30px;
}
HTML:
<center>
<img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
<!--portfolio, about, contact, misc.-->
<br><br><br>
<button>text</button>
<button>text</button>
<button >text</button>
<button>text</button>
</center>
Margin should be moved to a instead of button. As of now, button has some margin, which makes a has some redundant space.
And yeah, you shouldn't be using button inside a. Both are clickable.
Related
I am trying to align an icon right next to a text. I have used the :before tag but it doesn't seem to work? Is it because I am using google icons? Below is the code I want to replicate
.review {
width: 317px;
height: 25%;
}
.review h2 {
color: white;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 23px;
margin-left: 15px;
}
.review p {
color: white;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 16px;
text-transform: capitalize;
transition: 0.3s;
/* margin: 20px; */
}
<div class="review">
<h2>Reviews</h2>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p class="rec">Most Recent</p>
<p>Most Relevant</p>
</div>
Please google first before asking a question on SO. Just by googling your problem, I found your answer in the first link. It is another question on SO. Click here.
Just put both items inside a <div> element and use the css class display: inline-block as you can see in the example.
<div>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p style="display: inline-block" class="rec">Most Recent</p>
</div>
Sorry, Your Question is not very clear, but the use of google icons should not be an issue. My advice would be to use css grid for layout issues (since the code that you have provided is html and css).
Here is a helpful link:
https://www.w3schools.com/css/css_grid.asp
grid-column should solve your problem: have 2 columns, the first one for your image and the second one for your text. You can additionally add grid-row for better layouts
I think you want icon with links.
Put it inside the paragraph tag.
I am a new user working on a website. I have taken several udemy classes and made one website that went well. I am now looking to make a second and I am running into an odd problem: some changes to the CSS header tag have an effect on the header in my index page while other changes do not. For example changing the background color does have an effect, while anything to do with flexbox or padding simply does not cause any change. I am writing this after several sittings and going back to my previous website, hoping someone can help me out. Here is the snippet of my header and the snippet from the css. The code works in the snippet here, but not when I preview! I am using dreamweaver.
header {
display: flex;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
justify-content: space-between;
}
.navButton {
border-style: solid;
border-width: 3px;
border-color: white;
color: white;
font-family: 'Source Sans Pro', sans-serif;
padding: 11px 25px;
display: inline-block;
margin-top: 10px;
border-radius: 2px;
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
position: relative;
}
<header>
<div class="logo">
<img src="Images/smaller GGR Logo.png" width="203" height="114" alt="Gas Guzzler Reviews Logo"/>
</div>
<nav>
<div class="navButton">About Us</div>
<div class="navButton">Contact Us</div>
</nav>
</header>
My main goal is to have the logo on the left and nav buttons on the right, any help is appreciated!
Temani Afif helpfully pointed out the code was working in the snippet. I realised I made an edit from when it did not work in the snippet when I first tested it. I had a CSS Reset after my regular CSS sheet screwing everything up. Thank you!
Mmm, you should check the CSS specificity in your code because your code snippet is working just fine to me.
Here is the changes I made to test it.
CSS changes:
.logo {
margin-left: 30px;
}
.contact__button {
margin-right: 30px;
}
HTML changes:
<div class="navButton contact__button">Contact Us</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 have this following html codes.
<div class="box extend">
<h1>CLOUD SERVICES FOR SMALL BUSINESS</h1>
<figure><img src="myimg.png" /></figure>
<p>
<strong>Hosted Exchange Server</strong>
<strong>Cloud Server Solutions</strong>
<strong>Backup Servicesd Server Solution</strong>
</p>
</div>
and the css of the above html (updated css)
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
}
now the problem is the strong element has spaces between each other as supposedly it should not (base on my css set up), please refer to the image below
Is there anyway I could get raid or remove that space gap between each others element? Any recommendations, suggestions and ideas, I would love to hear! thank you in advance.
It seems making them display block kills the thin line
http://jsfiddle.net/5qqLR/2/
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
display: block;
}
After further research setting the parent line-height to 1 will solve this issue
http://jsfiddle.net/5qqLR/3/
.box p {
line-height: 1;
}
Take a look at here http://www.sitepoint.com/forums/showthread.php?824112-space-below-inline-elements-inside-a-block-element
Add to strong HTML tag:
white-space: break-spaces;