X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Редактирование елементов списка.
Web-developer
Web-developer
Topic Starter сообщение 1.3.2011, 21:10; Ответить: Web-developer
Сообщение #1


Доброе время суток уважаемые коллеги! Я являюсь начинающим WEB - верстальщиком. У меня было задание сверстать сайт по готовому psd-файлу.
Вот изображение сайта который должен в итоге получится.
[attachment=37540:GPStestovoe.jpg]

Для кого то по опытнее мой вопрос может показаться излишне тривиальным, однако я новичок в этой сфере и мне требуется помощь в реализации.
И так вопрос мой заключается в следующем:
Как правильнее реализовать 2-а списка которые можно увидеть на этом изображении(там должно быть в первом 10 строчек, а во втором 4 строчки).
По сути сайт я уже сверстал: вот отрывок HTML для элементов списка:
<div id="center_colum">
<div id="center_image" class="image">
<img alt="" src="http://php5/GPStestovoe/img/center_logo.png">
</div>
<div id="information-colum_center" class="information-colum">
<div id="central_information_top">
<div id="image"></div>
<div id="text">Наиболее часто на предприятиях возникают проблемы, так или иначе связанные с<br>
эффективностью использования транспортных средств. Решение подобного рода проблем<br>
тесно связано с использованием новых технологий, в частности GPS-навигации и<br>
географических информационных систем (ГИС).
</div>
<div id="strelki"></div>
<div id="text1"><b>ГИС</b> – это системы, предназначенные для сбора, анализа, визуализации и хранения пространственных данных и<br>сопутствующей им информации. Иными словами <b>ГИС</b> – это особые цифровые карты, содержащие<br>
специализированную информацию об объектах, нанесённых на них. В совокупности с глобальной системой<br>
позиционирования, <b>ГИС</b> могут выполнять различные функции, находясь также на службе у различных коммерческих<br>
предприятий.
</div>
<br><br>
<div id="text2"><b>Внедрение подобных систем на предприятии решает конкретные задачи повышения эффективности использования<br> транспортной инфраструктуры: маршрутизация, обмен данными, снижение расходов и прочее.</b><br><br>
<font color="#f57300"><b>ЭФФЕКТИВНОСТЬ ВНЕДРЕНИЯ ГИС</b></font><br><br>
Построение системы заключается в создании специальной ГИС и разработкой СУБД, а также оснащением<br>
транспортных средств компании датчиками GPS (скрытыми или же известными). Внедрение данной системы не займёт много<br> времени, но польза от её использования внушительна и позволит решить следующие задачи:
</div>
<br>
<ul id="list1">
<li>
Контроль использования ТС.
</li>
<li>
Построение оптимальных маршрутов.
</li>
<li>
Обмен данными между транспортными средствами.
</li>
<li>
Оперативность доставки.
</li>
<li>
Повышение производительности труда.
</li>
<li>
Организация планирования и логистики.
</li>
<li>
Увеличение безопасности для водителей.
</li>
<li>
Улучшение скорости выполнения заказов.
</li>
<li>
Повышение качества обслуживания клиентов.
</li>
<li>
Улучшение дисциплины водителей.
</li>
</ul>
<br>
<div id="text3">
<font color="#f57300"><b>ЭКОНОМИЧЕСКАЯ ВЫГОДА ВНЕДРЕНИЯ СИСТЕМ НА ОСНОВЕ ГИС-ТЕХНОЛОГИЙ</b></font><br><br>
Неписаные статьи расходов от нецелевого использования транспорта персоналом, наносит вполне ощутимый ущерб предприятию. Внедрение систем на основе ГИС-технологий позволит снизить связанные с этим расходы компании:
</div>
<br>
<ul id="list2">
<li>
Нецелевые затраты на топливо для ТС.
</li>
<li>
Хищение топлива.
</li>
<li>
Незапланированные предприятием заказы.
</li>
<li>
Простой транспорта и т.п.
</li>
</ul>
<div id="central_information_bottom">
<div id="text4">
Таким образом, разработка для компании <b>индивидуальной геоинформационной системы</b> с применением технологий<br>
GPS, позволит решить наиболее важные задачи предприятия и увеличить эффективность работы её подразделений.<br><br>
Сотрудничество с нами позволит Вам воспользоваться всеми преимуществами предложенных систем. В пакете услуг,<br>
предоставляемых нашей компанией, предполагается <b>индивидуальный выбор клиента</b> нужной ему услуги. Если Вам<br>
необходимы специальные услуги, нацеленные на решение необходимых Вам задач, свяжитесь с нашим менеджером по<br>
указанному ниже телефону.
</div>
</div>
<div id="text5"><b>Будем рады сотрудничеству с Вами!</b></div>
</div>
</div>
</div>


далее я приведу часть CSS кода с помощью которого я реализовал этот список:
[CSS]#central_information_top #list1 li{
font-family:Tahoma, Geneva, Verdana;
font-size: 14px;
list-style-image: url(../img/list.png);
/*list-style-position: inside;*/
margin: 0em 0em 0em 4.5em;
}

#text3{
font-family:Tahoma, Geneva, Verdana;
font-size: 14px;
}

#central_information_top #list2 li{
font-family:Tahoma, Geneva, Verdana;
font-size: 14px;
list-style-image: url(../img/list.png);
/*list-style-position: inside;*/
margin: 0em 0em 0em 4.5em;
}[/CSS]

В итоге после применения данного кода появляется список, однако текст который должен идти четко напротив по центру каждого указателя(маркера(стрелка в круге)), располагается чуть ниже и в итоге весь текст сдвигается вниз приблизительно на 3-5 px. Если кто нибудь знает как устранит данную проблему - пишите.
Вот результат готовой верстки. В первом изображении красным обозначены 2-а списка которые отображеются не так как необходимо.
[attachment=37541:Sitepart2.jpg][attachment=37542:Sitepart1.jpg]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ottaviano
ottaviano
сообщение 1.3.2011, 22:58; Ответить: ottaviano
Сообщение #2


Web-developer, ставите list-style-image для ul, а не для li.
а для всех li ставите padding-bottom
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Web-developer
Web-developer
Topic Starter сообщение 2.3.2011, 2:25; Ответить: Web-developer
Сообщение #3


Спасибо большое! Очень помогло!

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Редактирование HTML кодировки текстов.
7 Neospeak 3900 28.11.2018, 4:20
автор: Neospeak
Открытая тема (нет новых ответов) Нужно редактирование шаблона WP, исправление верстки и микроразметки
бюджет 10 долларов
3 devvver 2083 1.3.2017, 16:54
автор: ZaDrotom
Открытая тема (нет новых ответов) Вывод списка custom post types
0 Вячеслав 1304 3.2.2016, 2:07
автор: Вячеслав
Открытая тема (нет новых ответов) Нужен кодер: вставка рекламы, редактирование плагина
4 pomoshkomp 1764 31.7.2015, 1:36
автор: Ivan1984
Открытая тема (нет новых ответов) Ищу работу, по CMS, соц. сети, наполнение, размещение, редактирование шаблонов, SEO
(пойду помощником)
0 LegioN_Green 1510 24.3.2014, 18:37
автор: LegioN_Green


 



RSS Текстовая версия Сейчас: 26.4.2024, 7:05
Дизайн