Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 09.11.2017, 22:46   #1
kola7007
Пользователь
 
Регистрация: 13.09.2017
Сообщений: 25
Репутация: 10
По умолчанию Помогите поднять меню

Учусь верстать, вот такая проблема нужно поднять меню на уровне с логотипом в верху.
Вот код html:
Код:

<!DOCTYPE html>
<html>
	<head>
	 <meta charset="UTF-8">
	 <title>Minimal</title>
	 <link href="css/style.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
	<div>
		<div id ="top-line">
		<div id="wrapper">
			<div id="header">
				<div id="logo">
				<a href="#"><img src="img/logo.png" alt="Логотип"/></a>
				</div>
				<div id="menu">
					<ul>
						<li><a href="#">Products</a></li>
						<li><a href="#">Serfices</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
			</div>
		</div>
		</div>
	</div>
	</body>
</html>

Код:

Вот код css:
#header{
	
}

#wrapper{
	background: #FFFFFF;
}

#logo{
	padding-left: 160px;
	padding-top: 10px;
}

li{
	list-style-type: none;
}

a{
	text-decoration: none;
	color: #999999;
}

#menu{
	float: right;
}

#menu ul li{
	float: left;
	margin-left: 63px;
	padding-right: 140px;
}

Пожалуйста, оформляйте Ваш код согласно правилам.

Последний раз редактировалось Вадим Мошев; 09.11.2017 в 23:25.
kola7007 вне форума   Ответить с цитированием
Старый 10.11.2017, 21:54   #2
СтудПом
Форумчанин
 
Регистрация: 08.11.2017
Сообщений: 355
Репутация: 114
По умолчанию

Так делать нельзя. Открою сакральную тайну HTML - теги списков следует использовать для создания списков. Для форматированию меню это подходит, если меню будет представлено традиционным списком. Для вашей задачи нет оснований брать тег одной природы и ломать его стилем.

Надо в одну строчку логотип и меню?
-Пожалуйста, пишите в одну строчку.
Код:

<div>Логотип Пункт1 Пункт2 Пункт3</div>

Если делаете свой первый сайт, попробуйте обойтись без CSS.
Первое что надо освоить - форматирование, так чтоб информация была доступна посетителю сайта. Заняться наведением красоты можно потом, когда сайт будет полноценно работать.
СтудПом вне форума   Ответить с цитированием
Старый 11.11.2017, 02:30   #3
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,491
Репутация: 3678
По умолчанию

Цитата:
Сообщение от СтудПом Посмотреть сообщение
Открою сакральную тайну HTML - теги списков следует использовать для создания списков. Для форматированию меню это подходит, если меню будет представлено традиционным списком. Для вашей задачи нет оснований брать тег одной природы и ломать его стилем.
Это кто сказал? Навигации по сайту уже очень давно оформляют в виде списков ul. Более того, это единственный способ их создания, если сайт делает на CMS (не берусь за всё судить, конечно, но тем не менее)


Цитата:
Сообщение от СтудПом Посмотреть сообщение
Надо в одну строчку логотип и меню?
-Пожалуйста, пишите в одну строчку.
И как вы потом создадите из этого нормально оформленную навигацию? Как будет оформлять пункты меню?
Вадим Мошев вне форума   Ответить с цитированием
Старый 11.11.2017, 02:53   #4
СтудПом
Форумчанин
 
Регистрация: 08.11.2017
Сообщений: 355
Репутация: 114
По умолчанию

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
Навигации по сайту уже очень давно оформляют
-Замечательно! Нативная стилизация списков хорошо подходит для навигации, когда эта навигация представляется списком.

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
Более того, это единственный способ их создания, если сайт делает на CMS
-Зато, это не единственный пример массовой глупости и иррационального поведения, в т.ч. в информатике. Создателям CMS было так удобно, хорошо, это их право и я готов отдать за это право свой последний soft modem! Но зачем начинать освоение HTML с такой хрени!?

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
И как вы потом создадите из этого нормально оформленную навигацию? Как будет оформлять пункты меню?
-Вопрос задан рано, сперва надо освоить HTML, потом создать сайт предоставляющий доступ к информации. И когда всё будет "работать" в правильном смысле этого слова, можно заняться визуальным оформлением.
Код:

<style>
div:first-child       { /*Стиль для блока логотипа и навигации*/ }
div:first-child > img { /*Стиль для логотипа*/ }
div:first-child > a   { /*Стиль для ссылок навигации*/ }
</style>
<div><img alt="Логотип"> <a>Пункт1</a> <a>Пункт2</a> <a>Пункт3</a></div>

Но сперва надо освоить разметку HTML, а раскраска - дело десятое.
СтудПом вне форума   Ответить с цитированием
Старый 14.11.2017, 21:31   #5
kola7007
Пользователь
 
Регистрация: 13.09.2017
Сообщений: 25
Репутация: 10
По умолчанию

Скиньте пожалусто силку на шаблон легкой верстки на html!
kola7007 вне форума   Ответить с цитированием
Старый 14.11.2017, 22:00   #6
СтудПом
Форумчанин
 
Регистрация: 08.11.2017
Сообщений: 355
Репутация: 114
По умолчанию Простой сайт-визитка

Цитата:
Сообщение от kola7007 Посмотреть сообщение
Скиньте пожалусто силку на шаблон легкой верстки на html!
Код:

<table border=1>
  <tr>
    <td colspan=2>
      Шапка
    </td>
  </tr>
  <tr>
    <td>
      Меню
    </td>
    <td>
      Основное содержимое
    </td>
  </tr>
  <tr>
    <td colspan=2>
      Подвал
    </td>
  </tr>
</table>

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

Последний раз редактировалось СтудПом; 14.11.2017 в 22:13.
СтудПом вне форума   Ответить с цитированием
Старый 14.11.2017, 22:04   #7
kola7007
Пользователь
 
Регистрация: 13.09.2017
Сообщений: 25
Репутация: 10
По умолчанию

Цитата:
Сообщение от СтудПом Посмотреть сообщение
-пользуйте таблицы и не мучайте мозг CSS-ом. Когда разметка и содержательная часть сайта будет сделана, начинайте осваивать CSS для приведения в более приличный вид.
Немного не понял к чему это ты писал. Может верстать на html пока, а потом перейти к изучению css?
kola7007 вне форума   Ответить с цитированием
Старый 14.11.2017, 22:07   #8
СтудПом
Форумчанин
 
Регистрация: 08.11.2017
Сообщений: 355
Репутация: 114
По умолчанию

Цитата:
Сообщение от kola7007 Посмотреть сообщение
Может верстать на html пока, а потом перейти к изучению css?
-ТОЧНО!!!
СтудПом вне форума   Ответить с цитированием
Старый 14.11.2017, 22:11   #9
kola7007
Пользователь
 
Регистрация: 13.09.2017
Сообщений: 25
Репутация: 10
По умолчанию

Цитата:
Сообщение от СтудПом Посмотреть сообщение
-ТОЧНО!!!
Вопрос что верстать на html есть какие-то шаблоны?
kola7007 вне форума   Ответить с цитированием
Старый 14.11.2017, 22:24   #10
СтудПом
Форумчанин
 
Регистрация: 08.11.2017
Сообщений: 355
Репутация: 114
По умолчанию Шаблон на HTML

Шаблон я Вам уже нарисовал. "Все остальные шаблоны" использовать не стоит, т.к. они чрезмерно сложны и их цель предоставить некоторый вариант дизайна и оформления. Вы потратите на них много времени и это будет бесполезно. Лучше сразу осваивать HTML.

Идеальный шаблон должен выглядеть вот так
Код:

<html>
  <head>
    <title>Title страницы</title>
  </head>
  <body>
    <div>Навигация по сайту</div>
    Bla-bla-blah основное содержание страницы
  </body>
</html>



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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поднять вверх данные komra2 Microsoft Office Excel 2 09.11.2016 15:13
Поднять OwnCloud на VPS HelloThere Фриланс 0 15.08.2016 22:43
Как поднять себе настроение? Lemo Свободное общение 20 09.04.2012 10:26
Хочу поднять музыкальный проект coNsept Свободное общение 16 28.03.2012 11:17
как поднять FTP сервер? HAN Помощь студентам 6 26.03.2012 19:27


09:02.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru