Я делал сайт для ресторана для практики и составлял меню, используя теги 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 & 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>