Блог

Главная - Вопросы по программированию - Создание меню ресторана, но точки и не работают

Создание меню ресторана, но точки и не работают

#jquery #html #css #list #html-lists

#jquery #HTML #css #Список #html-списки

Вопрос:

Я делал веб-сайт ресторана для практики и создал меню, используя теги em, strong и sup, и это сработало довольно хорошо, но это противоречит моему CSS и / или jQuery, и я, кажется, не могу найти, какая часть моего кода не работает. Теги sup ведут себя странно, и точки проходят через все это.

Я перепутал поля, отступы и другие теги, даже выравнивание по тексту, но, похоже, я не могу найти, что это такое.

 //hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');

//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
  $(this).addClass('selected');
  $('.page').hide();
  $($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
  window.scrollTo(0, 0); //scroll to the  top of the page
}); 
 body {
  background: rgb(204, 204, 255);
  font-family: "Open Sans", Sans Serif;
  font-weight: 300;
  color: ;
  margin: 0px;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 0.7s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 22px;
}

a {}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 600px;
  padding: 20px;
}

.button {
  background: rgb(0, 163, 222);
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  color: black;
  decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

.li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
  border-bottom: dotted 2px #999;
}

strong {
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
}

em {
  padding: 0 0 0 5px;
  font: 100% "Times New Roman", Sans-serif;
  position: absolute;
  bottom: -.2em;
  right: 0;
}

sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;
} 
 <div class="banner">
  <ul>
    <li>
      <h1>Silver Spoon</h1>
    </li>
    <a class='page-button' data-page_num='1' href='javascript:voide(0)'>
      <li class="main-button home-button">Home</li>
    </a>
    <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      <li class="main-button about-button">Menu</li>
    </a>
  </ul>
</div>
<div class="page">
  <div id="Home">
    <div class="content1">
      <div class="container">
        <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
          <h3>Menu</h3>
        </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
      </div>
    </div>
  </div>
</div>
<div class="page">
  <div id="Menu">
    <div class="content1">
      <div class="container">
        <h3>Bakery</h3>
        <li class="li"><strong>Cheese Danish</strong> <em>2</em><sup>50</sup></li>
        <li class="li"><strong>Chocolate Chip Cookies</strong> <em>1</em><sup>50</sup></li>
        <li class="li"><strong>Glazed Donuts</strong> <em>2</em><sup>00</sup></li>
        <li class="li"><strong>Everything Bagels</strong> <em>2</em><sup>00</sup></li>
        <li class="li"><strong>Plain Bagels</strong> <em>1</em><sup>50</sup></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Hot Breakfast</h3>
        <li class="li"><strong>Egg Sandwich</strong> <em>3</em><sup>50</sup></li>
        <li class="li"><strong>Chicken Sausage Sandwich</strong> <em>4</em><sup>50</sup></li>
        <li class="li"><strong>Egg Bites</strong> <em>4</em><sup>00</sup></li>
        <li class="li"><strong>Egg Wraps</strong> <em>4</em><sup>00</sup></li>
        <li class="li"><strong>Old-Fashioned Oatmeal</strong> <em>3</em><sup>50</sup></li>
      </div>
    </div>
    <div class="content1">
      <div class="container">
        <h3>Sandwiches</h3>
        <li class="li"><strong>Chicken Caprese</strong> <em>4</em><sup>50</sup></li>
        <li class="li"><strong>Chicken Sandwich</strong> <em>4</em><sup>00</sup></li>
        <li class="li"><strong>Hamburger</strong> <em>2</em><sup>50</sup></li>
        <li class="li"><strong>Ham amp; Swiss Panini</strong> <em>3</em><sup>00</sup></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Deserts</h3>
        <li class="li"><strong>Cookies</strong> <em>1</em><sup>50</sup></li>
        <li class="li"><strong>Cake</strong> <em>3</em><sup>50</sup></li>
        <li class="li"><strong>Ice Cream</strong> <em>1</em><sup>99</sup></li>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Ответ №1:

Я полагаю, вы ищете что-то подобное. Сгруппируйте sup и em в a div и добавьте следующие свойства:

 .price {
  position: relative;
  top: .9em;
  float: right;
}

Кроме того, вы должны изменить это значение на have position: relative вместо position: absolute so, чтобы оно располагалось относительно li элементов. Затем он должен располагаться .9em сверху (или на 1/2 добавленного вами отступа).

 //hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');

//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
  $(this).addClass('selected');
  $('.page').hide();
  $($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
  window.scrollTo(0, 0); //scroll to the  top of the page
}); 
 body {
  background: rgb(204, 204, 255);
  font-family: "Open Sans", Sans Serif;
  font-weight: 300;
  color: ;
  margin: 0px;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 0.7s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 22px;
}

a {}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 600px;
  padding: 20px;
}

.button {
  background: rgb(0, 163, 222);
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  color: black;
  decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

.li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
  border-bottom: dotted 2px #999;
}

strong {
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
}

em {
  padding: 0 0 0 5px;
  font: 100% "Times New Roman", Sans-serif;
}

sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;
}

.price {
  position: relative;
  top: .9em;
  float: right;
} 
 <div class="banner">
  <ul>
    <li>
      <h1>Silver Spoon</h1>
    </li>
    <a class='page-button' data-page_num='1' href='javascript:voide(0)'>
      <li class="main-button home-button">Home</li>
    </a>
    <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      <li class="main-button about-button">Menu</li>
    </a>
  </ul>
</div>
<div class="page">
  <div id="Home">
    <div class="content1">
      <div class="container">
        <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
          <h3>Menu</h3>
        </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
      </div>
    </div>
  </div>
</div>
<div class="page">
  <div id="Menu">
    <div class="content1">
      <div class="container">
        <h3>Bakery</h3>
        <li class="li"><strong>Cheese Danish</strong><div class="price"><em>2</em><sup>50</sup></div></li>
        <li class="li"><strong>Chocolate Chip Cookies</strong><div class="price"><em>1</em><sup>50</sup></div></li>
        <li class="li"><strong>Glazed Donuts</strong><div class="price"><em>2</em><sup>00</sup></div></li>
        <li class="li"><strong>Everything Bagels</strong><div class="price"><em>2</em><sup>00</sup></div></li>
        <li class="li"><strong>Plain Bagels</strong><div class="price"><em>1</em><sup>50</sup></div></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Hot Breakfast</h3>
        <li class="li"><strong>Egg Sandwich</strong><div class="price"><em>3</em><sup>50</sup></div></li>
        <li class="li"><strong>Chicken Sausage Sandwich</strong><div class="price"><em>4</em><sup>50</sup></div></li>
        <li class="li"><strong>Egg Bites</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Egg Wraps</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Old-Fashioned Oatmeal</strong><div class="price"><em>3</em><sup>50</sup></div></li>
      </div>
    </div>
    <div class="content1">
      <div class="container">
        <h3>Sandwiches</h3>
        <li class="li"><strong>Chicken Caprese</strong><div class="price"><em>4</em><sup>50</sup></div></li>
        <li class="li"><strong>Chicken Sandwich</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Hamburger</strong><div class="price"><em>2</em><sup>50</sup></div></li>
        <li class="li"><strong>Ham amp; Swiss Panini</strong><div class="price"><em>3</em><sup>00</sup></div></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Deserts</h3>
        <li class="li"><strong>Cookies</strong><div class="price"><em>1</em><sup>50</sup></div></li>
        <li class="li"><strong>Cake</strong><div class="price"><em>3</em><sup>50</sup></div></li>
        <li class="li"><strong>Ice Cream</strong><div class="price"><em>1</em><sup>99</sup></div></li>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Я не уверен, какого результата вы ожидаете от border-bottom этого, но вы можете ограничить ширину границы с помощью псевдоселектора. Удалите границу из .li элемента и добавьте это:

 .li::before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  width: 30%;
  left: 0;
  border-bottom: dotted 2px #999;
}

Просто измените значение width в псевдоселекторе, чтобы ограничить, как далеко будет проходить граница.

 //hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');

//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
  $(this).addClass('selected');
  $('.page').hide();
  $($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
  window.scrollTo(0, 0); //scroll to the  top of the page
}); 
 body {
  background: rgb(204, 204, 255);
  font-family: "Open Sans", Sans Serif;
  font-weight: 300;
  color: ;
  margin: 0px;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 0.7s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 22px;
}

a {}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 600px;
  padding: 20px;
}

.button {
  background: rgb(0, 163, 222);
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  color: black;
  decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

.li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
}

.li::before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  width: 30%;
  left: 0;
  border-bottom: dotted 2px #999;
}

strong {
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
}

em {
  padding: 0 0 0 5px;
  font: 100% "Times New Roman", Sans-serif;
}

sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;
}

.price {
  position: relative;
  top: .9em;
  float: right;
} 
 <div class="banner">
  <ul>
    <li>
      <h1>Silver Spoon</h1>
    </li>
    <a class='page-button' data-page_num='1' href='javascript:voide(0)'>
      <li class="main-button home-button">Home</li>
    </a>
    <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      <li class="main-button about-button">Menu</li>
    </a>
  </ul>
</div>
<div class="page">
  <div id="Home">
    <div class="content1">
      <div class="container">
        <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
          <h3>Menu</h3>
        </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
      </div>
    </div>
  </div>
</div>
<div class="page">
  <div id="Menu">
    <div class="content1">
      <div class="container">
        <h3>Bakery</h3>
        <li class="li"><strong>Cheese Danish</strong><div class="price"><em>2</em><sup>50</sup></div></li>
        <li class="li"><strong>Chocolate Chip Cookies</strong><div class="price"><em>1</em><sup>50</sup></div></li>
        <li class="li"><strong>Glazed Donuts</strong><div class="price"><em>2</em><sup>00</sup></div></li>
        <li class="li"><strong>Everything Bagels</strong><div class="price"><em>2</em><sup>00</sup></div></li>
        <li class="li"><strong>Plain Bagels</strong><div class="price"><em>1</em><sup>50</sup></div></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Hot Breakfast</h3>
        <li class="li"><strong>Egg Sandwich</strong><div class="price"><em>3</em><sup>50</sup></div></li>
        <li class="li"><strong>Chicken Sausage Sandwich</strong><div class="price"><em>4</em><sup>50</sup></div></li>
        <li class="li"><strong>Egg Bites</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Egg Wraps</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Old-Fashioned Oatmeal</strong><div class="price"><em>3</em><sup>50</sup></div></li>
      </div>
    </div>
    <div class="content1">
      <div class="container">
        <h3>Sandwiches</h3>
        <li class="li"><strong>Chicken Caprese</strong><div class="price"><em>4</em><sup>50</sup></div></li>
        <li class="li"><strong>Chicken Sandwich</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Hamburger</strong><div class="price"><em>2</em><sup>50</sup></div></li>
        <li class="li"><strong>Ham amp; Swiss Panini</strong><div class="price"><em>3</em><sup>00</sup></div></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Deserts</h3>
        <li class="li"><strong>Cookies</strong><div class="price"><em>1</em><sup>50</sup></div></li>
        <li class="li"><strong>Cake</strong><div class="price"><em>3</em><sup>50</sup></div></li>
        <li class="li"><strong>Ice Cream</strong><div class="price"><em>1</em><sup>99</sup></div></li>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Примечание: я также удалил маркеры списка, используемые ul, li { list-style-type: none; } для удобства чтения.

Комментарии:

1. Спасибо, это отлично работает. Одна вещь, о которой мне интересно, это точки, они находятся под списками, а не между списком и ценами. Это очень незначительная вещь, но как мне исправить это, чтобы выглядеть более презентабельно?

Ответ №2:

Выполните следующие действия

css

 .li {
  clear: both;
  padding: 0;
  margin-bottom: 20px;
  position: relative;
  border-bottom: dotted 2px #999;
}

strong {
}

em {
  padding: 0 0 0 5px;
  font: 100% "Times New Roman", Sans-serif;
  position: absolute;
  bottom: -.2em;
  right: 0;
}

sup {
  display: inline-block;
  font-size: 60%;
  color: #666;
  margin-left: 3px;
}
Метки: