1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved Help with CSS coding buttons using Flexbox Cards

Discussion in 'Web Design & Development' started by Ovivtopher, Jun 25, 2018.

Thread Status:
Not open for further replies.
Advertisement
  1. Ovivtopher

    Ovivtopher Thread Starter

    Joined:
    Jul 26, 2005
    Messages:
    125
    I copied a CSS Flexbox button example from Quackit https://www.quackit.com/html/html_e...ox/examples/flexbox_cards_align-items_stretch which worked fine with my own text, color, and other changes until I added the <a href> to create a button link on the History button.

    The issues I am having now are that the code for the History button is not being read:

    1. The button text and font-family is not as styled in the CSS either in Chrome or Firefox - it has changed to Arial
    2. The button text and background does not change on Hover in Chrome or Firefox
    3. The link is not working on Firefox
    4. You might also notice that the images in the Quackit example (above link) fill the card horizontally, the images on my page have a border - not sure why that is happening either as the card image is set to max-width: 100% - I didn't change any of the Quackit code related to the images

    upload_2018-6-25_10-22-27.png

    I ran CSS Lint and it seems fine. Should I use a CSS reset? Is the CSS in the wrong order? Is the <a href> in the wrong place?

    Any help would be appreciated! I only have a little experience coding websites and that was back in 2012. TIA


    HTML:
     <main class="cards" role="navigation">
            <article class="card">
              <img src="images/seige.jpg" alt="old map" width="200" height="160">
              <div class="text">
                <h4>HISTORY / MAPS</h4>
                <p>Explore the history of Stavishche from its founding as a garrison to the times of the pograms.</p>
               <button><a href="history.html" >HISTORY</button></a>
              </div>
            </article>
    [CSS]
    .cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 30px 0 0;
    }

    .card {
    flex: 0 0 200px;
    margin: 10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
    text-decoration: none;
    }

    .card img {
    max-width: 100%;
    }

    .card .text {
    padding: 0px 10px 20px;
    }

    .card .text h4 {
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.0em;
    font-weight: 700;
    font-style: normal;
    margin-top: 6px;
    margin-bottom: 5px;
    text-align: center;
    }

    .card .text p {
    padding-top: 2px;
    }

    .card .text > button {
    background: #6e6b5c;
    border: 0;
    font-family: 'Days One', sans-serif;
    color: lightgrey;
    /*text-decoration: none;*/
    padding: 10px;
    width: 100%;
    }

    .button a {
    text-decoration: none;
    }

    .card > button a:link, button a:visited {
    background: #6e6b5c;
    color: lightgrey;
    }

    .card> button a:hover, button a:active {
    background-color: #7d654b;
    color: white;
    }
    [/CSS]
     
  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,237
    In order to look into why your css is not being applied, we would need you to provide a link to the problem page ...
     
    Last edited: Jun 25, 2018
  3. Ovivtopher

    Ovivtopher Thread Starter

    Joined:
    Jul 26, 2005
    Messages:
    125
    How would I do that? The page is in process and not online.
     
  4. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,237
    In which case, perhaps you would give us the full page code, including all relevant css?
     
    Last edited: Jun 25, 2018
  5. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,237
    Try closing your button after you close your link, viz:
    HTML:
    <button><a href="history.html" >HISTORY</a></button>
     
  6. Ovivtopher

    Ovivtopher Thread Starter

    Joined:
    Jul 26, 2005
    Messages:
    125
    Nope, that doesn't change a thing.
     
  7. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,237
    Firefox? Either way we need to see your code ...
     
  8. Ovivtopher

    Ovivtopher Thread Starter

    Joined:
    Jul 26, 2005
    Messages:
    125
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Description" content="Welcome to Stavisht, the Shtetl, an online visit to a Jewish community that existed at the turn of the century in the Pale of Settlement.">
    <title>Welcome to Stavisht - Stavishche, Ukraine</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <script>
    //Make older browsers aware of new HTML5 layout tags
    'header nav aside article footer section'.replace(/\w+/g, function (n) { document.createElement(n) })
    </script>
    
    <!-- Wrapper -->
    <div id="wrapper">
    
    
    <!-- Navigation bar -->
    <nav role="navigation">
    <a href="index.html">HOME</a>
    <a href="about.html">ABOUT</a>
    <a href="#">GALLERY</a>
    <a href="https://jewishgen.org" target="_blank">JEWISHGEN</a>
    </nav>
    
    <!-- Header -->
    <header>
    <h1>Opening the Door to Stavisht, the Shtetl</h1>
    <h3>Stavishche, Ukraine - 49° 23' N 30° 12' E</h3>
    
    <span>Stavishche [Ukr, Rus], Stavisht [Yid], Stawiszcze [Pol], Stawyszcze, Stavische, Stavishcha, Stavysce</span>
    </header>
    
    <!-- Page content -->
    <p style="font-style: italic; text-align: center;">The Internet has a way of bringing people together. This site is an example of how Stavisht descendants, who have met online through their own family history research, have come together to reconstruct the memories of a shtetl that existed so long ago. <br> Enjoy your visit!</p>
    
    <!-- Flexbox menu to inner pages -->
    
    <main class="cards" role="navigation">
    <article class="card">
    <img src="images/seige.jpg" alt="old map" width="200" height="160">
    <div class="text">
    <h4>HISTORY / MAPS</h4>
    <p>Explore the history of Stavishche from its founding as a garrison to the times of the pograms.</p>
    <button><a href="history.html" >HISTORY</a></button>
    </div>
    </article>
    
    <article class="card">
    <img src="images/lechtzer.jpg" alt="Lechtzer family" width="200" height="160">
    <div class="text">
    <h4>PEOPLE</h4>
    <p>Discover the residents of Stavishche at the turn of the century through the database of almost 2,000 residents.</p>
    <button>RESIDENTS</button>
    </div>
    </article>
    
    <article class="card">
    <img src="images/cemetery2.jpg" alt="cemetery" width="200" height="160">
    <div class="text">
    <h4>BURIALS</h4>
    <p>Find cemeteries throughout the world where Stavishters remain together in death.</p>
    <button>CEMETERIES</button>
    </div>
    </article>
    
    <article class="card">
    <img src="images/torahcrown.jpg" alt="Torah crown" width="200" height="160">
    <div class="text">
    <h4>STORIES</h4>
    <p>Imagine our ancestors lives through essays from Stavishters, their children, and grandchildren. </p>
    <button>READ</button>
    </div>
    </article>
    
    <article class="card">
    <img src="images/citysign.jpg" alt="Stavishche sign" width="200" height="160">
    <div class="text">
    <h4>STAVISHCHE TODAY</h4>
    <p>Visit Stavishche of today through online links, images, and videos.</p>
    <button>VISIT</button>
    </div>
    </article>
    
    <article class="card">
    <img src="/pix/samples/16l.jpg" alt="Sample photo" width="200" height="160">
    <div class="text">
    <h4>MORE</h4>
    <p>Give credit where credit is due.Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
    <button>THANK YOU</button>
    </div>
    </article>
    
    </main>
    
    
    <!-- Footer -->
    <footer role="contentinfo">
    
    <a href="https://kehilalinks.jewishgen.org/" target="_blank"><img class="logo" src="https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png" alt=KehilaLinks" width="125px" height="40px"></a>
    
    <small>Copyright (c) 2012-2018 Vivian M. Linderman. All rights reserved. Created 2012, updated 2018.
    This site is hosted at no cost to the public by JewishGen, Inc. a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through <a href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity.</a></small>
    </footer>
    </div>
    
    
    </body>
    </html>
    
    
    [CSS]

    /* style.css */

    /* Make HTML5 layout elements block elements for older browsers */
    header, nav, aside, article, footer, section {
    display: block;
    }

    @Import url('https://fonts.googleapis.com/css?family=Days+One|Lora');

    body {
    font-size: 120.0%; /*14pt 19px */
    font-family: 'Lora', serif;
    line-height: 1.375;
    background-color: lightsteelblue;
    background-image: url(images/wood.jpg);
    }

    header {
    text-align: center;
    }

    h1{
    text-align: center;
    font-family: 'Days One', sans-serif;
    line-height: 1.250;
    font-size: 2.500em; /*32pt 42px */
    font-weight: bold;
    font-style: normal;
    padding-top: 1em;
    }

    h2{
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.500em; /*18pt 24px */
    font-weight: 700;
    font-style: italic;
    }

    h3{
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.200em; /*14pt 19px */
    font-weight: 700;
    font-style: italic;
    }

    header h3 {
    font-style: normal;
    margin: 0;
    }

    p {
    font-size: 1.000em; /*12pt 16px */
    font-weight: normal;
    font-style: normal;
    }

    p.footnote {
    font-size: .95em; /*11 pt 15px */
    }

    /*style rules for text links */
    a {
    text-decoration: none;
    font-weight: bold;

    }
    a:link, a:visited {
    color: #7d654b;
    }

    a:hover, a:active {
    text-decoration: underline;
    }

    /*style rule for wrapper div */
    #wrapper {
    width: 90%;
    min-width: 600px;
    max-width:1200px;
    margin: 1em auto;
    padding: 3em;
    background-color: rgb(228, 238, 248);
    }

    /*style rule for <a> tags in the nav section #945D60 */

    nav a {
    background-color: #6e6b5c;
    font-family: 'Days One', sans-serif;
    line-height: 1.333;
    font-size: .90em; /*11pt 15px */
    font-weight: 500;
    color: white;
    text-decoration: none;
    outline: none;
    padding: 10px 0;
    display: block;
    float: left;
    border: solid 3px #194a76;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 25%;
    text-align: center;
    box-sizing: border-box;

    /*box sizing for older browsers */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }

    /*unvisited and visited link styling for nav bar*/
    nav a:link, nav a:visited {
    background-color:#6e6b5c;
    color: lightgrey;
    }

    /* hover and tap link styling for nav bar*/
    nav a:hover, nav a:active {
    background-color: #7d654b;
    color: white;
    }

    article {
    clear: both;
    padding: 0 1em;
    }

    /*flexbox card styling for menu to internal site pages*/
    .cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 30px 0 0;
    }

    .card {
    flex: 0 0 200px;
    margin: 10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
    text-decoration: none;
    }

    .card img {
    max-width: 100%;
    }

    .card .text {
    padding: 0px 10px 20px;
    }

    .card .text h4 {
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.0em;
    font-weight: 700;
    font-style: normal;
    margin-top: 6px;
    margin-bottom: 5px;
    text-align: center;
    }

    .card .text p {
    padding-top: 2px;
    }

    .card .text > button {
    background: #6e6b5c;
    border: 0;
    font-family: 'Days One', sans-serif;
    color: lightgrey;
    /*text-decoration: none;*/
    padding: 10px;
    width: 100%;
    }

    .button a {
    text-decoration: none;
    }

    .card > button a:link, button a:visited {
    background: #6e6b5c;
    color: lightgrey;
    }

    .card> button a:hover, button a:active {
    background-color: #7d654b;
    color: white;
    }

    /* styling the footer */
    footer {
    background-color: #6e6b5c;
    color: white;
    text-align: right;
    padding: 10px;
    border: solid 3px #194a76;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }

    footer a {
    color: white;

    }

    .logo {
    border: solid 4px #194a76;
    float: left;
    position: relative;

    }
     
  9. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,237
    The font in the buttons on your screenshot is definitely 'Days One' as per your css styling ...
    HTML:
    .card .text > button {
    background: #6e6b5c;
    border: 0;
    font-family: 'Days One', sans-serif;
    color: lightgrey;
    /*text-decoration: none;*/
    padding: 10px;
    width: 100%;
    }
    
    
    You will only get Hover effects on links and the only link is in the HISTORY button, which is currently the same color as the background, therefore your hover effect 'underline' will seem not to take place as it will be the same color as your background. If you change this part of your css:
    HTML:
    a {
    text-decoration: none;
    font-weight: bold;
    
    }
    a:link, a:visited {
    color: #7d654b;
    }
    
    to this:
    HTML:
    a {
    text-decoration: none;
    font-weight: bold;
    color:lightgrey;
    }
    a:link, a:visited {
    color:white;
    }
    
    which should fix it.
    I rather think that Firefox was not dealing with the </a> coming after the </button>
    Your <article> tag has padding: o 1em; - drop the 1em and your pictures will display without left/right padding.
    Hope that helps;)
     
    Last edited: Jun 27, 2018
  10. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,237
    I suggest that you were seeing Arial instead of Days One, because you were working offline and your css import could not be resolved?
     
  11. Ovivtopher

    Ovivtopher Thread Starter

    Joined:
    Jul 26, 2005
    Messages:
    125
    Thank you JiminSA for taking the time to look at my CSS issues. However,

    1. I was seeing the ARIAL font in the Inspect tool in Chrome under 'user agent style sheet'. In fact, the issue was that it was the correct font Days One, as you suggested, but it was picking up the bold style from the a link style I used for the text area. Once I realized that, because of your suggestions for number 2, I changed the text link (a) styles to paragraph a styles (p a ...). So that fixed that.

    2. The code you are suggesting I change is for the links applied to all the text, not for the buttons. I want the History button to change on hover as the NAV bar 'buttons' change, where the whole background of the button changes, not just the text link. Once I get the correct CSS formatting for the History button, I will code all the others in the Flexbox Cards.

    3. The link still does not work on Firefox. It does work on Chrome and in MS Edge. Strangest thing.

    4. When I remove the 1em on the article tag, the images expand across the card, but I lose the margins on the text on the card. I decided to just keep it as it is. But, thanks for making me aware of that piece of the code and how it is applied.

    Note: so, I opened up the Inspect Element in Firefox and it did not provide access to the :hover feature on the History button, only the :active styles. In Chrome, both the button :hover state and the button :visited code remain faded out, thus not allowing me to play with the code styles. Could this be a hint that the :hover CSS for the History button is incorrect? Both hover/visited styles are accessible for the Nav menu in Chrome and Firefox Inspect tool.
     
  12. Ovivtopher

    Ovivtopher Thread Starter

    Joined:
    Jul 26, 2005
    Messages:
    125
    @JiminSA - Thanks for all your help. I ultimately put my code out on CodePen and then asked my questions on StackOverflow. It seems I was using the Button style wrong; it should not be used with an <a> tag. Also, there was a problem with the descendant selectors not jiving in the CSS code. The suggestion was to style the <a> tag to look like the button I wanted. All is good. Thanks for the help.
     
  13. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,237
    Which doesn't mean, of course, that buttons can't be links - their main use;) Glad it's sorted though ...
    I was intrigued by the content - the heritage aspect etc., Could you send us a link (PM) when you publish, please?
     
  14. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1212014

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice