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

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

levski97s

  • Jr. Member
  • **
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 60
Как да разположа вертикалното меню в центъра?

echeveria

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

levski97s

  • Jr. Member
  • **
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 60
Как да разположа вертикалното меню в центъра?
Отвори си тема!
OK!

UniqueGameR

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 5
Браво най-сетне да го науча тоя език търсих толкова много сайтове и най-накрая го открих :) Относно темата отначало си казах - Тоя бачка с Win MAC и няма да му разбера нищо, но... ето, че се получава нещо. Благодаря!
EDIT:
Нещо не ми се получава вижте!
В index.html
<html>
<head>
<title>Unique GamerZ</title>
<link rel="stylesheet" type='text/css' href='stilove.css' />
</head>
<body>
<div id="container">
<div id="head">HEAD</div>
<div id="menu">
<div class="horizontal"></div>
<ul>
<li><a href="index.html" name="Начало" target="_self"> Начало</a></li>
<li><a href="index.html" name="Начало" target="_self">Форум</a></li>
<li><a href="index.html" name="Начало" target="_self">Сървъри</a></li>
<li><a href="index.html" name="Начало" target="_self">Екип</a></li>


</ul>
</div>
<div id="body">BODY</div>
<div id="footer">FOOTER</div>

</div>
</body>
</html>
В stilove.css
body
{
margin: 0;
background-color: #ccc;
}
#container
{
width: 800px;
margin: 0 auto;
}
#head
{
width: 100%;
height: 70px;
background: red;
}
#menu
{
width: 100%;
height: 30px;
background: orange;
}
#body
{
width: 100%;
height: 300px;
background: yellow;
}
#footer
{
width: 100%;
height: 20px;
background: green;
}
.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:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFF;
text-align:center;
margin-left:1px;
padding-top:12px;
text-decoration:none;
height:28px;
}
Моля ви кажете къде ми е грешката??
« Последна редакция: 24 Декември 2011, 17:21:29 от UniqueGameR »

xxTTcc

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 21
  • -Получени: 10
  • Публикации: 414
  • Logged as root
Привет :)

Затвяря div horizontal 2 пъти и за това не ти се получава.
<div class="horizontal"></div>
            <ul>
               <li><a href="index.html" name="Начало" target="_self"> Начало</a></li>
               <li><a href="index.html" name="Начало" target="_self">Форум</a></li>
               <li><a href="index.html" name="Начало" target="_self">Сървъри</a></li>
               <li><a href="index.html" name="Начало" target="_self">Екип</a></li>
               
            
            </ul>
         </div>

Трябва да махнеш затварящия таг в чевено. По тази логика списъка ти е извън този див.
« Последна редакция: 05 Януари 2012, 15:28:16 от xxTTcc »
Прочети правилата, потърси и попитай!

Stan

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 27
  • -Получени: 135
  • Публикации: 641
С този пост мисля че темата му http://nau4i.me/forum/index.php/topic,13950.0.html - става неподходяща за раздела... но каквото решат хората отговарящи за тези неща.  :)

xxTTcc

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

4o4ity

  • Jr. Member
  • **
  • Благодарности
  • -Казани: 4
  • -Получени: 3
  • Публикации: 78
Пак съм аз ;D
Та имам един въпрос относно стилизирането на елементите във Css файлът ни.
Значи във  второто видео при стилизирането на <li></li> във Css файлът пишем div.horizontal li и стилизираме.Въпросът ми е има ли разлика ако уточним и напишем div.horizontal ul li демек да добавим само ul,понеже резултатът е един същ,но ми стана интересно има ли разликата и защо не пишем ul?Мерси:)

Stan

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 27
  • -Получени: 135
  • Публикации: 641
Пак съм аз ;D
Та имам един въпрос относно стилизирането на елементите във Css файлът ни.
Значи във  второто видео при стилизирането на <li></li> във Css файлът пишем div.horizontal li и стилизираме.Въпросът ми е има ли разлика ако уточним и напишем div.horizontal ul li демек да добавим само ul,понеже резултатът е един същ,но ми стана интересно има ли разликата и защо не пишем ul?Мерси:)

Разбира се че има, със следния селектор (div.horizontal li) ти казваш следното:
браузъра "чете" селекторите от дясно на ляво ... намира всички елементи li - та, които са поместени в елемент с име на клас "horizontal" и който елемент представлява div

Код: HTML
  1. <div class="horizontal">
  2.   <ol>
  3.     <li>едно</li>
  4.     <li>две</li>
  5.     <li>три</li>
  6.   </ol>
  7.   <ul>
  8.     <li>едно</li>
  9.     <li>две</li>
  10.     <li>три</li>
  11.   </ul>
  12. </div>

С по-горния селектор ти ще обхванеш li-тата и на подредения списък (ol) и на неподредения (ul). Със селектора div.horizontal ul li ще обханеш само тези на неподредения списък.Надявам се си схавнал идеята, ако има нещо неясно питай.

4o4ity

  • Jr. Member
  • **
  • Благодарности
  • -Казани: 4
  • -Получени: 3
  • Публикации: 78
май не съм се изяснил точно,Значи имам впредвид това:
div.horizontal ul li
{
    float:left;
}

Аз съм го написал така докато автора:

.horizontal li
{
float:left;
}

В смисъл каква точно е разликата и грешно ли е ако го напиша по-горния начин?

Stan

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 27
  • -Получени: 135
  • Публикации: 641
Аз вече ти дадох пример каква е разликата,а именно в точността:

селектор div.horizontal ul li - всички ли-та в неподреден списък на див с клас "horizontal"

селектор .horizontal li - всички ли-та поместени в елемент с клас "horizontal"

Код: HTML
  1. <div class="horizontal">
  2. <ul>
  3.  <li>blabla</li>
  4.  <li>blabla</li>
  5. <ul>
  6. </div>
  7. <blockquote class="horizontal">
  8.   <ul>
  9.  <li>blabla</li>
  10.  <li>blabla</li>
  11. <ul>

Ако искаш да обхванеш ли-тата само поместените в дива и то само на неподреден списък -> div.horizontal ul li
.horizontal li - ще обхване ли-тата и в дива и в blockquote и ако има друг както и на всички видове списъци (това е по-общ вариянт)

Сега разбра ли ? Нещата ги определяш според ситуацията.И все пак е по-добре да бъдеш по-точен за да не се объркат нещата и да се обхванат нежелани от теб елементи с един или друг селектор.В случая за видеото е все тая дали ще използваш единия или другия вариянт.

4o4ity

  • Jr. Member
  • **
  • Благодарности
  • -Казани: 4
  • -Получени: 3
  • Публикации: 78
Мда мерси за отговора,мисля че разбрах,то и горе е обяснено,ама нещо съм се омотал(facepalm)
Иначе след като казваш че е хубаво да бъда по-точен,ако пиша по-голям код е хубаво да ги правя така:
div.horizontal ul li
{
    float:left;
}

нали?

Stan

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 27
  • -Получени: 135
  • Публикации: 641
Мда мерси за отговора,мисля че разбрах,то и горе е обяснено,ама нещо съм се омотал(facepalm)
Иначе след като казваш че е хубаво да бъда по-точен,ако пиша по-голям код е хубаво да ги правя така:
div.horizontal ul li
{
    float:left;
}

нали?

Дам, да е ясно че става на въпрос за ли-тата в неподредени списъци в див(чета) с клас(ове) "horizontal"  ;) В случая не съм гледал видеото, но предполагам че става на въпорс за хоризонтална навигация, ако е така даже можеш да изпозлваш id вместо клас тъй като се предполага, че тази навигация ще бъде единствена в страницата(неповторима).

4o4ity

  • Jr. Member
  • **
  • Благодарности
  • -Казани: 4
  • -Получени: 3
  • Публикации: 78
В случая не съм гледал видеото, но предполагам че става на въпорс за хоризонтална навигация, ако е така даже можеш да изпозлваш id вместо клас тъй като се предполага, че тази навигация ще бъде единствена в страницата(неповторима).

 :o :o :o :o :o :o :o :o

Ем да точно за тва се използва,ама пича в началото обясни че Id-то не че не може да се ползва повече от веднъж,но ако го прекараме през валидатор ще даде че има дублиране и за тва го написа със клас :)

Stan

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

Разбира се,ако изпозлваш повече от вендъж едно и също ид на даден страница е абсолютно грешно (все пак това е неговото предназначение - да селектираш точно един определен елемент - нито повече, нито по-малко )И както казах само предполагах защото не съм гледал видеото и кода в него.