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

question-closed Nie działające znaczniki w HTML!

VPS Starter Arubacloud
0 głosów
412 wizyt
pytanie zadane 2 kwietnia 2017 w HTML i CSS przez Śwież4k Bywalec (2,570 p.)
zamknięte 2 kwietnia 2017 przez Śwież4k

Mam problem, ponieważ nie rozumiem czemu jak dodałem znacznik <ol> to nie wyświetlają się numery obok wyrazów. Nie działa również prawy margines i padding. Możecie pomóc mi zlokalizować problem?

Kod HTML

<!DOCTYPE HTML>
<HEAD>
<link rel="stylesheet" href="indexx2.css" type="text/css" />
</head>
<body>
<div id="header">
<h2> Nagłówek </h2>
</div>
<div id="body">
<div id="leftcol">
<p> MENU </p>

		

		<a href="index.html">powrót

		<a href="http://onet.pl">ONET </a>

	
</div>
<div id="main">
<h3> E14 </h3>
<ol>
<li>lista 1</li>
<li>lista 2</li>
<li>lista 3 </li>
</ol>
<p> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
</div>
</div>

<div id="bot">
<p> Michał, Patryk </p>
</div>

CSS

 

* {
	margin:0;
	padding:0;
	 display: block;
	width: 100%;
    overflow:hidden;
}

#header {
	
	width: 900px;
	height: 100px;
	background-color: #DDDDDD;
	margin-left: auto;
	margin-right: auto;
	margin-top:7%;
}
#main { 
width:750px;
height:400px;
background-color: #CCCCCC;





}
#leftcol {
	width: 150px;
	height:400px;
	background-color:#BBBBBB;
	float:left;

	
	
}



#body {
	width:900px;
	height:400px;
		margin-left: auto;
margin-right: auto;
}
#bot {
	
	width: 900px;
	height: 100px;
	background-color: #888888;
	margin-left: auto;
margin-right: auto;
	
}

h2 {
text-align: CENTER;
	margin-top:2%;
	
	
}

h3 {
text-align: CENTER;
	margin-top:2%;
}

#bot > p {
text-align: center;
	margin-top:2%;
}

#leftcol > p {
text-align: center;
	margin-top:2%;
}
#leftcol > a {
	
	margin-top:2%;
text-align: center;
	
}


ol > li {
float : left;
display: block;
width : 200px;
text-align:center;
margin-top: 20px;
position:relative;
left: 10%


}

#main > p {
	
	margin-top:9px;
	margin-left: 8px;
	margin-right: 8px;
	text-align:justify;
	
}











 

komentarz zamknięcia: nie działą
komentarz 2 kwietnia 2017 przez spamator12 Nałogowiec (28,230 p.)
left: 10%

dodaj srednik
komentarz 2 kwietnia 2017 przez Śwież4k Bywalec (2,570 p.)
nie pomogło
komentarz 9 czerwca 2017 przez Gankkah Użytkownik (720 p.)
Co oznacza * ?????

3 odpowiedzi

0 głosów
odpowiedź 2 kwietnia 2017 przez spamator12 Nałogowiec (28,230 p.)
nastepnym razem dawaj to w jsfiddle codepen albo plunkr

 

https://embed.plnkr.co/q8Uwk5SL4oLgiMdyXC9u/
komentarz 2 kwietnia 2017 przez Śwież4k Bywalec (2,570 p.)
w prawym górnym rogu masz przecież przekierowanie
0 głosów
odpowiedź 2 kwietnia 2017 przez Ivan Maniak (60,650 p.)

ol nie ma liczb obok, ponieważ nadałeś mu display: block, a tak właściwie to li, a powinien mieć display: list-item.

P.S. Dodatkowo nadałeś WSZYSTKIM znacznikom display: block. Zrobiłeś to także dla znacznika title (którego nie ma w dokumencie), stylescript, itd. Będą one widoczne po dodaniu.

komentarz 2 kwietnia 2017 przez Śwież4k Bywalec (2,570 p.)

Jak zamieniłem to dalej nie działa sad

–1 głos
odpowiedź 2 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

sam przecież ustawiłeś na wszystkie elementy takie coś:

* {
    margin:0;
    padding:0;
    display: block;
    width: 100%;
    overflow:hidden;
}

 

komentarz 2 kwietnia 2017 przez Śwież4k Bywalec (2,570 p.)
nawet jak się pozbędę tego display: block z całego dokumentu to i tak nie działa.
komentarz 2 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)
usunąłeś display: block z tego co wstawiłam i też ze stylowania li? i nadal nie wyświetlają się numerki przy liście?
komentarz 2 kwietnia 2017 przez Śwież4k Bywalec (2,570 p.)
komentarz 2 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)
dodatkowo overflow: hidden musisz usunąć z * i jest ok
komentarz 2 kwietnia 2017 przez Śwież4k Bywalec (2,570 p.)
.hethetht
komentarz 2 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)
to postaraj się zrobić stronę bez tego overflow dla wszystkich elementów ;)

Podobne pytania

0 głosów
2 odpowiedzi 791 wizyt
pytanie zadane 8 grudnia 2016 w HTML i CSS przez remo82 Użytkownik (560 p.)
0 głosów
1 odpowiedź 117 wizyt
pytanie zadane 23 listopada 2016 w HTML i CSS przez Maksym Piętak Nowicjusz (210 p.)
0 głosów
0 odpowiedzi 743 wizyt

93,006 zapytań

141,973 odpowiedzi

321,254 komentarzy

62,345 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...