vadimon

Corel насколько помню тоже слои поддерживает.

Да, Corel поддерживает слои, но работа с ними намного отличается от работы со слоями в Photoshop, причем в худшую сторону

1) сохраняешь в документ формате CorelDraw в нужный размер (например, шириной 1000 пикселей)

2) Послойно экспортируешь в формат фотошопа всю графику

Думаю, только в этом выход, послойно все экспортировать, иначе никак

1) сохраняешь в документ формате CorelDraw в нужный размер (например, шириной 1000 пикселей)

2) Послойно экспортируешь в формат фотошопа всю графику

Думаю, только в этом и выход, иначе никак

А в чём проблема сохранить в растре и открыть в фотошопе?

Xочу, чтобы слои сохранились. Некоторые картинки не выцепить, если не отключить слои.

Есть макет, нарисованный в Corel Draw, нужно сверстать из него страницу. Вопрос: как? С Photoshop все понятно, там слои, там порезать можно, там размеры. А как быть с Corel?

Тогда JavaScript.

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

Задать line-height для <span class="img"></span> равный его высоте. Либо воспользоваться ссылкой из поста №12

не, такие варианты не катят...

Что именно нужно выровнять? Относительно чего? Какой элемент относительно какого.

Например, слово "Компьютеры серверы" просто нужно выравнять по вертикали в <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;}

http://forum.htmlbook.ru/index.php?showtop...163699&st=0

У меня строчный элемент, а не блочный. А мне нужно для строчного элемента, так как он заключен в ссылку. Отсюда теперь возникает вопрос: "Как выравнять текст в строчном элементе span по вертикали?"

Компьютеры и прочие фразы в ссылке заключить в спан. Ему назначить класс, через него уже в КСС span.class{overflow:hidden;display: block;}

В принципе, помогло. Сейчас не могу выравнять текст по вертикали. Вроде span является строчным элементом и vertical-align должен работать, но не работает. Пробовал присвоить строчному элементу свойство ячейки через display:table-cell, а потом уж и vertical-align:middle, но у меня уже задано свойство display:block и как-то коряво все получается... В общем, запутался я.... Как оказалось еще display:table-cell в шестом ослике не воспринимается, только с display:table, а куда его воткнуть display:table?

Тогда в догонку еще вопрос по этому же меню. Пункт меню имеет одну строчку, однако если текст будет длинным и его нужно будет написать в две строчки, то вторая строчка будет узжать далеко под картинку. Казалось бы, можно текст заключить в div блок и задать высоту, но так как текст является ссылкой, то div блок нельзя заключять в теги ссылки <a>. Какой тут может быть выход?

Так бы и сказали, что верхнее меню... я то на боковое смотрю (там все в порядке).

Можно вместо zoom: 1; попробовать position: relative; - иногда помогает. Можно плюнуть на валидность для ИЕ6 (conditional comments).

Да вот как раз левое боковое меню мне и нужно ). А нормально там потому, что там уже добавлено zoom:1. А код, который я здесь выложил, без него. Вот и хотел спросить, как можно без zoom:1 сделать валидно.

P.S. Кстати, position: relative; помогло! Все стало валидно. Спасибо!

Какое поведение и в каком месте не устраивает? Просто я посмотрел страницу в ИЕ6 - косяков не увидел.

Пункт меню должен отображаться блоком и блок должен быть полностью кликабельным + при наведении указателя на ссылку блок заполняется бэкграундом и тоже полностью кликабельным. Можно это посмотреть, открыв эту страницу в любом другом браузере, кроме ослика

Пробуй zoom:1;

Да там походу картинка не кликабельна.

можно и zoom:1, но будет невалидно

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

Можно попробовать сделать по методу раздвижных дверей. Только у одной "двери" (пусть правой - пусть она будет меньшей) сделать однородный фон, а у другой (большей) сделать программный градиент.

А можно поподробнее?... Нет, не про кастрацию, а про метод раздвижных дверей.

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></script> ))

Задаете ссылке бэкграунд с отрицательным позиционированием, а при наведении делаете нормальное позиционирование.

Например, так:

A { padding-left: 20px; background: url(ico.jpg) no-repeat -100px -100px; }
A:hover { background-position: 0 0; }

Спасибо, отличное решение!

li {background:url(ico.gif) no-repeat 0 2px; padding-left:10px; list-style:none;}

Все правильно, только мне нужно, чтобы иконки появлялись при наведении на ссылку курсора мыши. Но тоже хорошее решение, если нужна иконка к каждому пункту меню.

Вышли свой Емайл на chistota9@gmail.com и обсудим подробнее эту тему.

С Ув. Lavr.

Мой e-mail написан в этой теме, также как и icq, смотрите выше

Мало вероятно что новичку доверят чтонить верстать.

Поэтому - "Free PSD" в гугле, и там куча качественных слоенных дизайнов, которые можно бесплатно скачать. Вот выбирай, верстай. Выкладывай тут на обсуждение, собирай портфолио.

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

Собственно, не велика проблема. Какие свойства в css нужно задать, чтобы при наведении курсора слева от пункта меню появлялась иконка?

P.S иконки одинаковые

Тоже предлагаю бесплатную верстку, для увеличения собственного опыта. От меня-верстка, от вас-спасибо ).

Контактная информация: E-mail: vadimon1806@mail.ru, ICQ: 472749033

Тоже предлагаю бесплатную верстку, для увеличения собственного опыта. От меня-верстка, от вас-спасибо ).

Контактная информация: E-mail: vadimon1806@mail.ru, ICQ: 472749033

Тоже предлагаю бесплатную верстку, для увеличения собственного опыта. От меня-верстка, от вас-спасибо ).

Контактная информация: E-mail: vadimon1806@mail.ru, ICQ: 472749033