Jump to content
  • 0

Помощь по CSS

ven000mus

Asked by ven000mus,

 Share

Question

ven000mus Explorer

ven000mus

Posted
Posted 

/* Сделано ven000mus'ом | Автор: ven000mus | Сайт: http://meetastudio.ru */

/*—Сама страница—*/
body{
background: #ffffff url("../images/background.png");
border: 2px dashed #000;
position: relative;
width: 1000px;
margin-left: 500px;
} /* Фон сайта */

a:link{
text-decoration:underline;
color:#D13702;
} /* Формат ссылок */

a:active{
text-decoration:underline;
color:#D13702;
} /* Формат активных ссылок */

a:visited{
text-decoration:underline;
color:#D13702;
} /* Формат посещенных ссылок */

a:hover{
text-decoration:none;
color:#FF0000;
} /* Формат при наведение на ссылку */

/*—Логотип—*/
.logo{
border: 1px dotted #000;
background: url("../images/logo.png");
width: 650px;
height: 150px;
margin-left: 180px;
}

/*—Форма входа—*/
.loginform{
border: 1px dotted #000;
background: #fff;
width: 500px;
height: 300px;
margin-left: 260px;
margin-top: 10px;
}

/*—Кнопка регистрации—*/
a.regbutton:link{
border: 1px dotted #000;
font-size: 30px;
text-decoration: none;
padding: 1px;
}

a.regbutton:active{
border: 1px dotted #000;
font-size: 30px;
text-decoration: none;
padding: 1px;
}

a.regbutton:visited{
border: 1px dotted #000;
font-size: 30px;
text-decoration: none;
padding: 1px;
}

a.regbutton:hover{
border: 1px dotted #000;
font-size: 30px;
text-decoration: underline;
padding: 1px;
}

/*—Новости—*/
.news{
border: 1px dotted #000;
background: #fff;
width: 650px;
height: 150px;

}

/*—Подвал—*/
.footer{
border: 1px dotted #000;
background: #fff;
width: 650px;
height: 50px;
margin-top: 50px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}
<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
</head>
<body>
{AJAX}
<div class="logo"></div>
<div class="loginform">{login}</div>
<div class="news">Тут будут новости сайта</div>
<div class="footer">Тут будет подвал сайта</div>
</body>
</html>

Я учусь CSS. Так что сильно не ругать.

Указал код вверху.

Вопрос следующий. На сайте будет 4 блока, которые должны находиться по середине экрана на любом браузере и в любом разширение.

Собственно в чем я допустил ошибку. Мне приходиться на глаз каждый блок выравнить в центр ;( Что родителя, что детей.

Вот картинка www.ven000mus.ucoz.ru/1.png

Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted

Подумав, решил проблемму так:

<div align="center">

<div class="logo"></div>

<div class="loginform">{login}</div>

<div class="news">Тут будут новости сайта</div>

<div class="footer">Тут будет подвал сайта</div>

</div>

А в CSS у тега боди оставил лишь фон.

Теперь 2ой вопрос

/*—Логотип—*/

.logo{

border: 1px dotted #000;

background: url("../images/logo.png");

width: 650px;

height: 150px;

}

<div class="logo"></div>

Как дать ссылкуна весь блок. Так как в блок вбита картинка.

Все, все, все.

Проблему решил ;)

/*—Логотип—*/

a.logo:link{

border: 1px dotted #000;

display:block;

width:650px;

height:150px;

background: url("../images/logo.png");

margin:0 auto;}

<div><a class="logo" href="/"></a></div>

Link to comment
Share on other sites
  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted

Всем привет. Опять нужна ваша чутка маленькая помощь.

http://s007.radikal.ru/i300/1111/fb/701888f8e1b6.png - скрин

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}
<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
</head>
<body>
{AJAX}
<div align="center" class="conteiner">
<div><a class="logo" href="/"></a></div>
<div class="loginform">{login}</div>
<div class="news">Тут будут новости сайта</div>
<div align="right" class="footer">Накалякал <a class="ven000mus" href="/"><s>ven000mus</s></a>, Ол райтс ресёрвед </div>
</div>
</body>
</html>

/* Сделано ven000mus'ом | Автор: ven000mus | Сайт: http://meetastudio.ru */

/*—Сама страница—*/
html, body{
background: #DCE1ED;
height: 100%;
margin: 0px;
padding: 0px;
}

a:link{
text-decoration:underline;
color:#D13702;
} /* Формат ссылок */

a:active{
text-decoration:underline;
color:#D13702;
} /* Формат активных ссылок */

a:visited{
text-decoration:underline;
color:#D13702;
} /* Формат посещенных ссылок */

a:hover{
text-decoration:none;
color:#FF0000;
} /* Формат при наведение на ссылку */

/*—Главный контейнер—*/
.conteiner{
margin: 0 auto;
width: 1000px;
min-height: 100%;
}

/*—Логотип—*/
a.logo:link{
display:block;
width:650px;
height:80px;
margin: 0px;
padding: 0px;
background: url("../images/logo.png");
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 0px 0px 15px 15px;
}

a.logo:active{
display:block;
width:650px;
height:80px;
margin: 0px;
padding: 0px;
background: url("../images/logo.png");
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 0px 0px 15px 15px;
}

a.logo:visited{
display:block;
width:650px;
height:80px;
margin: 0px;
padding: 0px;
background: url("../images/logo.png");
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 0px 0px 15px 15px;
}

a.logo:hover{
display:block;
width:650px;
height:80px;
margin: 0px;
padding: 0px;
background: url("../images/logo.png");
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 0px 0px 15px 15px;
}


/*—Форма входа Фон—*/
.loginform{
background: url(../images/login-bg.png) no-repeat;
width: 610px;
height: 458px;
margin-top: -50px;
padding: 0px;
}

/*—Стиль Логина—*/
.form-login  {
width: 200px;
padding: 10px 4px 6px 3px;
border: 1px solid #DCE1ED;
background: url(../images/login-box.png) no-repeat;
font-size: 16px;
color: #fff;
font-weight: 700;
}

/*—Стиль Пароля—*/
.form-pass  {
width: 200px;
padding: 10px 4px 6px 3px;
border: 1px solid #DCE1ED;
background: url(../images/login-box.png) no-repeat;
font-size: 16px;
color: #fff;
font-weight: 700;
}


/*—Кнопка регистрации—*/
a.regbutton:link{
position: absolute;
text-align: center;
margin: 60px 0 0px 150px;
font-size: 30px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.regbutton:active{
position: absolute;
text-align: center;
margin: 60px 0 0px 150px;
font-size: 30px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.regbutton:visited{
position: absolute;
text-align: center;
margin: 60px 0 0px 150px;
font-size: 30px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.regbutton:hover{
position: absolute;
text-align: center;
margin: 60px 0 0px 150px;
font-size: 30px;
text-decoration: underline;
color: #fff;
font-family: Impact;
}

/*—Кнопка Забыли пароль—*/
a.lostpass:link{
font-size: 12px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.lostpass:active{
font-size: 12px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.lostpass:visited{
font-size: 12px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.lostpass:hover{
font-size: 12px;
text-decoration: underline;
color: #fff;
font-family: Impact;
}

/*—Кнопка Чужой компьютер—*/
.notmycomp{
font-size: 12px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

/*—Кнопка Войти—*/
.enterbutton{
position: absolute;
width: 103px;
height: 42px;
padding: 10px 4px 6px 3px;
margin-left: -100px;
margin-top: 140px;
border: 0px solid #DCE1ED;
background: url(../images/enterbutton.png);
}

/*—Новости—*/
.news{
background: url(../images/news.png);
color: #fff;
width: 500px;
height: 150px;
margin: 0px;
padding: 0px;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 15px 15px 15px 15px;
}

/*—Подвал—*/
.footer{
margin-top: 80px;
margin-right: 5px;
font-size: 11px;
font-family: Impact;
}

/*—Ссылка ven000mus—*/
a.ven000mus:link{
text-decoration: none;
color: #000;
}

a.ven000mus:active{
text-decoration: none;
color: #000;
}

a.ven000mus:visited{
text-decoration: none;
color: #000;
}

a.ven000mus:hover{
text-decoration: underline;
color: #000;
}


[not-group=5]
	<ul>
			<a href="{profile-link}">
				<img src="{foto}" alt="{login}" />
				<b> </b>
			</a>
			<a id="logbtn" href="#"><b>{login}</b></a>
			<a href="{logout-link}">Выход</a>
				<div>
					<ul>
		[admin-link]<a href="{admin-link}" target="_blank"><b>Админпанель</b></a>[/admin-link]
					<a href="{profile-link}">Мой профиль</a>
					<a href="{favorites-link}">Мои закладки ({favorite-count})</a>
					<a href="{newposts-link}">Непрочитанное</a>
					<a href="/?do=lastcomments">Последние комментарии</a>
					<a href="{stats-link}">Статистика</a>
				</ul>
			</div>
		<a href="{addnews-link}">Добавить новость</a>
		<a href="{pm-link}">{new-pm}</a><a href="{pm-link}">Сообщений</a>
	</ul>
[/not-group]
[group=5]
	<ul>
				<a class="regbutton" href="{registration-link}">Зарегистрироваться</a>
			<form method="post" action="">
				<div>
					<ul>
						<input class="form-login" type="text" name="login_name" id="login_name" />
						<input class="form-pass" type="password" name="login_password" id="login_password" />
						<a class="lostpass" href="{lostpassword-link}">Забыли пароль?</a></label>
						<input type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label class="notmycomp" for="login_not_save"> Чужой компьютер</label>
						<button class="enterbutton" onclick="submit();" type="submit" title="Войти"></button>
					</ul>
					<input name="login" type="hidden" id="login" value="submit" />
				</div>
			</form>
	</ul>
[/group]

Нужна помощь в том чтобы выставить эти формы логина и пароля, правильно... Помогите найти ошибку... Заранее благодарен.

Link to comment
Share on other sites
  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted

Не хочу показаться грубым. Но смотреть надо внимательней...

Отправлено 05 ноября 2011 - 23:09

Всем привет. Опять нужна ваша чутка маленькая помощь.

http://s007.radikal....01888f8e1b6.png - скрин

СКРИН - Это ссылка

Link to comment
Share on other sites
  • 0
shuk08 Explorer

shuk08

Posted
Posted

В вашем случае точно также как и для .enterbutton нужно для соответствующих полей указать position: absolute и с помощью left и top сдвинуть в нужное место, хотя было бы проще сделать div, который бы позиционировался указанным способом в нужном месте , а в нем с попмощью margin:auto и vertical-align: Выровнять все кнопки по середине или как-то иначе.

Также советую повторяющиеся строки правил группировать для нескольких правил, вот так нужно писать в Вашем случае с логтоипом, а уже в отдельные правила выделять то, что отличается, тогда Вам будет легче помочь людям со стороны:

a.logo:hover,a.logo:visiteda,.logo:active{

display:block;

width:650px;

height:80px;

margin: 0px;

padding: 0px;

background: url("../images/logo.png");

border-radius: 0px 0px 15px 15px;

-moz-border-radius: 0px 0px 15px 15px;

-webkit-border-bottom-left-radius: 15px;

-webkit-border-bottom-right-radius: 15px;

-khtml-border-radius: 0px 0px 15px 15px;

}

Link to comment
Share on other sites
  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted

как должно быть, а не как есть!

читать надо внимательней

что и где должно стоять

Извини за наезд ;)

Вот сделал так как должно быть.

Как должно БЫТЬ

Это индекс


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}
<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
</head>
<body>
{AJAX}
<div align="center" class="conteiner">
<div><a class="logo" href="/"></a></div>
<div class="loginform">{login}</div>
<div class="news">Тут будут новости сайта</div>
<div align="right" class="footer">Накалякал <a class="ven000mus" href="/"><s>ven000mus</s></a>, Ол райтс ресёрвед </div>
</div>
</body>
</html>

Это CSS


/* Сделано ven000mus'ом | Автор: ven000mus | Сайт: http://meetastudio.ru */

/*—Сама страница—*/
html, body{
background: #DCE1ED;
height: 100%;
margin: 0px;
padding: 0px;
}

a:link{
text-decoration:underline;
color:#D13702;
} /* Формат ссылок */

a:active{
text-decoration:underline;
color:#D13702;
} /* Формат активных ссылок */

a:visited{
text-decoration:underline;
color:#D13702;
} /* Формат посещенных ссылок */

a:hover{
text-decoration:none;
color:#FF0000;
} /* Формат при наведение на ссылку */

/*—Главный контейнер—*/
.conteiner{
margin: 0 auto;
width: 1000px;
min-height: 100%;
}

/*—Логотип—*/
a.logo:link, a.logo:active, a.logo:visited, a.logo:hover{
display:block;
width:650px;
height:80px;
margin: 0px;
padding: 0px;
background: url("../images/logo.png");
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 0px 0px 15px 15px;
}

/*—Форма входа Фон—*/
.loginform{
background: url(../images/login-bg.png) no-repeat;
width: 610px;
height: 458px;
margin-top: -50px;
padding: 0px;
}

/*—Стиль Логина—*/
.form-login  {
width: 200px;
padding: 10px 4px 6px 3px;
border: 1px solid #DCE1ED;
background: url(../images/login-box.png) no-repeat;
font-size: 16px;
color: #fff;
font-weight: 700;
}

/*—Стиль Пароля—*/
.form-pass  {
width: 200px;
padding: 10px 4px 6px 3px;
border: 1px solid #DCE1ED;
background: url(../images/login-box.png) no-repeat;
font-size: 16px;
color: #fff;
font-weight: 700;
}


/*—Кнопка регистрации—*/
a.regbutton:link, a.regbutton:active, a.regbutton:visited{
position: absolute;
text-align: center;
margin: 60px 0 0px 150px;
font-size: 30px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.regbutton:hover{
position: absolute;
text-align: center;
margin: 60px 0 0px 150px;
font-size: 30px;
text-decoration: underline;
color: #fff;
font-family: Impact;
}

/*—Кнопка Забыли пароль—*/
a.lostpass:link, a.lostpass:active, a.lostpass:visited{
font-size: 12px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.lostpass:hover{
font-size: 12px;
text-decoration: underline;
color: #fff;
font-family: Impact;
}

/*—Кнопка Чужой компьютер—*/
.notmycomp{
font-size: 12px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

/*—Кнопка Войти—*/
.enterbutton{
position: absolute;
width: 103px;
height: 42px;
padding: 10px 4px 6px 3px;
margin-left: -100px;
margin-top: 140px;
border: 0px solid #DCE1ED;
background: url(../images/enterbutton.png);
}

/*—Новости—*/
.news{
background: url(../images/news.png);
color: #fff;
width: 500px;
height: 150px;
margin: 0px;
padding: 0px;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 15px 15px 15px 15px;
}

/*—Подвал—*/
.footer{
margin-top: 80px;
margin-right: 5px;
font-size: 11px;
font-family: Impact;
}

/*—Ссылка ven000mus—*/
a.ven000mus:link, a.ven000mus:active, a.ven000mus:visited{
text-decoration: none;
color: #000;
}

a.ven000mus:hover{
text-decoration: underline;
color: #000;
}

Это форма входа


[not-group=5]
	<ul>
			<a href="{profile-link}">
				<img src="{foto}" alt="{login}" />
				<b> </b>
			</a>
			<a id="logbtn" href="#"><b>{login}</b></a>
			<a href="{logout-link}">Выход</a>
				<div>
					<ul>
		[admin-link]<a href="{admin-link}" target="_blank"><b>Админпанель</b></a>[/admin-link]
					<a href="{profile-link}">Мой профиль</a>
					<a href="{favorites-link}">Мои закладки ({favorite-count})</a>
					<a href="{newposts-link}">Непрочитанное</a>
					<a href="/?do=lastcomments">Последние комментарии</a>
					<a href="{stats-link}">Статистика</a>
				</ul>
			</div>
		<a href="{addnews-link}">Добавить новость</a>
		<a href="{pm-link}">{new-pm}</a><a href="{pm-link}">Сообщений</a>
	</ul>
[/not-group]
[group=5]
	<ul>
				<a class="regbutton" href="{registration-link}">Зарегистрироваться</a>
			<form method="post" action="">
				<div>
					<ul>
						<input class="form-login" type="text" name="login_name" id="login_name" />
						<input class="form-pass" type="password" name="login_password" id="login_password" /><br />
						<a class="lostpass" href="{lostpassword-link}">Забыли пароль?</a></label>
						<input type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label class="notmycomp" for="login_not_save"> Чужой компьютер</label>
						<button class="enterbutton" onclick="submit();" type="submit" title="Войти"></button>
					</ul>
					<input name="login" type="hidden" id="login" value="submit" />
				</div>
			</form>
	</ul>
[/group]

Link to comment
Share on other sites
  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted (edited)

Сам разобрался.

p.s. Спасибо тому кто мне репутацию в минус вогнал. Вообще то я писал в разделе для новичков. Раз писал, значит не знаю решения своей проблемы. Но все же сам разобрался, а смысла снижения мне шкалы репутации не вижу, знал бы что да как, даже бы и не обратился.

Edited by ven000mus
  • Like 1
Link to comment
Share on other sites
  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted

Проверив все что сделал с индекс страницей во всех браузерах на разширение 1920*1080

Получил не оень хороший ответ от двух браузеров. Это Мозила и Хром ;(

Подскажите пожалуйста, где упустил какое то правило или сделал ошибку ;( Очень нужна Ваша помощь.

И что странно, на работе на мониторе с разширением 1024*768 в Google Chrome все было нормально, так как должно быть, а дома на 1920*1080 тоже в Google Chrome, все не так ;(

Скрины:

Google Chrome

IE 9

Firefox

Opera

Safari

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}
<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
</head>
<body>
{AJAX}
<div align="center" class="conteiner">
<div><a class="logo" href="/"></a></div>
<div class="loginform">{login}</div>
<div class="news">Тут будут новости сайта</div>
<div align="right" class="footer">Накалякал <a class="ven000mus" href="/"><s>ven000mus</s></a>, Ол райтс ресёрвед </div>
</div>
</body>
</html>

—

/* Сделано ven000mus'ом | Автор: ven000mus | Сайт: http://meetastudio.ru */

/*—Сама страница—*/
html, body{
background: #DCE1ED;
height: 100%;
margin: 0px;
padding: 0px;
}

a:link{
text-decoration:underline;
color:#D13702;
} /* Формат ссылок */

a:active{
text-decoration:underline;
color:#D13702;
} /* Формат активных ссылок */

a:visited{
text-decoration:underline;
color:#D13702;
} /* Формат посещенных ссылок */

a:hover{
text-decoration:none;
color:#FF0000;
} /* Формат при наведение на ссылку */

/*—Главный контейнер—*/
.conteiner{
margin: 0 auto;
width: 1000px;
min-height: 100%;
}

/*—Логотип—*/
a.logo:link, a.logo:active, a.logo:visited, a.logo:hover{
display:block;
width:650px;
height:80px;
margin: 0px;
padding: 0px;
background: url("../images/logo.png");
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 0px 0px 15px 15px;
}

/*—Форма входа Фон—*/
.loginform{
background: url(../images/login-bg.png) no-repeat;
width: 610px;
height: 458px;
margin-top: -50px;
padding: 0px;
}

/*—Стиль Логина—*/
.form-login  {
position: absolute;
margin-left: 70px;
margin-top: 140px;
width: 300px;
height: 30px;
padding: 10px 4px 6px 3px;
border: 1px solid #DCE1ED;
background: #1E4F8A;
font-size: 16px;
color: #fff;
font-weight: 700;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius: 5px 5px 5px 5px;
}

/*—Стиль Пароля—*/
.form-pass  {
position: absolute;
margin-left: 70px;
margin-top: 220px;
width: 300px;
height: 30px;
padding: 10px 4px 6px 3px;
border: 1px solid #DCE1ED;
background: #1E4F8A;
font-size: 16px;
color: #fff;
font-weight: 700;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius: 5px 5px 5px 5px;
}


/*—Кнопка регистрации—*/
a.regbutton:link, a.regbutton:active, a.regbutton:visited{
position: absolute;
margin-left: 130px;
margin-top: 70px;
font-size: 30px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.regbutton:hover{
position: absolute;
margin-left: 130px;
margin-top: 70px;
font-size: 30px;
text-decoration: underline;
color: #fff;
font-family: Impact;
}

/*—Кнопка Забыли пароль—*/
a.lostpass:link, a.lostpass:active, a.lostpass:visited{
position: absolute;
margin-left: 70px;
margin-top: 280px;
font-size: 12px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

a.lostpass:hover{
position: absolute;
margin-left: 70px;
margin-top: 280px;
font-size: 12px;
text-decoration: underline;
color: #fff;
font-family: Impact;
}

/*—Кнопка Чужой компьютер—*/
.notmycomp{
position: absolute;
margin-left: 280px;
margin-top: 280px;
font-size: 12px;
text-decoration: none;
color: #fff;
font-family: Impact;
}

.checkbox{
position: absolute;
margin-left: 265px;
margin-top: 280px;
}

/*—Кнопка Войти—*/
.enterbutton{
position: absolute;
margin-left: 275px;
margin-top: 330px;
width: 103px;
height: 42px;
padding: 10px 4px 6px 3px;
border: 0px solid #DCE1ED;
background: url(../images/enterbutton.png);
}

/*—Новости—*/
.news{
background: url(../images/news.png);
color: #fff;
width: 500px;
height: 150px;
margin: 0px;
padding: 0px;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius: 15px 15px 15px 15px;
}

/*—Подвал—*/
.footer{
margin-top: 80px;
margin-right: 5px;
font-size: 11px;
font-family: Impact;
}

/*—Ссылка ven000mus—*/
a.ven000mus:link, a.ven000mus:active, a.ven000mus:visited{
text-decoration: none;
color: #000;
}

a.ven000mus:hover{
text-decoration: underline;
color: #000;
}

—

[not-group=5]
	<ul>
			<a href="{profile-link}">
				<img src="{foto}" alt="{login}" />
				<b> </b>
			</a>
			<a id="logbtn" href="#"><b>{login}</b></a>
			<a href="{logout-link}">Выход</a>
				<div>
					<ul>
		[admin-link]<a href="{admin-link}" target="_blank"><b>Админпанель</b></a>[/admin-link]
					<a href="{profile-link}">Мой профиль</a>
					<a href="{favorites-link}">Мои закладки ({favorite-count})</a>
					<a href="{newposts-link}">Непрочитанное</a>
					<a href="/?do=lastcomments">Последние комментарии</a>
					<a href="{stats-link}">Статистика</a>
				</ul>
			</div>
		<a href="{addnews-link}">Добавить новость</a>
		<a href="{pm-link}">{new-pm}</a><a href="{pm-link}">Сообщений</a>
	</ul>
[/not-group]
[group=5]
	<ul>
				<a class="regbutton" href="{registration-link}">Зарегистрироваться</a>
			<form method="post" action="">
				<div>
					<ul>
						<input class="form-login" type="text" name="login_name" id="login_name" />
						<input class="form-pass" type="password" name="login_password" id="login_password" />
						<a class="lostpass" href="{lostpassword-link}">Забыли пароль?</a></label>
						<input class="checkbox" type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label class="notmycomp" for="login_not_save"> Чужой компьютер</label>
						<button class="enterbutton" onclick="submit();" type="submit" title="Войти"></button>
					</ul>
					<input name="login" type="hidden" id="login" value="submit" />
				</div>
			</form>
	</ul>
[/group]

Link to comment
Share on other sites
  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted

Добавил вот такие айди в css и вписал эти айди в див на всю форму входа.

#testoviy{
position: absolute;
margin-left: auto;
margin-top: auto;
}

Все встало так как надо. Но вопрос, правильно ли это?

Прошлые классы и правила не отменял, только добавил выше указанный айди.

Link to comment
Share on other sites
  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted

По-моему вы занимаетесь ерундой. Есть ощущение, что здесь можно обойтись и без позиционирования.

Может и так. Тогда приподнесите свой вариант, интересно.

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

По-моему вы занимаетесь ерундой. Есть ощущение, что здесь можно обойтись и без позиционирования.

Может и так. Тогда приподнесите свой вариант, интересно.

Примерная схема вашей формы http://jsfiddle.net/QFPAx/

Link to comment
Share on other sites
  • 0
ven000mus Explorer

ven000mus

Posted
  • Author
Posted

По-моему вы занимаетесь ерундой. Есть ощущение, что здесь можно обойтись и без позиционирования.

Может и так. Тогда приподнесите свой вариант, интересно.

Примерная схема вашей формы http://jsfiddle.net/QFPAx/

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept