ugrás a tartalomhoz

Horgony a képernyő tetejére

Hymer · 2019. Már. 24. (V), 19.58
Egymás mellett van két div, a baloldaliban négy link a jobboldaliban levő négy div horgonyához. Szeretném, ha a linkre kattintva a hozzá kapcsolódó horgony az oldal tetejére csúszna.
Hogy tudom azt megoldani, hogy csak az a div jelenjen meg a képernyőn, ami a horgonyhoz tartozik?
Szeretném utánozni ezt a sablont: http://pedikurspacczer.hu/
‹ Szövegből kattintható link Aktív menüpont eltüntetése CSS-sel ›
 ■
1

Off... Elárulná valaki, mik

mind1 valami név · 2019. Már. 24. (V), 20.21
Off...

Elárulná valaki, mik ezek a "horgonyok"?
2

Anchor

Hymer · 2019. Már. 24. (V), 21.27
Az egyik legszokásosabb link, amikor a saját weboldaladon belül linkelsz. Pl tartalomjegyzék. Vagy egy-egy szó, amitől átugrasz egy egész cikkre, mint pl a Wikipédiában. Én most egy fajta menüt próbálok csinálni belőle.
4

O.K., csak ezekkel a

mind1 valami név · 2019. Már. 24. (V), 22.32
O.K., csak ezekkel a megmagyart szakkifejezésekkel egyébként sem ápolok túl jó (v)iszonyt, a horgony, meg anchor eredetiben nekem az A taget jelenti valamiért. :)
Szóval nagyon nem értettem, miről van szó.
Így már rendben.
3

#

Arnold Layne · 2019. Már. 24. (V), 21.38
Bármi id attribútuma, de linknél (<a>) a name is működik, ha jól emlékszem. URL-ben a # utáni rész.
5

A horgonyzott div

Hymer · 2019. Már. 24. (V), 22.40
Azt szeretném elérni, hogy az a div, amelyikben a horgony van, vagyis amelyikre az a:href vagy az a:name mutat egyedül jelenjen meg a jobboldalon, ahogy az a példán látszik. Mi legyen a padding vagy a margin vagy bármi más trükk a css-sel, hogy ugyanúgy csak az a speciális szöveg jelenjen meg, ami ahhoz a ponthoz tartozik. Mintha menü lenne.
Mert szokásos esetben a horgony meg se moccan, ha valahol már megjelent a képernyőn, és minden ott van körülötte, ami nem oda tartozik.
6

javascript

Pepita · 2019. Már. 25. (H), 11.04
Szerintem ezt pusztán css-el nem, vagy nagyon nehezen lehet megoldani.
Így hirtelen az jutott eszembe, hogy a "horgonyzott" divek kapnak egy közös class-t, és a linkek is.
Ezután js-ben írsz a linkekre egy onClick eseménykezelőt, amiben először eltünteted az összes "horgonyzott" divet, aztán megjeleníted azt, amelyiknek az id-ja a klikkelt link href-e.
Css-ben annyi van, hogy eredetileg mindegyik el van tüntetve, vagy pl az első kivételével mindegyik, ahogy szeretnéd.

SZERK.: Az a:name nem "mutat" másik elemre, hanem ugyanaz a szerepe, mint az id-nak.
7

Szerintem ezt pusztán css-el

kuka · 2019. Már. 25. (H), 12.04
Szerintem ezt pusztán css-el nem, vagy nagyon nehezen lehet megoldani.
Pusztán CSS-el a :target segítségével oldható meg: https://jsfiddle.net/zah8f374/ (Viszont 2035 előtt nem éppen teljes megoldás, mert nincs alapértelmezett tartalom.)
9

Ez nagyon jó, mindjárt

Hymer · 2019. Már. 25. (H), 15.17
Ez nagyon jó, mindjárt kipróbálom.
8

Onclick - value?

Hymer · 2019. Már. 25. (H), 15.13
Diktálnád lépésről lépésre?
A Kompozert használom és ott a Horgony tulajdonságainál van Javascript események. Ott választhatom, hogy onclick. Mit írjak az érték-be?
Vagy van ennél jobb js-szerkesztő? Linux Mint van a gépemen, és ez kicsit behatárolja a választékot. Mindenesetre van rajta Atom nevű szerkesztő, amit a Google felsorol a legjobb js-szerkesztők között, de most nincs időm és idegem új dolgokat tanulni. De szívesen követem a lépéseket.
Szerk. Talán egyszerűbb, ha idemásolom az egészet. A szépséggel, színekkel most nem törődök, azt majd később elintézem.
<html>
<head>
<meta content="text/html; charset=ISO-8859-2"
http-equiv="content-type">
<title>Lapozo</title>
<style type="text/css">
.vertikalmenu {
line-height: 1.9em;
float: left;
position: fixed;
width: 300px;
margin-right: 20px;
list-style-image: url(file:///Z:/home/ivan/Dokumentumok/Anik%C3%B3/Itthoni%20pedik%C5%B1r/kompozer-honla/diszk.png);
visibility: visible;
height: auto;
display: block;
z-index: 1;
}
.szekciowrapper {
overflow: hidden;
float: none;
position: absolute;
visibility: visible;
left: 250px;
margin-left: 100px;
background-color: #999999;
}
.szekcio {
background-color: #33ffff;
min-height: 400px;
}


</style>
</head>
<body>
<div class="vertikalmenu">
<ul bold;="" color:="" rgb(0,="" 118,="" 0);="">
<li><a href="#MIBEN">MI A GYÓGYÍTÓ PEDIKŰR?</a></li>
<li><a href="#Eg%E9sz_">BEMUTATKOZOM</a></li>
<li><a href="#G%E9pi_">ÁRAK</a></li>
<li><a href="#Jelentkez%E9s%E9t_">KAPCSOLAT</a></li>
</ul>
</div>
<div class="szekciowrapper">
<div class="szekcio">
<h1><a name="MIBEN"></a>MIBEN SEGÍTHET A <em>GYÓGYÍTÓ</em>
PEDIKŰRÖS?</h1>
[su_list icon="icon: support"]
<ul>
<li>diabéteszes láb speciális kezelése</li>
<li>érszűkületes láb speciális kezelése</li>
<li>tumoros betegek speciális kezelése</li>
<li>egyéb belgyógyászati és bőrgyógyászati elváltozások kezelése</li>
<li>seb-kezelések</li>
</ul>
[/su_list]
</div>
<div class="szekcio"><span style="font-size: 14px;">[su_row][su_column
size="1/2"
center="no" class=""] <a name="Egész_"></a>Egész
életemben humán beállítottságú voltam, ezért
is választottam az <strong>ápolónői</strong> hivatást, amit 22 évig
végeztem <strong>kórházban</strong>. Ezután váltottam és elvégeztem a <strong>Szociális
Ápoló és Gondozó iskolát</strong> 2001-ben. 14 évig dolgoztam az <strong>idősgondozásban</strong>.
2014-ben ismét váltottam, de fontos volt számomra, hogy valami olyat
csináljak, amiben segíteni tudok az emberek egészségével kapcsolatban.
Ezért választottam a pedikűrös szakmát, amiben segíteni tudok az
egészség megőrzésében, javításában és az esztétikában.</span>
<span style="font-size: 14px;">2014-ben kaptam a pedikűrös alapképzést
egy OKJ lábápoló tanfolyamon a <strong>Pedi Suliban</strong>. </span><span
style="font-size: 14px;">2016 júniusában elvégeztem a <strong><em>Gyógyító
Pedikűr</em></strong> szakképzést a Róth Éva által vezetett <strong>Afrodite
97 Oktatási Centrumban</strong>. </span>
[su_row][su_column size="1/2" center="no" class=""][/su_column]
[su_column size="1/2" center="no" class=""]
<span style="font-size: 14px;">Első munkahelyem Csepelen a <strong>Kaméleon
szalon</strong> volt , majd 2015. október 1-től 2018 végéig <strong>Pesterzsébet
központjában lévő szépségszalonban</strong> dolgoztam. </span><span
style="font-size: 14px;">2019 január óta Pesterzsébeten, <strong>otthoni</strong>
környezetben berendezett pedikűrszalonomban várom kedves vendégeimet.</span>
<span style="font-size: 14px;"><strong>Mottóm:</strong><em> segíteni az
emberek egészségének megőrzésében, javításában, komfortérzetük
növelésében.</em></span>
<span style="font-size: 14px;">Célom: vendégeim elégedetten távozzanak
tőlem és a pedikűrben eltöltött idő kellemes és relaxáló legyen
számukra.</span>[/su_column][/su_row]<br>
<br>
</div>
<div class="szekcio">[su_row][su_column
size="1/2" center="no" class=""][accordions_pplugins
id='1035'][/su_column] [su_column size="1/2" center="no" class=""]<a
name="Gépi_"></a>Gépi
esztétikai pedikűr 4 300 FtSPA -kezelés lábra 2 500 FtLakkozás pedikűr
után 800 FtLakkozás pedikűr nélkül 1 500 FtManikűr 1 100 FtLakkozás 800
FtSPA–kezelés kézre 2 500 Ft[/su_column][/su_row]
<br>
<h1 class="section-title"><span style="font-size: 16px;"><a
name="Jelentkezését_"></a>Jelentkezését
várom szeretettel</span></h1>
<ul>
</ul>
</div>
<div class="szekcio">Kapcsolat
<li><img class="wp-image-76 alignright"
src="http://pedikurspacczer.hu/wp-content/uploads/2019/02/Anik%F3-profil-1.png"
alt="" height="169" width="144">
<div class="szekcio"><span style="font-size: 12px;">Pedikűrszalonom
Pesterzsébeten látogatható, előzetes időpont foglalás alapján
. - Budapest, 1203 Baross utca 25.</span></div>
</li>
<li><span style="font-size: 12px;">Telefon: 06 20 379 7391</span></li>
<li><span style="font-size: 12px;">Kérem, hogy időpont megbeszélése,
lemondása, vagy egyéb ügyben kizárólag telefonon vegye fel velem a
kapcsolatot.</span></li>
</div>
</div>
</body>
</html>
10

Hát nem igazán...

Pepita · 2019. Már. 25. (H), 16.15
Bocsi, de a "diktálás" helyett én leírni szoktam a forráskódot. Döntsd el, hogy Te szeretnéd megcsinálni, vagy megbízni szeretnél valakit?

Nem tudom, hogy ki fia borja az általad említett Kompozer, ez valamiféle csili-vili magától működő IDE (~kódszerkesztő) szeretne lenni?
Én PhpStorm-ot használok jelenleg, "csak úgy belenézni" pedig Notepad++ -t.

most nincs időm és idegem új dolgokat tanulni
Ha ez így van, akkor írj egy pontos specifikációt a feladatról, szedd össze egy helyre a szükséges képeket és szöveget, aztán keress meg egy ezzel foglalkozó céget / fejlesztőt és kérj árajánlatot. Itt inkább akkor tudunk segíteni, ha Te szeretnéd megtanulni és így megoldani.

Amit idemásoltál, az tele van felesleges "zajjal", valahogy úgy kéne, mint Kuka csinálta, csak a lényeget.
Ezzel együtt nem értem, hogy miért nem tetszik az ő megoldása? Sokkal egyszerűbb, mint js-el (én is tanultam belőle :) ).

Ha az alapján meg tudod csinálni, és csak annyi hiányzik, hogy legyen kint az első oldalbetöltéskor, akkor szerintem tudunk tovább segíteni. Legrosszabb esetben majd window.onLoad - ra "megklikkeljük" az elsőt, ha nem tudunk rá okos css-trükköt kitalálni. Addig viszont legyen meg a többi jól, de rövidített és egyszerű szöveggel.
11

Megcsináltam

Hymer · 2019. Már. 26. (K), 05.47
Megcsináltam Kuka javaslata szerint és majdnem jó.
Két kérdésem van.
A Negyedik miért nem működik?
Hogy tudom elérni, hogy az Első megjelenjen, amikor kinyílik, aztán lehessen váltogatni ide-oda?
 <style type="text/css">
nav {
	float: left;
	width: 150px;
	border-right: solid thick silver;
}

div.vagy {
	display: none;
}

div.vagy:target {
	display: block;
	</style>
	<nav>
<ul>
<li><a href="#egy">első</a></li>
<li><a href="#ketto">második</a></li>
<li><a href="#harom">harmadik</a></li>
<li><a href="#negy">negyedik</a></li>
</ul>
</nav>

<main>
<div class="vagy" id="egy">Ej mi a kő! tyúkanyó, kend
A szobában lakik itt bent?
Lám, csak jó az isten, jót ád,
Hogy fölvitte a kend dolgát!</div>
<div class="vagy" id="ketto">Itt szaladgál föl és alá,
Még a ládára is fölszáll,
Eszébe jut, kotkodákol,
S nem verik ki a szobábol.</div>

<div class="vagy" id="harom">Dehogy verik, dehogy verik!
Mint a galambot etetik,
Válogat a kendermagban,
A kiskirály sem él jobban.</div>

<div class="vagy" id=negy">Ezért aztán, tyúkanyó, hát
Jól megbecsűlje kend magát,
Iparkodjék, ne legyen ám
Tojás szűkében az anyám. –

Morzsa kutyánk, hegyezd füled,
Hadd beszélek mostan veled,
Régi cseléd vagy a háznál,
Mindig emberűl szolgáltál,

Ezután is jó légy, Morzsa,
Kedvet ne kapj a tyúkhusra,
Élj a tyúkkal barátságba’...
Anyám egyetlen jószága.
</div>
</main>
12

Hogyan látható az első horgony az oldal nyitásával?

Hymer · 2019. Már. 26. (K), 09.38
Sokat bajlódtam vele, sikerült a horgonyokat rendbehozni, de hogy mi a különbség, azt nem látom. Látja valaki?
Akkor már csak egy kérdés van: hogy jelenik meg az Első, amikor kinyílik az oldal.
 <style type="text/css">
nav {
	float: left;
	width: 150px;
	border-right: solid thick silver;
}

div.vagy {
	display: none;
}

div.vagy:target {
	display: block;
	height: 400px;
	</style>
	<nav>
<ul>
<li><a href="#egy">első</a></li>
<li><a href="#ketto">második</a></li>
<li><a href="#harom">harmadik</a></li>
<li><a href="#negy">negyedik</a></li>
<li><a href="#otos">ötödik</a></li>

</ul>
</nav>

<main>
<div class="vagy" id="egy">
Ej mi a kő! tyúkanyó, kend
A szobában lakik itt bent?
Lám, csak jó az isten, jót ád,
Hogy fölvitte a kend dolgát!</div>

<div class="vagy" id="ketto">
Itt szaladgál föl és alá,
Még a ládára is fölszáll,
Eszébe jut, kotkodákol,
S nem verik ki a szobábol.</div>

<div class="vagy" id="harom">
Dehogy verik, dehogy verik!
Mint a galambot etetik,
Válogat a kendermagban,
A kiskirály sem él jobban.</div>


<div class="vagy" id="negy">
Ezért aztán, tyúkanyó, hát
Jól megbecsűlje kend magát,
Iparkodjék, ne legyen ám
Tojás szűkében az anyám. –

Morzsa kutyánk, hegyezd füled,
Hadd beszélek mostan veled,
Régi cseléd vagy a háznál,
Mindig emberűl szolgáltál,
</div>

<div class="vagy" id="otos">

Ezután is jó légy, Morzsa,
Kedvet ne kapj a tyúkhusra,
Élj a tyúkkal barátságba’...
Anyám egyetlen jószága.
</div>
</main>
13

Első

Pepita · 2019. Már. 26. (K), 10.29
Például úgy, hogy "megklikkeled" javascript-ből:
<nav>  
<ul>  
<li><a id="link_egy" href="#egy">első</a></li>  
<li><a href="#ketto">második</a></li>  
<li><a href="#harom">harmadik</a></li>  
<li><a href="#negy">negyedik</a></li>  
<li><a href="#otos">ötödik</a></li>  
</ul>  
</nav>
Az első link, aminek a tartalmát szeretnéd megjeleníteni, kapott szintén egy id-t, amivel ki tudjuk majd választani, hogy meg szeretnénk klikkelni.

...

Aztán a záró main után:
<script>
document.getElementById('link_egy').click();
</script>
15

Egy másik startoldal

Hymer · 2019. Már. 26. (K), 11.08
Ez a js elegánsabb, de én meg rájöttem egy másik ötletre. Betenni még egy startoldalt, ami így néz ki:
 <style type="text/css">
nav {
	float: left;
	width: 150px;
	border-right: solid thick silver;
}


div.vagy {
	display: none;
}

div.vagy:target {
	display: block;
	height: 400px;
	</style>
	<nav>
<ul>
<li><class="#start"><a href="#start">első</a></li>
<li><a href="kuka.html"#ketto">második</a></li>
<li><a href="kuka.html#harom">harmadik</a></li>
<li><a href="kuka.html#negy">negyedik</a></li>
<li><a href="kuka.html#otos">ötödik</a></li>
</ul>
</nav>
<main>
<div id="start">

Ej mi a kő! tyúkanyó, kend
A szobában lakik itt bent?
Lám, csak jó az isten, jót ád,
Hogy fölvitte a kend dolgát!</div>
</main>
Ez jelenik meg először, aztán a következő kattintással átpottyan a látogató a teljes oldalra, ahol aztán úgy kattog, ahogy akar... :)
16

Hibás sor

Pepita · 2019. Már. 26. (K), 11.28
<li><classclass="#start"><a href="#start">első</a></li>
class tag nem létezik.

Nem tudom, ezzel mi a cél, lényegi változást nem látok rajta, a fenti hibán kívül.
14

style

Pepita · 2019. Már. 26. (K), 10.31
Az 1 - 15. sorban lévő style rossz helyen van, body-n belül nem lehet.
Tedd ki a html->head részbe.
17

js-csúszka

Hymer · 2019. Már. 26. (K), 11.31
Ami a body-t illeti, én ezt be fogom tenni a wordpressbe, ahol már van php body és csak egyes oldalakat szerkesztek benne. De az egyes oldalakon belül van html és wysiwyg szerkesztő is, úgyhogy ott ez így jó is lesz, nem kell külön body.
Azt kérem, nézd meg a http://pedikurspacczer.hu oldalt, amit utánozni szeretnék a függőleges horgony-menüvel. Az szépen, méltóságteljesen liftezik fel le. Ezt meg lehet oldani js-sel vagy css-sel?
18

css

Pepita · 2019. Már. 26. (K), 11.33
Azt nem tudom, mit jelent, hogy "php body".
Szerintem először legyél tisztában az alapvető html szerkezettel, milyen a struktúra, minek hol a helye. Utána próbálkozz html beszúrásokkal tartalomkezelőben.

Egyébként - mivel már majdnem kész - miért erőlteted a tartalomkezelőt? Simán statikus html-lel meg tudod oldani. Tisztább szárazabb érzés.

Az szépen, méltóságteljesen liftezik fel le. Ezt meg lehet oldani css-sel?

Nézd meg a már említett fejlesztői eszközökkel böngészőben, és ha ügyes vagy - és miért ne lennél -, akkor meg fogod találni, hogy csinálja. :)

Nem szeretném, ha csak annyi lenne az érdeklődésed, hogy kicsi lépésenként mindig mondjuk meg a megoldást..