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?
válasza:"nem tudom h1-et középre rakni"
h1 {
text-align: center;
}
válasza:A vw nem igazán alkalmas arra, hogy elkülönítsd az asztali és a mobilnézetet, mert ami mobilon álló viewport esetén jó lesz, az asztalin nem lesz jó, vagy ha asztalin jó, akkor fekvő vagy álló viewport esetén nem lesz megfelelő.
Érdemes media query-t használni a mobilnézethez.
ez igy helyes?@media only screen and (max-width: 600px) {
{
text{
font-family:sans-serif;
}
h1{
text-align:center;
font-size:5vw;
margin:0;
padding:0;
}
p{
font-size:1.8vw;
margin:0;
padding-left:30vw;
padding-right:30vw;
text-align:center;
}
}
válasza:Alapvetően jó, bár én személy szerint a vw-nek nem látom hasznát ilyen esetben.
Megnéztem az oldalad. Kihagytál a head-ből egy fontos dolgot, a viewport definíciót:
<meta name="viewport" content="width=device-width, initial-scale=1">
Tedd be az oldalra, válts át reszponziv nézetbe, és nézd meg, hogy változik az oldalad megjelenése, ha változtatod a szélességet.
Másrészt, UTF-8 kódolást használj, ne iso-8859-2-t.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
Ez a régi stílusú karakterkódolás-megadás, bár szabványos, de van rövidebb is:
<meta charset="UTF-8">
Ennyi elég.
Harmadrészt, a DOCTYPE-ot még mindig nem látom:
<!DOCTYPE html>
Ezeket ne hagyd ki, egyrészt mert a Google sem szereti a hiányos weboldalakat, másrészt ezek kellenek, hogy úgy jelenjen meg az oldal, ahogy szeretnéd.
<html>
<head>
<title>Reszponziv weboldal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--important-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen and (min-width: 900px)" href="style.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="style.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>
<body>
<section>
<header>
<a href="#" class="logo"><img src="logos.jpg"></a>
<a class="toggle">Menu</a>
<ul class="">
<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="levesek.html">Levesek</a></li>
<li><a href="turmix.html">Turmixok</a></li>
<li><a href="kapcsolat.html">Kapcsolat</a></li>
</ul>
</header>
<h1>Üdvözlő</h1>
<p>Üdv a weboldalon itt mindent megtudhattok a(z)Étteremről ,tájékozódhattok az étterem kinálatáról láthattok képeket az étteremről az ételekről és az ételek árait is megnézhetitek </p>
<br></br> <br></br> <br></br>
<div class="responsive">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FPizzaform-107149394357549&tabs=timeline&width=220&height=300&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="220" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<képek
</section>
</body>
</html> igy van megadva eddig is igy volt
válasza:background-size:cover
De használj kódmegosztó oldalt, mert e átláthatatlan így.
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!