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

Lista horyzontalna wewnatrz diva

VPS Starter Arubacloud
0 głosów
129 wizyt
pytanie zadane 27 lipca 2017 w HTML i CSS przez Stanisław Sobieszek Nowicjusz (230 p.)

Hej,

Projektuje sobie strone w codepenie i mam problem z utworzeniem ramki takiej jak tutaj na w pierwszej kolumnie na samym dole https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147

Przedstawię teraz swój pomysł na to:

- Chce zrobić jednego diva dla całej tej dolnej ramki, a w nim trzy odzielne divy dla tych trzech elementow:

1) napis CLOSE jako <span>?

2) te 4 kropeczki jako horyzontalnej unordered list przy uzyciu display:inline

3) to pewnie będzie jakaś ikona z Font Awesome

Mam problem ze zlepieniem napisu CLOSE z tymi kropeczkami. 

Podaje JsFiddle z moim wykonaniem, nie wiem czemu te kropki są na samym dole tego diva. 

https://jsfiddle.net/q7cyu7sa/2/

Ktoś pomóglby by to zmienic? Może pomysł jaki mam jest zbyt skomplikowany do zrealizowania i jest coś lepszego ( zapewnie bez używania tej listy)?

Pozdrawiam 

Staszek

2 odpowiedzi

+1 głos
odpowiedź 28 lipca 2017 przez zgrybus Pasjonat (24,860 p.)
–1 głos
odpowiedź 27 lipca 2017 przez Kamson Gaduła (4,280 p.)
stwórz diva który przetrzyma elementy:text,kropki i ikonke.Nadaj temu div'owi position:relative .Elementom wewewnątrz tego diva nadaj position:absolute,top: np 50px; i każdemu elementowi indywidualnie left:10px  kolejnemu elementowi left:50px; itd.To jeden ze sposobów rozwiązania tego problemu.
komentarz 27 lipca 2017 przez Stanisław Sobieszek Nowicjusz (230 p.)
ta, ale to nie rozwiazuje problemu wyswietlania sie tych 4 kropek, ktore sa na samym dole swojego diva

Podobne pytania

0 głosów
1 odpowiedź 159 wizyt
0 głosów
1 odpowiedź 248 wizyt
pytanie zadane 18 stycznia 2018 w JavaScript przez Adam Arnold Początkujący (460 p.)
0 głosów
1 odpowiedź 483 wizyt
pytanie zadane 9 października 2016 w HTML i CSS przez cuba04 Nowicjusz (120 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...