[Homework] CSS-Presentation - Problem {1} - The Jaunty Text Field - Софтуерен университет

MilenaSl 161 Точки

[Homework] CSS-Presentation - Problem {1} - The Jaunty Text Field

Въпросите са два.

1. Как да направя четирите цвята на дъга-рамката да се разпределям равномерно в 10-пикселовия border. С долунаписания код всичко става в червено, а от другите цветове има само по 1px. Същото се е получила и в задачата от лекцията -> CSS-Presentation-Demos > 4. Borders-Other-Styles.html.

border: 10px solid;
border-radius: 100px;
-moz-border-top-colors: blue green yellow red;
-moz-border-right-colors: blue green yellow red;
-moz-border-bottom-colors: blue green yellow red;
-moz-border-left-colors: blue green yellow red;

2. На двата оранжени бутона, които не са бутони, всичко им го нагласих, освен това да се подравняват хоризонтално един до друг, а не както са в момента - вертикално подравнени Как да стане? Ето как им отредих по два класа, но и това не помогна:

<div class="not-a-button first-button">We are not buttons :)</div>
<div class="not-a-button second-button">We are not buttons :)</div>

Тагове:

06/09/2016 13:51:26 Web Fundamentals - HTML5 06/09/2016 13:54:09

z.s.paneva 21 Точки

Best Answer

Здравей :) Относно въпрос 2 - аз мисля, че има по-интелигентен начин за получаване на цветната рамка. Използвах <article> и псевдо елемент article:before, така реално се получиха 2 елемента. На всеки от тях сложих border i box-shadow, т.е.. получиха се 4 пръстена, всеки в различен цвят. Виж кодът ми тук: https://softuni.bg/forum/11558/cveten-border. Относно въпрос 2: В условието е посочено, че оранжевите "не бутони" всъщност са текстови полета (<input type="text"). Не са преподадени още. Те са инлайн елементи и сами се подреждат хоризонтално един стед друг, ако не им укажеш друго в CSS. Използвайки тях, няма да ти е нужно да усложняваш нещата с позициониране и т.н. Успех! :)

08/09/2016 09:40:38 08/09/2016 09:46:51

Raskolnikov 102 Точки

Здравей,

Бордърите можеш да ги направиш с вложени div-ове, а не-бутоните можеш да ги направиш <span> с display: inline-block;

06/09/2016 14:20:07

daniel.nikov926 18 Точки

Отговор на въпрос 1:

width: 600px;
   border-style: dashed solid double dashed;
   border-width: 3px 10px 4px 7px;
   border-color: yellow green blue red;

като стигна до въпрос 2 ще ти кажа как става

06/09/2016 14:23:02

MilenaSl 161 Точки

Хмм това, обаче, е най-големата рамка. На мен ми трябва тази по-малката, в която са небутоните. Малко по-късно ще изпробвам другия отговор и ще кажа дали се е поучило. Ега!

06/09/2016 15:04:56

daniel.nikov926 18 Точки

.button-left{
   text-align: center;
   position: absolute;
   left: 50px;
   width: 120px;
   font-size: 10px;
   background-color: #FF8000;
   border-style: outset ;
   border-width: 2px;
   border-color: orange #CC6600 #CC6600 orange;
}

06/09/2016 16:22:16

MilenaSl 161 Точки

Получи се само като използвах span, вмесно div. Някъде в лекциите се споменаваше, че основната разлика е, че div отива на нов ред, а span - не.

<span class="not-a-button first-button">We are not buttons :)</span>
<span class="not-a-button second-button">We are not buttons :)</span>

06/09/2016 17:09:49

Покажи всички коментари

Alexander7337 15 Точки

Относно първия въпрос, можеш да наслагаш "сенки на кутийката", така че да се получи дъга. След доста търсене как да стане, този вариант ми се стори най-удобен.

06/09/2016 16:50:35

MilenaSl 161 Точки

Благодаря за интересното предложение. С вложени dIv тагове, обаче, се получи точно както трябва.

<div id="red-border">
<div id="yellow-border">
<div id="green-border">
<div id="blue-border">
<p>These text fields look like buttons, right?</p>
<section>
<span class="not-a-button first-button">We are not buttons :)</span>
<span class="not-a-button second-button">We are not buttons :)</span>
</section>
</div>
</div>
</div>
</div>

06/09/2016 17:27:09

AngelSky 176 Точки

Мисля, че е по-подходящо да се използва div class, а не div ID.

Аз го направих така:

 <div class="blue">
    <div class="green">
       <div class="yellow">
          <div class="red">
            <h2>These text fields look like buttons, right?</h2>
              <ul>
                 <li>We are not buttons :)</li>
                 <li>We are not buttons :)</li>
              </ul>
          </div>
       </div>
    </div>
 </div>

Бутоните ги направих както в демото - 9. Styling-Lists, защото мисля, че точно това трябваше да се упражни.

06/09/2016 17:46:18

MilenaSl 161 Точки

Хм, наскоро четох разни материали из интернет кога да се ползва div и кога id, и останах с впечатлението, че основната разлика е в това дали искаш да ползваш имената по повече от един път, или не. Т.е. ако ще имаш повече от един "red" елемент, праскаш им на всичките такъв клас и ги стилизираш наведнъж. Другото предимство на class е, че можеш да редиш по колкото си искаш класове в кавичките.

За 9.Styling-Lists си прав, че е най-подходящото решение в случая. Не се бях сетила за нея.

06/09/2016 21:49:07