FREAKSHOW

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » FREAKSHOW » Обучение дизайну » узнаем что такое дизайн с cotton'


узнаем что такое дизайн с cotton'

Сообщений 31 страница 60 из 77

31

эммм а как сделать вот все это: форум, участники, профиль и т.д. чтоб оно все это вверху было?
и как их можно поменять (ну на свои например)
ну и можно ли убрать эту погрешность при заходе в администраторскую с шапкой..?хз

Отредактировано cotton' (2011-11-06 02:58:10)

0

32

cotton' написал(а):

эммм а как сделать вот все это: форум, участники, профиль и т.д. чтоб оно все это вверху было?

Очень просто. Все это делается во втором окошке стиля. Сейчас тебе напишу. Ставим перед всеми нашими кодами.

div#pun-navlinks {
position: absolute;
width: 100%;
text-align: left;
top:440px;
}

div#pun-ulinks {
position: absolute;
width: 100%;
text-align: left;
top: 460px;
}

Значения меняем на свои. Точно сколько поставить не могу сказать, так что пробуй изменить то, что красным.

cotton' написал(а):

и как их можно поменять (ну на свои например)

Замена ссылок основного меню

Заменяет ссылки меню навигации на картинки через css
Особенно хорошо то, что форум будет грузиться меньше, если делать это именно через css, а не скриптом.

<style type="text/css">

    /*1. Настройка общего вида линков */

    #pun-navlinks a {
    display: inline-block;
   height: 20px;
    width: 70px;
    margin-left: 10px;
    }

    /*2. Настройка изображений */

    #navindex a {background: url(адрес_изображения) no-repeat top center;}
    #navuserlist a {background: url(адрес_изображения) no-repeat top center;}
    #navsearch a {background: url(адрес_изображения) no-repeat top center;}
    #navprofile a {background: url(адрес_изображения) no-repeat top center;}
    #navpm a {background: url(адрес_изображения) no-repeat top center;}
    #navadmin a {background: url(адрес_изображения) no-repeat top center;}
    #navlogout a {background: url(адрес_изображения) no-repeat top center;}
    #navlogin a {background: url(адрес_изображения) no-repeat top center;}
    #navregister  a {background: url(адрес_изображения) no-repeat top center;}

    /*3. Настройка изображений при ховере (наведении) */

    #navindex a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navuserlist a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navsearch a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navprofile a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navpm a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navadmin a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navlogout a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navlogin a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navregister a:hover {background: url(адрес_изображения) no-repeat top center;}

    /* Скрываем текстовые надписи */

    #pun-navlinks a span {display: none;}
    </style>

Инструкции

1. Настройка общего вида #pun-navlinks a
height: 20px; - укажите высоту ваших изображений
width: 70px; - укажите ширину ваших изображений. Если ширина изображений разная, необходимо удалить эту строку, и указать ширину для каждого элемента отдельно.
Пример:
#navindex a {background: url(адрес_изображения) no-repeat top center; width: 70px; }
#navuserlist a {background: url(адрес_изображения) no-repeat top center; width: 75px;}
и т.д.
! Для ховеров ширину указывать не нужно. Свойство наследуется.
margin-left: 10px; - расстояние между линками.

2. Настройка изображений

#navindex a - Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister  a - Регистрация
#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.

background: url(адрес_изображения) - адрес вашего изображения, которое будет отображаться когда ссылка находится в состоянии покоя.

3. Настройка изображений ховера

Все как и выше. Только изображения для ссылок при наведении.

А что там у тебя с шапкой? Я не чего не вижу.

0

33

ультраморин написал(а):

А что там у тебя с шапкой? Я не чего не вижу.

что у меня с шапкой? у меня все видно..
погоди, я не совсем что-то поняла куда вставлять весь этот код, а куда скрипты вставлять я вообще не совсем въезжаю..хдд

0

34

Ты писала что у тебя какие-то погрешности с шапкой при заходе в администраторскую. Я не увидела о чем именно ты говоришь. Первый код для того что бы поднять названия навигации наверх вставляем во втором окне стиля после /* CS1 Background and text colours
-------------------------------------------------------------*/
, т.е. перед всеми нашими фонами и шапками.

Второй код вставляешь в самый низ стиля, после всех кодов. Тоже в стиле.

0

35

ультраморин написал(а):

Ты писала что у тебя какие-то погрешности с шапкой при заходе в администраторскую. Я не увидела о чем именно ты говоришь.

а поняла, ну вот что у меня..

Свернутый текст

http://pix.academ.org/img/2011/11/07/48ff1b7fdfb77c8431e840fb39deeb69.png

и так все скрипты в самый низ во вторую таблицу вставлять, да?

0

36

cotton' написал(а):

а поняла, ну вот что у меня..

Если ты про надпись, то она не убирается. Это что-то типо рекламы. Я думаю, что ее нельзя совсем убрать.

cotton' написал(а):

и так все скрипты в самый низ во вторую таблицу вставлять, да?

Скажу что бы ты знала, это не скрипты. Скриты мы обычно вставляем в хтмл верх или низ. У них немного другое описание. Если все это вставить не в стиль, то просто не чего не получится. Чем удобно прописывать практически все через стиль это то, что хтмл низ и верх будут не захламлены. Да, во второе окошко стиля. Это в самый верх:

ультраморин написал(а):

div#pun-navlinks {
position: absolute;
width: 100%;
text-align: left;
top:440px;
}
div#pun-ulinks {
position: absolute;
width: 100%;
text-align: left;
top: 460px;
}

А остальное после всех кодов там же. Да, еще нужно сделать картиночки с названиями в фотошопе.

0

37

ультраморин написал(а):

Если ты про надпись, то она не убирается. Это что-то типо рекламы. Я думаю, что ее нельзя совсем убрать.

да не про надпись..да ее сместить можно, это я знаю, но надо скрипт найти и где-то я видела скрипт чтоб убрать эту рекламу совсем, но к сожалению не помню где((
я о том, что шапка не полностью продолжается как она продолжается на главной странице..

ультраморин написал(а):

Скажу что бы ты знала, это не скрипты.

да это я знаю, я вообще спрашиваю куда скрипты пихать..)

ультраморин написал(а):

Скриты мы обычно вставляем в хтмл верх или низ

эммм..я туплю или просто не знаю...ну в общем таблицы цсс вот, передо мной, а таблицы хтмл где?

ультраморин написал(а):

А остальное после всех кодов там же. Да, еще нужно сделать картиночки с названиями в фотошопе.

да я сделала, но у меня ничего не получилось поэтому я пока так оставила.. они просто после того, как я поставила этот код вообще все исчезли(

0

38

cotton' написал(а):

да не про надпись..да ее сместить можно, это я знаю, но надо скрипт найти и где-то я видела скрипт чтоб убрать эту рекламу совсем, но к сожалению не помню где((
я о том, что шапка не полностью продолжается как она продолжается на главной странице..

Да, ее можно сместить. А вот убрать нельзя. Нельзя же отключить верхнюю рекламу на мубб, да и я думаю что это и не нужно. В принципе оно не мешает. Да, шапка в админке обрезается по ширине форума, но с этим не чего нельзя поделать. На главной странице и остальных страницах все нормально, а что там в админке совсем не важно. Так что забей на это.

cotton' написал(а):

да это я знаю, я вообще спрашиваю куда скрипты пихать..)

Скрипты обычно засовываем в HTML верх или HTML низ. Это в зависимости что за скрипт. Один можно вставлять только в верх, а другой в низ. Иначе они будут не корректно работать.

cotton' написал(а):

эммм..я туплю или просто не знаю...ну в общем таблицы цсс вот, передо мной, а таблицы хтмл где?

Администрирование ---> Настройки

cotton' написал(а):

да я сделала, но у меня ничего не получилось поэтому я пока так оставила.. они просто после того, как я поставила этот код вообще все исчезли(

Вставлять в HTML низ

<style type="text/css">
    /*1. Настройка общего вида линков */
    #pun-navlinks a {
    display: inline-block;
  height: 20px;
    width: 70px;

    margin-left: 10px;
    }
    /*2. Настройка изображений */
    #navindex a {background: url(адрес_изображения) no-repeat top center;}
    #navuserlist a {background: url(адрес_изображения) no-repeat top center;}
    #navsearch a {background: url(адрес_изображения) no-repeat top center;}
    #navprofile a {background: url(адрес_изображения) no-repeat top center;}
    #navpm a {background: url(адрес_изображения) no-repeat top center;}
    #navadmin a {background: url(адрес_изображения) no-repeat top center;}
    #navlogout a {background: url(адрес_изображения) no-repeat top center;}
    #navlogin a {background: url(адрес_изображения) no-repeat top center;}
    #navregister  a {background: url(адрес_изображения) no-repeat top center;}
    /*3. Настройка изображений при ховере (наведении) */
    #navindex a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navuserlist a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navsearch a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navprofile a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navpm a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navadmin a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navlogout a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navlogin a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navregister a:hover {background: url(адрес_изображения) no-repeat top center;}
    /* Скрываем текстовые надписи */
    #pun-navlinks a span {display: none;}
    </style>

height: 20px; - ставишь размер своей надписи. Соответственно длину и высоту.
    width: 70px;

0

39

отлично, спасибо, вроде все получилось)
эммм а как теперь кнопки поставить, а то я ставлю, но не получается..хз

0

40

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

Код:
<style>
.punbb table [color=red]Div.icon[/color] {float: right; display: block; [color=maroon]width: 70px; height: 70px[/color]; border-style: none; background-image: url(ссылка);  background-repeat: no-repeat; position: relative;}
.punbb table [color=green]div.inew [/color]{background: url(ссылка) no-repeat;}
TR.[color=navy]isticky Div.icon[/color] {background: url(ссылка) no-repeat;}
TR.[color=purple]iclosed Div.icon[/color] {background: url(ссылка) no-repeat;}
</style>
<style type="text/css">
.punbb td div.tclcon { padding-right: 75px; }
</style>

Div.icon - старые сообщения
div.inew - новые сообщения
isticky Div.icon - важные сообщения
iclosed Div.icon - закрытые сообщения

width: 70px; height: 70px - размер наших иконок. Не советую делать больше, будут смотреться не очень красиво.

0

41

хммм...что-то они не отображаются(

0

42

Ой, я забыла написать куда их вставлять. Вставь все это в хтмл верх. Должны заработать.

0

43

:no: неа( не получилось(
наверное цсс просто отказывается принимать такой ужас..хдд)

0

44

cotton' написал(а):

неа( не получилось(
наверное цсс просто отказывается принимать такой ужас..хдд)

Я же написала, что вставлять не в цс, а в хтмл верх.

0

45

ультраморин написал(а):

Я же написала, что вставлять не в цс, а в хтмл верх.

ну а я куда вставила?! в хтмл!

0

46

Я тебе объясню что такое хтмл и css

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

Заумно и может не понятно, но я не знаю  как объяснить тебе отличие между css и html. До этого мы работали в Цвета style_cs.css. Убирай от туда код с иконками и вставляй все это безобразие в HTML верх. Да, кстати цветовое выделение я делала что бы тебе было понятно. Я его убрала и иконки стали работать. Будь внимательней!!!

И из стиля их убери. Не нужно одно и тоже два раза дублировать.

0

47

ну это понятно, спасибо..хд

ультраморин написал(а):

Да, кстати цветовое выделение я делала что бы тебе было понятно. Я его убрала и иконки стали работать. Будь внимательней!!!

арррр я тормоз, прости, забыла про выделение цветом из-за этого не получилось(

Отредактировано cotton' (2011-11-08 01:32:57)

0

48

Не чего страшног. Это я немного ступила когда в код здесь в сообщение вставила. Но на будущее обращай внимание. Один лишний тег и все пойдет не так. Я пока не могу тебе что-то ещё рассказать, я с телефона сижу. Так что подумай пока что тебя интересует. А вечером я постараюсь объяснить.

0

49

хорошо, буду внимательней)
эмммм таааакс...может боковая таблица?

0

50

cotton' написал(а):

эмммм таааакс...может боковая таблица?

В принципе тут нет не чего сложного. Берешь код боковой таблицы, а они сейчас не редки. Нужно для нее тоже делать графику и просто устанавливаешь. Сейчас найду код.

0

51

Таблица

Вставить можно либо в объявление или в хтмл верх, тут не принципиально.

Код:
<div id="sidebar">
  <!--[if IE]><div style="margin-left: 0px"><![endif]-->
  <div class="btitle">
    <a href="/" alt="ссылка на ваш форум">название вашего форума</a>
  </div>
<div class="about">
    <div class="nav">
      <a href="ссылка">название</a>
      <a href="ссылка">название</a>
    </div>
    <div class="sidimage"> </div>
    <div class="description">

    текст или картинка в таблице


    </div>
  </div>

  <!--[if IE]></div><![endif]-->
</div>

style_cs.css

Код:
}
#sidebar {width: 173px; padding: 5px; background-color:#f0f0f0;top:300px; left: 0px;
 position: absolute; float: left; text-align: justify}
#sidebar {position: fixed}
#entries {width: 50px; margin-left:50px; text-align: justify; background-color:#f0f0f0}

a:link, a:visited, a:active{color:#8A8A8A; text-decoration: none}
img a{border:0px;}
.image{border: 0px; text-align:center}
.image a{border: 0px}
p{margin-top:2px}
blockquote{margin:0 0 0 15px; border-left: 3px solid #8A8A8A;
padding:0 0 0 5px; }
.big{font-size: 80px; color:#8A8A8A; line-height: 80px}

.about{background-color:#78c2ce; text-align:justify; line-height: 100% }
.btitle {font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; margin: 0px; background-color:#f0f0f0; font-size: 35px; line-height:35px; text-align: left; z-index:1}
.btitle a{font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; color: #9B9B9B; text-decoration: none;}
.btitle img{background-color:#78c2ce; padding-left: 80px;
padding-right: 80px; padding-top: 15px ; padding-bottom: 15px;
margin-bottom: 3px; opacity: .70;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -khtml-opacity: .70;
    -moz-opacity: .70;}
.nav {margin: 0 0 2px 0; text-align:left; line-height: 20px;
text-transform: lowercase ;}
.nav a {text-decoration: none; background-color:#75555e;
padding: 2px 9px 2px 8px; color:#7552ce; text-transform: lowercase}
.nlinks {display: block; text-align:center; line-height: 17px;

#sidebar {width: 173px; padding: 5px; background-color:#f0f0f0;top:300px; left: 0px;

width: 173px - ширина таблицы
padding: 5px - толщина рамки
background-color:#f0f0f0 - цвет рабки
top:300px; - расположение таблицы. выше - ниже.

.about{background-color:#78c2ce; text-align:justify; line-height: 100% }

{background-color:#78c2ce - цвет внутренней таблицы для текста и меню.

.nav a {text-decoration: none; background-color:#78c2ce;

background-color:#78c2ce; - цвет меню

.btitle {font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; margin: 0px; background-color:#f0f0f0; font-size: 35px; line-height:35px; text-align: left; z-index:1}

background-color:#f0f0f0 - цвет верхней таблички, где находится название вашего форума.
font-size: 35px - размер текста, название вашего форума.

0

52

1) а второй код во вторую таблицу цсс в самый низ же да?
2) а как ее сместить левее (ну или правее..)?
3) чтоб сделать вторую таблицу с другой стороны нужно просто продублировать то же самое, но просто сместить в другую сторону?

0

53

cotton' написал(а):

1) а второй код во вторую таблицу цсс в самый низ же да?

Да, туда

cotton' написал(а):

2) а как ее сместить левее (ну или правее..)?

ультраморин написал(а):

width: 173px - ширина таблицы

cotton' написал(а):

3) чтоб сделать вторую таблицу с другой стороны нужно просто продублировать то же самое, но просто сместить в другую сторону?

Да, дублировать, но нужно изменить расположение таблицы.

ультраморин написал(а):

position: absolute; float: left; text-align: justify}

Здесь стоит расположение с лева, а поменять можно на право.

0

54

ультраморин написал(а):

width: 173px - ширина таблицы

не меняется местоположение..хоть я там 0 ставлю, хоть 1000..без разницы

0

55

cotton' написал(а):

не меняется местоположение..хоть я там 0 ставлю, хоть 1000..без разницы

Я этой таблице вообще не пользовалась, но больше не вижу где это изменить. Сейчас другую найду.

0

56

Ее в объявление вставлять и больше не куда. А ту таблицу удали.

Код:
<table background="http://s1.ipicture.ru/uploads/20110925/lXH7P26S.png" width="200px";  style="text-align: justify; position: absolute; top:0px; margin-left: 795px;">
<tr><td width="200px">
<center>
<img src="http://s1.ipicture.ru/uploads/20110925/7vq78c5X.gif" style="float: left; border: medium none; padding: 10px;" title="" align="center"  border="0" width="160" height="85"></a>
<br><br>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
<a href="ссылка на профиль"><img src="http://s2.ipicture.ru/uploads/20110925/50Vz2knp.png" style="float: center; width="170" height="170"></a>
<table><tr><td>
<a href="ссылка /" class="tvm" target="">index</a></td>
<td>
<a href="ссылка" class="tvm2" target="">index</a></td>
<td>
<a href="ссылка" class="tvm3" target="">index</a></td>
</tr>


<tr><td>
<a href="ссылка" class="tvm3" target="">index</a></td>
<td>
<a href="ссылка" class="tvm" target="">index</a></td>
<td>
<a href="ссылка" class="tvm2" target="">index</a></td>
</tr>
<tr><td>
<a href="ссылка" class="tvm2" target="">index</a></td>
<td>
<a href="ссылка" class="tvm3" target="">index</a></td>
<td>
<a href="ссылка" class="tvm" target="">index</a></td>
</tr>
</table>


тест текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
<center><b>АДМИНИСТРАТОРЫ</b>
<br>
<a href="ссылка на профиль" target="_blank"><img src="http://s2.ipicture.ru/uploads/20110925/MxH6UU4q.png" border="0"></a>
<a href="ссылка на профиль" target="_blank"><img src="http://s2.ipicture.ru/uploads/20110925/sJnyeoS1.png" border="0"></a>
<a href="ссылка на профиль" target="_blank"><img src="http://s2.ipicture.ru/uploads/20110925/1N4q4TH2.png" border="0"></a> <br>
<b>МОДЕРАТОРЫ</b><br>
<a href="ссылка на профиль" target="_blank"><img src="http://s2.ipicture.ru/uploads/20110925/IwHDbnEL.png" border="0"></a><a href="ссылка на профиль" target="_blank"><img src="http://s2.ipicture.ru/uploads/20110925/snt17Gsn.png" border="0"></a> </center>
<center><b>Партнеры </b></center>
<!--sababa.webhost.ru--><center><marquee  scrollAmount=3 onmouseover=this.scrollAmount=0 onmouseout=this.scrollAmount=3 width=200 height=100>
Баннеры
</marquee>


</td></tr></table>

width="200px - ширина таблицы
margin-left: 795px - расположение таблицы

0

57

так, ну пока все понятно вроде))
что бы еще такое интересное спросить..?!) хз

0

58

cotton' написал(а):

что бы еще такое интересное спросить..?!) хз

Спрашивай. Хорошенько подумай. А потом я дам тебе еще одно задание.

0

59

ультраморин написал(а):

А потом я дам тебе еще одно задание.

какое? давай может сразу, а то не приходит пока на ум ничего..

0

60

cotton' написал(а):

какое? давай может сразу, а то не приходит пока на ум ничего..

Хорошо. Я хотела дать тебе задание сделать полноценный дизайн. Тематика: реальная жизнь.

0


Вы здесь » FREAKSHOW » Обучение дизайну » узнаем что такое дизайн с cotton'