• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kilka pytań i porad

VPS Starter Arubacloud
0 głosów
310 wizyt
pytanie zadane 12 stycznia 2019 w HTML i CSS przez Yorweth Obywatel (1,310 p.)

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

 

1 odpowiedź

0 głosów
odpowiedź 13 stycznia 2019 przez antypop Mądrala (5,730 p.)
Polecam Bootstrap'a do takich rzeczy :)

Link do kursu : https://kursbootstrap.pl/
komentarz 14 stycznia 2019 przez Yorweth Obywatel (1,310 p.)
No dobrze, dziękuję za pomoc jeśli chodzi o bootstrap, na pewno się w tym zagłebie.

a znasz może odpowiedzi odnośnie pytania, 4 i tego co jest pod nim oraz co sądzisz o znacznikach semantycznych, czy powinienem to jakoś zmienić? czy jest w miarę ok, gdyż staram się ich nie stylizować tylko divy w których się znajdują
komentarz 15 stycznia 2019 przez antypop Mądrala (5,730 p.)

@antypop,

nie bardzo kumam o co Ci chodzi z tym bannerem. Nie ustawiaj w ogóle divowi wysokości to napis będzie go "wypełniał" w 100% (no prawie). 

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ół...

Widocznie masz gdzieś ustawione marginesy lub obramowania które przy zmianie się krzaczą. 

Bootstrap :) łykniesz w jedno popołudnie a zobaczysz ile zaoszczędza się czasu i nerwów.

Podobne pytania

0 głosów
1 odpowiedź 177 wizyt
0 głosów
1 odpowiedź 337 wizyt
pytanie zadane 8 października 2017 w HTML i CSS przez David Sundkikngs Obywatel (1,180 p.)
+2 głosów
1 odpowiedź 512 wizyt
pytanie zadane 14 czerwca 2016 w Nasze projekty przez MrMock Bywalec (2,890 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...