Jak porovnat dva HTML elementy?

Dobrý den,

Mám dva weby. - first a second

Oba mají mapu pomocí stejného pluginu. S tím rozdílem, že první je zobrazuje špatně a nejsem si jistý proč.

I když to, kvůli velikosti mapy, není patrné, není rozdělena nahodile. Mapa se nenačítá celá, ale je rozdělena na obdélníky, které se postupně načítají. A právě jejich rozdělení je tam zobrazeno.

Nevím, jestli se to nastavuje pomocí CSS (nic jsem nenašel). Ale napadlo mě, oba elementy porovnat. A z toho by se snad dalo vyčíst, v čem se konkrétně liší a co způsobuje to zobrazení.

Jenže jsem nic smysluplného nenašel. Pouze mi to nabídlo nějaké rozšíření do Chromu, které mi skoro nic neřeklo.

Neznáte, prosím Vás, free rozšíření/web/software pro porovnání html elementů? Nebo existuje jiný způsob, jak zjistit příčinu?

Děkuji

Předmět	Autor	Datum
Porovnat soubory v PSPadu. Kráťa 20.07.2019 23:56	Kráťa	20.07.2019 23:56
Iný spôsob, ako zistiť príčinu, je použiť web inspector a pozrieť sa na to, odkiaľ to zobrazené rozd… moose 21.07.2019 00:02	moose	21.07.2019 00:02
Aha. Tak to mě nenapadlo. V tom případě je to chyba šablony při přidání více map, protože druhý web… MichalDM 21.07.2019 13:50	MichalDM	21.07.2019 13:50
Problém vyřešen. U obrázku nestačí pouze uvést všechny jeho třídy, ale i třídy divu, ve kterém je.… poslední MichalDM 21.07.2019 23:43	MichalDM	21.07.2019 23:43

Porovnat soubory v PSPadu.

Iný spôsob, ako zistiť príčinu, je použiť web inspector a pozrieť sa na to, odkiaľ to zobrazené rozdelenie prišlo.

V wp-content/themes/mantra/style.css je pravidlo, ktoré pridáva okraj všetkým obrázkom:

.mantra-image-seven .entry-content img[class*='align'], .mantra-image-seven .entry-content [class*='wp-block'][class*='align'] img, .mantra-image-seven .entry-summary img[class*='align'], .mantra-image-seven .entry-summary [class*='wp-block'][class*='align'] img {
    padding: 7px;
    ...

Aha. Tak to mě nenapadlo. V tom případě je to chyba šablony při přidání více map, protože druhý web používá stejnou šablonu a zobrazuje se správně.

Každopádně díky, ale pořád to není dokonalé.

Důvod, proč tam ty bílé čáry vůbec byly, je ten, že na mapě jsou okraje obdélníků, ze kterých se mapa skládá, což na druhém webu záhadně není.

Když přidám vlastní css, stačí pouze tohle

.mantra-image-seven .entry-content [class*='wp-block'][class*='align'] img, .mantra-image-seven .entry-summary img[class*='align'] {
    padding: 0px;
    border: none;
}

tím zmizí jak ohraničení, tak okraje.

Problém je, že značka má stále neprůhledné pozadí. V debug mode se mi to podařilo opravit pomocí

background-color: transparent;

ale nepodařilo se mi to přidat do css, aby to fungovalo.

Jak to, prosím Vás, udělám?

Problém vyřešen. U obrázku nestačí pouze uvést všechny jeho třídy, ale i třídy divu, ve kterém je.

Konečný kód je tedy

.mantra-image-seven .entry-content [class*='wp-block'][class*='align'] img, .mantra-image-seven .entry-summary img[class*='align'] {
    padding: 0px;
    border: none;
}

pro skrytí ohraničení rozdělení mapy a jejich okrajů

.leaflet-pane.leaflet-marker-pane .leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive {
    background-color: transparent;
}

pro průhlednost značky.

Jedná se o web ve WordPressu, šablona Mantra a plugin ultimate map by supstic.

Akorát nechápu, proč u jedné mapy k ničemu nedojde, ale to není podstatné.

Každopádně díky

Zpět do poradny Odpovědět na původní otázku Nahoru