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

levski97s · « **Отговор #30 -:** 13 Май 2011, 18:53:13 »

Как да разположа вертикалното меню в центъра?

echeveria · « **Отговор #31 -:** 14 Май 2011, 01:05:34 »

Цитат на: levski97s в 13 Май 2011, 18:53:13

Как да разположа вертикалното меню в центъра?

Отвори си тема!

levski97s · « **Отговор #32 -:** 14 Май 2011, 09:49:39 »

Цитат на: echeveria в 14 Май 2011, 01:05:34

Цитат на: levski97s в 13 Май 2011, 18:53:13
Как да разположа вертикалното меню в центъра?
Отвори си тема!

OK!

UniqueGameR

Браво най-сетне да го науча тоя език търсих толкова много сайтове и най-накрая го открих

Относно темата отначало си казах - Тоя бачка с 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;
}

Моля ви кажете къде ми е грешката??

xxTTcc

Привет

Затвяря 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>

Трябва да махнеш затварящия таг в чевено. По тази логика списъка ти е извън този див.

Stan

С този пост мисля че темата му http://nau4i.me/forum/index.php/topic,13950.0.html - става неподходяща за раздела... но каквото решат хората отговарящи за тези неща.

xxTTcc

Хард кор от всякъде

4o4ity

Пак съм аз

Та имам един въпрос относно стилизирането на елементите във Css файлът ни.
Значи във второто видео при стилизирането на <li></li> във Css файлът пишем div.horizontal li и стилизираме.Въпросът ми е има ли разлика ако уточним и напишем div.horizontal ul li демек да добавим само ul,понеже резултатът е един същ,но ми стана интересно има ли разликата и защо не пишем ul?Мерси:)

Stan

Цитат на: 4o4ity в 24 Август 2012, 13:09:04

Пак съм аз
Та имам един въпрос относно стилизирането на елементите във Css файлът ни.
Значи във второто видео при стилизирането на <li></li> във Css файлът пишем div.horizontal li и стилизираме.Въпросът ми е има ли разлика ако уточним и напишем div.horizontal ul li демек да добавим само ul,понеже резултатът е един същ,но ми стана интересно има ли разликата и защо не пишем ul?Мерси:)

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

Код: HTML

<div class="horizontal">
  <ol>
    <li>едно</li>
    <li>две</li>
    <li>три</li>
  </ol>
  <ul>
    <li>едно</li>
    <li>две</li>
    <li>три</li>
  </ul>
</div>

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

4o4ity

май не съм се изяснил точно,Значи имам впредвид това:

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

div.horizontal ul li
{
    float:left;
}

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

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

.horizontal li
{
float:left;
}

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

Stan

Аз вече ти дадох пример каква е разликата,а именно в точността:

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

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

Код: HTML

<div class="horizontal">
<ul>
 <li>blabla</li>
 <li>blabla</li>
<ul>
</div>
<blockquote class="horizontal">
  <ul>
 <li>blabla</li>
 <li>blabla</li>
<ul>
</blockquote>

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

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

4o4ity

Мда мерси за отговора,мисля че разбрах,то и горе е обяснено,ама нещо съм се омотал(facepalm)
Иначе след като казваш че е хубаво да бъда по-точен,ако пиша по-голям код е хубаво да ги правя така:

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

div.horizontal ul li
{
    float:left;
}

нали?

Stan

Цитат на: 4o4ity в 24 Август 2012, 14:15:08

Мда мерси за отговора,мисля че разбрах,то и горе е обяснено,ама нещо съм се омотал(facepalm)
Иначе след като казваш че е хубаво да бъда по-точен,ако пиша по-голям код е хубаво да ги правя така:
Код: [Маркирай кода]
div.horizontal ul li { float:left; }
нали?

Дам, да е ясно че става на въпрос за ли-тата в неподредени списъци в див(чета) с клас(ове) "horizontal"

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

4o4ity

Цитат на: Stan в 24 Август 2012, 14:22:54

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

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

Stan

Цитат на: 4o4ity в 24 Август 2012, 14:37:19

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

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

Новини:

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

levski97s

Re:Създаване на макет за централно ориентиран сайт с CSS и HTML

echeveria

Re:Създаване на макет за централно ориентиран сайт с CSS и HTML

levski97s

Re:Създаване на макет за централно ориентиран сайт с CSS и HTML

UniqueGameR

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

xxTTcc

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

Stan

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

xxTTcc

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

4o4ity

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

Stan

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

4o4ity

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

Stan

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

4o4ity

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

Stan

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

4o4ity

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML

Stan

Re: Създаване на макет за централно ориентиран сайт с CSS и HTML