Witam,
Mam do Was kilka pytań które mnie na chwilę obecną trapią
Wszystko będzie odnośnie kodu który podam
1.Co zrobić żeby logo i opcje się nie rozjeżdżały po przybliżeniu ekranu(nie spadały za obszar diva) widziałem ten błąd na kilku stronach i przyznam to nie wygląda zbyt profesjonalnie.
2.Jak dobrze używać znaczników semantycznych, powinny być nad divami, w divach? W kodzie który podałem użyłem znaków i nie jestem pewny czy właściwie je umieszczam, jeśli mogę dostać rady jak robić to lepiej będę wdzięczny.
3.Jakie dawać rozmiary divów przy różnych rozdzielczościach ekranu, robić to dalej w px czy może w %?
4.Tutaj już tak bardziej odnośnie kodu, baner ma 100px, a h1 wynosi 91, nie powinny się jakoś zgrywać żeby oba miały tyle samo wysokości, czy to tak po prostu zostawić? Bo na chwilę obecną staram się wszystko łączyć tak żeby było równe.
Uciekł mi też nav, który ma 45px, navigacja ma 50, ale gdy daje mu taki rozmiar to obszar zaznaczony na zdjęciu idzie w dół...
i takie dodatkowe pytanie, tak jak widać na zdjęciu z navem mam fontello przy opcjach i nie wiem czy to moje patologiczne oko ale wydaje mi się że jest większy odstęp z lewej strony zamiast zeby wszystko było równo na środku.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="UTF-8"/>
<title> My World </title>
<meta name="description" content="Mój świat wiedzy"/>
<meta name="keywords" content=""/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="css/fontello.css" type="text/css"/>
</head>
<body>
<div id="container">
<div id="topbar">
<header>
<div id="baner">
<h1>My World</h1>
</div>
<div id="topnav">
<nav>
<ol>
<li></i><a href="#"><i class="icon-home"></i> Strona główna</a></li>
<li><a href="#"><i class="icon-html5"></i>Front-End</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-code"></i>Back-End</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-group"></i>Kontakty</a></li>
</ol>
</nav>
</div>
</header>
</div>
<div id="content">
<main>
<article>
<header>
<h1>TYTUŁ TYTUŁ TYTUŁ</h1>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus ipsum non odio sagittis, et malesuada lorem semper. Phasellus ac justo in dolor faucibus vulputate et et ipsum. Proin hendrerit auctor justo, id commodo ligula rutrum id. Sed mauris massa, scelerisque sit amet odio quis, tincidunt commodo enim. Curabitur at vestibulum mi, quis aliquam mi. Nam ut purus sit amet orci volutpat pharetra tincidunt ut felis. Integer interdum lorem urna, sed scelerisque massa tristique in. Mauris porta lacus sed dolor ultricies ultrices. In rhoncus arcu pellentesque, semper nisl ut, pretium leo. Nullam libero massa, bibendum et vehicula ac, mattis ac est. Sed tempor augue et lacus scelerisque, eu iaculis dolor convallis. Praesent mattis, metus ullamcorper finibus accumsan, ex nisl bibendum dui, vel pellentesque quam purus ut ligula. Mauris vel luctus est, ac pretium nibh. Morbi vel dictum nisi. Curabitur consequat ultrices augue, vitae fringilla orci consectetur bibendum.
Vestibulum imperdiet velit sit amet pretium condimentum. Suspendisse cursus ipsum ex, sit amet ultricies odio tristique non. Aliquam erat volutpat. Etiam a iaculis odio. Phasellus sollicitudin pulvinar leo nec faucibus. Morbi luctus neque dapibus magna rhoncus bibendum. Nunc augue neque, imperdiet et placerat nec, imperdiet sed nisi. Nunc rhoncus mollis arcu, ut viverra urna sodales a. Phasellus congue, odio id pulvinar feugiat, nisi augue tincidunt risus, ac finibus ligula urna eget dui. Phasellus ut lacinia mauris.
Aliquam vitae enim enim. Aliquam varius est placerat est dapibus eleifend. Phasellus nunc ipsum, sollicitudin sit amet urna at, interdum varius erat. Donec blandit vel metus non scelerisque. In hac habitasse platea dictumst. Proin volutpat neque et maximus consequat. Mauris hendrerit lobortis quam nec fermentum. Cras eget molestie enim. Vivamus egestas auctor lacus, eu volutpat enim mattis gravida. Nulla a volutpat nunc. Pellentesque eget ligula eget mauris pharetra vehicula. Cras vestibulum semper ex sit amet volutpat.
Sed fermentum risus erat, id hendrerit erat pulvinar in. Donec interdum efficitur cursus. Nulla quam nisl, pulvinar quis felis eget, tristique lobortis augue. Mauris pharetra et lectus sed condimentum. Praesent porta arcu eu arcu pulvinar luctus. Vestibulum ullamcorper convallis ligula id varius. Nunc auctor nisi non congue feugiat. Quisque congue risus et odio viverra fermentum. Nullam at eros viverra nunc tincidunt faucibus a quis massa. Duis felis neque, rhoncus quis sapien in, consectetur efficitur tellus.
Aliquam sed condimentum dui. Suspendisse convallis turpis mi, eget pharetra erat elementum eu. Sed luctus sapien risus, ac volutpat mi maximus id. Sed eleifend placerat pretium. Nullam blandit metus vitae nisl luctus porta. Fusce eleifend convallis eros vitae rhoncus. Proin lectus libero, consectetur quis accumsan non, fringilla id est.
Quisque egestas vel ipsum eu interdum. Vestibulum pellentesque accumsan sapien, sed fermentum dolor iaculis ut. Aliquam elementum metus eu justo lacinia maximus. Duis sit amet turpis est. Praesent ac nibh commodo lectus fermentum laoreet. Nam erat elit, posuere non tincidunt non, imperdiet ut lacus. Donec pulvinar massa id lacinia rutrum. Etiam elementum rutrum suscipit. Donec vestibulum ligula lacus, quis vestibulum neque molestie vitae. Donec malesuada suscipit enim, at congue diam fringilla id. Nullam finibus finibus gravida.
Nulla facilisi. Integer quis leo eget justo sollicitudin ultrices. Phasellus vestibulum orci a vehicula porta. Sed auctor rutrum ultrices. Praesent sollicitudin volutpat nunc id euismod. Aenean viverra, est ac rhoncus posuere, augue dolor feugiat libero, et ornare turpis libero et lacus. Etiam at erat id lacus pulvinar convallis.
Maecenas nec tincidunt risus, ac pretium risus. Sed sodales magna at pretium auctor. Suspendisse sit amet diam id sem egestas dictum. Mauris consectetur leo ut elementum vehicula. Maecenas ut nisi et diam volutpat placerat quis et urna. Morbi pharetra est tincidunt nibh lobortis fermentum. Sed volutpat, tortor quis tristique euismod, erat nunc pulvinar ante, eu ullamcorper tellus neque vel erat. Cras blandit cursus metus, non hendrerit justo lacinia id. Mauris arcu ligula, rutrum quis accumsan nec, convallis quis nisi. Praesent eget mauris nec lacus viverra ultrices. Vestibulum posuere commodo mollis. Donec euismod libero non turpis viverra, quis finibus risus hendrerit. Maecenas tortor nisi, tincidunt vel egestas quis, porttitor ac orci. Maecenas molestie convallis nibh ut dictum. Maecenas accumsan, leo vel rutrum placerat, augue dui lobortis neque, consectetur eleifend ex turpis eget sapien.
In ut metus at arcu molestie lobortis id ut mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris maximus vehicula urna nec fermentum. Ut tortor enim, iaculis eu venenatis in, feugiat ut ligula. Quisque semper pellentesque nulla non aliquet. Nullam ultricies imperdiet tempus. Aenean tempor tristique aliquet. Donec hendrerit ipsum non ex pulvinar bibendum. In eros nibh, ultricies quis leo sit amet, commodo condimentum augue. Vestibulum sem nulla, condimentum consectetur convallis eu, egestas ac nisi. Aenean fringilla non mi eget auctor. Morbi hendrerit odio eu magna sagittis, at lacinia neque tincidunt. Pellentesque maximus urna eget varius semper. Ut ut ornare arcu. Suspendisse quis blandit orci.
Nullam et tincidunt turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur elit id ipsum varius pretium. Sed eu libero at arcu egestas bibendum tristique sit amet ligula. Cras eu massa quis tortor vehicula consectetur et vitae erat. Nam commodo lacinia lacus et auctor. Sed auctor suscipit pellentesque. Cras bibendum sem et lorem ullamcorper rhoncus. Donec at tincidunt velit, et vulputate lorem. Phasellus sit amet nunc consectetur, interdum velit ac, commodo justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vehicula lorem risus, pulvinar imperdiet quam auctor ut. Morbi rutrum, diam vitae laoreet laoreet, dolor ante ornare orci, in porta diam orci a est. Ut consequat ultricies
</article>
</main>
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
var NavY = $('.menu').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.menu').addClass('sticky');
} else {
$('.menu').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
</body>
</html>
body
{
margin:0 !important;
background-image: url("what-the-hex-dark.png");
font-size:17px;
}
#topbar
{
min-height:150px;
}
h1
{
margin:0;
text-align: center;
}
#baner
{
background-color: #4d0000;
height:99px;
font-family: 'Lato', sans-serif;
font-size:38px;
color: white;
letter-spacing: 5px;
}
#topnav
{
width:100%;
height:39px;
border-top:1px dotted gold;
border-bottom:1px dotted gold;
background-color: #023826;
text-align: center;
padding: 5px 0px;
}
#container
{
width:100%;
}
ol
{
margin:0;
padding:0;
list-style-type:none;
font-size: 18px;
height:40px;
line-height: 200%;
display:inline-block;
}
ol a
{
color:white;
text-decoration: none;
height:40px;
display:block;
}
ol > li
{
float:left;
min-width: 150px;
height:40px;
border-right: 1px dotted gold;
}
ol > li:first-child
{
border-left: 1px dotted gold;
}
ol>li:hover
{
background-color: #034a32;
cursor:pointer;
}
ol>li:hover >a
{
color: #001100;
}
ol>li>ul
{
list-style-type:none;
padding:0;
margin:0;
height:50px;
display:none;
}
ol>li:hover > ul
{
display:block;
}
ol>li>ul>li
{
background-color: #034a32;
position:relative;
z-index:100%;
border-top:1px dotted gold;
}
ol>li>ul>li:hover
{
background-color:#023826;
}
ol>li>ul>li:hover>a
{
color:#011911;
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
#content
{
margin-top:25px;
margin-left:auto;
margin-right:auto;
width: 60%;
height: auto;
border:0px solid white;
background-color: #00004d;
color:#a6a6a6;
padding:25px;
-webkit-box-shadow: 0px 0px 1px 3px rgba(51,51,255,0.9);
-moz-box-shadow: 0px 0px 1px 3px rgba(51,51,255,0.9);
box-shadow: 0px 0px 1px 3px rgba(51,51,255,0.9);
}
https://imgur.com/a/4lJduXj