Имам два въпроса.
1. Как правите preview линковете точно? Доста е удобно.
2. Направих на 1-ва задача закръглянето, но не работи във Firefox (даже в IE бачка). Има някакъв бял незакръглен фон, който се вижда, а и изглежда, че таблицата ми излиза от div-a, в който съм я сложил. С Chrome/IE това не се случва. ЦЪК.
Едит: Благодаря на Анатоли за инфото. Ето превю: World Cup Brazil.
Правя border-collapse, получих съвет да пробвам с border-spacing: 0. Може да помогне по втория проблем.
С 1-ва задача дълго време се борих, накрая успях да направя глупавото заобляне на таблицата точно както е в задачата.
tablе{
border-collapse: separate;
border-spacing: 0;
border-radius: 20px;
border: black;
}
След това заоблих краищата:
tr th:first-child{
border-top-left-radius: 15px;
}
tr th:last-child{
border-top-right-radius: 15px;
}
#fifthRow td: first-child{
border-bottom-left-radius: 15px;
}
#fifthRow td: last-child{
border-bottom-right-radius: 15px;
}
Като цяло важното е border-collapse да е "separate" и spacing-a да е 0. После оправятае краищата и би трябвало да стане при всички, независимо от browser-a.
Здравейте, колеги! Открих решение на проблема с бордърите на таблицата в 1ва задача. Оказа се, че border-collapse и border-radius не раборят добре заедно. Затова вместо border-collapse, ползвайте border-spacing 0. Така ще имате идеален бордър. Само трябва да си дооправите вътрешните бордъри, тъй като те стават двойно по-дебели от желаното.
Прав си за вътрешните бордъри, но вместо да ги оправяш поотделно, направо пишеш в table: border: 1px solid; и ти оправя външните, които са една идея по-тънки.
Уф, че тепкава работа е този CSS! Аз искам да попитам още няколко работи, но за да стане ясно въобще каква ми е мъката, моля дайте ми инструкции как да кача демо. Благодаря!
В началото на тази страница Filkolev е задал същия въпрос и съм му отговорил, погледни го 
Най-накрая преборих първата задача и вече излиза ОК и в Мозилата. Оправих си проблема и с разстоянието между рамките в ъглите (което мислех, че никой няма да го види, но Никола го видя...)
За някои превюта може да се наложи да разрешавате потенциално опасни скриптове, в противен случай зависват на Loading...
HTML + CSS - Всички задачи
Офф, не разбирам защо на 2-ра задача моят <header> отива отзад на <div> и червеното поле остава зад прозрачното или пък ако сложа headera в дива му приема opacity-то...
Какво точно опитваш да направиш? Дай код да видим.
Искам да сложа headara вътре в div-a с в червено поле. Diva е бял цвят с opacity някакво, но headera не трявба да има opacity а да е червен цвят. Това е 2-ра задача Color Kitchen.
<section>
<article>
<header id="WebColors">Web Colors</header>
<div>
Text...
</div>
</article>
</section>
На тази задача е казано да не променяме HTML-a така че header-ите трябва да си останат където са. Аз съм им сложил просто цвят на фона, нищо особено. Слагаш му background-color: red (или за всеки случай взимаш с color picker). А opacity никъде не виждам нужда да се задава.
Направи най-добре превюта, така по-лесно се виждат бъговете ако има такива. Иначе поради размерите на CSS-ите в тия задачи май малко хора гледат кода, а се насочват към конкретни части ако забележат проблем във визуализацията.
Прав си това го забравих, ще редактирам след малко, мерси :)
Проблемът с ъглите при Мозила се решава като оцветиш с жълто клетките в реда а не самият ред. Доколкото видях в решението ти оцветяваш реда и затова излиза извън заоблените ъгли.
Ето част от CSS-а с който се изобразява коректно под Мозила:
tr:first-child td {
background-color: #F8C711;
}
За да работи обаче трябва да махнеш оцветяването на реда, което би трябвало да е долният код в решението ти:
tr:first-child {
background-color: rgba(230, 186, 0, 1);
font-weight: bold;
}
Здравейте,
Имам един въпрос относно това домашно:
Това ми е css-a към color kitchen и не ми е ясно защо width:5%; - работи ок, а като задам 95% не работи ок. Коя дължина взема, коя смята? Някой да има предположение и обяснение?
Когато задаваш размер в проценти се взимат размерите на parent елемента, което значи, че трябва той да има фиксирани размери. В твоя случай header задаваш да е 5%, но article няма дефиниран размер.
Общо взето трябва поне един елемент да имаш с определен размер, за да можеш децата му да ги определяш чрез него. Другият вариант е да не ползваш проценти. Поне аз мисля, че от там тръгва проблемът, не се знае тези 5% от кое решава браузъра да ги вземе. Получават се някакви странни неща, може да провериш с F12, че между 1-10% резултатът е еднакъв, поне в Хром.
Да и аз съм шок какво се случва и нещо не мога да ги схвана тия проценти, а гледам уж тях да ползвам, за да може да не се чупи при различни резолюции. При мен на мозилата работи по абсолютно същия начин, и не мога да си обясня защо :D
a.angelov, копирах ти HTML и CSS в отделните файлове, но когато отида да видя какво се получило в хромето, излиза само HTML. инспектвам и ми казва, че не може да открие файла със CSS-а:
Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///C:/SoftUni/Web%20Fundamentals%20(HTML%20+%20CSS)/02.CSS%20Basics/01.World%20Cup%20Brazil/style.css
някаква идея защо става така?
Здравей,
сигурен ли си, че style.css се намира в същата папка, в която е html файлът - пътя който е зададен при мен го търси в същата папка?
Ако се намира в друга папка, коригирай пътя. Също така провери дали съвпадат имената на css файла и линка в html-а - да не си записал css под различно име...
благодаря за отговора!
не те разбирам какво имаш предвид. не че си го написал неясно, просто съм зле с HTML/CSS курса като цяло. изпита съм го отписал, опитвам се да чета домашните на другите.
та, oпитах се да "уцеля" нещо от указанията ти:
- имената на CSS и HTML файла ми са еднакви- 01.WorldCupBrazil.css /(...).html
- css-са си беше в папката CSS, която WS създава за мен, след това го преместих и в общата, проектната, при html-a, пак без резултат.
- "сигурен ли си, че style.css се намира в същата папка, в която е html файлът"- не знам какво имаш предвид- че трябва да имам файл с това име някъде из проектната папка?
- "Също така провери дали съвпадат имената на css файла и линка в html-а "
в хедъра на HTML-a имам: <link rel="stylesheet" type="text/css" href="style.css">
което замених с:
<link rel="stylesheet" type="text/css" href="01.WorldCupBrazil.css"> (името на CSS-a)
ако изобщо това си имал предвид... но и така не сработва.
Дай един скрийншот на папката където се намират файловете и качи кода някъде да го погледна.
Правилно си ме разбрал, но да видя все пак - не виждам друга причина да не ти намира css файла...
По първия ти въпрос: ето тук си копваш линка с html-а от гитхъба и си готов с привюто: http://htmlpreview.github.io/
Не знам защо, но на мен не ми се отваря демото...
При мен нито едно демо не се отваря автоматично, трябва да цъкам горе в адрес бара на Хром да му позволя да пусне някакъв потенциално опасен скрипт. Виж дали и при теб не е така.