I have a few quick links buttons on my homepage, and when I put this code in:
<button class="button leftbuttons"><a href="https://portal.paychekplus.com/">Pay Card</a></button>
it works fine but I get an error saying the <a> tag cannot be nested inside <button>. What do I do in place of this?
If they are links then use links not buttons 
You can style links to look like buttons but that may confuse the user.
If they are buttons then that suggests an action like submitting a form not following a link.
Donât use buttons when you want links and Donât use links when you want buttons.
SoooâŚthey can be made to look like buttons, but I shouldnât do that? Even though thatâs what I need? Surely there must be a good viable option for making a button that takes you to another page or location on that page.
For instance, the HTML & CSS button at the top of this page that links me to that portion of the forumsâŚ
It all depends on the context and if this is part of a navigation that clearly suggests navigation then you can style anchors to look like buttons if you want.
If you have a single button on its own then the user wonât know if its a link or is going to submit a form or perform some other action. Once you make your users think then you are lost
If you want to ignore the semantics then just style the anchor to look like a button. CSS doesnât care what an element looks like,
So I made these into links instead of buttons and now Iâm trying to get them back to being stylized how I had them but Iâm running into a problem. I canât seem to change the height of the div. I adjust it and nothing happens. When I changed them to links they got way smaller and I need the div to be larger so there is some room between them and the surrounding items.
Here is a codepen. Itâs a little messed up, I was having some issues with the Javascript for some reason. But the important part is there. The pink div is the one iâm having issues with.
See the Pen JOyRry by Ethan Forbes (@ethancodes) on CodePen.
This is the modified code that I tried.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="/css/LayoutStyleSheet.css" rel="stylesheet"/>
<title>HomePage - My ASP.NET Application</title>
</head>
<body id="layoutBody">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
</div>
<ul id="navposition" class="nav navbar-nav">
<li class="individualbtnposition"><a href="/">Home</a></li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/OurCompany">Our History</a></li>
<li><a href="/OurCompany/Facilities">Facilities</a></li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
<li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
<li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
<li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
<li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li><a href="/FormsHandlers/FAQ">FAQ</a></li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">ISS Support</a></li>
<li><a href="/FormsHandlers/OnlineForms/purchasing-services-form">Purchasing Ticket</a></li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<link type="text/css" href="/css/HomePageStyleSheet.css" rel="stylesheet" />
<div id="homepagemain">
<div>
<a class="button leftbuttons">My Paystub</a>
<a class="button leftbuttons"href="https://portal.paychekplus.com/" target="_blank">Pay Card</a>
<a class="button" href="/Home/NewsLetter">Monthly Newsletter</a>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div>
<div id="corporateeventsimage1" class="item">
<img style="margin-bottom: 0.5em; margin-right: 5%; width: 600px; height:350px" src="//images.contentful.com/6yl0vo95lmum/6rCGntQ9jOWCOYWsSMgAGI/f7167dc317093de9d6611bb81f1746fb/ESOP.png" alt="" />
</div>
<div id="corporateeventsimage2" class="item">
<img style=" margin-bottom: 0.5em; margin-right: 5%; width: 600px; height: 350px" src="//images.contentful.com/6yl0vo95lmum/5gvh2SQdr206SOsSiAYaSs/82803f28ba31fac6989051937a778faf/ESOP2.png" alt="" />
</div>
</div>
</div>
<div class="item">
<a href="https://www.asbaces.com/newaces/(S(ujn24e2mcpp1kzkc4ivg0kzh))/storefront.aspx">
<div>
<div id="corporatestoreimage1" class="item">
<img style=" margin-bottom: 0.5em; margin-right: 5%; width: 600px; height: 350px" src="//images.contentful.com/6yl0vo95lmum/14SKiCgkGUEUuge0iksg8K/d1fae222eecb58133a6db9d512baf3cc/Store1.png" alt="" />
</div>
<div id="corporatestoreimage2" class="item">
<img style=" margin-bottom: 0.5em; margin-right: 5%; width: 600px; height: 350px" src="//images.contentful.com/6yl0vo95lmum/28U0FE2u0MKs4UmYMCWs4S/c498e7bfaf763d23cba3d0a4afc392d7/Store2.png" alt="" />
</div>
</div>
</a>
</div>
<div class="item">
<a href="/Home/NewsLetter">
<div>
<div id="corporatenewsimage1" class="item">
<img style="margin-bottom: 0.5em; margin-right: 5%; width: 600px; height:350px" src="//images.contentful.com/6yl0vo95lmum/5v9ERXN1q86iueOGQKySia/70f073f8b2878522029f3e7b934879f6/news.png" alt="" />
</div>
<div id="corporatenewsimage2" class="item">
<img style=" margin-bottom: 0.5em; margin-right: 5%; width: 600px; height: 350px" src="//images.contentful.com/6yl0vo95lmum/4A1MxhIOVaqQI60KIIiGsI/a25dc7b6ee0e7b336d16836e45fb00c9/news2.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="eventsdiv">
<h3 id="eventstitle">Upcoming Events</h3>
<div id="eventstext">
<ul>
<li>
The Day the Earth Stood Still - 11/18/2017 12:00:00 AM - Yes. That day is this day. Prepare.
</li>
<li>
Teletraan 1 will be landing - 11/22/2017 12:00:00 AM - Teletraan 1 will be landing on this day.
</li>
<li>
Rick's Birthday! - 11/23/2017 12:00:00 AM - Happy Birthday Rick Sanchez!
</li>
<li>
Nuclear Fallout - 11/24/2017 12:00:00 AM - Welp. Guess this is the end.
</li>
</ul>
</div>
</div>
<hr/>
<footer>
<p style="float: right; margin-right: 10px;">© 2017 - SC2 MyLink</p>
<div style="margin-left: 215px;">
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0] = "http://www.rssweather.com/zipcode/61601/rss.php";
rssfeed_frame_width = "270";
rssfeed_frame_height = "200";
rssfeed_scroll = "on";
rssfeed_scroll_step = "6";
rssfeed_scroll_bar = "off";
rssfeed_target = "_blank";
rssfeed_font_size = "12";
rssfeed_font_face = "";
rssfeed_border = "on";
rssfeed_css_url = "https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title = "on";
rssfeed_title_name = "Peoria, IL Weather";
rssfeed_title_bgcolor = "#3366ff";
rssfeed_title_color = "#fff";
rssfeed_title_bgimage = "";
rssfeed_footer = "on";
rssfeed_footer_name = "http://www.rssweather.com/";
rssfeed_footer_bgcolor = "#fff";
rssfeed_footer_color = "#fff";
rssfeed_footer_bgimage = "";
rssfeed_item_title_length = "50";
rssfeed_item_title_color = "#fff";
rssfeed_item_bgcolor = "#fff";
rssfeed_item_bgimage = "";
rssfeed_item_border_bottom = "on";
rssfeed_item_source_icon = "off";
rssfeed_item_date = "off";
rssfeed_item_description = "on";
rssfeed_item_description_length = "120";
rssfeed_item_description_color = "#fff";
rssfeed_item_description_link_color = "#fff";
rssfeed_item_description_tag = "on";
rssfeed_no_items = "0";
rssfeed_cache = "b8c8039956605711f322fb17a47ffbaf";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0] = "http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=CAT";
rssfeed_url[1] = "http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=KMTUY";
rssfeed_url[2] = "http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=MMTOF";
rssfeed_url[3] = "http://www.nasdaq.com/aspxcontent/NasdaqRSS.aspx?data=quotes&symbol=DE";
rssfeed_frame_width = "280";
rssfeed_frame_height = "200";
rssfeed_scroll = "on";
rssfeed_scroll_step = "6";
rssfeed_scroll_bar = "off";
rssfeed_target = "_blank";
rssfeed_font_size = "12";
rssfeed_font_face = "";
rssfeed_border = "on";
rssfeed_css_url = "https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title = "on";
rssfeed_title_name = "Stock Prices";
rssfeed_title_bgcolor = "#3366ff";
rssfeed_title_color = "#fff";
rssfeed_title_bgimage = "";
rssfeed_footer = "off";
rssfeed_footer_name = "rss feed";
rssfeed_footer_bgcolor = "#fff";
rssfeed_footer_color = "#333";
rssfeed_footer_bgimage = "";
rssfeed_item_title_length = "50";
rssfeed_item_title_color = "#666";
rssfeed_item_bgcolor = "#fff";
rssfeed_item_bgimage = "";
rssfeed_item_border_bottom = "on";
rssfeed_item_source_icon = "off";
rssfeed_item_date = "off";
rssfeed_item_description = "on";
rssfeed_item_description_length = "120";
rssfeed_item_description_color = "#666";
rssfeed_item_description_link_color = "#333";
rssfeed_item_description_tag = "on";
rssfeed_no_items = "0";
rssfeed_cache = "55ca4c5d06e1ebc6dafb55c1177c93b1";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0] = "http://www.pjstar.com/news?template=rss&mime=xml";
rssfeed_frame_width = "280";
rssfeed_frame_height = "200";
rssfeed_scroll = "on";
rssfeed_scroll_step = "6";
rssfeed_scroll_bar = "off";
rssfeed_target = "_blank";
rssfeed_font_size = "12";
rssfeed_font_face = "";
rssfeed_border = "on";
rssfeed_css_url = "https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title = "on";
rssfeed_title_name = "Local News";
rssfeed_title_bgcolor = "#3366ff";
rssfeed_title_color = "#fff";
rssfeed_title_bgimage = "";
rssfeed_footer = "on";
rssfeed_footer_name = "http://www.pjstar.com/";
rssfeed_footer_bgcolor = "#fff";
rssfeed_footer_color = "#333";
rssfeed_footer_bgimage = "";
rssfeed_item_title_length = "50";
rssfeed_item_title_color = "#666";
rssfeed_item_bgcolor = "#fff";
rssfeed_item_bgimage = "";
rssfeed_item_border_bottom = "on";
rssfeed_item_source_icon = "off";
rssfeed_item_date = "off";
rssfeed_item_description = "on";
rssfeed_item_description_length = "120";
rssfeed_item_description_color = "#666";
rssfeed_item_description_link_color = "#333";
rssfeed_item_description_tag = "on";
rssfeed_no_items = "0";
rssfeed_cache = "2d81be508f9c768cdf708edfbdde744b";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0] = "https://www.cbsnews.com/latest/rss/main";
rssfeed_frame_width = "280";
rssfeed_frame_height = "200";
rssfeed_scroll = "on";
rssfeed_scroll_step = "6";
rssfeed_scroll_bar = "off";
rssfeed_target = "_blank";
rssfeed_font_size = "12";
rssfeed_font_face = "";
rssfeed_border = "on";
rssfeed_css_url = "https://feed.surfing-waves.com/css/style3a.css";
rssfeed_title = "on";
rssfeed_title_name = "U.S. News";
rssfeed_title_bgcolor = "#3366ff";
rssfeed_title_color = "#fff";
rssfeed_title_bgimage = "";
rssfeed_footer = "on";
rssfeed_footer_name = "https://www.cbsnews.com/";
rssfeed_footer_bgcolor = "#fff";
rssfeed_footer_color = "#333";
rssfeed_footer_bgimage = "";
rssfeed_item_title_length = "50";
rssfeed_item_title_color = "#666";
rssfeed_item_bgcolor = "#fff";
rssfeed_item_bgimage = "";
rssfeed_item_border_bottom = "on";
rssfeed_item_source_icon = "off";
rssfeed_item_date = "off";
rssfeed_item_description = "on";
rssfeed_item_description_length = "120";
rssfeed_item_description_color = "#666";
rssfeed_item_description_link_color = "#333";
rssfeed_item_description_tag = "on";
rssfeed_no_items = "0";
rssfeed_cache = "cb56ca3efc16103b3d691e5c24f6dfbd";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- The link below helps keep this service FREE, and helps other people find the SW widget. Please be cool and keep it! Thanks. -->
<div class="rssfeeds"><a href="http://www.surfing-waves.com/feed.htm" target="_blank" style="position: relative; color: #ccc; font-size: 10px">feedwidget </a> <a href="http://www.surfing-waves.com" target="_blank" style="color: #ccc; font-size: 10px">Surfing Waves</a>
</div>
<!-- end sw-rss-feed code -->
</div>
</footer>
<script type="text/javascript" src="/lib\jquery\dist\jquery.min.js"></script>
<script type="text/javascript" src="/lib/moment/locale/moment.js"></script>
<script type="text/javascript" src="/lib\bootstrap\dist\js\bootstrap.min.js"></script>
<script type="text/javascript" src="/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
format: 'MM/dd/YYYY',
inline: true,
sideBySide: true
});
});
</script>
<script type="text/javascript">
function active() {
var search = document.getElementById('search');
if (search.value == "") {
search.value = "";
search.placeholder = "Search...";
}
}
function inactive() {
var search = document.getElementById('search');
if (search.value == "Search...") {
search.value = "Search...";
search.placeholder = "";
}
}
</script>
<script>
$(document).ready(function() {
$('.dropdown-submenu>a').on("click",
function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
CSS:
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #95bfe6;
color: #002d62;
padding: 2px 6px 2px 6px;
border-style: solid;
border-color: #002d62;
border-radius: 50%;
font-size: larger;
border-width: 1px;
margin-top: 1%;
margin-bottom: 5%;
padding-top: 5px;
padding-bottom: 5px;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.leftbuttons {
margin-right: 7%;
}
Anchors are inline elements by default and you canât apply dimensions to inline elements.
Buttons are basically inline-block elements so you need to set tho display of the anchor to inline-block (display:inline-block) and then vertical padding and margins will take effect properly along width dimensions.
I mentioned in your other post about your use of percentages with vertical margins and in most cases you will never have a use for them. Percentages for margins and padding refer to the width of the containing block even for top and bottom which means the space will change depending on how wide the page is. You wonât want that so use px for vertical margins when you want a consistent space (you can also use rem or em but as em is based on the parentâs font-size that means it will be different if elements have a different font-size).
Also avoid setting heights on main containers especially percentage heights as they can mostly not be resolved (a percentage height can only be based on another parent that has a fixed height also (not itâs content height) and so on up the chain until you get to root. vh units allow a viewport height or percentage to be used but again unless you know what you are doing they will cause you more trouble along the line.).
You have height:10% here:
#quicklinkdiv {
height: 10%;
background-color: hotpink;
}
The percentage height cannot be resolved and it is highly unlikely that it would be workable there anyway. Remove the height and let its content dictate the height.
Ok so I got that part figured out, but now iâm trying to get them sized the same. All 3 are different sizes because of the amount of text in them. When I had them as buttons they all 3 seemed to go to the same size as the button with the most text and they looked great. But now they are all different sizes. Can I just set height and width on them directly? I thought that was usually frowned upon though.
No they would probably have had a default (browsers specific) âmin-widthâ and would not have sized in respect of each other (you can test that for yourself and easily see).
You can set a min-width on your buttons if you want them all to be the same width. A min-width will allow the buttons to grow if someone resizes the text from the browsers controls or you could set a fixed width/height in ems assuming you know what the longest item will be.
If you are using bootstrap (I see you have a stylesheet that seems to suggest you are using it) you could add the 'btn class to the anchors and use the standard bootstrap buttons (just check the bootstrap documentation for buttons as there is a whole section on them).
Ok so I tried thisâŚbut the text is completely off center of the button. The buttons are oval shaped and the text is up towards the top when I resize them.
You didnât show your code but I assume again you have used height to create the button instead of simply using an equal amount of top and bottom padding (in px) and then the text will automatically be vertically centred without the need for a height.
If you want to use the fixed height appproach then you also need to set the line-height to match the height and that will also vertically centre the text.
Well I canât use padding because that doesnât solve my problem. Setting padding sets padding around the text. If there is more text in one button than another, then the buttons will still be different sizes. However, using the line height did fix it, although not by matching the height. But I was able to adjust it to make it look nice. Thanks for the help.
Would you mind posting a screen shot of the result with which you ended up and are satisfied?
Just curious. 
Top and bottom padding will not increase the width of the element.
You donât need height as I have mentioned a few times but if you are using height and line-height then you may have to tweak the line-height smaller or larger depending on whether you have just upper or lowercase letters in your buttons. If you have a normal mixture of upper and lowercase then the line-height should match the height within a px or two.
Remember that the text you see is not the full story as a letter that has descender will not look the same as a Capital letter in regards to a vertical central position. If you have adjusted the space for ALL CAPS then obvioiulsy that will sit higher on the line (and vice versa).
Also note that although line-height is the space that the text sits the glyphs that make up the fonts may or may not use all that space and indeed have what is called a half leading space on each vertical edge of that font. It is likely that on odd pixel sizes there will be a 1px difference between top and bottom simply because there is no such thing as half a pixel.
Line height is a terse and complicated subject when you get into the finer details but the above is a good guide.
Hereâs an example of centred buttons without a height in site (sic) and instantly responsive.
Hey this design in codepen is it yours?
Can you send a link to your page I love to look at ideas people make in the codepen 
Or if it isnât your codepen can you show me how or where you found it as I always have trouble finding work related to HTML and CSS always SCCS and never really website layouts 
Yes, I just added the code a few minutes ago for the OP.
Not sure what you will see but my homepage is here. You should be able to search or follow my pens or others from the search function on the site. A lot of my pens are just answers to forum questions and not that interesting. (Note that a number of the pages have images missing as codepen changed toi https a while ago and updated all my paths to https although I donât use https so the image paths need to be set back to http to view the original.)
.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.