Версия для печати темы

Нажмите сюда для просмотра этой темы в обычном формате

Форумы журнала SOUL _ Graphics _ Кто-нибудь знает HTML/CSS?

Автор: ИлЛюзия 4.6.2008, 4:49

Кто-нибудь знает HTML/CSS?

Автор: АМЕТИСТ 4.6.2008, 4:55

Я присоединяюсь к этому вопросу!
Но с большей конкретикой: уже 2 неделю бьюсь над древовидным раскрывающимся списком. Подскажите, пожалуйста, если кто знает.

Автор: ИлЛюзия 4.6.2008, 5:28

АМЕТИСТ, а можно поподробней, что ты имеешь в виду? CSS или JavaScript? И можно пример меню? Давай биться вместе!

Автор: АМЕТИСТ 4.6.2008, 5:53

Цитата(ИлЛюзия @ 4.6.2008, 12:28) *
АМЕТИСТ, а можно поподробней, что ты имеешь в виду? CSS или JavaScript? И можно пример меню? Давай биться вместе!

Иллюзия, если бы я знала точно... я в этом дуб Не CSS, однако, или JavaScript или HTMLкод, а может PHP...
Попробую подробнее:
нужен вот такой список:

+ категория 1
субкатегория 1.1.
субкатегория 1.2.
+ категрия 2
+ субкатегория 2.1.
субсубкатегория 2.1.1
субсубкатегория 2.1.2.
+ субкатегория 2.2.
субсубкатегория 2.2.1
субсубкатегория 2.2.2.


В обычно виде видны только категории. При нажатии на плюсик раскрываются субкатегории данной категории, а плюсик превращется в минус. При нажатии на минус субкатегории прячутся. Это я изобразила раскрытый трехуровнеывый список (категория, субкатекория, субсубкатегория). Трехуровневый - это в идеале. На второй неделе я поняла, что мне и двухуровнего пока заглаза. А еще в идеале не минус-плюс, а картинка закрытой и открытой папки.
Воть...

Автор: АМЕТИСТ 4.6.2008, 5:55

Блин, список весь сдвинулся влево. Он должен идти ступеньками с увеличением отступа вправо.

Автор: ИлЛюзия 4.6.2008, 6:01

АМЕТИСТ, а что это должно быть? меню на сайте?

Автор: АМЕТИСТ 4.6.2008, 6:30

Нет, не меню. Типа него. Это должен быть список рецептов с распределениме по категориям. Категории видны, а список рецептов должен развораичваться при нажатии категорию.

Автор: ИлЛюзия 4.6.2008, 6:32

АМЕТИСТ, а размещаться то где?? Если это ворд - это одно, если сайт - совсем другое.

Автор: АМЕТИСТ 4.6.2008, 7:57

На сайте

Автор: ИлЛюзия 4.6.2008, 16:43

АМЕТИСТ, это JavaScript. По крайней мере, думаю одно из возможных решений - точно.

Код
function toggle(id){
ul = "ul_" + id;
img = "img_" + id;
ulElement = document.getElementById(ul);
imgElement = document.getElementById(img);
if (ulElement){
if (ulElement.className == 'closed'){
ulElement.className = "open";
imgElement.src = "opened.gif";
}else{
ulElement.className = "closed";
imgElement.src = "closed.gif";}}}

Автор: ИлЛюзия 4.6.2008, 16:44

CSS

Код
.open {display: block;}
.closed {display: none;}
li {list-style-type: none;
padding-top: .2em;
padding-bottom: .2em;
font-size: 18px;}
li img {vertical-align: middle;}

Автор: ИлЛюзия 4.6.2008, 16:46


HTML

Код
<ul class="open">
<li id="item1"><a onclick="toggle('item1');"><img src="closed.gif" alt="" id="img_item1" border="0"></a>Выпечка
<ul id="ul_item1" class="closed">
<li id="item1_1">Сладкая</li>
<li id="item1_2">Несладкая</li></ul></li>
<li id="item2"><a onclick="toggle('item2');"><img src="closed.gif" alt="" id="img_item2" border="0"></a>Рецепты
<ul id="ul_item2" class="closed">
<li id="item2_1"><a onclick="toggle('item2_1');"><img src="closed.gif" alt="" id="img_item2_1" border="0"></a>Салаты
<ul id="ul_item2_1" class="closed">
<li id="item2_1_2_1">Мясные</li>
<li id="item2_1_2_2">Постные</li>
</ul>                    
</li>
<li id="item3_1"><a onclick="toggle('item3_1');"><img src="closed.gif" alt="" id="img_item3_1" border="0"></a>Коктейли
<ul id="ul_item3_1" class="closed">
<li id="item3_1_2_1">Алкогольные</li>
<li id="item3_1_2_2">Молочные</li>
</ul>            
</ul>
</li>
<li id="item3"><a onclick="toggle('item3');"><img src="closed.gif" alt="" id="img_item3" border="0"></a>Десерты
<ul id="ul_item3" class="closed">
<li id="item3_1">Торты</li>
<li id="item3_2">Пироги</li>
<li id="item3_3">Пудинги</li>
<li id="item3_4">Мороженое</li>
<li id="item3_5">Йогурты</li>
</ul>
</li>
</ul>

Автор: ИлЛюзия 4.6.2008, 16:47

АМЕТИСТ, ну, и, если я конечно тебя правильно поняла - должно получиться вот это:

http://www.thesoul.ru/spisok.shtml

Автор: АМЕТИСТ 5.6.2008, 2:32

Да! ИлЛюзия! Оно! Оно, дерево родимое! Я сейчас просто тупо сохраняю эту страницу в комп, потом "показать HTML код страницы", копирю его и уделываю так, как мне надо? Правильно?

Автор: АМЕТИСТ 5.6.2008, 2:33

Ой, а верху то я не посмотрела, что ты мне коды уже написала...

Автор: ИлЛюзия 5.6.2008, 2:36

АМЕТИСТ, ну, да)) жать надо на папочки)

Автор: АМЕТИСТ 5.6.2008, 2:48

ИлЛюзия спасибо большое!!! Просто огромное, а то я уже на грани истерики была!
Про то, что жать надо на папочки - это я понимаю. Пошла я с ним работать дальше, если что напишу, спрошу?

Автор: Ждана 5.6.2008, 3:23

Цитата(ИлЛюзия @ 4.6.2008, 5:49) *
Кто-нибудь знает HTML/CSS?

Более менее разбираюсь в html. Практически самоучка, потому что то, что нам преподавали в институте - ничтожно мало. unknw.gif

Автор: ИлЛюзия 5.6.2008, 18:05

Цитата(АМЕТИСТ @ 5.6.2008, 3:48) *
ИлЛюзия спасибо большое!!! Просто огромное, а то я уже на грани истерики была!
Про то, что жать надо на папочки - это я понимаю. Пошла я с ним работать дальше, если что напишу, спрошу?

конечно, спрашивай! и обязательно покажи свои старания!))

Цитата(Ждана @ 5.6.2008, 4:23) *
Более менее разбираюсь в html. Практически самоучка, потому что то, что нам преподавали в институте - ничтожно мало. unknw.gif

я тоже самоучка-недоучка - все что касается верстки у меня - ловкость рук и никакого мошенничества! volsh.gif

Автор: Ждана 5.6.2008, 20:58

Не сочтите за рекламу просто хочу показать свои работы. Можно удалить потом.

http://ку-ку (действующий сайт)
http://ку-ку (не действующий магазин)

Автор: ИлЛюзия 5.6.2008, 21:37

Ждана, круто!!

а первый на чем работает?

Автор: Ждана 5.6.2008, 22:16

Цитата(ИлЛюзия @ 5.6.2008, 22:37) *
круто!!

Ожидала чего угодно, кроме этого. Спасибо.
Честно говоря, у меня самокритика в отношении всего, что касается дизайна срабатывает по-чёрному. Мне кажется, что я ничего не умею.

Цитата(ИлЛюзия @ 5.6.2008, 22:37) *
а первый на чем работает?

Не поняла вопрос... как понять на чём? popcorm1.gif

Автор: ИлЛюзия 5.6.2008, 23:34

Цитата(Ждана @ 5.6.2008, 23:16) *
Честно говоря, у меня самокритика в отношении всего, что касается дизайна срабатывает по-чёрному. Мне кажется, что я ничего не умею.

я тоже очень самокритичный человек. во всем.

Цитата
Не поняла вопрос... как понять на чём? popcorm1.gif

какая-нибудь CMS есть? Или все файлики вручную "заливаешь"?

Автор: Ждана 6.6.2008, 0:22

Цитата(ИлЛюзия @ 6.6.2008, 0:34) *
я тоже очень самокритичный человек. во всем
какая-нибудь CMS есть? Или все файлики вручную "заливаешь"?

Самокритика - хороший двигатель вперёд. Есть такая цитатка (автор где-то в тетрадке записан): "Если вы удовлетворены своими успехами, настоящих успехов вам никогда не добиться".

Я даже не знаю, что такое CMS... umnik2.gif Просто открываю Photoshop, Illustrator и Macromedia Dreamweaver и начинаю работать с чистого листа.

Автор: АМЕТИСТ 6.6.2008, 2:36

Цитата
конечно, спрашивай! и обязательно покажи свои старания!))

ИлЛюзия, скорее не старания, а страдания)))

Ждана, действительно круто! Я как самурая увидела... ну ндравится мне все такое восточное!

Автор: ИлЛюзия 6.6.2008, 3:20

Ждана, нет CMS - Content Management System - система управления контентом, т.е. программирование, "движок" сайта.

Автор: АМЕТИСТ 6.6.2008, 10:01

ИлЛюзия... не кидай в меня тапками, помидорами и прочими предметами, плиз flagtruce.gif Я 100% все делаю не так как надо и у меня ничего не получается.
Когда я вставляю HTMLкод на страницу сайта через админпанель, список всегда раскрытый, не сворачивается и не разворачивается, через FTP закидывю рисунки. Только поставить я могу только ракрытый конвертик, потому так куда ставить закрытый не имею ни малейшего понятия.
Расскажи, плиз, процесс через админпанель newhere.gif

Автор: ИлЛюзия 6.6.2008, 15:51

АМЕТИСТ, админ панели бывают разные.
Тем более, если у сайта есть админ панель, то.... хм.... сомневаюсь, что он даст вытворять подобные вещи... ибо джава скрипт вставляется в тегах до </head> да, и CSS тоже.

Вот полный код странички - от и до:

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Многоуровневый список меню. CSS, JavaScript, HTML. Журнал SOUL.</title>
<meta name="description" content="Журнал SOUL, CSS, JavaScript, HTML, форум, графика">
<meta name="keywords" content="журнал soul, css, javascript, html, форум, графика, рецепты, выпечка, десерты">
<meta name="distribution" content="Global">
<meta name="robots" content="index,all">
<style type="text/css">.open {display: block;}
.closed {display: none;}
li {list-style-type: none;
padding-top: .2em;
padding-bottom: .2em;
font-size: 18px;}
li img {vertical-align: middle;}
</style>
<script type="text/javascript">
function toggle(id){
ul = "ul_" + id;
img = "img_" + id;
ulElement = document.getElementById(ul);
imgElement = document.getElementById(img);
if (ulElement){
if (ulElement.className == 'closed'){
ulElement.className = "open";
imgElement.src = "opened.gif";
}else{
ulElement.className = "closed";
imgElement.src = "closed.gif";}}}
</script>
</head>
<body>
<div>        
<ul class="open">
<li id="item1"><a onclick="toggle('item1');"><img src="closed.gif" alt="" id="img_item1" border="0"></a>Выпечка
<ul id="ul_item1" class="closed">
<li id="item1_1">Сладкая</li>
<li id="item1_2">Несладкая</li></ul></li>
<li id="item2"><a onclick="toggle('item2');"><img src="closed.gif" alt="" id="img_item2" border="0"></a>Рецепты
<ul id="ul_item2" class="closed">
<li id="item2_1"><a onclick="toggle('item2_1');"><img src="closed.gif" alt="" id="img_item2_1" border="0"></a>Салаты
<ul id="ul_item2_1" class="closed">
<li id="item2_1_2_1">Мясные</li>
<li id="item2_1_2_2">Постные</li>
</ul>                    
</li>
<li id="item3_1"><a onclick="toggle('item3_1');"><img src="closed.gif" alt="" id="img_item3_1" border="0"></a>Коктейли
<ul id="ul_item3_1" class="closed">
<li id="item3_1_2_1">Алкогольные</li>
<li id="item3_1_2_2">Молочные</li>
</ul>            
</ul>
</li>
<li id="item3"><a onclick="toggle('item3');"><img src="closed.gif" alt="" id="img_item3" border="0"></a>Десерты
<ul id="ul_item3" class="closed">
<li id="item3_1">Торты</li>
<li id="item3_2">Пироги</li>
<li id="item3_3">Пудинги</li>
<li id="item3_4">Мороженое</li>
<li id="item3_5">Йогурты</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Автор: АМЕТИСТ 6.6.2008, 16:13

ИлЛюзия! СПАСИБО!!! ОГРОМНОЕ!!! ГОРОМАДНОЕ!!!
http://smiles.33b.ru/smile.113390.html

фсё, осталось только внешний вид сделать и сам список как таковой. Еще раз спасибо! Ты так мне помогла!

Автор: Ждана 6.6.2008, 20:31

Цитата(ИлЛюзия @ 6.6.2008, 4:20) *
Ждана, нет CMS - Content Management System - система управления контентом, т.е. программирование, "движок" сайта.

Почитала инфу что это такое и с чем едят. Вроде поняла, теперь могу ответить. Всё размещала вручную. Сейчас я тем сайтом не занимаюсь, а делала его во время беременности, заказчик даже до самого конца не подозревал о моём положении, даже когда на 7-8 месяце пару раз была в офисе. А когда он позвонил, чтобы расплатиться, его ошарашили, сказав, что я в роддоме лежу. smile.gif Скорее всего он планировал и дальнейшее сотрудничество, но постеснялся.

Автор: SkyMD 16.6.2009, 16:41

то ->Ждана:

Делал сайты раньше - давно и неправда!
Может в качестве рекламы вам подойдет Могучий Си++ ?
если да то я к ваши услугам flagtruce.gif

могу все то что вы хотите прорекламировать, загнать в единый ехе - файл в виде отдельного продукта, с сохранением копирайтов и прочего!
результат потом выложите ввиде сцылки для скачивания!

ps: я не волшебник я только учусь )))

Автор: Garun 19.6.2009, 21:14

Реклама в ехе-файле, это жесть... я б не стал скачивать. Реклама должна быть открытой и доступной... и не навязчивой, вот. smile.gif

Автор: Лада 18.1.2011, 8:07

Интересно, а есть еще начинающие веб-дизайнеры самоучки среди нас?
Ждана ссылки не работают, а так хотелось посмотреть на твои работы.

Автор: ИлЛюзия 18.1.2011, 23:44

Лада, а Вы вступили в наши ряды?))

Автор: Ждана 19.1.2011, 0:31

Цитата(Лада @ 18.1.2011, 8:07) *
Ждана ссылки не работают, а так хотелось посмотреть на твои работы.

Надо же какую старую тему раскопали... whistle3.gif Мои разные работы можно посмотреть http://freelance.ru/users/Jdana/. Только давно не обновляла портфолио.

Автор: Лада 19.1.2011, 6:44

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

Автор: Ждана 22.1.2011, 23:41

Цитата(Лада @ 19.1.2011, 6:44) *
Ждана, а почему?

Просто пока не ищу там заказов.

Недавно разрабатывала дизайн календариков и скидочного купона для интернет-магазина. Периодически что-нибудь делаю для витрин одного бутика модной одежды - какие-нибудь узоры, рисунки и т.д.

Автор: Лада 23.1.2011, 14:25

ИлЛюзия,

Цитата
Лада, а Вы вступили в наши ряды?))

Это слишком громко сказано, - стою на пороге, потихоньку CSS да javaScript читаю/верстаю.
Цитата
Недавно разрабатывала дизайн календариков и скидочного купона для интернет-магазина. Периодически что-нибудь делаю для витрин одного бутика модной одежды - какие-нибудь узоры, рисунки и т.д.

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

Автор: Ждана 23.1.2011, 15:29

Лада, заработать реально, но конкуренция нереально большая, к сожалению...

Форум Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)