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
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
sider.topalov avatar sider.topalov 38 Точки

Благодаря ви много за бързия отговор сега ще го пробвам :)

0
18/02/2015 20:44:23
wenzdy avatar wenzdy 7 Точки

Аз освен float: left на едното и float:right на другото слагам и display: inline-block; и на двете

1
wenzdy avatar wenzdy 7 Точки

div:first-letter {
font-size: 45px;
}

Както и за всеки първи ред

div:first-line {
font-style: italic;
}

 

:)

1
18/02/2015 21:08:24
sider.topalov avatar sider.topalov 38 Точки

Благодаря ви !!!

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