Софтуерно Инженерство
Loading...
+ Нов въпрос
MilenaSl avatar 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>
 

Тагове:
0
Web Fundamentals - HTML5 06/09/2016 13:54:09
z.s.paneva avatar 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. Използвайки тях, няма да ти е нужно да усложняваш нещата с позициониране и т.н. Успех! :)

0
08/09/2016 09:46:51
Raskolnikov avatar Raskolnikov 102 Точки

Здравей,

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

1
daniel.nikov926 avatar 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 ще ти кажа как става

1
MilenaSl avatar MilenaSl 161 Точки

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

0
daniel.nikov926 avatar 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;
}

1
MilenaSl avatar 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>

0
Alexander7337 avatar Alexander7337 15 Точки

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

1
MilenaSl avatar 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>

1
AngelSky avatar 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, защото мисля, че точно това трябваше да се упражни.

1
MilenaSl avatar MilenaSl 161 Точки

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

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

0