Miért van az hogy csak a navigation menu section-on belül tudok be rakni akármit mert azon kivül le dobja az oldal aljára?
Korán kezdidek ma is...
Kód vagy valami? Vagy találjuk ki magunktól?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0 , maximum-scale=1.0, user-scalable=no "/>
<meta charset="UTF-8">
<title>Étterem</title>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.toggle').click(function(){
$('ul').toggleClass('active');
})
})
</script>
</head>
<link href="style.css" rel="stylesheet">
<body>
<style>
p{text-align:center;}
</style>
<article>
<header>
<a href="#" class="logo"><img src="logos.jpg"></a>
<a class="toggle">Menu</a>
<ul class="">
<li><a href="">home</a></li>
<li><a href="eloetel.html">Előételek</a></li>
<li><a href="foetel.html">Főételek</a></li>
<li><a href="desszert.html">Desszertek</a></li>
<li><a href="turmix.html">Turmixok</a></li>
<li><a href="kapcsolat.html">Kapcsolat</a></li>
</ul>
</header>
<div class="kepek">
<figure>
<img src="slide1.jpg">
<img src="slide2.jpg">
<img src="slide3.jpg">
</figure>
</div>
</article>
</body>
</html>
f1
*{
box-sizing: border-box;
}
body{
background-color: #B8860B;
width:100%
height:100%
}
article
{
position:relative;
width:100%;
height:100vh;
background-position: center center;
}
header{
padding: 0 100px;
width: 100%;
height: 80px;
box-sizing:border-box;
background:rgba(255,255,255,.2);
transition:.5s;
}
ul
{
position:relative;
margin: 0;
padding:0;
display:flex;
float:right;
transition: .5s;
}
ul li
{
list-style:none;
}
ul li a
{
position:relative;
display:block;
padding: 10px 20px;
margin: 20px 0;
text-transform:uppercase;
text-decoration:none;
color:#262626;
font-weight:bold;
transition: .5s;
top:-10px;
}
ul li a:hover
{
background: #000;
color:#fff;
}
.toggle
{
display:none;
position:absolute;
top:1%;
right:3.5%;
background: #f00;
color:#fff;
padding:12px;
cursor: pointer;
font-weight:bold;
}
@media (max-width: 992px)
{
.toggle
{
display:block;
}
header
{
padding:0 0;
background: rgba(255,255,255,.5)
}
header ul
{
width:100%;
top:2px;
display:none;
}
header ul.active
{
display:block;
}
header ul li a
{
margin:0;
display:block;
text-align:center;
color: #ffff;
background:rgba(0,0,0,.5)
}
.kepek .figure{
text-align:center;
}
kepek .figure .img{
width:50%;
}
1. nincs DOCTYPE
2. "navigation menu section" -> ez melyik akar lenni?
A weblapod publikus? Meg tudod mutatni?
Ha nem, akkor töltsd fel jsfiddle-re, ahogy én is.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!