Помогите поднять меню - HTML и CSS

kola7007 · 09.11.2017, 21:46

Учусь верстать, вот такая проблема нужно поднять меню на уровне с логотипом в верху.
Вот код 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;
}

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

СтудПом · 10.11.2017, 20:54

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

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

Код:

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

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

Вадим Мошев · 11.11.2017, 01:30

Цитата:

Сообщение от СтудПом

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

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

Цитата:

Сообщение от СтудПом

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

И как вы потом создадите из этого нормально оформленную навигацию? Как будет оформлять пункты меню?

СтудПом · 11.11.2017, 01:53

Цитата:

Сообщение от Вадим Мошев

Навигации по сайту уже очень давно оформляют

-Замечательно! Нативная стилизация списков хорошо подходит для навигации, когда эта навигация представляется списком.

Цитата:

Сообщение от Вадим Мошев

Более того, это единственный способ их создания, если сайт делает на 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, а раскраска - дело десятое.

kola7007 · 14.11.2017, 20:31

Скиньте пожалусто силку на шаблон легкой верстки на html!

СтудПом · 14.11.2017, 21:00

Цитата:

Сообщение от 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 для приведения в более приличный вид.

kola7007 · 14.11.2017, 21:04

Цитата:

Сообщение от СтудПом

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

Немного не понял к чему это ты писал. Может верстать на html пока, а потом перейти к изучению css?

СтудПом · 14.11.2017, 21:07

Цитата:

Сообщение от kola7007

Может верстать на html пока, а потом перейти к изучению css?

-ТОЧНО!!!

kola7007 · 14.11.2017, 21:11

Цитата:

Сообщение от СтудПом

-ТОЧНО!!!

Вопрос что верстать на html есть какие-то шаблоны?

СтудПом · 14.11.2017, 21:24

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

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

Код:

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

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

10.11.2017, 20:54	#2
СтудПом Форумчанин Регистрация: 08.11.2017 Сообщений: 347	Так делать нельзя. Открою сакральную тайну HTML - теги списков следует использовать для создания списков. Для форматированию меню это подходит, если меню будет представлено традиционным списком. Для вашей задачи нет оснований брать тег одной природы и ломать его стилем. Надо в одну строчку логотип и меню? -Пожалуйста, пишите в одну строчку. Код: `<div>Логотип Пункт1 Пункт2 Пункт3</div>` Если делаете свой первый сайт, попробуйте обойтись без CSS. Первое что надо освоить - форматирование, так чтоб информация была доступна посетителю сайта. Заняться наведением красоты можно потом, когда сайт будет полноценно работать. Тестирование сайта, 100 руб. за ошибку

14.11.2017, 21:24	#10
СтудПом Форумчанин Регистрация: 08.11.2017 Сообщений: 347	Шаблон на HTML Шаблон я Вам уже нарисовал. "Все остальные шаблоны" использовать не стоит, т.к. они чрезмерно сложны и их цель предоставить некоторый вариант дизайна и оформления. Вы потратите на них много времени и это будет бесполезно. Лучше сразу осваивать HTML. Идеальный шаблон должен выглядеть вот так Код: `<html> <head> <title>Title страницы</title> </head> <body> <div>Навигация по сайту</div> Bla-bla-blah основное содержание страницы </body> </html>` Меньше всего надо думать об оформлении и больше о содержании, чтоб посетитель читая мог сразу понять, что ему впаривают. Тестирование сайта, 100 руб. за ошибку

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

14.11.2017, 20:31	#5
kola7007 Пользователь Регистрация: 13.09.2017 Сообщений: 25	Скиньте пожалусто силку на шаблон легкой верстки на html!