Съезжает центр сайта

The Norb · July 16, 2013

Всем привет!)

У меня такая проблема: съезжает центр сайта влево. (причём в одном и том же браузере при одном и том же масштабе на разных компах по-разному, т.е. на одном всё отлично, на другом съезжает.)

Сейчас покажу в чём проблема:

Вот код самой страницы:


<?php
// вся процедура работает на сессиях. Именно в ней хранятся данные пользователя, пока он находится на сайте. Очень важно запустить их в самом начале странички!!!
session_start();
include ("bd.php");// файл bd.php должен быть в той же папке, что и все остальные, если это не так, то просто измените путь
if (isset($_GET['id'])) {$id =$_GET['id']; } //id "хозяина" странички
else
{ exit("Вы зашил на страницу без параметра!");} //если не указали id, то выдаем ошибку
if (!preg_match("|^[\d]+$|", $id)) {
exit("<p>Неверный формат запроса! Проверьте URL</p>");//если id не число, то выдаем ошибку
}
if (!empty($_SESSION['login']) and !empty($_SESSION['password']))
{
//если существует логин и пароль в сессиях, то проверяем, действительны ли они
$login = $_SESSION['login'];
$password = $_SESSION['password'];
$result2 = mysql_query("SELECT id FROM users WHERE login='$login' AND password='$password' AND activation='1'",$db);
$myrow2 = mysql_fetch_array($result2);
if (empty($myrow2['id']))
{
//Если не действительны (может мы удалили этого пользователя из базы за плохое поведение)
exit("Вход на эту страницу разрешен только зарегистрированным пользователям!");
}
}
else {
//Проверяем, зарегистрирован ли вошедший
exit("Вход на эту страницу разрешен только зарегистрированным пользователям!"); }
$result = mysql_query("SELECT * FROM users WHERE id='$id'",$db);
$myrow = mysql_fetch_array($result);//Извлекаем все данные пользователя с данным id
if (empty($myrow['login'])) { exit("Пользователя не существует! Возможно он был удален.");} //если такого не существует
?>
<HTML>
<HEAD>
<meta charset="UTF-8">
<title>Galaxy-wow | <?php echo $myrow['login']; ?></title>
<?php
include ('head.php');
?>
</HEAD>

<BODY>

<!--=== HEADER ===-->
<div class="center">
<img src="images/borders/border_top.png" valign="top">
<?php
include ('menu_with_exit.php');
?>
<img src="images/borders/border_bottom.png" valign="top">
</div>
<center>
<table>
<tr>
<td class="center_stretch">
<div class="padding">
<h2>Страница пользователя <a href="page.php?id=<?php echo $myrow['id']; ?>"><?php echo $myrow['login']; ?></a></h2>
<hr color="gray" style="width: 500px; margin-left: 0px;">
<?php
if ($myrow['login'] == $login) {
//Если страничка принадлежит вошедшему, то предлагаем изменить данные и выводим личные сообщения
print <<<HERE
<div class="my_page_container">
<div class="avatar_border">
<img alt='аватар' style="margin-top: 7px; margin-left: 7px;" src='$myrow[avatar]'>
</div>
<div class="login_border">
<p style="text-align: center; font-size: 20pt; margin-top: 15px;">
HERE;
echo $myrow['login'];
print <<<HERE
</p>
</div>
<br>
<br>
</div>
<div class="my_menu_container" style="margin-top: -18px;">
HERE;
include ('my_menu.php');
print <<<HERE
</div>
HERE;

}
else
{
//если страничка чужая, то выводим только некторые данные и форму для отправки личных сообщений
print <<<HERE
<div class="my_page_container">
<div class="avatar_border">
<img alt='аватар' style="margin-top: 7px; margin-left: 7px;" src='$myrow[avatar]'>
</div>
<div class="login_border">
<p style="text-align: center; font-size: 20pt; margin-top: 15px;">
HERE;
echo $myrow['login'];
print <<<HERE
</p>
<!-- spoiler -->
<a href="" class="spoiler_links"><p style="text-align: center; margin-top: 5px;">Отправить письмо</p></a>
<div class="spoiler_body">
<div style="text-align: left; margin-top: 50px; margin-left: -100px;">
	 <h2 style="padding-bottom: 5px;">Текст письма:</h2>
	 <form action='post.php?id=$_SESSION[id]' method='post'>
	 <textarea name='text' class="message"></textarea><br>
	 <input type='hidden' name='poluchatel' value='$myrow[login]'>
	 <input type='hidden' name='id' value='$myrow[id]'>
	 <input class="message_button" type='submit' name='submit' value=''>
	 </form>
</div>
</div>
<!-- spoiler -->
</div>
<br>
<br>
</div>
<div class="my_menu_container" style="margin-top: -18px;">
<input type="button" value="" class="my_page_button" onclick='location.href="page.php?id=$_SESSION[id]"'>
<input type="button" value="" class="my_accounts_button" onclick='location.href="accounts.php?id=$_SESSION[id]"'>
<input type="button" value="" class="post_button" onclick='location.href="mailbox.php?id=$_SESSION[id]"'>
<input type="button" value="" class="community_button" onclick='location.href="all_users.php?id=$_SESSION[id]"'>
<input type="button" value="" class="settings_button" onclick='location.href="settings.php?id=$_SESSION[id]"'>
</div>
HERE;
}
?>
</div>
</td>
</tr>
</table>
</center>
<!--=== CONTENT ===-->
<?php
include ("footer.php");
?>
</BODY>
</HTML>

И код стилей:

/*—————————-|
| General Style	 |
|—————————-*/
body{

background: #1a0a0b url(../images/background.png) no-repeat top center;
font-weight: 400;
font-size: 20px;
color: white;
overflow-y: scroll;
}

a {
color: #4893e4; /* Цвет обычной ссылки */
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
a:visited {
color: #4893e4; /* Цвет посещённой ссылки */
}
a:hover {
color: #fff; /* Цвет ссылки при наведении на нее курсора мыши */
text-decoration: none; /* Добавляем подчеркивание */
}
.reg_form {
width: 168px; /* Ширина поля с учетом padding */
height: 25px; /* Высота */
background: #dad7c5 url(../images/forms/reg_form.png) no-repeat; /* Фон */
padding: 0 10px; /* Поля */
border: none; /* Убираем рамку */
font-size: 18px; /* Размер текста */
color: white; /* Белые буквы */
line-height: 25px; /* Выравниваем по центру в IE */
}

.captcha_form {
width: 98px; /* Ширина поля с учетом padding */
height: 25px; /* Высота */
background: #dad7c5 url(../images/forms/captcha_form.png) no-repeat; /* Фон */
padding: 0 10px; /* Поля */
border: none; /* Убираем рамку */
font-size: 18px; /* Размер текста */
color: white; /* Белые буквы */
line-height: 25px; /* Выравниваем по центру в IE */
}

.form_font {
font: 12pt sans-serif;
color: #c3b615;
}

.center {
width: 1100px;
margin: 0 auto;
margin-top: 600px;
height: 54px;
background: #000 url(../images/content_background.png) repeat-y top center; /* Фон */
}

.center_index {
width: 1100px;
margin: 0 auto;
height: 70px;
background: #000 url(../images/content_background.png) repeat-y top center; /* Фон */
}

.center_stretch {
padding-top: 19px;
width: 1100px;
height: 100%;
background: #000 url(../images/content_background.png) repeat-y top center; /* Фон */
}

.center_1 {
width: 1100px;
height: 300px;
margin: 0 auto;
margin-top: 600px;
background: #000 url(../images/content_background.png) repeat-y top center; /* Фон */
}
.center_2 {
width: 1100px;
height: 1500px;
margin: 0 auto;
background: #000 url(../images/content_background.png) repeat-y top center; /* Фон */
}

.enter_padding {
margin-left: 900px;
}
.padding {
margin-left: 15px;
}

.footer {
width: 1100px;
height: 140px;
margin: 0 auto;
background: #000 url(../images/content_background.png) repeat-y top center; /* Фон */
}
.footer_txt {
width: 1100px;
height: 100px;
margin: 0 auto;
text-align: center;
}

.slider_container {
float: left;
width: 876px;
background: url(../images/borders/border_line_header.png) no-repeat right; /* Фон */
}
.enter_container {
margin-top: 30px;
margin-left: 20px;
float: left;
width: 204px;
}
.clear {
clear: both;
border: none;
}

.content_container {
float: left;
margin-left: 20px;
width: 650px;
}
.sidebar_container {
float: left;
width: 380px;
text-align: center;
padding-left: 50px;
}

.title {
font: 20pt sans-serif;
color: #c3b615;
}

.captcha_background {
width: 160px;
height: 60px;
background: url(../images/captcha_background.png) no-repeat; /* Фон */
}

.reg_container {
float: left;
width: 380px;
text-align: left;
padding-left: 50px;
}

.my_page_container {
float: left;
width: 835px;
}
.my_menu_container {
float: left;
width: 219px;
height: 256px;
padding-top: 25px;
padding-left: 27px;
background: url(../images/my_menu_background.png) no-repeat; /* Фон */
}
.avatar_border {
margin-top: 5px;
width: 104px;
height: 104px;
background: url(../images/borders/avatar_border.png) no-repeat; /* Фон */
float: left;
}
.avatar_border_in_mailbox {
margin-top: 5px;
width: 104px;
height: 104px;
background: url(../images/borders/avatar_border.png) no-repeat; /* Фон */
}

.avatar_border_in_settings {
margin-top: 5px;
width: 104px;
height: 104px;
background: url(../images/borders/avatar_border.png) no-repeat; /* Фон */
}

.login_border {
margin-top: -3px;
width: 320px;
height: 91px;
background: url(../images/borders/login_border.png) no-repeat; /* Фон */
float: left;
}

.user_info {
margin-top: -50px;
margin-left: 440px;
position: absolute;
height: 100px;
width: 400px;
}

.scroll-pane {
height: 570px;
overflow: auto;
float: left;
width: 200px;
}

.message {
margin-top: -3px;
width: 400px;
height: 200px;
background: url(../images/borders/message_border.png) no-repeat; /* Фон */
padding-top: 7px;
padding-left: 9px;
color: white;
border: none;
resize: none;
font-size: 13pt;
}

.forum_message {
margin-top: -3px;
width: 400px;
height: 50px;
background: url(../images/borders/forum_message_border.png) no-repeat; /* Фон */
padding-top: 7px;
padding-left: 9px;
color: white;
border: none;
resize: none;
font-size: 13pt;
}
.topic_title {
width: 500px; /* Ширина поля с учетом padding */
height: 32px; /* Высота */
background: #dad7c5 url(../images/borders/topic_title_border.png) no-repeat; /* Фон */
padding: 0 10px; /* Поля */
border: none; /* Убираем рамку */
font-size: 18px; /* Размер текста */
color: white; /* Белые буквы */
line-height: 25px; /* Выравниваем по центру в IE */
}

.mailbox_textarea {
overflow-x: auto;
overflow-y: auto;
width: 375px;
height: 145px;
margin-top: 7px;
margin-left: 9px;
color: white;
border: none;
resize: none;
font-size: 13pt;
}

.suggestion_message {
margin-top: -3px;
width: 300px;
height: 200px;
background: url(../images/borders/suggestion_message_border.png) no-repeat; /* Фон */
padding-top: 7px;
padding-left: 9px;
color: white;
border: none;
resize: none;
font-size: 13pt;
}
.topic_border {
margin-top: -3px;
width: 700px;
height: 300px;
background: url(../images/borders/topic_border.png) no-repeat; /* Фон */
padding-top: 7px;
padding-left: 9px;
color: white;
border: none;
resize: none;
font-size: 13pt;
}

Помогите пожалуйста поправить дело.

Если будут нужны какие-нибудь дополнительные файлы - скажите, я скину.

Спасибо.

Edited July 18, 2013 by The Norb

Zverushka · July 16, 2013

Все очень плохо. Не указан доктайп документа в самом начале. <!doctype html>

В результате каждый браузер отображает сайт как хочет, а не согласно общепринятым стандартам. Плюс тут смешанная верстка, шапка делается дивами, а то, что съезжает делается таблицей (в таблицах уже никто не верстает! и они ужасны!), к тому же еще обрамлено тегом <center>, который морально устарел и никто им не пользуется.

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

Edited July 16, 2013 by Zverushka

The Norb · July 16, 2013

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

Таблицами сам уже не верстаю, (начинал с них) но тут возникла такая трабла что фон блока не тянулся по содержимому (на сколько я понял из-за вложенных блоков с свойством float: left;) в поисках решений получилось исправить с помощью таблицы (хотя очень не хотелось конечно так делать).

Может удастся обойтись "малой кровью" и поправить вёрстку не переписывая всё? (очень не хотелось бы )

The Norb · July 17, 2013

Сегодня обнаружилось то, чего никак не ожидал.

Вёрстка выглядит нормально у всех если ник короткий (т.е. 4-5 символов).

Проверялось так: в настройках менялся логин пользователя на более короткий (в коде сайта ничего не менялось) и всё становилось ровно и не съезжало.

У кого-нибудь есть идеи почему так и как это исправить?

The Norb · July 18, 2013

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

Тема закрыта.

Zverushka · July 18, 2013

Надо заново сайт делать. И никому не показывать до новой версии... Там еще глюки с фоном ужасные - на моем разрешении фон куском прилеплен и видны резкие границы перехода от картинки к цвета заднего фона у body.

The Norb · July 18, 2013

Можете скинуть скриншот того, что имеете ввиду?

Sign In

Съезжает центр сайта

Question

The Norb

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Zverushka

Link to comment

Share on other sites

The Norb

Link to comment

Share on other sites

The Norb

Link to comment

Share on other sites

The Norb

Link to comment

Share on other sites

Zverushka

Link to comment

Share on other sites

The Norb

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information