swetlana
-
Posts
1,629 -
Joined
-
Last visited
-
Days Won
8
Content Type
Profiles
Forums
Calendar
Store
Everything posted by swetlana
-
не только для таблиц, а для элементов с табличным отображением. То есть, если сделать display: table-cell, то и vertical-align будет работать. B вашем случае table-cell вполне применим. Его можно использовать и для выстраивания элементов списка в строку вместо float: left. А насчёт того, как соединить линиями… Если позволите, делать за вас не буду, слегка лениво. Но направление мысли предложу: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Дерево</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #tree ul { text-align: center; } #tree h2, #tree h3 { font-size: 100%; font-weight: normal; width: 100px; margin: auto; } #tree li a { display: table-cell; vertical-align: middle; color: black; width: 100px; height: 50px; border: solid 1px; position: relative; border-radius: 10px; margin: auto; } #tree li { text-align: center; border: solid 1px #eee; list-style: none; float: left; padding: 0px; } #tree h3:after { content: ''; display: block; height: 10px; margin-left: 52px; border-left: 1px solid #000; } #tree h3 + ul li:before { content: ''; display: block; width: 104px; height: 10px; border-top: 1px solid #000; border-right: 1px solid #000; margin-left: -50px; } #tree h3 + ul li:first-child:before { border-top: none; } #tree a { margin: auto; } </style> </head> <body> <ul id='tree'> <li><h2><a href=''>Сайт</a></h2> <ul> <li> <h3><a href=''>Навигация</a></h3> <ul> <li><a href='/index.php'>главная</a></li> <li><a href='/other.php?act=map'>карта сайта</a></li> </ul> </li> <li> <h3><a href=''>Общение</a></h3> <ul> <li><a href='/wall.php'>гостевая</a></li> <li><a href='/blog.php'>блог</a></li> <li><a href='/news.php'>новости</a></li> </ul> </li> </ul> </li> </ul></body> </html>
-
Первый блин комом — это нормально, так бывает. Главное — на этом не остановиться, учесть ошибки, рассмотреть критику, сделать вывод, и сделать второй блин, который на ком будет похож чуть меньше. А там, глядишь, и хорошие результаты пойдут через некоторое время. А пока чуть об ошибках. Расположение элементов. Традиционно принято располагать логотип в левом верхнем углу. Это не обязательно, но чуть-чуть облегчит жизнь посетителю сайта. Если логотип будет ссылкой на главную — тоже. Ибо так тоже традиционно принято. Две дополнительные ссылки «главная» — это чересчур. Вообще, хорошо, когда ссылка на главную только в логотипе и в навигационной строке, появляющейся на внутренних страницах. Но это в идеальном случае. На практике встречаются хомячки, которым не приходит в голову ткнуть на логотип. Жаль, но такова селяви. Для них можно одну явную ссылку оставить. Но зачем над менюхой ещё одна надпись «главная», которая ссылкой не является — это уже непонятно. Также в верхней части принято располагать форму поиска и форму авторизации (если таковая требуется). Форма поиска, хоть и сверху, хорошо запрятана. Правильнее же, когда глаз на неё падает естественным образом, и искать её не приходится. С авторизацией просто беда. Она размазана по всей странице. В левом верхнем углу «здравствуйте, гость». Ссылка на авторизацию вроде бы и рядом, но выделена цветом таким образом, что подсознательно воспринимается как нечто совсем отдельное, не имеющее никакого отношения к той надписи. Да и правильнее размещать не ссылку, а сразу форму, чтобы посетителю делать меньше движений. Ах да, форма есть. Но она где? В неожиданном и неудобном месте. Непорядок. Три колонки — в этом действительно есть необходимость? В них же нет информационного наполнения. А если (допустим) действительно необходимы, то зачем их ужимать в 900px? Да, аргумент про нетбуки тут уже звучал. Приведу другой аргумент. Дома или на рабочем месте население в основном пользует не нетбуки, а самые обычные стационарные компьютеры, для которых нынче совершенно за норму диагональ 20"—26". Вот как это выглядит на таких мониторах: более половины ширины пропадает зря, а в середине налеплено так, что читать неудобно. Зачем? Подсказка: есть такое понятие, как резиновая вёрстка. А чтоб не переборщить (опять забочусь о пользователях широких мониторов), есть такое свойство как max-width. О ссылках. <div id="logo" title="На главную" onclick="location.href='index.php';"></div> — зачем? Почему не <a class="logo" href="/">Code-live.ru</a> ? Ну и о надписях вокруг лого: они выглядят как просто украшение, но никак не как ссылки. При наведении на них мыша в статусной строке не появляется адрес перехода (что логично. Технически это не ссылки). Зачем? Почему их не сделать ссылками? И почему их не оформить как ссылки? Любая неожиданность в поведении сайта для посетителя скорее негативна. Форум. Отдельная регистрация. Нет возврата на сам сайт. Нехорошо. Открывая форум, владелец ресурса готов его оживить, обеспечить посещаемость и активное общение на нём? Если нет, то лучше не открывать форум.
-
Каким способом выравнять картинки относительно абзаца слева?
swetlana replied to mooncar's question in HTML Coding
воистину упс. Хотя принцип от этого не меняется. Можно использовать другой элемент. Например <a>, если картинка должна быть ссылкой или на неё планируется какой-нибудь лайтбокс повесить. Или даже безликий <span>. Только им придётся явно дописать display: block. Но это ж не проблема, не так ли? -
В смысле — как этот инструмент в фотошопе называется? Карандаш. А потом полученные картинки фоном к элементам списка. Но это если надо просто, быстро и максимально кроссбраузерно. А так можно поизвращаться ещё с рамками, в частности для псевдоэлементов ::before или ::after с абсолютным позиционированием. Если есть время поиграться и плевать на IE 7-, то даже интересно каким-нибудь подобным способом решить.
-
Господа спорщики, а вам не кажется, что все эти буквы ни о чём? Завязываясь на технологии, ставя их во главу угла, выбираем безнадёжно тупиковый путь. Что самое важное на сайте? Неужто всё то, что обозначается такими страшными словами, которыми в самый раз пугать особо провинившихся юзеров? А мне-то казалось, что контент — это и есть главное на сайте, а все эти технологии нужны лишь для того, чтобы этот контент подать. Не сработала одна технология — должна сработать другая. А главная задача — посетитель сайта должен понять, что хотел до него донести автор. Если автор сайта хотел донести «я знаю, что такое WebGL» — ну и ладно. Если он вместе с этим также донёс до посетителя и незнание того, что нет ни одной стабильной версии браузеров, поддерживающих WebGL — ну что ж… сам себя наказал. А вот если мысль автора оказывается доставлена до посетителя сайта независимо от того, что умеет его браузер — вот это признак хорошего сайта.
-
Здравая мысль. Лень — замечательное качество для технического специалиста. Но только когда лень писать лишний код. Когда лень думать — такому человеку в технической профессии делать нечего. А то сегодня опять же у одного из новичков в коде вижу что-то вроде: <p class="something"><b><font size=2><a href="/address/" class="something_else" style="font-size: 120%;font-weight: bold">Link</em></p></a></font></div> И в довершение картины доктайп. Хороший такой доктайп. XHTML 1.0 Strict. Зачем? Почему?
-
ну так то актуально для тех, у кого в силу профессиональной необходимости высокие требования к типографике, к богатому набору символов. Для рядовых же пользователей хватает и штатных возможностей клавиатуры. По крайней мере всякие знаки препинания, «кавычки», символы ©®, основные математические — это всё на клавиатуре уже есть. В большинстве случаев хватает. А вот если б всему тому же можно было линукс обучить — вот это была бы сказка. В своё время искала решение, но как-то не получилось ничего найти.
-
а при чём тут апач, когда запрещает nginx? может я, конечно, чего не понимаю…
-
лишнюю тень приходилось перекрывать. А несколько теней — это может подойти, но далеко не во всех случаях. Всё равно же каждая из теней остаётся подчинена всё тем же правилам.
-
а сам сайт можно вот здесь: http://forum.htmlbook.ru/index.php?showforum=5 выложить на всеобщую критику. Как правило оценка даётся грамотная, множество интересных и ценных мнений. Попробуйте. Я тоже выскажусь.
-
по крайней мере мне не удалось. Возникала ровно такая же задача, но решилась она непотребным хаком. Вообще само свойство подразумевает, что форма тени повторяет форму самого элемента, и может иметь размытие или смещение. Смещение — в одну из сторон. Размытие — во все сразу. лево и право одновременно не попадают ни под одну из этих схем.
-
а чего печалиться-то? Я уже давно твержу: graceful degradation. Это адекватное и разумное решение подобного рода проблем.
-
кстати да, новость бодрит
-
а зачем? чем проще, тем меньше ошибок.
-
фи как некрасиво. С таким подходом нескоро получится научиться как надо. Не лошара (что безнадёжно ибо лох — это судьба), а временно неопытный. Это поправимо. И да, предлагаю не игнорить предложение удовлетворить валидатора. Если писать валидный код, то такого рода ошибки, как сейчас была, за пару секунд отлавливаются валидатором. Всё за то, чтобы жить было проще!
-
Вот что интересно в свете последних веяний: если whatwg открещивается от w3c и отделяет свой html от w3c'шного html5, который будет принят в нереальном году, то как теперь расово-верно поступать с валидацией? Таки самизнаетекто прав оказался? Лучший валидатор — это браузер? Ведь w3c явно не сумеет сделать валидатор для «живого» стандарта html.
-
и это только мне так кажется, что форма логина не содержит закрывающего тэга </form> или так и есть на самом деле? Прошу прощения, просто код слишком сложный, чтобы можно было понять при беглом взгляде. У формы комментов как раз есть <p class="comment_title">Комментарии:</p><p>К данной статье еще не было добавлено ни одного комментария.</p><p class="comment_title">Оставить комментарий</p> <form name="comments" action="comment.php" method="post"> <p> <label><strong><font size="2">Ваше имя:</font></strong> <input type="text" name="username" class="comment_input" size="20"></input> </label> </p> <p> <label><strong><font size="2">Ваш E-Mail:</font></strong> <input type="text" name="email" class="comment_input" size="20"></input> </label> </p> <input type="hidden" name="post_id" value="16"></input> <p> <font size="2">Введите текст комментария:</font> <p> <textarea name="text" rows="5" cols="40"></textarea> </p> </p> <p> <input type="submit" name="sub" class="submit" value="Отправить"></input> </p> </form> </div> просто, как я уже писала выше, код нереально сложный, легко ошибиться.
-
что-то мне подсказывает, что после устранения вот этой ошибки проблема уйдёт сама собой
-
Каким способом выравнять картинки относительно абзаца слева?
swetlana replied to mooncar's question in HTML Coding
К.О. подсказывает, что дивная именно потому и трудновата, что табличная в голове застряла Хотя на мой взгляд дивная — ненамного меньшее зло, чем табличная. Обратите внимание на возможность семантической разметки. То есть, размечать документ исключительно по смыслу, по значению элементов. И оформлять уже то, что получилось в результате семантической разметки. В большинстве случаев возможностей css хватает. а все эти дивные и табличные варианты, когда разметка строится исходя из оформления — это лишние сложности. -
а многие помнят, как выходил IE7? Согласно слухам, в нём должна была быть грамотная полная поддержка css2.1
-
а чего бояться? А сейчас разве только ослика особенности учитываем? Если заниматься вёрсткой постоянно, то так или иначе всё равно в курсе развития браузеров и языков разметки/стилей. Тут всё нормально
-
А оно будет прорастать. И если честно, даже не знаю, правомерно ли называть мошенников абсолютным злом. Эдак можно в абсолютное зло записать и всех хищников в дикой природе.
-
Int, вы придумываете сложности на ровном месте. Или придуриваетесь. Что неприятно. Я о чём: любое действие должно быть обосновано. Любое решение должно иметь разумное объяснение. Та же поддержка IE6 (хотя тема значительно шире, просто это яркий пример): если есть зачем его поддерживать, то да, надо. И тогда поднимаем весь свой багаж ие-хаков. Если же незачем, то больше смысла оставить его в стороне. В большинстве случаев незачем. В случае с крупными проектами с большой посещаемостью, где доход от рекламы, и пользователи IE6, у которых нет AdBlock'а — это интересный контингент для владельцев сайта. Интерес тут вполне понятный и оправданный. Этот интерес можно выразить в рублях. Заказчик считает свой интерес в рублях, видит, что он значительно превышает мой интерес, за который я возьмусь поддерживать старые браузеры, и понимает, что да, всё же надо. Но очень часто бедолаги ноют: «ой как сложно поддерживать IE6! ой какая опера плохая, не рисует градиенты! ой как сложно формы оформлять!» — ну и ещё много подобного. А смотришь на их проект — там визитка, которую посещать будут в лучшем случае раз в месяц, и велика вероятность, что с IE6 ни разу в жизни никто не зайдёт. Смотришь, в чём основные сложности — и не понимаешь зачем они. Вот доставляют верстальщику неудобства, к примеру, скруглённые углы. А зачем они там? Неужто без них посетитель сайта не поймёт, что за услуги здесь предлагаются? А если не поймёт, то даю слово на отсечение: не в уголках дело. А почему там именно такие уголки? Да потому что заказчик уверен, что услуги дизайнера должны стоить не более 10к.р., ну а за такие деньги с ним согласился работать только халтурщик, который не знает другого способа обозначить своё присутствие. Это как гопник, который пишет на стене «здесь был Вася!». Так этот халтурщик пишет «здесь был дизайнер!» рисует скруглённые углы и градиенты. Хотите себе меньше проблем — почаще задавайте вопросы «зачем» и «почему», и находите на них ответы. Картина станет проясняться. Жить станет проще. Жизненные силы перестанут уходить на разбивание головы об кирпичную стену.
-
ну а что делать? не мы браузеры разрабатываем. Нам остаётся только учитывать их особенности.
-
Каким способом выравнять картинки относительно абзаца слева?
swetlana replied to mooncar's question in HTML Coding
на самом деле так себе решение. Контейнер — да, в данном случае меньшее из зол. Но в этом решении есть и подводные камни. Может посмотрите в сторону чуть более простого решения? <p> <figure><img src="woodhouse.png" /></figure> тут много или не очень текста про деревянные дома </p> и в css: p { padding-left: 180px; /* от самого левого края до левого края непосредственно абзаца */ overflow: hidden; /* если текста в абзаце мало, чтобы не выстраивались абзацы лесенкой */ } p figure { width: 150px; /* сколько не жалко под колонку с картинками слева */ text-align: right; /* чтобы внутри выделенной под картинки колонки сами картинки выравнивались по правому краю */ }