Diskuze: Relativní "box" posunuju zbytek obsahu

Michal Kučera

Člen

Michal Kučera:3.3.2015 15:46

Opět já. :-D
Mám seznam několika slov (uvedu prozatím jako příklad, ke konci je i článek)

(Slovo1
Slovo2
Slovo3)

Po hoverování Slova1 se objeví box s podrobnýma informacema

(Slovo1
___________________________

Podrobné info o Slově1

_________________________

Slovo2
Slovo3)

Ale jak už podle mé ukázky lze vidět, ostatní "Slova" se posunou dál, moje představa je taková:

Slovo1 ___________________________
Slovo2 | Podrobné info o Slově1 |
Slovo3 |_________________________|

A teď místo mé krásné ukázky přikládám i kód 8-) (šířky a výšky a pozice jsou ještě špatně nastavené, podrobného obsahu tam bude více)

<div class=adresa>     Adresa
            <div class=adresa_box id=adresa_box>
            <div id=jmeno>   blabla </div><br>
              blabla>
             </div>
          </div>
         <div class=reditel>    Ředitel
             <div class=reditel_box id="reditel_box">
             <div id=jmeno>   blabla     </div>           <br>
                 blabla
             </div>
          </div>
         <div class=sekretariat>     Sekretariát
            <div class=sekretariat_box id="sekretariat_box">
             <div id=jmeno>   blabla </div>           <br>
               blablabla
            </div>
         </div>
         <div class=jednatel>  Jednatel
               <div class=jednatel_box id=jednatel_box>
                  <div id=jmeno>  bla  blabla  </div>                  <br>
                   blablabla

               </div>
         </div> <br>
           <div id=kontaktniform> <a href="contact.html#formular">Kontaktní formulář</a></div>
        </div>

#contact_body{
height: 168px                          ;
width:  180px                          ;
background:  white                     ;
border-radius: 0px 0px 2px 2px;
position: static;
font-size: 16px;
font-family: Verdana;
margin: 0 5px 10px 10px;
padding: 20px;
line-height:200%;}

/*Vzhled odkazu na kontaktní formulář*/
#kontaktniform{text-align:center}
#kontaktniform a {
text-decoration: none;
color:#00008B;
font-family: b;
transition:400ms;}
#kontaktniform a:hover{font-size: 1.1em; color: black;}


/*box*/
.adresa:hover .adresa_box  {
  display: block;
}
.reditel:hover  .reditel_box{
   display: block;
}
.sekretariat:hover .sekretariat_box {
      display: block;
}
.jednatel:hover  .jednatel_box {
        display: block;
}

#adresa_box:hover .adresa_box{
  display: block;
}
#reditel:hover  .reditel_box{
   display: block;
}
#sekretariat:hover .sekretariat_box {
      display: block;
}
#jednatel:hover  .jednatel_box {
        display: block;
}
.adresa:hover{text-decoration: underline; color:green;}
.reditel:hover{text-decoration: underline; color:green;}
.jednatel:hover{text-decoration: underline; color:green;}
.sekretariat:hover{text-decoration: underline; color:green;}
#jmeno{font-family:b;}

.adresa_box  {
  text-align:right;
  margin: 3px;
  padding: 9px;
  display: none;
  border: 1px solid green;
  width: 350px;
  height: 145px;
  box-shadow: 0 0 10px 0 black;
  background: white;
  color: black;
  font-family: Georgia;
  float:left;
  z-index: 10;
  position: relative;
  left:-398px;
  top: -30px;
  z-index: 999;
}
.sekretariat_box  {
  text-align:right;
  margin: 3px;
  padding: 9px;
  border: 1px solid green;
  display: none;
  width: 250px;
  height: 160px;
  box-shadow: 3px 3px 1px black;
  background: white;
  color: black;
  font-family: Georgia;
  float:left;
  z-index: 10;
  position: relative;
  left:-330px;
  top: -30px;
}
.reditel_box  {
  text-align:right;
  margin: 3px;
  padding: 9px;
  border: 1px solid green;
  display: none;
  width: 220px;
  height: 145px;
  box-shadow: 3px 3px 1px black;
  background: white;
  color: black;
  font-family: Georgia;
  float:left;
  z-index: 10;
  position: relative;
  left:-272px;
  top: -30px;
}
.jednatel_box  {
  text-align:right;
  margin: 3px;
  padding: 9px;
  border: 1px solid green;
  display: none;
  width: 180px;
  height: 145px;
  box-shadow: 3px 3px 1px black;
  background: white;
  color: black;
  font-family: Georgia;
  float:left;
  z-index: 10;
  position: relative;
  left:-228px;
  top: -30px;
}
.reditel_box   {
display: none;
}
.sekretariat_box  {
display: none;
}
.jednatel_box    {
display: none;
}

Doufám že jsem dal celou potřebnou část HTML a CSS, moc děkuji za Feedback :-)

Editováno 3.3.2015 15:49

Odpovědět

3.3.2015 15:46

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:3.3.2015 15:56

Po prvé, oprav si kód...
Toto je zle:

<div class=adresa>

Správne sa to zapisuje takto:

<div class="adresa">

Nahoru Odpovědět

3.3.2015 15:56

Neaktivní uživatelský účet

Michal Kučera

Člen

Michal Kučera:3.3.2015 15:59

Oh, fajn, opraveno

Nahoru Odpovědět

3.3.2015 15:59

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

debeneesse

Člen

debeneesse:3.3.2015 16:00

Za druhé:
pro CSS třídy je vhodné používat pomlčku trida-s-pomlckou
pro ID je naopak vhodné používat tento formát idSVelkymiPismenyUKazdehoNovehoSlova
pro name je pak dobré používat podtržítka name_s_podtrzitkem

Nahoru Odpovědět

3.3.2015 16:00

Michal Kučera

Člen

Michal Kučera:3.3.2015 16:05

Fajn, díky, teď už to měnit nebudu, ale pro příště budu vědět.
Smím se zeptat proč je to "VHODNÉ"?

Nahoru Odpovědět

3.3.2015 16:05

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

debeneesse

Člen

debeneesse:3.3.2015 16:18

Samozřejmě nikdo ti např. pro třídy nezakazuje používat podtržítko. Pro každý z těch návrhů platí něco jiného, ale při použití kódu s "nestandardně" formátovaným atributem určitým způsobem může dojít k chybám, které stejně budeš muset opravit. Navíc, příklady, které jsem popsal jsou používané mezi programátory všude na světě. Stačí si projít některé forum, jako např. stackoverflow. A lépe se pak v kódu orientuješ, pokud si tyto tři atributy rozlišíš.
Čili má to dva účely - funkční a orientační.

Nahoru Odpovědět

3.3.2015 16:18

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:3.3.2015 16:55

K chybe. Pozíciu slova daj na relative, čo už máš, ale bez nej ti to nebude fungovať. Elementu, ktorý sa objaví po hoveri, daj position: absolute a urči tomu vhodné súradnice pomocou top, left, bottom, right.

Nahoru Odpovědět

3.3.2015 16:55

Neaktivní uživatelský účet

ZdeCH

Člen

ZdeCH:3.3.2015 17:18

Takhle by to mělo stačit

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div id="prvni">
                Prvni
                <div class="zobraz">
            Zobrazene
        </div>
        </div>

        <div id="prvni">
                Prvni
                <div class="zobraz">
            Zobrazene
        </div>
        </div>

    </body>
</html>

A CSS

.zobraz{
    display: none;
}

#prvni:hover .zobraz{
            display: inline !important;
        }

Nahoru Odpovědět

3.3.2015 17:18

Neřešitelný problém je ten o kterém nevím ...... a taky ona ...

ZdeCH

Člen

ZdeCH:3.3.2015 17:19

nějak se mi to rozsypalo ale to nevadí, měl by ti stačit ten inline display

Nahoru Odpovědět

3.3.2015 17:19

Neřešitelný problém je ten o kterém nevím ...... a taky ona ...

Michal Šmahel

Člen

Michal Šmahel:3.3.2015 17:25

Pozor!! ID musí být unikátní!

Nahoru Odpovědět

3.3.2015 17:25

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Michal Šmahel

Člen

Michal Šmahel:3.3.2015 18:00

A udělej to takto:
HTML: (obsah <body></body>)

<div id="prvni">
  První
    <div>
      Popis
      .
      .
      .
    </div>
</div>
<div id="druhy">
  Druhý
    <div>
      Popis
      .
      .
      .
    </div>
</div>

CSS: (jen základ, zbytek si doplň)

div#prvni div, div#druhy div {
    display: none;
}

div#prvni:hover div {
    display: block;
    position: absolute;
    left: *px;
    top: *px;
}

div#druhy:hover div {
    display: block;
    position: absolute;
    left: *px;
    top: *px;
}

Pozn.: místo * doplň čísla.

Editováno 3.3.2015 18:01

Nahoru Odpovědět

3.3.2015 18:00

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Michal Kučera

Člen

Michal Kučera:3.3.2015 20:39

Vyřešil jsem to tak, že kategoriím jsem dal absolutní pozice, box zůstal relativní.

Nahoru Odpovědět

3.3.2015 20:39

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Jan Lupčík

Tvůrce

Jan Lupčík:3.3.2015 20:53

To CSS se dá upravit

div#prvni div, div#druhy div {
    display: none;
}

div#prvni:hover div, div#druhy:hover div {
    display: block;
    position: absolute;
    left: *px;
    top: *px;
}

Nahoru Odpovědět

3.3.2015 20:53

TruckersMP vývojář

Michal Šmahel

Člen

Michal Šmahel:3.3.2015 20:57

No, nevím, zda-li je to tak úplně správné...

Nahoru Odpovědět

3.3.2015 20:57

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Michal Šmahel

Člen

Michal Šmahel:3.3.2015 21:00

Bohužel, nedá. Pokud bude první (dejme tomu to hlavnější) větší jak druhé (nebo obráceně) a nebude to chtět přesně pod sebou, ale vždy hned za. Pokud by to mělo být vše na stejném místě, ještě by to šlo.

Nahoru Odpovědět

3.3.2015 21:00

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Jan Lupčík

Tvůrce

Jan Lupčík:3.3.2015 21:04

Jo a jo, tam je ta pozice. Promiň, moje chyba.

Nahoru Odpovědět

3.3.2015 21:04

TruckersMP vývojář

Michal Šmahel

Člen

Michal Šmahel:3.3.2015 21:11

Nevadí

Nahoru Odpovědět

3.3.2015 21:11

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:3.3.2015 21:36

id by se hlavně pro stylování nemělo vůbec používat.

Nahoru Odpovědět

3.3.2015 21:36

Neaktivní uživatelský účet

Michal Šmahel

Člen

Michal Šmahel:3.3.2015 21:41

To je pravda, já ho tad mám, neboť vycházím z minulého příkladu, ale sám ho využívám jen nutně. A někdy to bez id ani nejde (pokud se řeší priority).

Nahoru Odpovědět

3.3.2015 21:41

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:3.3.2015 21:42

Vždycky to jde bez id. Stačí se držet určitých konvencí a guideline a už id nikdy nepoužiješ

Nahoru Odpovědět

3.3.2015 21:42

Neaktivní uživatelský účet

Michal Kučera

Člen

Michal Kučera:3.3.2015 21:42

Šmárja. Že mi to někdo neřekl dříve? Jakto?

Nahoru Odpovědět

3.3.2015 21:42

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Michal Kučera

Člen

Michal Kučera:3.3.2015 21:43

A co je to konvence?

Nahoru Odpovědět

3.3.2015 21:43

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Michal Šmahel

Člen

Michal Šmahel:3.3.2015 21:43

Já nevím, asi jednou mi to jinak nešlo .

Nahoru Odpovědět

3.3.2015 21:43

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Michal Kučera

Člen

Michal Kučera:3.3.2015 21:50

Ale myslím proč se nemají používat id?

Nahoru Odpovědět

3.3.2015 21:50

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Jan Vargovský

Tvůrce

Jan Vargovský:3.3.2015 21:51

Jasně definované pravidla, které nesmíš porušit.

Nahoru Odpovědět

3.3.2015 21:51

debeneesse

Člen

debeneesse:4.3.2015 7:54

Já teda do jisté míry souhlasím s "nepoužíváním" ID pro CSS, ale má to ale. ID je atribut pro CSS, ale hlavně pro skripty. Pokud chceš použít ID, použij ho hlavně pro nějaký objekt na stránce, který je unikátní a víckrát se na stránce neobjevuje - má svoji unikátní identifikaci, kterou využiješ např. pro JavaScript. Např.

<div id="sidebar"> nebo <div id="adBox">

Jako takový je ale podle mě zbytečný, lze ho plně nahradit třídami a obejdeš se i bez něj. Když se ještě vrátím k tvému kódu, máš tam zbytečně moc atributů typu

id="reditel_box"

id="sekretariat_box"

, atd... Všem těmto atributům jsi navíc už přiřadil de facto samou identifikaci pomocí tříd. To je špatně. Všem těm "boxům" jednoduše přiřaď třídu box a pokud je potřebuješ dále rozlišit, tak ke každému přidej další třídu způsobem <div class="box reditel">. Poslal bych ti klidně kód, který by tě více nasměroval, ale k tomu je potřeba znát layout, který máš určitě navržený např. graficky a bez něj to asi nepůjde, alespoň v takovémto stavu v jakém kód je mně to nic neřeklo.

Editováno 4.3.2015 7:58

Nahoru Odpovědět

4.3.2015 7:54

Tomáš123

Člen

Tomáš123:10.3.2015 17:37

Blbosť

debeneesse má sčasti pravdu. Zabúdate ale na to, že identifikátor má väčšiu prioritu ako trieda. Ak chceme vytvoriť kód, kde použijeme tried a identifikátorov čo najmenej, budeme identifikátory potrebovať. Iste, dá sa to nahradiť triedami, ale pohodlnejšie a rýchlejšie je identifikátory používať.

Čo sa týka povier o pisaniSpoluSVelkymPismenomKazdehoSlova, tak to môžme použiť, ak ide o identifikátory pre JavaScript.

Vrátim sa ešte ku prvej poznámke lamky02sk:
"Po prvé" neexistuje. Ak je v atribúte iba jedna hodnota, úvodzovky nie sú potrebné. Takže tvoja oprava ničomu nepomohla. Ak ale pôjde o niečo ako:

<div class=prvok obal>

...tak si prehliadač bude myslieť, že obal je ďalší atribút bez hodnoty (teoreticky to prejde, ale neaplikujú sa štýly).

Majkl:
Id, Idéčka aj identifikátory môžeš slobodne používať. JS síce operuje na tejto pôde, ale ak si v tom vytvoríš systém, pôjde to.

Editováno 10.3.2015 17:38

Nahoru Odpovědět

10.3.2015 17:37

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Jan Vargovský

Tvůrce

Jan Vargovský:10.3.2015 17:40

Fakt chceš odpovídat mi?

Nahoru Odpovědět

10.3.2015 17:40

Tomáš123

Člen

Tomáš123:10.3.2015 17:46

Áno, reagujem na tvoju vetu: "Jasně definované pravidla, které nesmíš porušit."
Možno si to myslel ironicky, neviem.

Pod odpoveďou na teba píšem všetko, kde vidím chybu v rade, neber si to osobne.

Ak to nebolo ironické a veta patrila ku identifikátorom, tak ti patrí prvé slovo a sčasti ten odsek pod ním.

Nahoru Odpovědět

10.3.2015 17:46

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Jan Vargovský

Tvůrce

Jan Vargovský:10.3.2015 18:00

Takhle dementně se ptám, protože jsem v té diskuzi pouze vysvětlil pojem konvence. Nikde jsem s nikým nesouhlasil ani nic podobného. U tvého komentáře jsem četl jen první slovo.

Nahoru Odpovědět

10.3.2015 18:00

Tomáš123

Člen

Tomáš123:10.3.2015 18:04

Aha, iste. Tak prepáč. Keď sa na to pozrieš mojimi očami uvidíš:

Ale myslím proč se nemají používat id?
Jasně definované pravidla, které nesmíš porušit.

Zo svojho príspevku to už neviem vymazať, mrzí ma to.

Nahoru Odpovědět

10.3.2015 18:04

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Jan Vargovský

Tvůrce

Jan Vargovský:10.3.2015 18:25

Vpohodě

Nahoru Odpovědět

10.3.2015 18:25

Honza Bittner

Tvůrce

Honza Bittner:23.3.2015 18:42

Hádám, že to co chceš udělat je tooltip, že?

Nahoru Odpovědět

23.3.2015 18:42

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Kučera

Člen

Michal Kučera:24.3.2015 10:09

Nevím, čemu všemu se tooltip říká. Jestli to je cokoli co vyskočí po :hoverování něčeho tak to má být tooltip.

Jinak verze (toho vyskakovacího boxu/ tooltipu?) kterou jsem udělal já, je velmi nepřehledná a plná chyb jak jsem později zjistil, takže ji asi radši udělám úplně od začátků.

Nahoru Odpovědět

24.3.2015 10:09

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Honza Bittner

Tvůrce

Honza Bittner:24.3.2015 10:30

Nedávno jsem shodou okolností také dělal tooltip a vyřešil jsem to dost jednoduše.

Hlavní je, pokud to chceš udělat elegantně pouze s CSS, že musíš dát opa 2 elementy - tedy ten s textem, tak i s tooltipem- do jednoho wrapper elementu.

Výsledek HTML pak bude vypadat cca takto: (psáno s využitím BEM syntaxe)

<div class="info">
  <span class="info__text">ITnetwork</span>
  <span class="info__tooltip">Jedna z největších a nejobsáhlejších socicálních sítí zaměřených na IT v Česku a na Slovensku.</span>
</div>

Následně si .info__text nastyluješ tak, jak chceš. Třídě .info__tooltip přidáš absolutní pozici a nastyluješ jí tak, jak chceš aby vypadala - já jsem si dělal třeba ten styl, kdy ti vyjede nahoře i s šipkou.

V neposlední řadě pak přidáš :hover na .item, kdy se ti změní display u .item__tooltip na block (z defaultního none).

Přidáním CSS animací můžeš aplikovat nějakou super animačku - změna marginu, opacity, scalu, whatever...

Snad ti tedy Má rada pomohla.

Nahoru Odpovědět

24.3.2015 10:30

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Kučera

Člen

Michal Kučera:24.3.2015 15:40

Takže:
1)Proč jsi ten element s class info označil wrapper?
2)Co je to BEM syntaxe (hádám že použití těchle__podtržítek), a pročs jsi použil tuto, a ne třeba tuVelbloudí
3)Proč jsi použil jednou div a dvakrát span?
4)co je to .item
5)Jak udělat tu šipečku?

Myslím že po tvé odpovědi bude tvůj příspěvek nejspíš řešením , Děkuji

Nahoru Odpovědět

24.3.2015 15:40

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Tomáš123

Člen

Tomáš123:24.3.2015 16:28

V skratke ide o niečo takéto (http://kod.djpw.cz/wslb), vidíš princíp a vzhľad si zvládneš doplniť. Podstatný je druhý selektor v CSS. Vyberie ten prvok div, ktorý v kóde bezprostredne nasleduje za spanom (na ktorý nájdeme myšou), pričom span sa musí nachádzať v prvku s triedou obal.

Samozrejme by sa to dalo aj bez obalu: http://kod.djpw.cz/xslb

Ešte dopním, že pozíciu divu nejde meniť vzhľadom na span (musel by byť vnorený + position: relative a absolute). Niečo ako toto: http://kod.djpw.cz/zslb

Ak nepotrebuješ meniť pozíciu, doporučujem prvú alebo druhú variáciu (záleží od situácie).

Nahoru Odpovědět

24.3.2015 16:28

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Honza Bittner

Tvůrce

Honza Bittner:24.3.2015 17:38

Ta varianta bez wrapperu by nefungovala pouze s využitím CSSka, respektive by se to nějak záhadně asi nastylovat dalo, ale...

Nesmíš zapomenout, že samotný tooltip "není součástí" webu, tedy nesmí odsovat nic a musí být umístěn jakoby v jiné vrstvě nad...

Také jen upozorním, že <span> či <p> by ideálně neměl obsahovat nic jiného než text (samozřejmě může obsahovat <b>, <i>, <span>...).

Nahoru Odpovědět

24.3.2015 17:38

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Honza Bittner

Tvůrce

Honza Bittner:24.3.2015 17:44

Takže:

Wrapper, překladem obal, je element, který ti nějakým způsobem obaluje elementy a udržuje jejich obsah v sobě.
BEM syntaxe je, přesně jsi psal, ten s těmato__potržíkama. Respektive obsahuje i druhou možnost a tou jsou tyto--podtržítka. Oba tyto tvary mají však rozdílný význam a používají se jako styl syntaxe pro OOCSS.
Je v podstatě jedno, které elementy využiješ, ale obecně platí, že text by měl být ideálně v <p> nebo <span>.
Tady je místo .item myšleno samozřejmě .info - má chyba.
Šipečka se dělá standartně přes pseudo třídu :before/:after, resp. přes pseudo element ::before/::after, pomocí CSS trojúhelníků - http://apps.eky.hk/…e-generator/

Během tohoto týdne bych chtěl sepsat několik dílů pro novou sérii objektové CSSko, kde ukážu k čemu se hodí, proč jí používat a jak jí používat efektivně.

Editováno 24.3.2015 17:46

Nahoru Odpovědět

24.3.2015 17:44

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Kučera

Člen

Michal Kučera:24.3.2015 19:24

Tak super, díky, jdu na to! Rád bych ti dal akceptované řešení, jenže jsem už jedno označil ale "to mi nebylo uznáno" takže nic no

Nahoru Odpovědět

24.3.2015 19:24

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Tomáš123

Člen

Tomáš123:25.3.2015 14:34

Aha, jasné, máš pravdu, zabudol som na to, že to musí byť vo vyššej vrstve. Každopádne tretia ukážka je použiteľná... Prvky som skopiroval z tvojej ukážky, neskôr obalový <div> zmenil na <span> a lenivo skrátil kód...

Nahoru Odpovědět

25.3.2015 14:34

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.