div выходит за рамки

mokAh · December 14, 2012

Итак, у меня есть ГС на козе, взял я стандартный диз, решил переделать. Корректно работает только на IE, на остальных браузерах(уже изменённая версия) лагает, где в блок входит, где перепрыгивает.

Мой ГС.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>

<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<link type="image/x-icon" rel="icon" href="http://cpp-lessons.ru/favicon.ico">
<link type="image/x-icon" rel="shortcut icon" href="http://cpp-lessons.ru/favicon.ico">
</head>
<body>
$ADMIN_BAR$
<div id="all">
<div id="top">
<table cellpadding="0" cellspacing="0" border="0" class="toptable">
<tr>
<td class="empty" style="width: 10px;"></td>
<td class="sitelogo">
 <!-- <logo> --><a href="$HOME_PAGE_LINK$"><img src="$HOME_PAGE_LINK$Untitled-1.png"></a><!-- </logo> -->
</td>
<td class="globe">
<div id="date">
<div id="date-right"></div>
<div id="date-mid">
$WDAY$, $DATE$, $TIME$
</div>
<div id="date-left"></div>
</div>
</td>
</tr>
</table>
<div id="tm">
<span class="tm_left"></span><span class="home tm"><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a></span><span class="tm_right"></span>
<?if($USER_LOGGED_IN$)?><span class="tm_left"></span><span class="prof tm"><a href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a></span><span class="tm_right"></span>
<?else?><span class="tm_left"></span><span class="reg tm"><a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a></span><span class="tm_right"></span><?endif?>
<?if($USER_LOGGED_IN$)?><span class="tm_left"></span><span class="logout tm"><a href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a></span><span class="tm_right"></span>
<?else?><span class="tm_left"></span><span class="login tm"><a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a></span><span class="tm_right"></span><?endif?>
<?if($RSS_LINK$)?><span class="tm_left"></span><span class="rss tm"><a href="$RSS_LINK$">RSS</a></span><span class="tm_right"></span><?endif?>
<div class="whois">
<?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "$USER_GROUP$"<?else?><!--<s5212>-->Приветствую Вас<!--</s>-->, <i>$USERNAME$</i><?endif?>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="content">

<!-- <middle> -->
 <div id="rightcol">
$GLOBAL_DRIGHTER$
</div>
<div id="leftcol">
$GLOBAL_CLEFTER$
</div>

<div id="maincol">
<!-- <body> -->$CONTENT$<!-- </body> -->
<div style="clear: both"></div>
</div>
<div style="clear: both"></div>
<!-- </middle> -->
</div>
<div id="footer">
<div id="footer-block">
<div id="copyright"><!-- <copy> -->Copyright CPP-LESSONS.RU © $YEAR$<!-- </copy> --></div>
<div id="powered_by"> $POWERED_BY$</div>
</div>
</div>
</div>
</body>
</html>

/*——————— All content start ———————*/

#all {
 background: url(/.s/t/797/1.gif) repeat-x;
 min-width: 1000px;
}

/*——————— All content end ———————*/



/*——————— Header start ———————*/

#top {
 width: 100%;
 height: 223px;
 background: url(/.s/t/797/2.jpg) no-repeat top center;
}

.toptable {
 width: 1000px;
 height: 185px;
 margin: auto;
}

.sitelogo {
 width: 425px;
 font: 40px 'Tahoma';
 color: #ffffff;
}

.globe {
 vertical-align: top;
 text-align: right;
 width: 525px;
}

#date {
 height: 25px;
 font: 12px 'Tahoma';
 color: #cccccc;
 margin-right: 20px;
}

#date-left {
 float: right;
 width: 22px;
 height: 25px;
 background: url(/.s/t/797/4.png);
}

#date-mid {
 float: right;
 height: 25px;
 background: url(/.s/t/797/5.png);
 line-height: 21px;
}

#date-right {
 float: right;
 width: 23px;
 height: 25px;
 background: url(/.s/t/797/6.png);
}

#tm {
 margin: auto;
 margin-top: 8px;
 height: 22px;
 width: 1000px;
}

.tm a {
 color: #999999;
 font: 12px 'Tahoma';
 text-transform: uppercase;
 line-height: 22px;
 text-decoration: none;
 padding-left: 15px;
}

.tm a:hover {
 color: #1282d8;
 background-position: 0px -16px;
 text-decoration: none;
}

.tm_left {
 display: block;
 float: left;
 width: 5px;
 height: 22px;
 background: url(/.s/t/797/7.png);
}

.tm {
 display: block;
 float: left;
 height: 22px;
 background: url(/.s/t/797/8.png);
}

.tm_right {
 display: block;
 float: left;
 width: 5px;
 height: 22px;
 background: url(/.s/t/797/9.png);
 margin-right: 8px;
}

.home a {
 background: url(/.s/t/797/10.png) no-repeat;
}

.prof a {
 background: url(/.s/t/797/11.png) no-repeat;
}

.reg a {
 background: url(/.s/t/797/12.png) no-repeat;
}

.logout a {
 background: url(/.s/t/797/13.png) no-repeat;
}

.login a {
 background: url(/.s/t/797/14.png) no-repeat;
}

.rss a {
 background: url(/.s/t/797/15.png) no-repeat;
}

.whois {
 float: right;
 height: 22px;
 font: 12px 'Tahoma';
 line-height: 20px;
 color: #555555;
}

/*——————— Header end ———————*/


/*——————— Main content start ———————*/

#content {
 width: 100%;
 margin: auto;
 float:center;
 padding-top: 1px;
 text-align: left;
}

#leftcol {
 float: left;
 width: 200px;
 text-align: justify;
}

#rightcol {
 float: right;
 width: 200px;
 text-align: justify;
}

#maincol {
 margin-top: 10px;
 margin:auto;
 width: 100%; /*FOR IE*/
 text-align: justify;
}

.eTitle {
 font: 14px 'Tahoma';
 color: #1282d8;
 text-transform: uppercase;
 margin-bottom: 5px;
}

.eTitle a {
 color: #1282d8;
}

.eTitle a:hover {}

.eMessage, .eText, .eAnswer {
 font: 12px 'Arial';
 color: #555555;
 text-align: justify !important;
 background: url(/.s/t/797/16.gif) repeat-x;
}

.cMessage {
 font: 12px 'Tahoma';
 text-align: justify !important;
}

.eDetails, .eDetails1, .eDetails2 {
 font: 11px 'Tahoma';
 color: #555555;
 background: #f5f5f5;
 border: 1px solid #dcdbe0;
 padding: 3px 15px;
 margin-top: 3px;
}

.cBlock1, .cBlock2 {
 background: #e8e7e7;
}

/*——————— Main content end ———————*/

Диз изначально был таким:

Но это на больших мониторах страшно смотрится.

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

Int · December 15, 2012

Будем последовательными. Где доктайп?

У таблицы eblock width:100%, от этого она вылезла за пределы страницы

mokAh · December 15, 2012

Хорошо, но как её растянуть, чтобы не заезжало?

Изменил width на 70%, но хотелось бы, чтобы таблица прилегала к блокам.

Обнаружил ту же самую проблему на почти всех страницах сайта, дело не только в таблице, а как пофиксить я не знаю

Edited December 15, 2012 by mokAh

Sign In

div выходит за рамки

Question

mokAh

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

mokAh

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information