Сайт команды

Статус
Закрыто для дальнейших ответов.

WHITEMAN23

Member
Регистрация
20.08.2011
Сообщения
14
Здравствуйте! Недавно начал изучать html и css. В качестве своего так сказать первого раза решил сделать сайт команды.
http://files.mail.ru/VB8VF1 Вот собственно архив со всеми файлами. Прошу оценить верстку указать на недостатки.
Кроме того очень хотелось бы узнать можно ли посадить его на cms? На какую лучше и легче?
Заранее благодарен за советы.
 

WHITEMAN23

Member
Регистрация
20.08.2011
Сообщения
14
Неужели я все сделал идеально)
 

AngelGabriel

И имя мне - легион
Регистрация
23.11.2008
Сообщения
778
я не знаю как другим мне лично влом качать архив, распаковывать его, чето там запускать. Хотите критики, залейте свое творение на бесплатный хостинг, тогда и оценим.
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
я не знаю как другим мне лично влом качать архив, распаковывать его, чето там запускать. Хотите критики, залейте свое творение на бесплатный хостинг, тогда и оценим.
там пока нечего заливать...



Неужели я все сделал идеально)
Вы действительно сами все это писали? и комментарии?
Валидатор выдает 17 ошибок...можно убрать половину дивов,они почти все продублированы,ну и css-ку переделать соответственно...
 

WHITEMAN23

Member
Регистрация
20.08.2011
Сообщения
14
http://greed.h1.ru/ Вот залил. Не могу понять что с кодировкой(использовал utf-8 без BOM).
А что изменить по структуре?(имеется ввиду какие div лучше убрать).

P.s. писал сам, кое что из видеоуроков кое что сам пытался сделать.
А что так убого?
И вопрос как быть с движком или проще забить на все и ставить шаблон?
 

AngelGabriel

И имя мне - легион
Регистрация
23.11.2008
Сообщения
778
добавь в заголовки
Код:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
И не поможет!
Это сервер отдает в заголовке кодировку windows-1251.

Посмотрите еще на говнокод, который он добавляет вашей и без того далеко не идеальной странице (после </html>). И валите с этого хостинга, быстро, решительно!

Теперь непосредственно по поводу вашего кода:
1. Элемент IMG имеет обязательный атрибут alt, и не имеет атрибута border, для этого существуют CSS
2. Это же касается запрещенных атрибутов frameborder и scrolling элемента IFRAME - используйте CSS
3. В адресах ссылок все спецсимволы нужно заменять их кодами или мнемониками. В частности, у вас - вместо & везде в адресах ссылок должно быть &amp; - и браузер все правильно поймет.
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
http://greed.h1.ru/ Вот залил. Не могу понять что с кодировкой(использовал utf-8 без BOM).
А что изменить по структуре?(имеется ввиду какие div лучше убрать).
если Вы заявили доктайп html5 ,то используйте новые теги:
Код:
  <!DOCTYPE html>
     <html>
	<head>

  		<meta charset="utf-8"/>

  		<title>TeaM GreeD</title>

		<link href="css/common.css"  rel="stylesheet" type="text/css"/>

		<!--[if IE]>

		<link href="ie.css" rel="stylesheet" type="text/css"/>

		<![endif]-->

 	</head>

 	<body>
		<header id="header">

			<a href="javascript:void(0);" title="logo"><img src="images/logo.jpg" alt="logo" title="logo"/></a>

			<ul>

				<li><a href="javascript:void(0);" title="Главная" class="on">Главная</a></li>

				<li><a href="javascript:void(0);" title="О нас">О нас</a>

					<ul>

						<li><a href="ustav.html" title="Устав">Устав</a></li>

						<li><a href="sostav.html" title="Состав клана">Состав клана</a></li>

						<li><a href="vstuplenie.html" title="Вступление в клан">Вступление в клан</a></li>

					</ul>

				</li>

				<li><a href="javascript:void(0);" title="Наши проекты">Наши проекты</a>

					<ul>

						<li><a href="tournament.html" title="GreeD Tournament">GreeD Tournament</a></li>

						<li><a href="serial.html" title="Сериал Миротворцы">Сериал Миротворцы</a></li>

						<li><a href="club.html" title="GreeD Club">GreeD Club</a></li>

					</ul>

				</li>

				<li id="forum"><a href="javascript:void(0);" title="Форум">Форум</a></li>	

			</ul>

		</header>

	 	<div id="container"> <!--Регулирует размеры по ширине!-->

			<div id="lcabinet">Тут будет Ваш личный кабинет</div>

			<div id="teamspeak">TeamSpeak
				<iframe src="http://cache.www.gametracker.com/components/html0/?							host=89.20.147.143:10140&bgColor=636467&fontColor=000000&titleBgColor=D7D7D7&titleColor=000000								&borderColor=1F1F1F&linkColor=E3751E&borderLinkColor=119BCF&showMap=0
&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=240" 
frameborder="0" scrolling="no" width="240" height="388"></iframe>
			</div>

			<div id="server_status">Тут будет статус Нашего сервера</div>

			<div id="left">

					<div id="v_centre">В центре внимания</div>

					<div id="float_news"><img src="images/BLANK.jpg" title="BLANK" alt="BLANK"/></div>

			</div>

			<div id="clear"></div>
		</div>

		<footer id="footer">GreeD Team. All rights reserved © 2011.<!--Футер!--></footer>

 	</body>

</html>
css-ку сами исправите?
 

WHITEMAN23

Member
Регистрация
20.08.2011
Сообщения
14
Спасибо motek. Пытаюсь переделать как вы сказали, но пока получаеться только так.
Код:
<!DOCTYPE html>
     <html>
        <head>

                <meta charset="utf-8"/>

                <title>TeaM GreeD</title>

                <link href="css/common.css"  rel="stylesheet" type="text/css"/>

                <!--[if IE]>

                <link href="ie.css" rel="stylesheet" type="text/css"/>

                <![endif]-->

        </head>

        <body>
                <header id="header">

                        <a href="javascript:void(0);" title="logo"><img src="images/logo.jpg" alt="logo" title="logo"/></a>
					<div id="menu">
                        <ul>

                                <li><a href="javascript:void(0);" title="Главная" class="on">Главная</a></li>

                                <li><a href="javascript:void(0);" title="О нас">О нас</a>

                                        <ul>

                                                <li><a href="ustav.html" title="Устав">Устав</a></li>

                                                <li><a href="sostav.html" title="Состав клана">Состав клана</a></li>

                                                <li><a href="vstuplenie.html" title="Вступление в клан">Вступление в клан</a></li>

                                        </ul>

                                </li>

                                <li><a href="javascript:void(0);" title="Наши проекты">Наши проекты</a>

                                        <ul>

                                                <li><a href="tournament.html" title="GreeD Tournament">GreeD Tournament</a></li>

                                                <li><a href="serial.html" title="Сериал Миротворцы">Сериал Миротворцы</a></li>

                                                <li><a href="club.html" title="GreeD Club">GreeD Club</a></li>

                                        </ul>

                                </li>

                                <li id="forum"><a href="javascript:void(0);" title="Форум">Форум</a></li>       

                        </ul>
					</div>
                </header>

                <div id="container"> <!--Регулирует размеры по ширине!-->
					<div id="right">	<!--Групируем 3 блока справа и прижимаем их!-->
                        <div id="lcabinet">Тут будет Ваш личный кабинет</div> <!--Хочу сделать личный кабинет но незнаю как!-->
                        <div id="teamspeak">TeamSpeak
                                <iframe src="http://cache.www.gametracker.com/components/html0/?                                                        host=89.20.147.143:10140&bgColor=636467&fontColor=000000&titleBgColor=D7D7D7&titleColor=000000                                                          &borderColor=1F1F1F&linkColor=E3751E&borderLinkColor=119BCF&showMap=0
&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=240" 
frameborder="0" scrolling="no" width="240" height="388"></iframe>
                        </div>

                        <div id="server_status">Тут будет статус Нашего сервера</div>
					</div>
                        <div id="left">	

                                        <div id="v_centre">В центре внимания</div> <!--Это просто надпись и нужен ли под неё блок!-->

                                        <div id="float_news"><img src="images/BLANK.jpg" title="BLANK" alt="BLANK"/></div> <!--Здесь хотелось бы видеть слайдшоу новостей!-->
										<div id="news">А тут будут все новости</div>	<!--Тут идет просто текст с новостями!-->
                        </div>

                        <div id="clear"></div>
                </div>

                <footer id="footer">GreeD Team. All rights reserved © 2011.<!--Футер!--></footer>

        </body>

</html>
Код:
html, body{
	margin:0; 
}
html{
	font:10px verdana, geneva, sans-serif;	/*Задаем гарнитуру и размер шрифта*/
	background:#ececec;	/*Задаем фоновое изображение*/
	background-image: -moz-linear-gradient(top, #333333, #ececec); /* Firefox 3.6 */ 
	background-image: -webkit-linear-gradient(#333333, #ececec); /* Safari & Chrome */ 
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#ececec'); /* IE6 & IE7 */ 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#ececec')"; /* IE8 */ 	
}
body{
	margin:0;       /*Убираем отступы*/
		
}
#container{
	height:2500px;
	width:1000px;	/*Задаем ширину основного контейнера*/
	margin:auto;    /*Центрируем*/
	background:#666;
}
#right{
	float:right;
	width:250px;
}
#lcabinet{
	float:right;
	width:240px;
	height:300px;
	background:#333;
	margin-bottom:10px;
}
#teamspeak{
	float:right;
	width:240px;
	height:410px;
	background:#333;
	margin-bottom:10px;
}
#server_status{
	float:right;
	width:240px;
	height:410px;
	color:#fff;
	background:#333;
	margin-bottom:10px;
}
#left{
	float:left;	
	width:750px;			
	height:2000px;			
}
#v_centre{
	margin:auto;
	width:700px;
	font:14px Myriad Pro, geneva, sans-serif;
	color:#fff;
}
#float_news{
	height:260px;
	width:710px;
	margin:auto;
	margin-bottom:10px;
}
#news{
	margin:auto;
	width:700px;
	height:2200px;
	background:#fff;
	padding:0 0 0 10px;
}
#clear{				/*Блок-отступ между контентом и футером*/
	height:20px;
	clear:both;
}
#footer{
	width:1000px;
	overflow:hidden;
	position:relative;
	height:30px;
	background:#000;
	color:#fff;
	margin:auto;
}
#header{
	background:url(../images/header_repeat.jpg) repeat-x;
	left:0;
	top:0;
	height:39px;
	margin:auto;
}
#logo{
	float:left;
	margin:0 0 0 150px;
	border:0;

}
#menu{
	float:right;
	height:39px;
	margin:0 345px 0 0;
	font:12px Myriad Pro, geneva, sans-serif;
}
#menu ul{
	list-style:none;
	margin:0;
	padding:0;
}
#menu li {
	float:left;
	position:relative;
	border-left:1px solid #333;
}
.on{
	background:url(../images/header_repeat_dark.jpg) repeat-x;
}
#menu li a{
	display:inline-block;
	height:39px;
	line-height:39px;
	padding:0 20px;
	color:#fff;
	text-decoration:none;
}
#menu li a:hover{
	background:url(../images/header_repeat_dark.jpg) repeat-x;
}
#menu li ul{
	display:none;
	position:absolute;
	left:0;
	border-right:1px solid #333;
}
#menu li:hover ul{
	display: block;
}
#menu li li{
	float:none;
}
#menu li li a{
	display:block;
	background:#666;
	white-space:nowrap;
}
#menu li li a:hover{
	background:#333;
}
#forum{
	border-right:1px solid #333;
}
У меня сайчас проблемы с позиционированием логотипа и меню. Пока буду думать дальше. Всётаки не удержался и добавил пару дивов(
 

WHITEMAN23

Member
Регистрация
20.08.2011
Сообщения
14
НУ так как решить вопрос с шапкой
 

WHITEMAN23

Member
Регистрация
20.08.2011
Сообщения
14
Передалал все, решил вопрос с шапокой НО сейчас неработает в IE http://teamgreed.ru.swteh.ru
Помогите Пожайлуйста хочу уже выложить, но с таким IE никак. Да и охото чтобы все было на html5 (на html4.01 работало норм). Скрипт для IE вставил.
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
Передалал все, решил вопрос с шапокой НО сейчас неработает в IE http://teamgreed.ru.swteh.ru
Помогите Пожайлуйста хочу уже выложить, но с таким IE никак. Да и охото чтобы все было на html5 (на html4.01 работало норм). Скрипт для IE вставил.
тестировал только в ИЕ9 - все работает...(опера,хром,сафари и ф-ф тоже работает)

Код:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<title>TeaM GreeD</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<div id="globl_wrap">

	<header id="header">
		<a href="javascript:void(0);" title="logo" id="logo"><img src="http://teamgreed.ru/images/logo.jpg" alt="logo" title="logo"/></a>
		<ul id="menu">
			<li  class="on"><a href="javascript:void(0);" title="Главная">Главная</a></li>
                        <li><a href="javascript:void(0);" title="О нас">О нас</a>
                        	<ul>
		                        <li><a href="ustav.html" title="Устав" >Устав</a></li>
		                        <li><a href="sostav.html" title="Состав клана">Состав клана</a></li>
		                        <li><a href="vstuplenie.html" title="Вступление в клан">Вступление в клан</a></li>
                                </ul>
                        </li>
                        <li><a href="javascript:void(0);" title="Наши проекты">Наши проекты</a>
                                <ul>
                                        <li><a href="tournament.html" title="GreeD Tournament">GreeD Tournament</a></li>
                                        <li><a href="serial.html" title="Сериал Миротворцы">Сериал Миротворцы</a></li>
                                        <li><a href="club.html" title="GreeD Club">GreeD Club</a></li>
                                </ul>
                         </li>
                         <li id="forum"><a href="http://bf.teamforum.ru" title="Форум">Форум</a></li>       
		</ul>
	</header><!-- #header-->

	<section id="middle">

		<div id="container">
			<span>В центре внимания</span>
			<div id="float_news"><img src="http://teamgreed.ru/images/BLANK.jpg" title="BLANK" alt="BLANK"/></div>
			<div id="content">
				<div class="text_news">
					<div class="hr"></div>
					<h2>С днем рождения MeTaLoLoM.</h2>
					<div class="news_pic"><img src="http://teamgreed.ru/images/Tort.jpg" alt="Tort" title="Tort"/></div>
					<p>Саня, поздравляю тебя с днем рождения. Желаю тебе успехов во всех начинаниях, чтобы ты получал удовольствие 
					от жизни и чтобы такую кучу денег ты получал не только в виде торта на день рождения</p> 
					<a class="text_link" href="javascript:void(0);" title="Новость3"> Читать далее </a>
				</div>
				<div class="text_news">
					<div class="hr"></div>
					<h2>Миротворцы. Эпизод 2.</h2>
					<div class="news_pic"><img src="http://teamgreed.ru/images/Mir.jpg" alt="mir" title="mir"/></div>
					<p>Во всю кипит работа над второй серией «Миротворцев».  Сейчас перешли к самой сложной части, снятию сцен битв 
					и ролика к сериалу. Если Вы хотите поучаствовать в съёмках, то предлагайте удобный для вас день на форуме или 
					пишите мне в ICQ 629-366-454. (особенно не хватает людей для массовых сцен и звукорежиссера).</p> 
					<a class="text_link" href="javascript:void(0);" title="Новость1"> Читать далее >></a>
				</div>
				<div class="text_news">
					<div class="hr"></div>
					<h2>Новобранцы.</h2>
					<div class="news_pic"><img src="http://teamgreed.ru/images/Sam.jpg" alt="mir" title="mir"/></div>
					<p>Наш состав пополнился новыми бойцами. На службу были призваны miha-sh (Михаил, 23 года, Брянская область гор. Клинцы), 
					SAV (Андрей , 31 года, Брянская область гор. Клинцы) и MSoul (Максим, 24 года, город Самара).</p> 
					<a class="text_link" href="javascript:void(0);" title="Новость1"> Читать далее >></a>
				</div>
			</div><!-- #content-->
		</div><!-- #container-->

		<aside id="sideRight">
			<div id="teamspeak">TeamSpeak
				<iframe src="http://cache.www.gametracker.com/components/html0/? host=89.20.147.143:10140& amp;bgColor=636467&amp;fontColor=000000&amp;titleBgColor=D7D7D7&amp;titleColor=000000                                                      &borderColor=1F1F1F&linkColor=E3751E&borderLinkColor=119BCF&showMap=0
			&amp;currentPlayersHeight=200&amp;showCurrPlayers=1&amp;showTopPlayers=0&amp;showBlogs=0&amp;width=240" 
			frameborder="0" scrolling="no" width="240" height="388"></iframe>
			</div>
		</aside><!-- #sideRight -->

	</section><!-- #middle-->
	<div id="clear"></div>

	<footer id="footer"><p>GreeD Team. All rights reserved © 2011.</p></footer><!-- #footer -->

</div><!-- #globl_wrap -->

</body>
</html>
вот css-ка:

Код:
* {
	margin: 0;
	padding: 0;
}
header, nav, section, article, aside, footer, div, span {
	display: block;
}
html{
	background:#ececec;	/*Задаем фоновое изображение*/
	background-image: -moz-linear-gradient(top, #333333, #ececec); /* Firefox 3.6 */ 
	background-image: -webkit-linear-gradient(#333333, #ececec); /* Safari & Chrome */ 
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#ececec'); /* IE6 & IE7 */ 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#ececec')"; /* IE8 */
}
body{
	font:12px verdana, geneva, sans-serif;
}
a {
	
	outline: none;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}

img {
	border: none;
}
ul {
	list-style:none;
}
div#globl_wrap {
	width: 1000px;
	margin: 0 auto;
	border: 5px solid #333333;
}
h2 {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin: 10px 0;
}
.hr {
	clear: both;	
	width: 80%;
	border-bottom: 1px solid #000000;
	margin: 10px auto;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
	background: url(http://teamgreed.ru/images/header_repeat.jpg) repeat-x;
	height: 39px;
}
#header a#logo {
	margin-left: 50px;
	float:left;
}
#header ul#menu {
	float:right;
	height:39px;
	margin:0 250px 0 0;
	font:12px;

}
#header ul#menu li {
	float:left;
	position:relative;
	border-left:1px solid #333;
}
#header .on {
	background:url(http://teamgreed.ru/images/header_repeat_dark.jpg) repeat-x;
}
#header ul#menu li a {
	display:inline-block;
	height:39px;
	line-height:39px;
	padding:0 20px;
	color:#fff;
}
#header ul#menu li a:hover {
	background:url(http://teamgreed.ru/images/header_repeat_dark.jpg) repeat-x;
}
#header ul#menu li ul {
	display:none;
	position:absolute;
	left:0;
	border-right:1px solid #333;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
#header ul#menu li:hover ul {
	display: block;
	z-index: 2;
}
#header ul#menu li ul li {
	float:none;
}
#header #menu li ul li a {
	display:block;
	background:#666;
	white-space:nowrap;
}
ul#menu li ul li a:hover {
	background:#333;
}
#header #forum {
	border-right:1px solid #333;
}



/* Middle
-----------------------------------------------------------------------------*/
#middle {
	border-right: 250px solid #666666;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

div#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
div#container span {
	color: #FFFFFF;
    	font: 14px verdana, geneva, sans-serif;
    	float: left;
	margin-left: 40px;
}
div#container div#float_news {
	width: 740px;
	margin-left: 5px;
}


/* Content
----------------------------------------------------------------------------*/
div#content {
	padding: 0 20px;
	background: #ececec;
	width: 740px;
    	margin: auto;
	padding: 10px 0 0 10px;
}
div#content div.text_news {
	overflow: hidden;
}
div#content div.text_news div.news_pic {
	width: 500px;
	
	margin: 0px auto 10px auto;
}
div#content div.text_news p {
	padding: 10px;
}
div#content div.text_news a.text_link {
	font-size: 10px;
	float: right;
	margin: 0px 75px 10px 0px;
}


/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
	float: right;
	margin-right: -250px;
	width: 250px;
	position: relative;
	background: #666666;
}
#teamspeak {
	float:right;
	width:240px;
	height:410px;
	background:#333333;
	margin-bottom:10px;
	margin-right:5px;
}

/* Footer
-----------------------------------------------------------------------------*/
#clear{				
	height:20px;
	clear:both;
	background:#333333;
}
#footer {
	height: 30px;
	background:#000000;
}
#footer p {
	color: #ffffff;
	padding: 5px 0px 5px 25px;
}
валидатор ругается на Ваш фрейм, а так вроде косяков нет...

зы.не заметил темы в линчевальне...рано Вам туда еще :biggrin:
 

WHITEMAN23

Member
Регистрация
20.08.2011
Сообщения
14
В линчевальне тему создал, чтобы быстрее двигаться. Да и домен зря что ли купил)
Большое спасибо motek. Сейчас буду разбираться в вашей css.

Такой вопрос. Можно ли в вашем коде для остальных страниц использовать фиксированную высоту, т.е.
Код:
div#news_content {
        padding: 0 20px;
        background: #ececec;
        width: 740px;
        margin: auto;
        padding: 10px 0 0 10px;
        height:1000px;
}

div#news_container{
        width: 100%;
        float: left;
        overflow: hidden;
	height:1000px;
}
Т.е. я просто переименовал для др страниц 2 блока , задал им те же свойства + высоту. Вообщем потом выложу на сайт
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
В линчевальне тему создал, чтобы быстрее двигаться. Да и домен зря что ли купил)
Большое спасибо motek. Сейчас буду разбираться в вашей css.

Такой вопрос. Можно ли в вашем коде для остальных страниц использовать фиксированную высоту, т.е.
Код:
div#news_content {
        padding: 0 20px;
        background: #ececec;
        width: 740px;
        margin: auto;
        padding: 10px 0 0 10px;
        height:1000px;
}

div#news_container{
        width: 100%;
        float: left;
        overflow: hidden;
	height:1000px;
}
Т.е. я просто переименовал для др страниц 2 блока , задал им те же свойства + высоту. Вообщем потом выложу на сайт

фиксированная высота применяется,только если Вы знаете размеры всех элементов...в Вашем случае статьи могут быть разного размера - отсюда разная высота текста,поэтому для родительского дива лучше применить overflow: hidden; - тогда он будет тянутся до конца контента....
 
Статус
Закрыто для дальнейших ответов.
Верх Низ