Автор Тема: Създаване на макет за централно ориентиран сайт с CSS и HTML – част IV – Z-index  (Прочетена 4182 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

wuser

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 85
  • -Получени: 49
  • Публикации: 2761
« Последна редакция: 06 Май 2015, 20:30:06 от Avalanche »
Мъдростта на патилото
Perl Monks: PHP - it's "training wheels without the bike" -- Randal L. Schwartz


Дееба... чувствам се все едно обяснявам на майка ми как да си отвори пощата
"не работи"
WTF?!?!? к'во значи че не работи?
Не ти се компилира, дава ти грешка, вади ти грешни резултати, компютърът ти се изключва като го напишеш или на целия квартал му спира тока?
Stilgar

xxTTcc

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 21
  • -Получени: 10
  • Публикации: 414
  • Logged as root
@wuser my friend някаква грешка 200 дава видеото. :(
Прочети правилата, потърси и попитай!

echeveria

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 72
  • -Получени: 93
  • Публикации: 4836
Някой го мести сигурно :)
Днес Печатарите използват парите за да купят мозъците на онези, които ги превъзхождат, за да ги накарат да им служат и така да се превърнат в жертва на посредствеността. Това ли е причината, поради която ги наричате благо?
<iframe src="http://www.corbindavenport.com/ubuntu/widget.html" style="width:

wuser

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 85
  • -Получени: 49
  • Публикации: 2761
Упс. Ей сега ще проверя.
Мъдростта на патилото
Perl Monks: PHP - it's "training wheels without the bike" -- Randal L. Schwartz


Дееба... чувствам се все едно обяснявам на майка ми как да си отвори пощата
"не работи"
WTF?!?!? к'во значи че не работи?
Не ти се компилира, дава ти грешка, вади ти грешни резултати, компютърът ти се изключва като го напишеш или на целия квартал му спира тока?
Stilgar

wuser

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 85
  • -Получени: 49
  • Публикации: 2761
Re:Създаване на макет за централно ориентир&#
« Отговор #4 -: 14 Април 2011, 20:08:59 »
Уф, че съм прост. Много гладен се върнах от работа и вместо да напиша името на файла z-index.mp4, съм написал z-ndex.mp4. Добре, че бързо се усетих, че щях бая да се чудя.
Мъдростта на патилото
Perl Monks: PHP - it's "training wheels without the bike" -- Randal L. Schwartz


Дееба... чувствам се все едно обяснявам на майка ми как да си отвори пощата
"не работи"
WTF?!?!? к'во значи че не работи?
Не ти се компилира, дава ти грешка, вади ти грешни резултати, компютърът ти се изключва като го напишеш или на целия квартал му спира тока?
Stilgar

xxTTcc

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 21
  • -Получени: 10
  • Публикации: 414
  • Logged as root
Само искам да направя една вметка, там където нагласихме жълтия правоъгълник в дясно, аз остави Position:absolute; . Не че е проблем но си мисля че с Position: Relative ще е по добре. Извинявам се, късничко беше.
Прочети правилата, потърси и попитай!

donka

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 4
Здравейте,
пиша в тази тема, за да не отварям нова.
Започнах да гледам 3те части на този урок. С първите две проблеми няма... на третия обаче зациклих и 1 час мъча едно нещо и не става и не става. Проблема е, че не мога да разделя двата div-a да са един до друг, а не един под друг. Пиша float: left; и на двата (както е показано във видетото), но резултата е коренно различен. Мести ми Footer-a.
Без float: left и на двата дива (vertmenu и content) -
 
Ето какво става и като напиша Float в .css-a на двата class-a



Какво би трябвало да се получи може да видите на 12:30 в третата част от урока.
Ето кодовете - индекс-а
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="style/stilove.css" rel="stylesheet" type="text/css" />
        <link href="style/stylemenu.css" rel="stylesheet" type="text/css"
        <title></title>
    </head>
    <body>
        <div id="container">
           
            <div id="head">HEAD</div>
            <div id="menu">
               
                <div class="horizontal">
                     
                    <ul>
                        <li><a href="index.php" title="Начало" target="_blank">Начало </a></li>
                        <li><a href="index.php" title="Начало" target="_blank">За нас</a></li>
                        <li><a href="index.php" title="Начало" target="_blank">Продукти</a></li>
                        <li><a style="border-right: none" href="index.php" name="Начало" target="_blank">Контакти</a></li>
                    </ul>
                </div>
            </div>
           
            <div id="body">
                <div class="vertmenu"></div>
               
                <div class="content"></div>
            </div>
           
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

Единия css, който е за body, container, head и т.н.
body
{
    margin: 0;
    background-color: #CCC;
}
#container
{
    width: 800px;
    margin: 0 auto;
}
#head
{
   width: 100%;
   height: 70px;
   background-color: red;
}
#menu
{
   width: 100%;
   height: 30px;
   background-color: orange;
}
#body
{
   width: 100%;
   height: 300px;
   background-color: yellow;
}
#footer
{
   width: 100%;
   height: 20px;
   background-color: green;
}

И втория css където са менюатата и всъщност където са двата цветни блока vertmenu И content

.horizontal
{
    width: 100%;
    height: 30px;
}

.horizontal ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.horizontal li
{
    float: left;
}

.horizontal a
{
    display: block;
    width: 116px;
}

.horizontal a:link, .horizontal a:visited
{
    font-family: cursive;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    background-color: #66ff66;
    text-align: center;
    border-right: 1px;
    border-right-color: #FFF;
    border-right-style: solid;
    padding-top: 6px;
    padding-bottom: 5px;
    text-decoration: none;
}

.horizontal a:hover, .horizontal a:active
{
    background-color: #00ffff;
    color: #FFF;
    text-decoration: underline;
}

.vertmenu
{
    width: 200px;
    height: 250px;
    background-color: greenyellow;
    float: left;
}

.content
{
    width: 600px;
    height: 250px;
    background-color: brown;
   float: left;
}


Edit - след още няколко часа борба се получи, но не по начина, който е описан във видеото. Ето какво промених в кодовете -
Index-a - Размених местата на двата цветни блока.
<div id="body">
                <div class="content"></div>
                <div class="vertmenu"></div>
            </div>

И в .css-a ги подравних на обратно - с float:right;
.vertmenu
{
    width: 200px;
    height: 250px;
    background-color: greenyellow;
    float: right;
}

.content
{
    width: 600px;
    height: 250px;
    background-color: brown;
    float: right;
}

И идея си нямам защо при единия начин се получи, а при другия не. Ако може някой да обясни ще съм му благодарен :)
« Последна редакция: 30 Август 2012, 01:09:38 от donka »

Stan

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 27
  • -Получени: 135
  • Публикации: 641
И идея си нямам защо при единия начин се получи, а при другия не. Ако може някой да обясни ще съм му благодарен :)

Факта, че във видеото всичко е наред, а при теб не, при един и същ код може да значи само едно -> нещо се променя според резолюцията на екрана... "Камъчето, което обръща колата" се оказва променящата се височина на списъците(li елементите), която височина от своя страна се променя от елемента вмъкнат във всеки един списък (a елементите - хипервръзките).Те от своя страна са стилизирани така : горен падинг - 6px , долен - 5px (съответно сбора им е 11px).Височината на реда, обаче не е фиксирана никъде колко пиксела трябва да бъде и точно това "преобръща колата" и "чупи" дизайна.При една резолюция тя е 19px (11px падинг + 19px височина на реда = 30px - ок,допустимо е спрямо височината на дива с клас "horizontal") , при друго резолюция, явно като твоята височината на реда ръсте (11px + 20px = 31px - не е ок, лошо).Можеш да зададеш :

Код: CSS
  1. .horizontal a:link, .horizontal a:visited {
  2.  /*другите стилизации*/
  3.  line-height:19px;
  4. }

За да видиш като проба, че ще се оправят нещата.
Защо обаче тези дребнави неща оказват такова влияние и "чупят" дизайна ? - Ами "плаващите" елементи(тези на които задаваш float:left,right,both) си имат своитве особености.В случая височината на неподредения списък (ul елемента) не обгръща своите "деца" (li елементите), защото неговата височина е буквално 0px(това се дължи на флоутването на неговите "деца" - li елементите) и флоута на ляво не е почистен което може да доведе до неочаквани резултати.Ако се загледаш внимателно във втората снимка, която си дал ще видиш, че зеленото блокче(div с клас "vertmenu") е изместено на ляво от началото на "жълтия му родител" точно след края на последния li елемент намиращ се отгоре му (края на блокчето "контакти").Това се получава така защото и li елементите и зеленото блокче(както и тъмно червеното) са флоутнати в едно и също направление - на ляво.Вижда се с просто око, че оранжевото разстояние което остава в хоризонталната навигация е по-голямо като дължина от дължината на зеленото блокче, следователно има място зеленото блокче да се "залепи" към последния li елемент на ляво(тъй като имаш определена височина на дива в който е поместена навигацията "залепянето" става точно под другите плаващи елементи).Като проба отново можеш да тестваш ако смениш местата на тъмночервеното блокче (див с клас "content") с мястото на зеленото блокче(както си направил и ти но без дори да сменяш направлението на флоута от ляво на дясно) ще видиш че няма да има такова чупене - това се получава така защото сега дължината на оранжевото пространство е по-малка от дължината на тъмночервеното блокче, следователно няма достатъчно място за него да се залепи на ляво към последния li елемент и пада на нов ред, което създава ефекта че всичко е наред.

Като цяло трябва да запомнеш едно много важно нещо имаш ли фоутване трябва да внимаваш как го използваш и при нужда да го почистваш!

Тук специално в този елементарен пример вариянти много - можеш да зададеш съответно на ul елемента или на div с ид "body" css свойството overflow:hidden което ще принуди тези елементи да обгърнат принудително своето съдържание (в случая своите флутнати "деца") или пък да използваш css свойството clear(било то с псеудо елемент или чрез стилизация на един див) за да почистиш проблемния флоут.  ;)
« Последна редакция: 30 Август 2012, 19:05:32 от Stan »

donka

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 4
Мерси много :) Стана ми ясно вече :)