Предполагалось разместить неправильно расположенные кнопки. CSS. HTML
Я создаю веб-сайт, и я столкнулся с этой проблемой, когда, когда я помещаю «домой» 1-ю серию «свяжитесь с нами» и так далее в CSS, веб-сайт дублирует вставленный мной баннер и помещает кнопку «домой», где предполагается, что это и другие кнопки на дублированном баннере. Я поместил снимок экрана в самом конце, чтобы четко показать вам, как это происходит (или вы можете щелкнуть цифру 1 прямо здесь) -> 1 Я не знаю что я делаю не так. Подскажите пожалуйста, в чем может быть проблема?
Below is the code:
#container{
width: 1200px;
margin: auto;
padding-left: 100px;
padding-right: 100px;
body{
background-color: lightgray;
font-family: arial;
}
header{
background-image: url("Images/Tv Shows Banner.PNG");
background-repeat: no-repeat;
height: 250px;
width:1200px;
padding-right:50px;
padding-left:100px;
background-position: middle;
}
h1{
color: white;
padding-left: 350px;
padding-top: 80px;
float: right-side;
font-family: Lobster;
font-size: 50px;
}
nav {
background-color: black;
text-align: center;
line-height: 60px;
margin-bottom: 20px;
}
nav a:link, nav a:visited {
text-decoration: none;
color: white;
margin: 10px;
padding: 5px;
}
nav a:hover {
text-decoration: none;
background-color: white;
color: black;
border-radius: 20px;<html>
<head>
<title>Top 5 Tv Series </title>
<link rel = "stylesheet" href = "Top 5 Tv Series CSS.css">
</head>
<body>
<div id = "container">
<header>
<h1>Top 5 TV Series</h1>
<img id = "Banner" src = "Images/Tv Shows Banner.PNG"/>
</header>
<nav>
<a href = "Top 5 Tv Series.html">Home</a>
<a href = "Top 5 Tv Series.html">1st Series</a>
<a href = "Top 5 Tv Series.html">2nd Series</a>
<a href = "Top 5 Tv Series.html">3rd Series</a>
<a href = "Top 5 Tv Series.html">4th Series</a>
<a href = "Top 5 Tv Series.html">5th Series</a>
<a href = "Top 5 Tv Series.html">Contact Us</a>
</nav>
</div>
</body>
</html>Нет, я не использую код JavaScript
Я точно скопирую ваш код, просто изменив изображение src. Проверьте эту кодовую ссылку: codepen.io/ArunK_UI/pen/PaPyPv
Отредактируйте код, используя свойства css, которые вы используете, и прокомментируйте с помощью обновленной ссылки на код.
Я не понимаю, что вы здесь имеете в виду
Я хотел сказать, что кода, который вы разместили в своем вопросе, недостаточно для воссоздания проблемы, с которой вы столкнулись. Поэтому я дал ссылку на код, где вы можете отредактировать код и точно показать, в какой момент вы столкнулись с проблемой. Используя предоставленный вами код, я не обнаружил ошибок.
Я понимаю. Спасибо большое за вашу помощь !
Пожалуйста! Но я не думал, что помог вам решить проблему. Если вы все еще сталкиваетесь с той же проблемой, создайте кодовый код или jsfiddle, чтобы мы могли проверить и помочь вам.
Я поместил код в код и упорядочил ошибки, но результат остался прежним. Это кодовое слово: codepen.io/chrizana-mizzi/pen/mKezwY
Я проверил ваш код, и проблема в том, что "height: 250px;" который вы указываете для «заголовка». Снимите высоту жатки и проверьте.
Спасибо большое за вашу помощь
Вы используете какой-либо JS-код для дублирования / клонирования баннера? Я не нашел кода, воспроизводящего баннер