Loading...
softuniobserver avatar softuniobserver 73 Точки

[Homework] Web Fundamentals (HTML/CSS) - CSS Overview - Problem 1. World Cup Brazil (border rounding)

Проблема с тази задача за всички, които бяхме да решаваме тази задача след лекцията, беше със закръгляването на border - a. Изглежда, че проблема се решава с overflow: hidden;

Това е link към кратко клипче, което показва как без overflow не става, колкото и да го пробвахме.

link

 

Тагове:
0
Web Fundamentals - HTML5
Filkolev avatar Filkolev 4482 Точки

Става и без overflow, ама е много занимавка.

1) Трябва да се закръгли бордъра на таблицата.

2) Да се селектират първия и последния ред и да се закръглят съответно горните ъгли на първия и долните ъгли на последния.

3) Да се закръглят поотделно нужните ъгли на 4-те ъглови клетки.

Това би трябвало да сработи; може и да пропускам нещо, но съм сигурен, че успях да го преборя преди време. Като гледам, махнал съм бордърите на външните клетки, та може отделното им закръгляне да не бачка съвсем...

Ето "красивия" CSS, който съм измъдрил тогава: ЦЪК.

2
yanitsa.decheva avatar yanitsa.decheva 4 Точки

Аз го направих с отделно закръгляне на крайните клеткии се получи. :) Ето по този начин:

.round{
border-top-left-radius: 7px;
}

.trround{
border-top-right-radius: 7px;
}
.blround{
border-bottom-left-radius: 7px;
}
.brround{
border-bottom-right-radius: 7px;
}

1
NapushenBuhal avatar NapushenBuhal 17 Точки

И аз го направих по подобен начин, но с id-та, мисля че няма нужда от класове и отделно трябва да се сложи border-radius на цялата таблица :) 

0
iliangrekov avatar iliangrekov 63 Точки

Относно стърчащите ръбчета на клетките извън заоблените ръбове на таблицата с overflow: hidden работи, НО не и в IE11. Там трябва да се заоблят съответните долен ляв и долен десен на first и last child oт клетките на  последния ред и first i last child на клетките на  thead- ред-а съответно горен ляв и горен десен.

Border-radiusa забелязах, че ако е същия размер като на таблицата се получава разлика и не е добре. За това съм сложил border-radius на таблицата 15px,  а на ръбчетата на клетките 13px и се получи идеално.

 

2
Filkolev avatar Filkolev 4482 Точки

Аз мисля затова махнах бордъра на някои от клетките, припокриваха се грозно.

0
iliangrekov avatar iliangrekov 63 Точки

Да в смисъл да няма натрупване на два бордера един до друг. 

0
svetlozar_kirkov avatar svetlozar_kirkov 11 Точки

Не е точно по темата, но е относно същата задача: бутоните за резултата какви трябва да са точно (не е обяснено в заданието) - само някакви текст клетки ли да са, dropdown list ли някакъв или нещо друго?

edit: оправих се, не се бях сетил за select box

0
17/02/2015 16:42:30
m.zh.ivanova avatar m.zh.ivanova 1 Точки

Аз успях да го направя и без overflow -  с first, last child :)

Аз имам едно питане относно задачката... трябва ли бутончетата да извършват някакви действия? Или просто да си стоят там без функционалност?

0
Filkolev avatar Filkolev 4482 Точки

Може просто да ги сложиш бутончетата, да могат да се кликат (за тези червените е по-добре да ги сложиш disabled). Ако имаш желание може да вкараш малко JavaScript да се върши някакво действие, например да се вади съобщение с един alert().

0
m.zh.ivanova avatar m.zh.ivanova 1 Точки

супер, а dropdown-четата и те така ли??

0
Filkolev avatar Filkolev 4482 Точки

Ами аз на тях сложих числа от 0 до 7 ако не се лъжа, като и те бяха disabled ако мачът е минал. Но за това домашно не би трябвало да има значение.

0
mari_iva avatar mari_iva 1 Точки

Пробвайте с     {border-radius: 1em}.

0
Merkanto avatar Merkanto 19 Точки

Има ли някой, който да е направил този проблем без таблици, т.е. със css стил? :)

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.