Малко помощ CSS


2
Здравейте ,
Нещо зациклих и как мога да оправя тези неща :
http://prikachi.com/images.php?images/463/7142463c.jpg

HTML
Ето го и кода - http://pastebin.com/GzbwSUhp
CSS - http://pastebin.com/kB56Wr8H

Благодаря предварително



Отговори



2

Ето малко коментар и от мен....

Колега най-добре започни от начало като обърнеш внимание на някаква последователност.Аз лично като решавах тази задача направих така:

  1. Първо си НУЛИРАЙ html-елементите(вж.ти как си ги нулирал)
  2. Симулирай си резолюция както беше показал Дончо във видеото.
  3.  Подреди си елементите(със CSS-a) така,че да отговарят на картинката,т.е. скриваш клас invisible,и отместваш всичко едновременно на дясно докато съвпадне с картинката.В случаят всичко се отмества като  дадеш ляв маргин на дивия рапър.
  4. Започваш да работиш като браузъра- от горе на долу...Стилизирай "а"-тата.
  5. Като стигнеш до формите ЗАБЕЛЕЖИ,че те са еднакви като елементи и стилове,затова стилизираш директно <form>, а не всяка една по ID.Стилизирайки директно ТАГА форм той ще предаде стила на всичко що е форма,в нашият случай двете форми с различно ID.
  6. Когато стилизираш елементи които съдържат други следи йерархията им,т.е. стилизирай от вън на вътре,така ще отместваш едновременно няколко или всички елементи.Което пък е по-добрият сценарии според мен от колкото да си играеш с всяко нещо по отделно.Разбира се това е по-добрият сценарии когато задачата ти го позволява,както е в случаят ни.
  7. Съвет от мен- ползвай SASS или LESS,значително улесняват ориентацията и скоростта на изпълнение на задачите.Също съобразявай това ,че не винаги е нужно да стилизираш по ID когато има такова защото това бави и може да те подведе.В тази задача има ID-та ,но повечето имат съвсем различна функция от това да помогнат за селектирането в CSS-а. Отделяй време за анализ на задачата и не брзай с решението,поне докато не схванеш какво правиш и защо да го направиш така.В един момент това ще ти стане навик и ще правиш нещата идеал петрович от първия път!!!
  8. Успех напред!yes

 


от markovood (374 точки)


1
Пробвай да му зададеш width на label-a.
Ето на една друга подобна задача как съм го направил. Ако може да ти помогне.
form fieldset label { float:left; width:190px; display:inline-block; text-align:right; margin-top:2px; line-height:28px; color:#473333; }

от Evgeni92 (371 точки)


3
Проблемът ти е в този ред от CSS файла:
body #form-register fieldset #tb-repeat-pass { margin-left: 100px; }
някъде около 106 ред. Това слага маргин отляво пред Enter Password инпута и става прекалено дълго за да се събере на един ред. Без този CSS работи коректно

от ttitto (1950 точки)


1

 Проблема е точно, където е обяснил колегата.

Тъй като хвърлих един поглед на кода ти и току що решавах същата задача..Надявам се нямаш нищо против един съвет.

 Избягвай да стилизираш размерите както си направил input-a с width и height. По-бързо и по-прецизно се получава, ако стилизираш "отвътре-навън", т.е с padding и размер на шрифта. Така имаш по-малко променливи.

 Аз лично давам ширина и височина на контейнер много рядко, най-вече на разни "wrapper"-и, които да правят дизайна фискиран. 

П.С. Не съм чул дали този подход е по-правилен, но поне от common sence така ми изглежда

Поздрави


от ivan.mihov1 (4988 точки)


0
Мерси много , оправям ги сега :)

от koko_9898 (208 точки)


1
position, margin, използваш нещо за да го мръднеш, а между временно ползвай ':nth-child(2n+1)' и нейни вариации, ако се чудиш как да ги избереш.

от Цветан Димитров (0 точки)


1

Също така можеш да помислиш да намалиш във fieldset padding-right ,който при теб е 75px, което допълнително счупва дизайна и избутва legend и input, които са един под друг и мести също label тага. Тогава обаче нещо друго може да спре да си седи на мястото заради негов margin или padding, така, че трябва да нагласяш много, или най-добре започни задачата на ново за да не се бъркаш от сегашния дизайн (аз така правя, ако примера е малък) като спазваш някаква последователност както предлага колегата  Ivan Mihov :)


от Marin Stoyanov (0 точки)


1
Здравей,
и аз да се включа с някои неща, въпреки че според мен колегата ttitto ти е намерил грешката в конкретния случай.
За качване на повече от един файл може да ползваш сайтове от типа на http://jsbin.com и http://jsfiddle.net - може да си качиш CSS, HTML, JavaScript на едно място, става доста бързо и удобно и дори не се изисква регистрация или нещо, което да ти отнеме време.
Моя препоръка е, ако нямаш време да глеаш лекции, да прегледаш много внимателно някои от решенията. Също така видях че си ползвал float: center, не мисля че има такава опция. Може в началото да си проверяваш на http://www.w3schools.com/cssref/pr_class_float.asp кой атрибут каква стойност може да приема. В случая това не ти прави проблем, но е странно да ползваш float за центриране...Прави се с margin left i right, за който се задава или стойност 0 или auto.
За изпита, ако си решил да ползваш обикновен css, не е необходимо да изписваш целия път до даден таг или клас. Принципно ако използваш id-та внимавай много, защото аз доста се борих с една задача докато се усетя че едно излишно изписано id ми размества приоритетите и ходи се чуди после защо даден стил не ти действа...Иначе SASS и LESS помагат за наследяването, но според мен с обикновен CSS в началото се научава най-много (ето линк към кода на даденото решение изчистено от подробните пътища http://jsfiddle.net/3zM5V/ , те се получават точно през SASS i LESS. и отразяват наследяването). С класове и ID-та е неизбежно да се работи при големи проекти, но в началото и html-таговете са много полезни и поне за мен като начинаеща е много по-лесно.
Пропуснах да кажа, може и да го знаеш, че браузърите четат файловете от дясно наляво, точно затова най-голямо значение има най-дясната част от селектора.

от JuliaS (207 точки)


0
Много Благодаря за изчерпателното инфо , със Sass или Less мисля да пробвам на изпита ,иначе сега се тренирам чист CSS.Перфектно си я решила задачата.. Успех За напред Ти желая!

от koko_9898 (208 точки)

0
По-добре, ако ще ползваш на изпита Sass или Less тренирай отсега с тях. Доколкото знам на изпита ще се оценява отново качеството на кода, а препроцесорите могат да направят големи извращения с нестването на селектори напр. ако нямаш опит с тях

от ttitto (1950 точки)