CSS Box Model ...мъкъ ,мъка

[dns]

Значи тука от няколко дена се мъча да схвана начина на работа при така наречения бокс модел , мисля че схващам принципа АМА  като стигна до  цялостно изграждане на  страница и става пълно мазало:

      padding  увеличава размера на контейнера 

      left-padding  НЕ действа когато има float left

      когато вкарам два контейнера по големи от  главния  започват да се препокриват 

      а използването на position ми е тъмна индия

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

...ако на някой му се занимава да обяснява , мога да направя примерна опростена структура на сайт и той да ми каже кое как 
...мерси предварително..

[Avalanche]

Няма нищо сложно. Има и уроци, ама ако ти е трудно - ще ти ударим едно рамо. Стреляй.

[dns]

Няма нищо сложно. Има и уроци, ама ако ти е трудно - ще ти ударим едно рамо. Стреляй.

Ами аз тея дето намирах бяха все повърхностни и се обясняваха принципно как стоят нещата , без конкретни примери...

Какви атрибути и би трябвало да ползвам за отделните елементи в този случай

[Avalanche]

Добре почваме:

като за начало - всичко position: relative. Absolute, аз лично много малко използвам, и то само когато хептем не може да се настрои конкретният елемент.

За да не бягат всички елементи в ляво, може да създадеш един див таг, който да държи цялата конструкция, като на него му дадеш

Код: CSS

1. margin: 0 auto 0 auto;
2. text-align: center;//щото IE sux
3.  

Вече всичко ще бъде в центъра.

Логото си е едно, и няма друг елемент, който да го наподобява, така че го праскаш id и му задаваш точни размери, щото предполагам логото си е лого - няма да се добавя динамично информация вътре.

До тук добре, вече идват няколко елемента на един ред, затова ще трябва да използваме и float, в ляво. Сега като гледам снимките ще бъдат с един и същ размер, затова ги пускаш на class, задаваш им размер и ги пускаш с float: left.

Текстът като го гледам и той няма да искаш да "бяга" по екрана. Бих ти препоръчал да си направиш по един див таг, с един и същи клас, за всички текстове (ще бъде нещо като "text holder"). Задай му точни размери и му цъкни overflow: auto. Така, ако текстовете му дойдат в повече, ще се появи скрол и всичко ще бъде на място.  Пък и като му зададеш точни размери, втората снимка автоматично ще се премести на втория ред, защото няма да има място на първия.

Сега забелязах, че си сложил и разстояния и то различни. Нека кажа и за тях. Може да ги направиш по много начини, само с опит ще видиш, кое ти е най-удачно. Но конкретно в нашия случай може да използваш:
 - bottom: 5px на логото;
 - top: 5px на менюто, снимките и текста;
 - margin-bottom/padding-bottom: 5px на логото;
 - margin-top/padding-bottom: 5px на снимките и менюто.
Сега, с всички предполагам, че ще стане. Но аз лично предпочитам да давам top или margin. Разликата между padding и margin се надявам да я знаеш, ако ли не - в google, на първата страница е. Та имайки в предвид това, ако използваш padding и поставиш линк на снимката, ще се образува един гаден стърчащ border и между него и снимката - бяло пространство. Затова margin на снимките!


Сега с доста margin-и и "чепкане" ще ги наредиш. Обаче бих ти дал и друг подход към работата.
Сега така като го гледаш - може да го "нарежеш" на 3 части, примерно:
- първи div таг - съдържащ ЛОГО;
- втори div таг - съдържащ МЕНЮ и двете снимки+двата текста срещу него;
- трети div таг - съдържащ синия див таг и двете снимки+двата тескта срещу него.
Трита може да ги поставиш в клас, ще имат една и съща дължина, а височината може да я насроиш с min-height: от около 150px (примерно) и то вече, според каквото поставиш, така и ще се настрои.

Може пък да направиш и друго:
- първи div таг - ЛОГО;
- втори ляв (съдържа МЕНЮ и всичко под него) с ширината на МЕНЮ;
- трети десен (съдържа снимките и текстовете) с общата ширина на снимка и текст.

Малко се поотплеснах, извинявам се за правописните грешки и се надявам да съм помогнал. Ако имаш питания, давай смело - насреща съм.


едит: ако искаш мога да направя и видео, ама не съм много добър в правенето им

[wuser]

Направи!

[dns]

След като на няколко пъти омазах нещата с  position: relative; , а после и със position: absolute;
отново стигнах до кривата круша  

Можеш ли да ми разясниш , как точно се работи когато имаме position: relative; и когато имаме position: absolute;  ...какви точно са правилата , как се процедира и как се комбинират различни дивове , параграфи и изображения при relative и при  absolute ...гледах в http://www.w3schools.com/css/pr_class_position.asp ама  не можах да схвана много превода....

Ето и изчистения от  position: relative; CSS , ако ти се занимава допълни го , и ако може и да сложеш кратки разяснения ще супер   , айде стига толкова че взех да ставам нагъл  

Код: [Маркирай кода]

/* ---------------------------  */
.page_center
{

    margin: auto auto;
    text-align: center; /* щото IE sux  */
    width: 1000px;
    height: auto
}

.logo
{

    width: 1000px;
    height: 200px;
    background-color: #0000ff;
}

/* ---------------------------  */

.left-div
{

    
     float: left;
     border: solid 1px;
     width: 200px;
     height: auto
    
}

        .menu-div
        {
            
             padding-top: 10px;
             padding-bottom: 10px;
             background-color: #ff0000;
             width: 200px;
             height: 600px;
            
        }

        .banner-div
        {
            
             padding-bottom: 5px;
             width: 160px;
             height: 600px;
             background-color: #0000ff;
        }

/* ---------------------------  */
.right-div
{

     border: solid 1px;
     width: 800px;
     height: auto
}

    
        

        .img
        {
            
            padding-bottom: 10px;
            
        }



        .title
        {
          


        }






Тоя боксов модел е пълтя пръдня , защо когато няма float:  ...падинг-лефт  си дейсва както трябва , а когато има float: падинг-лефт НЕ дейсва , АКО дейсваше щеше да е супер лесно , правя си трите сектора , задавам на всеки елемент от всеки сектор падиннга който ме устройва  слагам  float: там където се налага и готово

..................................................

Ето и HTML-ла
Махнал съм head да е по сбито:

Код: [Маркирай кода]



<body>
<div class="page_center">
   
    <div class="logo"> </div>
     
     <div class="left-div">
           
          <div class="menu-div">
             
          </div>
         
          <div class="banner-div">
             
          </div>
     
     </div>
   
     <div class="right-div">


         <img class="img" src="nature_0001.jpg" alt="" />
         <p class="title"> SDFGDSG sdfgdfgds dgdgd</p>
         <p class="title"> Ssfsfcsdfgdfgds </p>

     
     </div>

</div>
</body>





[xxTTcc]

dns Защо не прегледаш серията с уроци дето съм я качил http://nau4i.me/index.php?option=com_content&view=article&id=235:-css-html&catid=55:css&Itemid=96 там се разглеждат точно практични неща които ще са ти от полза изграждането на една основа в стил css box model както ти се изрази. В последния урок който е ивън серията в който се говори за z-index има отделено време и за posiotion. Ако си ги изгледал, моля да ме извиниш.

[dns]

dns Защо не прегледаш серията с уроци дето съм я качил http://nau4i.me/index.php?option=com_content&view=article&id=235:-css-html&catid=55:css&Itemid=96 там се разглеждат точно практични неща които ще са ти от полза изграждането на една основа в стил css box model както ти се изрази. В последния урок който е ивън серията в който се говори за z-index има отделено време и за posiotion. Ако си ги изгледал, моля да ме извиниш.

Бях забелязал имената на тези уроци , но не предположих , че в тях се говори  за боксов модел , ще ги изгледам ще направя наколно примерни структори и ако ти се занимава да ги прегледаш  ще ги постна , да ми кажеш къде бъркам

[xxTTcc]

Насреща съм. 

[jazzman]

Css е лесен, страшно ефективен и е създаден за мързели, като мен  
Сега относно релативното и абсолютното позициониране ще ти дам един прост пример и ще ти стане ясно.
В случая вземам един див с id=''content" и един параграф вътре в него.
Сега ако реша да позиционирам параграфа абсолютно, примерно 20px отгоре и 20px отдясно, той ще се позиционира спрямо HTML тага, не спрямо боди тага, нито спрямо дива, който един вид го държи, защото никъде не сме оказали, че искаме да има релативност или зависимост, връзка на прост български с друг елемент

Код: [Маркирай кода]

<html>
<head>
<title>Positions in Css</title>
<style type="text/css">
html {
background-color:#fff;
}
body
{
padding: 2px;
background-color:#d0e4fe;
height: 600px;
width: 600px;
}
div#content {
background: #ccc;
padding: 10px;
width: 400px;
height: 400px;
}
p
{
position: absolute;
top:20px;
right: 20px;
}

</style>
</head>
<body>
<div id="content">
<p>My first paragraph.</p>
</div>
</body>
</html>



Ако сега обаче решим, този параграф да се позиционира 20px отгоре и вдясно спрямо body тага, тогава трябва да окажем, че body тага трябва да бъде relative и всички останали елементи в него започват да се позиционират спрямо него.
Виж примера:

Код: [Маркирай кода]

<html>
<head>
<title>Positions in Css</title>
<style type="text/css">
html {
background-color:#fff;
}
body
{
position: relative;
padding: 2px;
background-color:#d0e4fe;
height: 600px;
width: 600px;
}
div#content {
background: #ccc;
padding: 10px;
width: 400px;
height: 400px;
}
p
{
position: absolute;
top:20px;
right: 20px;
}

</style>
</head>
<body>
<div id="content">
<p>My first paragraph.</p>
</div>
</body>
</html>


3. Позиционираме параграфа спрямо div#content :

Код: [Маркирай кода]

<html>
<head>
<title>Positions in Css</title>
<style type="text/css">
html {
background-color:#fff;
}
body
{
padding: 2px;
background-color:#d0e4fe;
height: 600px;
width: 600px;
}
div#content {
        position: relative;
background: #ccc;
padding: 10px;
width: 400px;
height: 400px;
}
p
{
position: absolute;
top:20px;
right: 20px;
}

</style>
</head>
<body>
<div id="content">
<p>My first paragraph.</p>
</div>
</body>
</html>
По този начин се гради позиционирането на бокс модела в CSS, основан на взаимовръзки.
Хубаво е да се гледат видео уроци, книги да се четат, но най-добрият учител си остава практиката.
Аз почнах от този сайт, сваляш си темплейта, отваряш си photoshop файла и почваш да копаеш, междувременно има и css и html документ към него, така че може да си помагаш в началото.
http://www.freephotoshoptemplates.com/templatesbox/index.htm

[dns]

А аз бях почнал да слагам position: relative; във всеки див    и познай каква шлоковица стана

Значи доколкото съм те разбрал position absolute търси  relative; ако няма то тогава приема по default че html тага е с  relative

Ако ползваме   relative на различни нива какво става

Код: [Маркирай кода]

<html>
<head>
<title>Positions in Css</title>
<style type="text/css">
html {
background-color:#fff;
}
body
{
position: relative;
padding: 2px;
background-color:#d0e4fe;
height: 600px;
width: 600px;
}

h1
{
position: absolute;
top:20px;
right: 20px;
}

div#content {
        top:20px;
        right: 20px;
        position: relative;
background: #ccc;
padding: 10px;
width: 400px;
height: 400px;
}
p
{
position: absolute;
top:20px;
right: 20px;
}

</style>
</head>
<body>

<h1>Title </h1>

<div id="content">
       <p>My first paragraph.</p>
</div>
</body>
</html>

Разцъках го този вариант и стигнах да извода че absolute търси най-близките relative  от по горните на него нива ... в този случай div,  h1 се водят по пръчката на body  , а
p  се  води по пръчката на relative защото самият див има "sub-"relative който ще важи само  за елементите поставени във него  ....правилно ли съм схванал ?

Аз так или иначе ще си правя различни варианти , ще направя няколко разновидности със няколко relative  и ще ги постна за оценка и насоки 

--------------------------------------------------------------------------------------

най-добрият учител си остава практиката

... не е баш така , щото понякога десетина думи на кръст , ще ти спестят доста дълго лутане и изучаване на лоши практики , ето аз примерно до сега все съм прибягвал до таблици , и то в повечето случай до таблица в таблицата в таблицата , и съм се учил да работя с таблици  ,но това което съм научил с тази практика се оказва излишно и общо казано е било губене на време. А най тъпото е че във портфолиото си  имам към 7-8 сайта с доста редове HTML във който съм ползвал предимно таблици и сега за да не се излагам като кифладжия с моя TABLE MODEL     ще трябва да ги правя НАНОВО , при все че миналата година съм дал 300лв за уроци по уеб дизайн и съм получил сертификат с който мога съвсем спокойно да си избърша ...

[jazzman]

Toчно така - правилно си схванал.
Абсолютното позициониране, търси най-близката родствена връзка, ако няма такава търси следващата, ако и тя липсва се позиционира спрямо HTML тага.
Релативното от своя страна търси да се позиционира в тага в който е вкаран, примерно виж тези два кода:

Код: [Маркирай кода]

p{ position: relative; top: 10px; right: 10px;}


и

Код: [Маркирай кода]

p{ position: absolute; top: 10px; right: 10px;}
Първият ще се позиционира към най-близкият родствен таг, а вторият винаги към HTML тага без значение в колко други тага е вкаран. 

[dns]

Toчно така - правилно си схванал.
Абсолютното позициониране, търси най-близката родствена връзка, ако няма такава търси следващата, ако и тя липсва се позиционира спрямо HTML тага.
Релативното от своя страна търси да се позиционира в тага в който е вкаран, примерно виж тези два кода:

Код: [Маркирай кода]

p{ position: relative; top: 10px; right: 10px;}


и

Код: [Маркирай кода]

p{ position: absolute; top: 10px; right: 10px;}
Първият ще се позиционира към най-близкият родствен таг, а вторият винаги към HTML тага без значение в колко други тага е вкаран.  

Демек ако Р  е  с position relative и е във div ще се наглася спрямо div (без да търси други  relative).
Абе не е чак толкова сложно , ама ако започна да ползвам няколко relative на различни нива почвам да се обърквам.

А иначе маргина как действа ...ако имам:

Код: [Маркирай кода]

<div>
       <p style="margin-left:auto;margin-right:auto;">My first paragraph.</p>
</div>
P винаги ще се позиционира в средата на div без значение КЪДЕ  сме ползвали relative ?

[jazzman]

Ти не трябва да ползваш позициониране, където ти падне и да създаваш постоянни css родственост, в един момент браузъра ще почне да се чуди кое е детето, коя е майка му и от кой баща е то  
Позиционирането се ползва, когато наистина имаш нужда от него, практиката ще те научи кое и как  

[dns]

Ти не трябва да ползваш позициониране, където ти падне и да създаваш постоянни css родственост, в един момент браузъра ще почне да се чуди кое е детето, коя е майка му и от кой баща е то  

Да си призная... аз се чудя още преди браузъра да почне да се чуди