Jump to content
  • 0

Вопрос по позиционированию сайта

WarEnek

Asked by WarEnek,

 Share

Question

WarEnek Explorer

WarEnek

Posted
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="en-gb" lang="en-gb" >
<head>
{headers}
<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>

</head>
<body>
<table align="center" border="0" cellspacing="0" cellpadding="0" id="box">
{AJAX}
<center>
<div valign="center">
<table style="width:990px;margin:0 auto" ><tr>
<tr>
 <td class="top_r">   </td>
 <td class="top_m">   </td>
 <td class="top_l">   </td>
</tr>
</table>
<!-- main table: start -->
<table style="width:990px;margin:0 auto" cellpadding="0" cellspacing="0" border="0"><tr>
<!-- head: start -->
	<div align="left"><a href="/"><img src="{THEME}/images/logo.png" alt="" border="0"></a></div>
	<!-- head: end -->
	<!-- content: start -->
	<tr>

<!-- left menu: start -->
		<td class="left" width="230px" valign="top">
			<table class="left-menu" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td align="left">
						<tr><td style="background:url('{THEME}/images/l2_15.gif');color:#ffffff;" height="28" align="center"><b>Опрос</b></td></tr>
					</td>
				</tr>
				<tr>
					<td align="center">
						<table width="75%" class="block" cellpadding="0" cellspacing="0" border="0">
							<tr>
								<td>
								   {vote}
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
<!-- left menu: end -->
<!-- news block: start -->
		<td valign="top">
			<table class="news-block" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td class="noout" align="center">
					   {banner_baner}
					</td>
				</tr>
				<tr>
					<td align="center">
						<table class="news-top" width="100%" cellpadding="0" cellspacing="0" border="0">
															<div class="news-top"></div>

							<tr>
								<td align="center">
									<div class="news-mid">
									<table width="475px" cellpadding="0" cellspacing="0" border="0">
										<tr>
											<td>
													 {info}{content}
											</td>
										</tr>
									</table>									
									</div>									
								</td>
							</tr>
							<tr>
								</td>
								<td class="noout" align="center">
									<div class="news-bottom">
									</div>
									<div class="news-ref">
										<div id="banner">
® 2009


										</div>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>

<!-- news block: end -->
<!-- right menu: start -->
		<td class="right" width="230px" valign="top">
			<table class="right-menu" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td align="right">
					 						<tr><td style="background:url('{THEME}/images/l2_12.gif');color:#ffffff;" height="28" align="center"><b>Опрос</b></td></tr>
						<table width="75%" class="block" cellpadding="0" cellspacing="0" border="0">
						 <td align="center" valign="top">{login}</td>
					</td>
				</tr>
				<tr>
					<td align="center">
						<table width="75%" class="block" cellpadding="0" cellspacing="0" border="0">
							<tr>
								<td align="center">
								{banner_right}
								 </td>
									<!-- advertisement: start -->

									<!-- advertisement: end -->   	
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
		<!-- right menu: end -->
	</tr>
	<!-- content: end -->
</table>
<!-- maintable: end -->
</table>
</center>
</div>
</tr></table>
</body>
</html>

Проблема в том, что никак не могу поставить сайт по центру. Подскажите как же всё же совершить этот подвиг? А то опыта верстки мало, но учусь, вот пока с этим запарка. :unsure:

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
WarEnek Explorer

WarEnek

Posted
  • Author
Posted (edited)

Не получилось... 

<!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="en-gb" lang="en-gb" >
<head>
{headers}
<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>

</head>
<body>
<div class="centrs">
{AJAX}
<center>
<div valign="center">
<table style="width:990px;margin:0 auto" ><tr>
<tr>
 <td class="top_r">   </td>
 <td class="top_m">   </td>
 <td class="top_l">   </td>
</tr>
</table>
<!-- main table: start -->
<table style="width:990px;margin:0 auto" cellpadding="0" cellspacing="0" border="0"><tr>
<!-- head: start -->
	<div align="left"><a href="/"><img src="{THEME}/images/logo.png" alt="wwww.L2lol.ru" border="0"></a></div>
	<!-- head: end -->
	<!-- content: start -->
	<tr>

<!-- left menu: start -->
		<td class="left" width="230px" valign="top">
			<table class="left-menu" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td align="left">
						<tr><td style="background:url('{THEME}/images/l2_15.gif');color:#ffffff;" height="28" align="center"><b>Опрос</b></td></tr>
					</td>
				</tr>
				<tr>
					<td align="center">
						<table width="75%" class="block" cellpadding="0" cellspacing="0" border="0">
							<tr>
								<td>
								   {vote}
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
<!-- left menu: end -->
<!-- news block: start -->
		<td valign="top">
			<table class="news-block" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td class="noout" align="center">
					   {banner_baner}
					</td>
				</tr>
				<tr>
					<td align="center">
						<table class="news-top" width="100%" cellpadding="0" cellspacing="0" border="0">
															<div class="news-top"></div>

							<tr>
								<td align="center">
									<div class="news-mid">
									<table width="475px" cellpadding="0" cellspacing="0" border="0">
										<tr>
											<td>
													 {info}{content}
											</td>
										</tr>
									</table>									
									</div>									
								</td>
							</tr>
							<tr>
								</td>
								<td class="noout" align="center">
									<div class="news-bottom">
									</div>
									<div class="news-ref">
										<div id="banner">
® 2009


										</div>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>

<!-- news block: end -->
<!-- right menu: start -->
		<td class="right" width="230px" valign="top">
			<table class="right-menu" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td align="right">
					 						<tr><td style="background:url('{THEME}/images/l2_12.gif');color:#ffffff;" height="28" align="center"><b>Опрос</b></td></tr>
						<table width="75%" class="block" cellpadding="0" cellspacing="0" border="0">
						 <td align="center" valign="top">{login}</td>
					</td>
				</tr>
				<tr>
					<td align="center">
						<table width="75%" class="block" cellpadding="0" cellspacing="0" border="0">
							<tr>
								<td align="center">
								{banner_right}
								 </td>
									<!-- advertisement: start -->

									<!-- advertisement: end -->   	
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
		<!-- right menu: end -->
	</tr>
	<!-- content: end -->
</table>
<!-- maintable: end -->
</table>
</center>
</div>
</tr></table>
</body>
</html>

css

body  {
background : #ecf9fe;
text-align : left;
font-family : "Arial", helvetica;
font-size : 12px;
margin : 0;
padding : 0;
width:990px
}
.centrs{
width:990px;
margin:0 auto;
}
.top_r {
background-image: url(../images/l2_02.gif);
width:32px;
height:25px;
}

.top_m{
background-image: url(../images/l2_04.gif);
background-repeat: repeat-x;
height:25px;
}
.top_l{
background-image: url(../images/l2_06.gif);
width:32px;
height:25px;
}
.sch{
background-image: url(../images/l2_12.gif);
background-repeat: no-repeat;
width:232px;
height:29px;
font: 12pt sans-serif;  
color: #fff;
position: top;
position: absolute
}


* {
magin:0;
padding:0;
}

a,a:link,a:visited,a:active,.faux_link {
text-decoration:none;
color:#2786c2;
outline:none;
cursor:pointer;
}

a:hover,.faux_hover,.faux_link:hover {
color:#f75342;
cursor:pointer;
text-decoration:none;
}

table {
border-collapse:collapse;
border-spacing:0;
}

h1,h2,h3 {
font-family:arial,sans-serif;
}
.right-menu {
	margin-bottom: 20px;
}

.right-menu img {
	margin-right: 20px;
}

.news-top {
	background: url(../images/nt.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

.news-mid {
	margin-top: 29px;
	background: url(../images/nm.gif);
	background-position: center top;
	background-repeat: repeat-y;
}

.news-bottom {
	height: 192px;
	background: url(../images/nb.gif);
	background-position: center top;
	background-repeat: no-repeat;
}

.news-ref {
	height: 120px;
	background: url(../images/background-ref.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

.menu {
font-size:13px;
}

.menu ul{
padding:0px;
padding:0px;

}
.menu  li{
list-style-type:none;
margin:4px;
}

.menu li a{
display:block;
padding:1px 3px;
text-decoration:none;
color:#000;
}

.menu li a:hover{
color:#001;
}

.menu ul li:hover{
background:#00ccff;
}

.box {
position:absolute;
}

@import url({THEME}/css/engine.css); - импорт, не самое удачное решение, лучше через link

А какие плюсы и минусы в этом?

Edited by WarEnek
Link to comment
Share on other sites
  • 0
WarEnek Explorer

WarEnek

Posted
  • Author
Posted
Я у тя в коде не рылся, но попробуй ещё релатив подписать блоку этому. А вообще давай ссылку

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

.centrs{
width:990px;
margin:0 auto;
position:relative;
}

Link to comment
Share on other sites
  • 0
gordi Explorer

gordi

Posted
Posted
Не получилось...

Сделайте так:

body {margin:0 auto;width:990px;}

А какие плюсы и минусы в этом?

Отдавая стили через

<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>

Вам самому и любому другому при сохранении странички на HDD

не увидать всей красоты вашего сайта, без лишних телодвижений,

если в этом будет необходимость :unsure:

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

рррр! нет слов! у вас где объявлено это?!

* {
magin:0;
padding:0;
}

Это обнуляет все отступы у всех элементов, и все что описано до этого будет обнулено. И, естественно, стиль .centrs не сработает, потому что он описан до этого обнуления.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
рррр! нет слов! у вас где объявлено это?!

* {
magin:0;
padding:0;
}

Это обнуляет все отступы у всех элементов, и все что описано до этого будет обнулено. И, естественно, стиль .centrs не сработает, потому что он описан до этого обнуления.

Разве? кажись .center посильней селектор чем *. Вечером проверю =)

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted
Разве? кажись .center посильней селектор чем *. Вечером проверю =)

кстати да... у универсального селектора специфичность = 0

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

Link to comment
Share on other sites
  • 0
WarEnek Explorer

WarEnek

Posted
  • Author
Posted (edited)
Ты скопировал код даже не поняв, почему он работает. Так дела не делаются друг.

Вроде понял :unsure: Перейдём к следуещей проблемке. Дабы не засорять форум, напишу тут.

Как сделать подобное меню любыми методами и спосабами как на популярном сайте _http://vimeo.com/. Интересует тот именно факт, как сделать закругления сверху и снизу? Перебрав теги на самом вимео, увидел что делается посредством одной картинки с многими активными элементами. А можно ли просто посредством нескольких картинок сделать подобное?

Edited by WarEnek
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted
Вроде понял :unsure: Перейдём к следуещей проблемке. Дабы не засорять форум, напишу тут.

Как сделать подобное меню любыми методами и спосабами как на популярном сайте _http://vimeo.com/. Интересует тот именно факт, как сделать закругления сверху и снизу? Перебрав теги на самом вимео, увидел что делается посредством одной картинки с многими активными элементами. А можно ли просто посредством нескольких картинок сделать подобное?

Можно и разными, но лучше с помощью спрайта. Резон такой:

- одна большая картинка загружается быстрее, чем много маленьких;

- спрайт целиком загрузится при первой же попытке показать его часть, а если картинки поотдельности, то будет не очень приятный эффект моргания, когда каждая картинка будет подгружаться только во время выведения.

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
×
×
  • 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