
vadimon
Expert-
Posts
179 -
Joined
-
Last visited
-
Days Won
2
Content Type
Profiles
Forums
Calendar
Store
Everything posted by vadimon
-
Да, Corel поддерживает слои, но работа с ними намного отличается от работы со слоями в Photoshop, причем в худшую сторону Думаю, только в этом выход, послойно все экспортировать, иначе никак Думаю, только в этом и выход, иначе никак
-
Xочу, чтобы слои сохранились. Некоторые картинки не выцепить, если не отключить слои.
-
Есть макет, нарисованный в Corel Draw, нужно сверстать из него страницу. Вопрос: как? С Photoshop все понятно, там слои, там порезать можно, там размеры. А как быть с Corel?
-
Может, оно того и не стоит. Просто по-другому как-нибудь попробую сверстать, глядишь и получится, и как назло все окажется просто.
-
не, такие варианты не катят...
-
Например, слово "Компьютеры серверы" просто нужно выравнять по вертикали в <span class="vert"></span>. Но span строчный элемент и в нем выравнивать нельзя. Тогда <span class="vert"></span> нужно будет выравнять относительно <span class="img"></span>. Как то так получается... Попробовал в <span class="vert"></span> добавить display: table-cell; vertical-align:middle;. Все работает отлично только в опере, в мозилле выравнивается, но исчезает подчеркивание ссылок, в шестом ослике вообще не работает...
-
Я тогда выложу код, может я что тут перемудрил? HTML <div id="leftsidebar"> <ul> <li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span><span class="vert">Компьютеры серверы</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/monitor.png" width="61" height="55" alt="Мониторы" /></span><span class="vert">Мониторы, телевизоры, видеотехника</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/notebook.png" width="61" height="54" alt="Ноутбуки" /></span><span class="vert">Ноутбуки и портативная электроника</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/multimedia.png" width="61" height="55" alt="Мультимедиа" /></span><span class="vert">Акустика и аудиотехника</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/office.png" width="61" height="55" alt="Оргтехника" /></span><span class="vert">Перифирия и аксессуары</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/mouse.png" width="61" height="55" alt="Манипуляторы" /></span><span class="vert">Манипуляторы</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/aksess.png" width="61" height="55" alt="Аксессуары" /></span><span class="vert">Телефония</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/complect.png" width="61" height="54" alt="Комплектующие" /></span><span class="vert">Комплектующие</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/soft.png" width="61" height="54" alt="Программы" /></span><span class="vert">Программы</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span><span class="vert">Сетевое оборудование</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span><span class="vert">Фото-видео техника</span></a></li> <li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span><span class="vert">Бытовая техника</span></a></li> </ul> </div> CSS #leftsidebar ul {margin-left:12px;list-style:none;} #leftsidebar ul li a {color:#000;display:block;border-bottom:1px solid #a7a9ac;line-height:67px; position:relative;display:block;} #leftsidebar ul li a img {margin:0 25px 2px 5px;text-decoration:none;} #leftsidebar ul li a:hover {background:#d1d3d4;color:#000;font-weight:bold;display:block; position:relative;display:block;text-decoration:none;} .img {float:left; margin-top:5px;} span.vert{overflow:hidden; height:67px; width:120px; display: block; line-height:14px;}
-
У меня строчный элемент, а не блочный. А мне нужно для строчного элемента, так как он заключен в ссылку. Отсюда теперь возникает вопрос: "Как выравнять текст в строчном элементе span по вертикали?"
-
В принципе, помогло. Сейчас не могу выравнять текст по вертикали. Вроде span является строчным элементом и vertical-align должен работать, но не работает. Пробовал присвоить строчному элементу свойство ячейки через display:table-cell, а потом уж и vertical-align:middle, но у меня уже задано свойство display:block и как-то коряво все получается... В общем, запутался я.... Как оказалось еще display:table-cell в шестом ослике не воспринимается, только с display:table, а куда его воткнуть display:table?
-
Тогда в догонку еще вопрос по этому же меню. Пункт меню имеет одну строчку, однако если текст будет длинным и его нужно будет написать в две строчки, то вторая строчка будет узжать далеко под картинку. Казалось бы, можно текст заключить в div блок и задать высоту, но так как текст является ссылкой, то div блок нельзя заключять в теги ссылки <a>. Какой тут может быть выход?
-
Да вот как раз левое боковое меню мне и нужно ). А нормально там потому, что там уже добавлено zoom:1. А код, который я здесь выложил, без него. Вот и хотел спросить, как можно без zoom:1 сделать валидно. P.S. Кстати, position: relative; помогло! Все стало валидно. Спасибо!
-
Пункт меню должен отображаться блоком и блок должен быть полностью кликабельным + при наведении указателя на ссылку блок заполняется бэкграундом и тоже полностью кликабельным. Можно это посмотреть, открыв эту страницу в любом другом браузере, кроме ослика можно и zoom:1, но будет невалидно
-
Верстка меню с градиентным бэкграундом hover ссылки
vadimon replied to vadimon's question in HTML Coding
А можно поподробнее?... Нет, не про кастрацию, а про метод раздвижных дверей. -
HTML <div id="leftsidebar"> <ul> <li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span>Компьютеры</a></li> <li><a class="menu" href=""><span class="img"><img src="images/monitor.png" width="61" height="55" alt="Мониторы" /></span>Мониторы</a></li> <li><a class="menu" href=""><span class="img"><img src="images/notebook.png" width="61" height="54" alt="Ноутбуки" /></span>Ноутбуки</a></li> <li><a class="menu" href=""><span class="img"><img src="images/multimedia.png" width="61" height="55" alt="Мультимедиа" /></span>Мультимедиа</a></li> <li><a class="menu" href=""><span class="img"><img src="images/office.png" width="61" height="55" alt="Оргтехника" /></span>Оргтехника</a></li> <li><a class="menu" href=""><span class="img"><img src="images/mouse.png" width="61" height="55" alt="Манипуляторы" /></span>Манипуляторы</a></li> <li><a class="menu" href=""><span class="img"><img src="images/aksess.png" width="61" height="55" alt="Аксессуары" /></span>Аксессуары</a></li> <li><a class="menu" href=""><span class="img"><img src="images/complect.png" width="61" height="54" alt="Комплектующие" /></span>Комплектующие</a></li> <li><a class="menu" href=""><span class="img"><img src="images/soft.png" width="61" height="54" alt="Программы" /></span>Программы</a></li> <li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span>Компьютеры</a></li> <li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span>Компьютеры</a></li> <li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span>Компьютеры</a></li> </ul> </div> CSS #leftsidebar ul {margin-left:12px;list-style:none;} #leftsidebar ul li a {color:#000;display:block;border-bottom:1px solid #a7a9ac;line-height:67px;display:block;} #leftsidebar ul li a img {vertical-align:middle;margin:0 25px 2px 5px;} #leftsidebar ul li a:hover {background:#d1d3d4;color:#000;font-weight:bold;display:block;display:block;text-decoration:none;} .img { text-decoration:none; float:left; margin-top:5px;} Ссылка на страницу: http://design.webtm.ru/demo/2/index.html
-
Шестой ослик почему-то не хочет воспринимать display:block. Про косяк с display:inline-block наслышан, а вот про display:block слышу в первый раз. В чем может быть причина?
-
Имеется вот такое вот горизонтальное меню. Здесь, собственно, интересует как сделать бэкграунд у hover ссылок. Как видно, бэкграунд неоднородный, градиентный. Сами ссылки, в том числе и hover ссылки я делал спрайтом, но это не очень удобно. Допустим, потребуется изменить название пункта меню, но это уже нельзя будет сделать. Хотелось бы услышать ваше мнение. Конкретно интересует как сделать бэкграунд у hover ссылки, причем без использования изображения-ссылки, на div-ах.
-
Я бы сказал точнее <script></script> ))
-
Спасибо, отличное решение! Все правильно, только мне нужно, чтобы иконки появлялись при наведении на ссылку курсора мыши. Но тоже хорошее решение, если нужна иконка к каждому пункту меню.
-
Мой e-mail написан в этой теме, также как и icq, смотрите выше
-
Не факт. Конечно, серьезные проекты никто не доверит новичку или малоопытному человеку, а для тех, у кого скромный бюджет, не слишком высокие требования и временные ограничения, то это самое то.
-
Собственно, не велика проблема. Какие свойства в css нужно задать, чтобы при наведении курсора слева от пункта меню появлялась иконка? P.S иконки одинаковые
-
Тоже предлагаю бесплатную верстку, для увеличения собственного опыта. От меня-верстка, от вас-спасибо ). Контактная информация: E-mail: vadimon1806@mail.ru, ICQ: 472749033
-
Тоже предлагаю бесплатную верстку, для увеличения собственного опыта. От меня-верстка, от вас-спасибо ). Контактная информация: E-mail: vadimon1806@mail.ru, ICQ: 472749033
-
Тоже предлагаю бесплатную верстку, для увеличения собственного опыта. От меня-верстка, от вас-спасибо ). Контактная информация: E-mail: vadimon1806@mail.ru, ICQ: 472749033