[Homework] HTML Tables
Ще се радвам на всякакви забележки и препоръки, защото все още ми е малко тъмен тоя HTML и най-вече CSS-a. :)
За всяка задача съм изнесъл стила в отделен файл в папка styles.
ЕДИТ - Подробен гайд за калкулатора
Best Answer
Ето от мен всички задачи(включително със звездичките) - Homework
Първа задача при мен има проблем под google Chrome, но под firefox е добре. Всички други работят добре под Chrome.
Не съм отделил CSS от HTML във всички задачи понеже не сме го учили и да е по-разбираемо за всички.
За 7 задача съм използвам JQuery, за по-лесно.
Поздрави!
Здравейте.
Поствам и аз кода на решенията на задачите от домашното.
Решени са и тези със звездички. Всички стилове са извадени в .css файлове.
EDIT: Добавих preview на качените вече в интернет странички, за по-добра прегледност, по примера на колегите.
01/ Simple table Preview HTML CSS
02/ Exam Results Preview HTML CSS
03/ Nested Tables Preview HTML CSS
04/ Website Header Preview HTML CSS
edit: Пак се заиграх - понапудрих още малко Hover-a на падащите менюта :)
05/ Life in SoftUni Preview HTML CSS
06/ Life in SoftUni Keyboard Preview HTML CSS
edit: Поправих грешка в адресирането на бутоните и добавих малко пудра
07/ Calculator Preview HTML CSS
edit: Специално за колегата Ludmil.D това е линкът към главната директория на репото, съдържаща целия проект с всички ресурси
Всички задачи без четвърта сме решавали заедно с колегата Кико - да се знае.
Четвърта задача е лично творчество :)
На четвърта се постарах да докарам същите стилове като на картинката. Голяма играчка, но пък доста забавно :) Падащите менюта също работят. Линковете са към реалните страници. Единствено hover-а на падащите менюта директно ги отваря, вместо да се изисква клик. Но това май трябва да стане с JavaScript, който за сега не владея... :) За сега ;)
edit: бях забравила стрелкичките на падащите менюта - добавих ги.
Приемам въпроси и коментари :)
Дано ви е полезно!
Много интересно решение за заобляне на лупата:) точно го мъча и реших да проверя какво са сътворили колегите...
та малко в страни .. Нали сме модерни хора и ползваме Git/SVN съответно clone/check out би ни помогнало да копираме поне html/css filе-a но често има и други ресурси както виждаме images разни.. та:
моля да слагаме и директорията на проекта , която поне за мен не винаги е очевидната (обикновенно има git.ignore, доста се фрустрирах като не можах да сваля фаила с CLONE , а то просто не работиточно така...;) ) ама не във всички случаи така може по интерактивно да се разцъкат нещата JSfiddle най-добре... едит:за позлване на външни ресурси като картинки те трбява да са уплоаднати в клауд-а и да се даде съответно url към тях
just sayn' с най-добри чувства и благодаря за хелп-а:)
arrow to the <code>
Здравей.
Ако се върнеш една папка нагоре нагоре в GitHub-a (ще се намираш в папка 02-HTML-Tables) ще видиш папка images - там са всички използвани ресурси.
Ако имаш желание, направо може да си свалиш съдържанието на цялото репо, което е целият solution. Как да стане това:
1/ Навигираш още една папка нагоре, за да се намираш в папката SoftUni-HTML-HWRK-Tables
2/ Долу в дясно на екрана има бутон - Download ZIP
3/ Разархивираш и стартираш .sln файла и целият ми проект ще е при теб с всички ресурси, всички връзки ще ти работят и т.н.
Ако имаш въпроси по стъпките - пиши ми :)
Ако има неясноти кое как е направено в кода - на разположение съм.
Поздрави!
Всичко е много полезно! Аз лично гледам доста неща, как се правят, от твоето домашно.
С калкулатора се заиграх случайно, и забелязах, че не смята правилно. Ако дадеш рефреш на страницата и 0-лата която седи на "дисплея" по подразбиране е "сива"- всичко се смята нормално. Ако обаче натиснеш "C" бутона, нулата става черна и вече калкулатора започва да смята грешно.
Чудесен ти е кодът.
Единствено бих препоръчала да си подредиш малко .css файловете. Може да направиш две неща:
1/ За четимост да изписваш пълния път до елемента, който адресираш - на пример в .css-а на задача 1 - вместо "thead" да напишеш "table thead".
2/ Прието е когато един елемент е по-малък, child, на по-горе, да отстъпи с една табулация вдясно - както е при таговете в html-a. В твоя случай "table thead{...}" трябва да мине вдясно с една табулация, защото е child на "table".
Това е. Успех със звездичките!
п.п.Извинете за двата поста - явно много ми се спи вече и така.... Можеше в един да включа всичко...
Благодаря за коментара!
И един въпрос - 2рата точка (за табулацията при по-малък елемент) от къде си я видяла? Защото аз досега по гайдовете не съм срещнал подобен стил (не че много съм гледал де).
Имам спомен, че съм го гледала в лекция на Телерик. Също вчера колеги асистенти обясняваха това подреждане на други колеги.
Ок мерси
и как се показва в браузър: <picture>
А стрелкичките и другите неща трябва ли да са clickable и евентуално да извършват нещо? Или това е по собствено желание?
едит: оправих ги нещата :)
"The menu buttons must work (open some URL). Making the menu with a dropdown functionality is optional." - т.е. менюто ти трябва да работи - да се клика и да отваря нещо. Иначе падащото меню е по желание.
Смених линка с работещ: http://pastebin.com/gfxJ3CGT
Задача 5 - имате ли някаква идея защо Food не иска да си смени вертикалната центровка по никакъв начин:
CSS не използвам нарочно.
"This paste has been removed!" ...?!?
п.п. Колега, бих препоръчала като слагаш линк от падащото меню да избираш target > new window. Все пак е въпрос на личен избор, разбира се :)
Поздрави!
Един бутон може да се превърне в линк по следния начин.
<form method="get" target="_blank"> <button formaction="https://www.google.com/">Google</button> </form>
Кода може да витите тук.
Здравей колега,
На 4та задача ти липсва бутона за нотификациите с камбанката.
Аз лично използвах <button onclick="window.open('https://www.google.com/')">Google</button>
Нямам представа, каква е разликата, ама просто е по-кратко
window.open('https://www.google.com/') - това е фрагмент от javaScript, другото е HTML. След като поекспериментирах с различни браузъри, бих казал че <button onclick="window.open('https://www.google.com/')">Google</button> работи по-добре.
А относно 4 задача - в условието е споменато, че не се изисква 100% точност.
Аз ще добавя само 4-та задача за Site Header-а, че за нея най-много време отделих и много се кефя на резултата :)
-->Site Header<--
Edit: За максимален ефект разширете броузера на full screen и разширете в JSFiddle поленцата така, че да разтегне както трябва header-а.
Супер е, изчистено и спретнато. Браво за dropdown менютата - изглеждат лесни за правене, а всъщност май не са чак толкова.
Колега, на шеста задача си забравил да сложиш линкове към бутоните.
Не бях прочел хубаво условието. Оправих го. :)