Loading...
wenzdy avatar wenzdy 7 Точки

Homework: Web Fundamentals (HTML/CSS) - CSS Overview - Problem 2

Здравейте,

Някой може ли да ми даде съвет за това как да направя Header-a от ляво червен и от дясно син?

Опитах с before и after и с background:red; но то си иска да има съдържание...

Благодаря много :)

Тагове:
0
Web Fundamentals - HTML5 18/02/2015 15:53:42
crazy7 avatar crazy7 177 Точки
Best Answer

Може да пробваш с:

background: linear-gradient(to right,red,red 33.3%,green 33.3%,green 67.7%,blue 67.7%);

1
LedaNecheva avatar LedaNecheva 1 Точки

-webkit-linear-gradient(left, red 30%, ....), но и на мен ми е трудно да ги направя 3 :D

0
eeevgeniev avatar eeevgeniev 3 Точки

Точно така, но два пъти зелен по средата. Колкото процентите са по-близки между отделните цветове, толкова по-малко смесване ще има между тях.

0
Nadia.Hristova avatar Nadia.Hristova 41 Точки

-webkit-linear-gradient(left, red, red 33.333%, green 33.333%,  green 67.666%, blue 67.666%);

0
brslv avatar brslv 69 Точки

Това става с градиент:
http://codepen.io/anon/pen/LEdxmO.css

Разбира се, има си градиент генератори, които много улесняват нещата -> http://www.cssmatic.com/gradient-generator

Успех! :)

0
wenzdy avatar wenzdy 7 Точки

Много ви благодаря на всички! :) Получи се така :) Ще трябва да се поупражнявам с тези градиенти :) 

0
yanitsa.decheva avatar yanitsa.decheva 4 Точки
Друг начин: background-color: green; border-left: 600px solid red; border-right: 600px solid blue;
1
18/02/2015 17:06:34
sider.topalov avatar sider.topalov 38 Точки

Здравейте,

 

Oтностно същата задача (Color Kitchen) някой може ли да ми даде съвет за това как да си направя таблиците една до друга така както е дадено опитвам да го направя вече з часа но не ми се получава...

 

Благодаря много :)

0
18/02/2015 19:03:48
Nadia.Hristova avatar Nadia.Hristova 41 Точки

Ами аз не използвам таблици. Най-вероятно е малко дървен подход, но аз им дефинирам точно определени места на nav и sectiona в body-to.

nav {
width:157px;
margin:22px 20px 20px 10px;
background-color:white;
opacity:0.9;
border-radius:15px;
padding:15px;
padding-top:10px;
padding-left:10px;
position:fixed;
}

section {
margin: 22px 20px 20px 222px;
}

section article{
width:auto;
background-color:white;
opacity:0.9;
border-radius:15px;
padding:15px;
margin-top:20px;
}

0
brslv avatar brslv 69 Точки

Правилният начин е да се използва float. Първо дефинираш размерите на всеки "блок" и след това им задаваш float:left/right в зависимост от позицията на "блока". Показвам с пример :). 

http://codepen.io/anon/pen/NPYjzM

Използвал съм проценти, за да бъде по-responsive. Оттук в последствие могат да се дефинират media queries за отделните големини дисплеи и т.н. Като цяло е добра практика да не се ползват фикснати размери, защото живеем в 2015, когато 60 и повече процента от потребителите преглеждат уеб съдържание през някакво мобилно устройство. :)

3
18/02/2015 20:26:17
mariya.uzunova avatar mariya.uzunova 17 Точки

В моето решение използвам float за позициониране на <aside> и <section>.
Чрез float:left или float:right съответният елемент се залепя вляво или вдясно в пространството, което може да заеме.

Ето малко код, за да стане по-разбираемо:

aside{
    width:17%;
    min-width:170px;
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    float:left;
    margin-left:2%;
    padding: 20px;
}

section{
    width:70%;
    min-width:700px;
    float:right;
    margin-right:5%;
}

3
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.