[HTML] Forms, frames - Homework, Task 3


5

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

Имам питане по тази задача от домашното:
"3.Construct the following Grid component"

Как да направя '1' да е селектирано при зареждане на страницата?
Направила съм го да е така при посочване, а трябва по принцип да е селектирано, като си на първа страница.
Благодаря,
Дони
  




Отговори



0

как да направя така че клетките да са с различна голимина?При мен

<tr>
            <td colspan="12">Drag a column header and drop it here to group by that column</td>
        </tr>
        <tr>
            <td>ProductID</td>
            <td colspan="4">Product name</td>
            <td colspan="2">Unit price</td>
            <td colspan="2">Quantity per unit</td>
            <td colspan="2">Units in stock</td>
            <td>Discontinuet</td>
        </tr>
        <tr>
            <td>
                <input type="text" name="ProductID"size="2"/>
            </td>
            <td colspan="4"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>

Има проблем защо не се влиаят от colspan .Получава се

 


от TodorDimitrov (757 точки)


0

GitHub

Докато измисля как да разкарам текста във footera да отиде най-вдясно .. пробвах с content-align и text-align но не стана .. накрая сложих един margin-left и се получи.


от dzhenko (3893 точки)


0
Можеш да използваш за да преместиш текста също и float:right;. Забелязах, че си оставил празни бутоните на Unit Price, Unit per stock и discontinued и ти липсва селекцията на линка на страница номер едно.

от KaloyanBobev (330 точки)

0
Това е защото си вкарал всичко в една клетка, ако разделиш навигацията от бройката на страниците ще може да ползваш align-text. Например първото го вкарваш в една клетка с colspan=4, а останалото за второто с colspan=2. Тогава даваш на първата клетка align на ляво, а на втората на дясно и всичко заспива.

от Flystar (1171 точки)



1

Това е моята задача номер 4: Grid

Направих валидация на първите две полета за въвеждане.


от KaloyanBobev (330 точки)


0
Виждам че си запознат с класовете, защо не ги използваш вместо id и за останалите неща за да избегнеш повторенията. Например това #textQuantity { width: 80px; } #textUnit { width: 80px; }
е същото, като: .textXXX { width: 80px; }
или: #textQuantity, #textUnit { width: 80px; }

от Flystar (1171 точки)


0
http://pastebin.com/ziR7HUdX - ползвал съм и CSS, за да заприлича на картинката в презентацията

от agentzero (0 точки)


1

Моят вариант -  -->CLICK<-- 

Понеже таблицата е малко по-широка, след отваряне на линка към jsbin може да се наложи самият прозорец, на който се вижда Output-a, да бъде разширен допълнително, за да се визуализира коректно в пълният си размер. За бутоните (филтъра и стрелките) съм използвал background картинки, които съм "изрязал" от примерната такава на домашното от презентацията.


от Vlado_XXX (944 точки)


0
Задаваш на "1" да има class="current" може и друг клас и само за него му задаваш да има border:1px solid #12345678 цвета избираш какъвто трябва да е.
Аз поне така направих.

от Evgeni92 (371 точки)


-1
http://pastebin.com/C1qvzWbe
Моето решение, трудно стигнах до него.



0

Здравейте, ето го и моето решение на тази задача. 

как изглежда

самия код

Знам че курса завърши но ако някои намери време да погледне и да изкаже мнение ще е супер.

 


от petar_nikov (564 точки)


0
Интересна е идеята за less. Видях font 12px/15px?; все пак единият image не си е на мястото? Малки корекции ще помогнат. Успех! Предполагам валидирате и двата кода?

от marias (752 точки)

0
@maria мерси за коментара, за изображенията моя грешка правих го на по-голям монитор и не се сетих да го проверя на различна резолюция как изглежда ще го поправя. За font:12/15 това е шортханд изписване на различните пропъртита, font-size/line-height ето обяснение как се ползва цялото https://developer.mozilla.org/en-US/docs/Web/CSS/font#Examples

от petar_nikov (564 точки)



0

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

Бих искал да споделя и моите решения, подход и код върху проблемите. smiley

Условие на задачата: http://downloads.academy.telerik.com/svn/html-basics/2014/Lectures/5.%20HTML%20Forms%20and%20Frames/HTML-forms-frames.pptx

Решение: https://github.com/MiroslavSimeonovIvanov/TelerikAcademy/tree/master/HTML_Basics_Course/HTML_Forms_and_Frames

Визия: https://drive.google.com/file/d/0B4osYVb7v4eRbTdQTGxWUjc4Yjg/edit?usp=sharing

https://drive.google.com/file/d/0B4osYVb7v4eRcWljc1pGQWdJNkk/edit?usp=sharing

Специално с тази задача се борих около ден и половина, но накрая и направих задушаващо тръшване laughlaugh и я реших дори по 2 начина.

Първият проблем, с който се сблъсках беше направата/набавянето на бутоните - знака за филтър или фуния го намерих от интернет и го преоразмерих спрямо нуждите, докато за останалите не можах да намеря подходящи и си ги изрязах на Photoshop. За останалата част от дизайна използвах моя любим инструмент - https://kuler.adobe.com/create/color-wheel/ , чрез който подбрах необходимите цветове и го приложих в CSS частта. Относно кода - имах много проблеми със самият стил на таблицата и ми се наложи да остава cellspacing="1", което е и единствената грешка, за която валидатора ме информира, но го оставям така и се надявам, че като мина CSS курса ще я оправя. smiley