Нужна помощь в стилизации кнопок с помощью Flexbox CSS - PullRequest
0 голосов
/ 28 июня 2018

Я пытаюсь стилизовать кнопку HISTORY в коде Flexbox, чтобы она соответствовала стилю ссылок панели навигации. Кажется, я не могу получить CSS-код для активной, посещаемой ссылки для применения ко всей кнопке. Кроме того, ссылка не открывается вообще в Firefox, но открывается на страницу истории в Chrome и MS Edge.

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

.card > button a {
text-decoration: none;

}

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

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

Кодовая ручка здесь: https://codepen.io/Ovimel/pen/dKgrXa

Сообщение Codepen, запрашивающее помощь, находится здесь: https://codepen.io/Ovimel/post/help-styling-css-flexbox-buttons (но я не уверен, как люди вообще находят эти контакты и сообщения! Впервые в Codepen).

Поскольку я новичок в области непрерывного кодирования, и я впервые использую Flexbox, я позаимствовал исходный код для карточек Flexbox у Quackit https://www.quackit.com/html/html_editors/scratchpad/?example=/css/flexbox/examples/flexbox_cards_align-items_stretch произвел корректировку стиля на основе кода Nav и в итоге добавил ссылку что затем вызвало все виды проблем.

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

1, button и a - две разные вещи. НЕ вкладывайте a внутрь button. Вы используете их для совершенно разных целей. a для link, так что связать что-то. button вы используете его для событий, например submit в форме или события в javascript. Так что либо используйте button, либо используйте a.

В вашем случае я вижу, что вы хотите связать что-то, поэтому используйте a (без кнопки).

2, .card > button a:link неверно, потому что > - это direct descendant selector, но button находится внутри .text, которая находится внутри .card. Так что button не является прямым потомком .card.

3, .card > button a:hover, button a:active { выберет a:hover внутри button прямой потомок card. (См. 2), и он выберет ВСЕ a:active, которые находятся внутри button везде на странице, а не только те, которые находятся внутри card. Если вы хотите сделать это, вы должны добавить родительский селектор к обоим селекторам. поэтому ваш код будет выглядеть как .card > button a:hover, .card > button a:active

Пункт 2,3 предназначен только для информации, которая поможет вам в будущем, но здесь он бесполезен, потому что у вас не будет a внутри button.

Для стиля a, как и button, просто напишите стили внутри следующего селектора

.card .text > button,.card .text > a {, а затем для hover и active состояний используйте

.card .text > a:hover, .card .text > a:active {

См. Фрагмент кода ниже. Если у вас есть другие вопросы, задавайте их в комментариях.

/* 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 paragraph text links */
p a {
    text-decoration: none;
    font-weight: bold;
    
}
p a:link, a:visited {
    color: #7d654b;
}

p 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 nav link styling */
  nav a:link, nav a:visited {
      background-color:#6e6b5c;
      color: lightgrey;
  }

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

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

  .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,.card .text > a {
    background: #6e6b5c;
    border: 0;
    font-family: 'Days One', sans-serif;
    font-weight: normal;
    color: lightgrey;
    background: #6e6b5c;
    display:block;
    font-size:14px;
    padding: 10px;
    text-align:center;
    width: 100%;
  }

 .card  a {
    text-decoration: none;
    
  }



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


  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;
      
  }
  <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>
           <a href="history.html" >HISTORY</a>
          </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 world's mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
            <button>THANK YOU</button>
          </div>
        </article>
      </main>
0 голосов
/ 28 июня 2018

Вот что я сделал для стилизации компонента:

a[href="history.html"] {
color: white;
text-decoration: none; }

Кроме того, необходимо ли использовать тег <button>? Разве вы не можете просто дать класс вашему тегу <a>? Как это

<a href="something.html" class="btn">Something</a>

Тогда CSS

a.btn {color: black; text-decoration: none}
a.btn:visited {color: purple}
a.btn:hover {color: grey}

И еще как то

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...