Problem z wyśrodkowaniem poziomo ramki między tekstem

pytanie zadane 1 marca 2019 w HTML i CSS przez mlodybuk Nowicjusz (170 p.)

Witam!

Chciałbym poprosić o pomoc związaną z kropkowaną ramką, ponieważ

chciałbym ją wyśrodkować pomiędzy tekstem i za żadne grzechy nie wiem

jak mam to zrobić. Prosiłbym o pomoc. Z góry dziękuję!

#nav
{
    float: left;
    background-color: lightgrey;
    width: 190px;
    min-height: 640px;
    padding: 10px;
    font-size: 20px;
    text-align: left;
}
#nav > li
{
    list-style-type: none;
    border-top: 1px dashed #ffffff;
}

3 odpowiedzi

odpowiedź 2 marca 2019 przez mb-dir Mądrala (6,710 p.)
wybrane 2 marca 2019 przez mlodybuk

Najlepsza

Witaj

https://codepen.io/hello-michal/pen/BbKRwm?editors=1100 - tutaj postarałem się opisać i wyjaśnić rozwiązanie - gdybyś czegoś nie rozumiał to pisz ;)

I taka mała uwaga ogólna odradza się stylizowania po id, ponieważ style mają być ogólnodostępne(czyli mogą być przypisane do kilku elementów na stronie a id jest unikalne więc nie może być dwóch divów o takim samym id)

komentarz 2 marca 2019 przez mlodybuk Nowicjusz (170 p.)

Witaj.

Dziękuje bardzo za pomoc! Lecz prosiłbym o pomoc jeszcze raz albowiem po użyciu twojego kodu dodała się jedna niepotrzebna ramka między tekstami. I niestety nie chce mi się dodać ramka przy ostatnim wyrazie przy użyciu li:last-child. Podejrzewam że problem leży przy moim źle zoorganizowanym kodzie, ponieważ mam zaledwie 15 lat i uczę sie html/css. Dla ułatwienia podam po prostu cały mój kod i jakbyś mógł mi jeszcze raz pomóc to będę ci bardzo wdzięczny :)

*{
	padding: 0;
	margin: 0;
}
#container
{
	width: 1250px;
	margin-left: auto;
	margin-right: auto;
}
#logo
{
	background: url('w.jpg') top left no-repeat;
	text-align: center;
	padding: 20px;
	font-size: 22px;
    margin-top: 25px;
	border-style: outset;
    border-width: 2mm;
}

.nav
{
	float: left;
	background-color: lightgrey;
	width: 190px;
	min-height: 640px;
	padding: 10px;
	font-size: 20px;
	text-align: left;
}
.nav > ol > li
{
	list-style-type: none;
	border-top: 1px dashed #ffffff;
	padding: 10px 0;
}
.nav > ol> li:last-child
{
	border-bottom: 1px dashed #ffffff;
}
#content
{
	float: left;
	padding: 20px;
	width: 810px;
	background-color: white;
	min-height: 620px;
}
#photo
{
	background-color: grey;
	float: left;
	width: 180px;
	max-height: 650px;
	padding: 5px;
}
#footer
{
	clear: both;
	background-color: black;
	text-align: center;
	padding: 20px;
	color: white;
	margin-bottom: 25px;
}
h2
{
	text-align: center;
	font-size: 30px;
}
a.navlink
{
	text-decoration: none;
	color: #000000;
}

komentarz 2 marca 2019 przez mb-dir Mądrala (6,710 p.)

Witam

Nie przejmuj się każdy błędy popełnia;) a ja sam mam 16 lat więc wielkiej różnicy wiekowej nie ma. Co do kodu to przeanalizuję i postaram się go poprawić, jednak obecnie nie mam czasu, myślę że ~ 21 powinienem dać rady zerknąć na twój kod.

Dodatkowo poprosił bym o kod html'a

Pozdrawiam

komentarz 2 marca 2019 przez mlodybuk Nowicjusz (170 p.)

Dziękuje bardzo ! :)

tutaj kod html:

<!DOCTYPE HTML>
<html lang="pl">

  <head>
     <meta charset="utf-8"/>
     <title>Historia Kajakarstwa</title>
     <meta name="description" content="Na stronie dowiesz się jak wyglądała historia kajakarstwa od samego początku."/>
     <meta name="keywords" content="Historia, Kajakarstwo, Mistrzostwa, Kajakarze"/>
	 <meta http-quiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
     <link rel="stylesheet" href="style.css" type="text/css" />
	 <link rel="shortcut icon" href="favicon.ico" />
  </head>
  
  <body background="m.jpg" >
   
  
     <div id="container">
	 
	    <div id="logo">
		   <h1><script type="text/javascript" src="http://bajery.net/js/zm.js?t[]=History%20Of%20Canoeing&t[]=Historia%20Kajakarstwa&timer=2000"></script></h1>
		</div>
	    
		<div class="nav">
		<ol>
	       <li> <a href="Pierwsze mistrzostwa.html" class="navlink">
	       *Mistrzostwa w Polsce  <br /><br />
		   </a><li>   
           <li> <a href="Odmianykajakarstwa.html" class="navlink">
           *Odmiany kajakarstwa  <br /><br />
		   </a></li>  
	       <li> <a href="KajakarstwoWPolsce.html" class="navlink">
          *Kajakarstwo W Polsce  <br /><br />
		   </a></li>    
	       <li> <a href="Polscykajakarze.html" class="navlink">
	       *Polscy Kajakarze		
		   </a></li>
        <ol>		
		</div>
		
		<div id="content">
		   <h2>Kajakarstwo, z kąd to sie wogóle wzięło?</h2> <br />
		   Łódź była w wielu miejscach jednym z podstawowych narzędzi człowieka już od najdawniejszych czasów. Służyła mu do podróżowania, polowania i walki. Historia wodnych dyscyplin sportu sięga daleko wstecz, a świadczą o tym liczne, do dziś zachowane pamiątki z przeszłości. W zależności od miejscowych warunków i dostępnych materiałów powstały różne typy łodzi: od kanadyjek (canoe), używanych do dziś przez
		   północnoamerykańskich Indian, poprzez pirogi polinezyjskie do kajaków Eskimosów.
		<br /><br />
		   Wykopaliska archeologiczne stale pozwalają przesuwać wstecz datę narodzin kajaka i kanadyjki. Brytyjski archeolog sir Leonard Wolley prowadzący badania w ruinach miasta Ur, znajdującego się na terytorium dzisiejszego Iraku, znalazł grób jednego z sumeryjskich królów, gdzie znajdował się wykonany ze srebra model pirogi i wiosła. Wiek tego znaleziska ocenia się na około 6000 lat.
        <br /><br />
           Prace wykopaliskowe prowadzone w Egipcie dowodzą, że już na ponad 2000 lat p.n.e. były tam w użytku łodzie, podobne kształtem do wieloosobowych kanadyjek.
        <br /><br />
           W Muzeum Pergamońskim w Berlinie znajduje się rysunek, ryty w kamieniu, przedstawiający taką właśnie kanadyjkę z ośmioma kanadyjkarzami. Natomiast rzeźby w pałacu w Korsabat przekonują nas, że stylem kanadyjskich Indian wiosłowali także Fenicjanie i wikingowie. W tym ostatnim przypadku, dowodem jest łódź wojenna wykopana w Szlezwiku, a pochodząca z ok.300 r.n.e.
        <br /><br />
           Najstarsze informacje o kajakach czerpać można zarówno z legend, jak i wykopalisk, znaków runicznych i rzeźb archaicznych. Na podstawie wykopalisk kanadyjskich udało się odtworzyć szczegóły budowy pierwotnych canoe. Były one wykonywane z kory, najczęściej brzozowej, na szkielecie z giętkiego drewna (wierzba, cedr). Eskimosi używali łodzi ze szkieletem z drewnianych listew lub z kości, które obciągali skórą reniferów albo fok, zostawiając jedynie niewielki otwór, przez który wchodzili do kajaka. Otwór ten uszczelniany był skórzaną odzieżą Eskimosów. Mniejsza szerokość takich łodzi umożliwiła stosowanie wioseł o dwóch piórach, co umożliwiało bardziej efektywne wiosłowanie i sterowanie. W ten oto sposób powstał prototyp kajaka.
		</div>
		
		<div id="photo">
           <img src="s.jpg"/>
		</div>
		
		<div id="footer">
		   &copy; THANKS FOR COMING! SEE YOU! 
		</div>
		
	 </div>
	
	</body>


</html>

komentarz 2 marca 2019 przez mb-dir Mądrala (6,710 p.)

Rozwiązanie było proste - zapomniałeś zamknąć <li> wstawiłem komentarz gdzie dokładnie

https://codepen.io/hello-michal/pen/KEzXEJ

Wieczorem spróbuje pobawić się z tym żeby poprawić wygląd tego menu po lewej stronie.

Jeszcze taka szybka informacja - spróbuj usunąć br z tej listy i zobacz czy to czasem lepiej nie wygląda bez tych <br>

Pozdrawiam

komentarz 2 marca 2019 przez mlodybuk Nowicjusz (170 p.)

Ahh jeden mały błąd a zaburza konstrukcje całej strony. No cóż to witamy w świecie html'a heh

Dzięki bardzo za poświęcony czas!

komentarz 2 marca 2019 przez mlodybuk Nowicjusz (170 p.)

teraz bez <br> wygląda zdecydowanie lepiej!

już nie wiem jak mam ci dziękować za taką pomoc! :)

przy okazji znalazłem powód problemu z li:last-child

również nie było </ol> tylko <ol>.

komentarz 2 marca 2019 przez mb-dir Mądrala (6,710 p.)

Jeszcze jedno, gdy będziesz czuł się na siłach to jak najszybciej zabierz się za flexa i grida - float: left działa ale jest przestarzały i sprawia więcej problemu niż pożytku + trudniej jest zrobić RWD*

Do nauki flexa polecam:

Do nauki grida:

Pozdrawiam

*Responsive web design (RWD) – technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów.

komentarz 2 marca 2019 przez mlodybuk Nowicjusz (170 p.)

Dzięki za wszytkie porady i pomoc!

również pozdrawiam!

odpowiedź 1 marca 2019 przez lateM Pasjonat (17,660 p.)

padding: 10px 0; dla elementów li? Dzięki temu ponad tekstem i pod nim będzie odstęp 10px a po nim border. W ten sposób stworzysz takie sztuczne wycentrowanie.

Nie wiem tylko dlaczego pod Twoim tekstem występuje jakaś przerwa na tym screenie a w kodzie CSS niczego takiego nie ma... Jeśli mój sposób Ci nie pomoże, to podaj cały kod.

Dodatkowo pewnie będziesz chciał skasować ten border dla pierwszego lub ostatniego elementu listy? Wtedy może się przydać selektor li:first-child lub li:last-child a do tego border-top: 0;