Vzor

February 1, 2013

И еще обнаружил внизу

<div id="" footer"=">

надо поменять наверно на:

<div id="footer">

так же нету атрибутов alt у картинок, и правильнее писать ссылку внутри тега "li" а не оборачивать ей элемент списка.


Не Аис 
<a href="#"><li>Главная</li></a>
<a href="#"><li>Рефераты</li></a>
<a href="#"><li>Сочинения</li></a>
<a href="#"><li>Контакты</li></a>

Вот так Айс

<li><a href="#">Главная</a></li>
<li><a href="#">Рефераты</a></li>
<li><a href="#">Сочинения</a></li>
<li><a href="#">Контакты</a></li>

February 1, 2013

Я так понял должно было быть так:


<html>
<head>
<title>Рефераты для студентов</title>
<link rel="stylesheet" href="http://magazine-lady.ru/script/maket1/style.css" type="text/css">

</head>
<body>

<div id="container">
<div id="header">
<div id="logo"><img src="http://magazine-lady.ru/script/maket1/img/logo.png"></div>
</div>


<div id="centr">
<h1>Темы рефератов и сочинений</h1><br>


<!-- ========== CRASH Start ============== -->

<style>
#lc p a, #rc p a {
color: #838181;
line-height: 32px;
padding: 10px;
text-decoration: none;
}
</style>

<div id="lc">
<p><a href="#">Астрономия и космонавтика ..... 0</a></p>
<p><a href="#">Банковское, биржевое дело и страхование ..... 0</a></p>
<p><a href="#">Биология и естествознание ..... 0</a></p>
<p><a href="#">Безопасность жизнедеятельности и охрана труда ..... 0</a></p>
<p><a href="#">Бухгалтерский учет и аудит ..... 4072</a></p>
<p><a href="#">Военное дело и гражданская оборона ..... 0</a></p>
<p><a href="#">География и экономическая география ..... 0</a></p>
<p><a href="#">Геология, гидрология и геодезия ..... 0 </a></p>
<p><a href="#">Журналистика, издательское дело и СМИ ..... 0</a></p>
<p><a href="#">Иностранные языки и языкознание ..... 0 </a></p>
<p><a href="#">История и исторические личности ..... 20</a></p>
<p><a href="#">Коммуникации, связь, радиоэлектроника ..... 0</a></p>
<p><a href="#">Краеведение и этнография ..... 0</a></p>
<p><a href="#">Кулинария и продукты питания ..... 0</a></p>
<p><a href="#">Культура и искусство ..... 0 </a></p>
<p><a href="#">Литература ..... 0 </a></p>
<p><a href="#">Маркетинг, реклама и торговля ..... 0</a></p>
<p><a href="#">Математика ..... 0</a></p>
<p><a href="#">Медицина, здоровье ..... 0</a></p>
<p><a href="#">Международные отношения и мировая экономика ..... 0</a></p>
<p><a href="#">Менеджмент и трудовые отношения ..... 0 </a></p>
<p><a href="#">Музыка ..... 0</a></p>
</div>

<div id="rc">
<p><a href="#">Астрономия и космонавтика ..... 0</a></p>
<p><a href="#">Банковское, биржевое дело и страхование ..... 0</a></p>
<p><a href="#">Биология и естествознание ..... 0</a></p>
<p><a href="#">Безопасность жизнедеятельности и охрана труда ..... 0</a></p>
<p><a href="#">Бухгалтерский учет и аудит ..... 4072</a></p>
<p><a href="#">Военное дело и гражданская оборона ..... 0</a></p>
<p><a href="#">География и экономическая география ..... 0</a></p>
<p><a href="#">Геология, гидрология и геодезия ..... 0 </a></p>
<p><a href="#">Журналистика, издательское дело и СМИ ..... 0</a></p>
<p><a href="#">Иностранные языки и языкознание ..... 0 </a></p>
<p><a href="#">История и исторические личности ..... 20</a></p>
<p><a href="#">Коммуникации, связь, радиоэлектроника ..... 0</a></p>
<p><a href="#">Краеведение и этнография ..... 0</a></p>
<p><a href="#">Кулинария и продукты питания ..... 0</a></p>
<p><a href="#">Культура и искусство ..... 0 </a></p>
<p><a href="#">Литература ..... 0 </a></p>
<p><a href="#">Маркетинг, реклама и торговля ..... 0</a></p>
<p><a href="#">Математика ..... 0</a></p>
<p><a href="#">Медицина, здоровье ..... 0</a></p>
<p><a href="#">Международные отношения и мировая экономика ..... 0</a></p>
<p><a href="#">Менеджмент и трудовые отношения ..... 0 </a></p>
<p><a href="#">Музыка ..... 0</a></p>
</div>

<!-- ========== CRASH END ============== -->

<div id="sidebar">

<div id="order"><a href="#"><img src="http://magazine-lady.ru/script/maket1/img/order.png"></a></div>
<span>Новые рефераты</span>
<ol>
<a href="#"><li>Психологие человека</li></a>
<a href="#"><li>Сочинение по книге Тургенева «Му-Му»</li></a>
<a href="#"><li>«Мёртвые души»</li></a>
<a href="#"><li>Моя любимая книга</li></a>
<a href="#"><li>Что такое сифилис?</li></a>
<a href="#"><li>Как появляется чёрная дыра?</li></a>
<a href="#"><li>Кто такие Атланты?</li></a>
<a href="#"><li>Строение Земли</li></a>
<a href="#"><li>Племена и народы Африки</li></a>
<a href="#"><li>Что такое qwerty?</li></a>
</ol>
</div>

</div>

<div id="login"><a href="#">Вход</a> | <a href="#">Регистрация</a></div>

<div id="" footer"="">
<div id="copy">Дизайн разработан студией ScrollART’s<br>
Все материалы на сайте принадлежат администрации. При копировании материалов
указывайте ссылку на источник.<p></p>
</div>

<div id="page">
<a href="#">О нас</a>
<a href="#">Помощь</a>
<a href="#">Контакты</a>
</div>

</div>

</div> <!-- /container -->

</body>
</html>

У себя вырежите и стили поправте.

<!-- ========== CRASH Start ============== -->
<!-- ========== CRASH END ============== -->

<style>
#lc p a, #rc p a {
color: #838181;
line-height: 32px;
padding: 10px;
text-decoration: none;
}
</style>

July 6, 2012

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

Выставляю на ваш справедливый суд - BusinesName.

Возможные ошибки:

В Psd макете шрифты заголовков как бы несколько размыты а в верхних 3х блоках шрифты немного прозрачны у меня это не так.

Блок с таблицей из отличающихся по цвету строк я сверстал списком. И несовсем понятно что там внутри, ссылки или подчёркнутый текст.

July 5, 2012

Привет, вот решил попробывать сверстать макет Raira PSD из этой темы, надеюсь получилось не совсем ужастно. Заранее спасибо за критику и советы. Макет Raira.

July 4, 2012

Извеняюсь ниже случаино копию своего ответа создал. Затёр ...

July 4, 2012

mrnobody а если отступ от верха чуть меньше сделать, к примеру 1px то меню неуспевает попадать. Основываясь на вашем примере у меня получилось так:

#nav - добавляем display: relative;

#nav li - удаляем position: relative;

#nav ul - добавляем top: 26px;

#nav ul li - добавляем float: left;

Далее если нужно чтоб подменю появлялось под выделенным пунктом.

#nav li:hover ul - заменяем left:0; на display:block;

#nav ul - заменяем left:-9999px; на display:none;

Данный приме не претендует на универсальность но как вариант.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>

<style type="text/css">

/* Сброс
—————————— */
body,ul,li,h1 {
	margin:0;
	padding:0;
}

/* Главное
—————————— */
html{
	height:101%;
}
body{
	font-family:Arial,Verdana,sans-serif;
	font-size:0.75em;
	color:#333;
	width:960px;
	margin:0 auto;
	padding:10px;
}
h1{
	font-family:Calibri, Arial, Verdana, sans-serif;
	font-size:2em;
	width:520px;
}

/* Меню
—————————— */
#nav{
	float:left;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	position: relative;
}
#nav li{
	float:left;
	margin-right:1px;
	display:block;
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;
	background:#333;
	text-decoration:none;

	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a:hover{
	color:#fff;
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
	text-decoration:underline;
}

/* Выпадающие Пункты
—————————— */
#nav ul{
	list-style:none;
	position:absolute;
	top: 25px;
	display:none; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity:0; /* Устнавливаем начальное состояние прозрачности */
	-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
	padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float:none;
	float: left;
}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	display:block; /* Приносим его обратно на экран, когда нужно */
	opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
	text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	background:#333;
	background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
	text-decoration:underline;
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}
</style>

</head>
<body>

<ul id="nav">
	<li>
		<a href="#" title="Вернуться на главную страницу">Главная</a>
	</li>
	<li>
		<a href="#" title="Информация о компании">О нас</a>
		<ul>
			<li><a href="#">Продукты</a></li>
			<li><a href="#">Команда</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Что мы можем для вас сделать">Услуги</a>
		<ul>
			<li><a href="#">Услуга один</a></li>
			<li><a href="#">Услуга два</a></li>
			<li><a href="#">Услуга три</a></li>
			<li><a href="#">Услуга четыре</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Наша продуктовая линейка">Продукты</a>
		<ul>
			<li><a href="#">Маленький продукт (первый)</a></li>
			<li><a href="#">Маленький продукт (второй)</a></li>
			<li><a href="#">Маленький продукт (третий)</a></li>
			<li><a href="#">Маленький продукт (четвертый)</a></li>
			<li><a href="#">Большой продукт (пятый)</a></li>
			<li><a href="#">Большой продукт (шестой)</a></li>
			<li><a href="#">Большой продукт (седьмой)</a></li>
			<li><a href="#">Большой продукт (восьмой)</a></li>
			<li><a href="#">Невообразимый продукт (девятый)</a></li>
			<li><a href="#">Невообразимый продукт (десятый)</a></li>
			<li><a href="#">Невообразимый продукт (одиннадцатый)</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Как с нами связаться">Контакт</a>
		<ul>
			<li><a href="#">Часы работы</a></li>
			<li><a href="#">Местоположение</a></li>
		</ul>
	</li>
</ul>

<h1>Здесь расположен простой контент для демонстрации перекрытия меню.</h1>

</body>
</html>

July 2, 2012

NeoXidizer, Спасибо за советы и замечания. Я не стал пользовать HTML5 теги так как нехотел цеплять дополнительный Js для IE поддержки:

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Да и не как не избавлюсь от привычки осторожности к нововведениям.

July 2, 2012

Ну вот что получилось - ссылка. Надеюсь на справедливую критику и советы.

July 1, 2012

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

July 1, 2012

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

July 1, 2012

Есть вот такой вариант не таблицей.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>

<style type="text/css">
.box1 {
	background: #91D149; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
	float: left; 			/* обтекание слева */
}
.box2 {
	background: #4769E0; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
	float: left; 			/* обтекание слева */
}
.wrap_box {
	overflow:hidden; 		/* отображение содержания блочного элемента */
}
</style>

</head>
<body>

<div class="wrap_box">
<div class="box1">Блок 1 блок 1 блок 1 блок 1 блок 1</div>
<div class="box2">Блок 2 блок 2 блок 2 блок 2 блок 2</div>
</div>

<p>Hello World</p>

</body>
</html>

jsfiddle

Если нужно таблицей можно так:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>

<style type="text/css">
.tbox {
	border-collapse: collapse; 	/* как отображать границы */
}
.tbox1 {
	background: #91D149; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
}
.tbox2 {
	background: #4769E0; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
}
</style>

</head>
<body>

<table class="tbox">
	<tr>
		<td class="tbox1">Блок 1 блок 1 блок 1 блок 1 блок 1</td>
		<td class="tbox2">Блок 2 блок 2 блок 2 блок 2 блок 2</td>
	</tr>
</table>

</body>
</html>

April 23, 2012

Я рад что смог вам помочь. И вот возможно пригодится.

Атрибут align задает выравнивание элемента относительно других элементов на странице или выравнивание внутри элемента. Но в зависимости от того, к какому элементу (тегу) он применяется его деиствие может отличатся.

April 23, 2012

Да конечно вариант спасибо. Я и сам так полюзуюсь, но возможно есть и другие способы.

April 23, 2012

Вот ещё вариант но тоже с css

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Test</title>

</head><body> 

Имя пользователя (адрес электронной почты): 
<img src="http://static.panoramio.com/photos/small/70779155.jpg" style="vertical-align:-4px;"> 
Пишите.....

</body>
</html>

April 23, 2012

Можно вот так, первое что пришло в голову. Возможно есть лучшие варианты.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Test</title>

 <style>
.xlink {
	display:block;
	float:left;
	padding-top:4px;
}
.xtext {
	float:left;
}
.xdlink { 
	background: url("http://static.panoramio.com/photos/small/70779155.jpg") 100% 4px no-repeat transparent;
	padding-right:84px;
	float:left;
}
</style>

</head><body> 

<!-- в этом случае без css попробовал подрезать картинку -->
<p>Имя пользователя (адрес электронной почты): <img src="http://s1.hostingkartinok.com/uploads/images/2012/04/677851d387ba35640213d18c7ebb3043.png" align="middle"> Пишите.....</p>

<!-- а тут с помощью css -->
<span class="xtext">Имя пользователя (адрес электронной почты):</span><img src="http://static.panoramio.com/photos/small/70779155.jpg" class="xlink">Пишите.....

<!-- можно задать картинку фоном -->
<p><div class="xdlink">Имя пользователя (адрес электронной почты):</div>Пишите.....</p>
</body>
</html>

jsfiddle.net/L8QGM/

Дело в том что высота вашей картинки больше высоты текстовой строки поэтому при выравнивании картинки без css атрибутом align она не встанет чётко в центре строки.

April 23, 2012

У меня несколько вопросов.

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

April 20, 2012

Вот несколько ссылок на тему:

На английском от (W3) - описание - демо

На английском (JavaScript) от DinamicDrive

На английском (Mootools) вдруг пригодится -Mootools Styleswitcher - демо

Вписал что было, но это не самые новые ссылки попробуйте поисковик.

April 20, 2012

Возможно поможет такое решение в примере 2 варианта один из них обёртка предложен выше, а второй вариант дописываем ещё 1 класс и к нему задаем необходимый стиль:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Test label</title> 

</head><body> 

<style> 
label {
	color:green;  // дефолтный класс для всех label - для примера 
}
.xd {
	font-style:italic; // дефолтный класс для примера
}
.add {
	color:red; // для варианта с добавленнием класса
}
span label {
	color:blue; // для варианта с обёрткой
}
</style>

<form action="">
<p><b>Lorem ipsum dolor sit amet...</b></p>
<p>
<input type="checkbox" id="check1"><label class="xd" for="check1">1 лэйбл</label><Br>
<input type="checkbox" id="check2"><span><label class="xd" for="check2">2 лэйбл - вариант с обёрткой</label></span><Br>
<input type="checkbox" id="check3"><label class="xd" for="check3">3 лэйбл</label><Br>
<input type="checkbox" id="check4"><label class="xd" for="check4">4 лэйбл</label><Br>
<input type="checkbox" id="check5"><label class="xd" for="check5">5 лэйбл</label><Br>
<input type="checkbox" id="check6"><label class="xd add" for="check6">6 лэйбл - вариант с добавлением класса</label><Br>
<input type="checkbox" id="check7"><label class="xd add" for="check7">7 лэйбл - вариант с добавлением класса</label>
</p>
</form>

</body>
</html>

April 20, 2012

Вот тут www.master-web.info есть статья со ссылкам на дефолтные стили браузеров.

April 20, 2012

Мне нравится 1й, в частности рисунок.

Sign In

Vzor

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by Vzor

помогите справиться с отступами параграфа

помогите справиться с отступами параграфа

Вёрстка PSD макета - BusinesName

Вёрстка PSD макета - Raira

Раскрывающийся список в строку

Раскрывающийся список в строку

Для желающих получить опыт верстки

Для желающих получить опыт верстки

Для желающих получить опыт верстки

текст по блокам

текст по блокам

Спозиционировать картинку в тексте

Как определить принадлежность элемента вручную

Спозиционировать картинку в тексте

Спозиционировать картинку в тексте

Как определить принадлежность элемента вручную

Кнопка для смены фона сайта.

Отмена стиля

Прежде чем выставлять сайт на обсуждение...

Выбор логотипа

Forums

Important Information