CSS Overview - Задача 1


5
Здравейте, колеги!
Започнах да решавам домашната по CSS Overview лекцията. За задача 1 избрах решение чрез definition list, т.к. исках да пробвам и нещо различно от таблица. Ще постна кода да го прегледате, т.к. не мога да наглася позицията на зелената точка, която стои срещу името на Parker Seidel. Моля, абстрахирайте се от факта, че съм сложила CSS-a в същия файл.
Проблемът ми е тук (в позиционирането на точката спрямо текста):
li:before { content: "·"; font-size: 120px; list-style-position: inside; vertical-align: middle; line-height: 15px; color: #42B889; }
Целият код е:
http://pastebin.com/9cuv1xaJ
Благодаря предварително! Всякакви препоръки и коментари са добре дошли :).



Отговори



2
Пробвай да махнеш "content" на "li:before" и отиди в html-а и преди текста "Parker Seidel" сложи "" След това правиш CSS на #test и му слагаш font-size колкото искаш. Също и цвета наместваш. Аз поне така го реших. Успех. :)

от Rub (0 точки)


2

Аз лично точката я направих с чист CSS така:

#circle{

   width: 12px;

   height: 12px;

   background: #71B47A;

   -moz-border-radius: 50%;

   -webkit-border-radius: 50%;

   border-radius: 50%;

}

След това го слагаш в един <div id="circle"> и си готов


от wnvko (3123 точки)


0
нещо див не успях да го направя да е отляво на текста, но го смених от див на спан и сега всичко е ок

от xJeykox (45 точки)


2
Пробвай с този CSS
.circle { border-radius: 50%; width: 1mm; height: 1mm; background:#3bad2e; }
На подобен HTML
     
Дано ти помогне, успех. :)

от Karabinata (160 точки)


4
Като препоръка според мен вместо да ползваш
- margin-bottom:10px;

от emilia.orlinova (2079 точки)


4

Здравей колега,

ако искаш да си го ползвап с вмъкване на контента пробвай така:

li:before {
             content: " ";
             display: inline-block;
             border-radius: 100%;
             height: 13px;
             width: 13px;
             background-color: #42B889;
             color: #42B889;
        }

от kizisoft (803 точки)


0
Благодаря! Border-radius не го бях пробвала. Така изглежда ОК :).

от kalina_sf (192 точки)


3
Според мен можеш да го направиш по следния начин:
html:
...


  • Parker Seidel


.....
css:
ul li{
list-style-type:none;
font-size:15px;
display:inline;
}
.green{
font-size:50px;
vertical-align: top;
line-height:15px;
color: #42B889;
}
Въпреки, че аз лично зелената точка я направих със svg element :) но това вече си е твой избор

от rali_b (169 точки)


0
Много интересно предложение със special symbol е това :). Благодаря!

от kalina_sf (192 точки)


2

Зелената точка я направих така:
#name:before {
    content: ' ';
    background: mediumseagreen;
    margin-right: 6px;
    width: 0.9em;
    height: 0.9em;
    border-radius: 90%;
    display: inline-block;
}
Ето и линк към всички домашни от темата ... 

от dimo.petrof (2887 точки)


0
Здравей! Благодаря за линка. Искам да те попитам дали използваш CSS validator, т.к. като прекарам кода с контента от там се връща грешка Parse Error [empty string] на #name:before . Аз имам същата грешка при празен content...

от kalina_sf (192 точки)

0
Не съм ползвал validator, понеже те май CSS валидаторите не са толкова надеждни/важни колкото тези за HTML. Разчитах на вградения в Webstorm, но може и да ме е подвел.

от dimo.petrof (2887 точки)