Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > По центру экрана

Автор: DrNemo 12.1.2006, 18:17

Есть вопрос:
Надо ограничеть страничку, допустим 70% от окна браузера, и как при этом сделать так чтобы она была по центру. smile

Автор: DemoCode 12.1.2006, 18:30

Код


<table width="70%" align="center"><tr><td>
Тут содержимое твоей страницы
</td></tr></table>

Автор: Mili 14.1.2006, 06:22

Добрый день!
У меня вот подобный вопрос, мне нужно ограничить страницу 80%, и что, бы в браузере, она всегда была по центру, но, как, ни пробывала, все ни как не выходит-(((. Может для страницы такого вида, ограничение не подходят?
Заранее благодарна.

Код



<HTML>
<HEAD>
</HEAD>

<BODY background="C:\Мои документы\frame004a.jpg" Text="#CDA798" bgColor="#754531" Link="#CDA798" VLink="#CDA798" ALink="#CDA798">
<script LANGUAGE="JavaScript">
<!--
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;

function HOffset()
{
   var window_width = window.innerWidth ? window.innerWidth : (document.body.clientWidth ? document.body.clientWidth : 0);
   return Math.max( 0, Math.floor( (window_width - 823) / 2 ) - 10 ).toString();
}
document.write( "<DIV ID='IDAlignPage' style='position:absolute;top:0px;left:" + HOffset() + "px;'>&nbsp;" );
function DoReposition() 
{
var o='IDAlignPage';
if(document.getElementById(o)){
var e=document.getElementById(o);
e.style.left=HOffset()+'px';
}else if(ie4up){
var e=eval('document.all.'+o);
e.style.left=HOffset()+'px';
}else if (ns4up){
var e=eval('document.'+o);
e.left=HOffset();}
}

window.onresize=DoReposition;
window.onload=DoReposition;
//-->
</SCRIPT>
<DIV style="position:absolute; overflow:hidden; left:54px; top:0px; width:779px; height:944px; z-index:0; background-color:#9A5D4B; border:#CDA798 2px solid">
</DIV>
<img width=775 height=29 style="position:absolute; left:56px; top:0px; z-index:1" border=0 src="C:\DOCUME~1\User\LOCALS~1\Temp\PageMaker\doc0000V\shape5UASJ.gif">
<img width=776 height=37 style="position:absolute; left:55px; top:180px; z-index:2" border=0 src="C:\DOCUME~1\User\LOCALS~1\Temp\PageMaker\doc0000V\shapeN7EP3.gif">
<DIV style="position:absolute; overflow:hidden; left:233px; top:186px; width:83px; height:25px; z-index:3; background-color:#9A5E4B; border:#9A5E4B 4px double">
<FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; overflow:hidden; left:319px; top:186px; width:87px; height:25px; z-index:4; background-color:#9A5E4B; border:#9A5E4B 4px double">
<FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; overflow:hidden; left:409px; top:186px; width:77px; height:25px; z-index:5; background-color:#9A5E4B; border:#9A5E4B 4px double">
<FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; overflow:hidden; left:489px; top:186px; width:79px; height:25px; z-index:6; background-color:#9A5E4B; border:#9A5E4B 4px double">
<FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; overflow:hidden; left:570px; top:186px; width:83px; height:25px; z-index:7; background-color:#9A5E4B; border:#9A5E4B 4px double">
<FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; overflow:hidden; left:655px; top:186px; width:83px; height:25px; z-index:8; background-color:#9A5E4B; border:#9A5E4B 4px double">
<FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; overflow:hidden; left:61px; top:186px; width:83px; height:25px; z-index:9; background-color:#9A5E4B; border:#9A5E4B 4px double">
<FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; overflow:hidden; left:741px; top:186px; width:83px; height:25px; z-index:10; background-color:#9A5E4B; border:#9A5E4B 4px double">
<a href="html" target=""><FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</a></DIV>
<DIV style="position:absolute; overflow:hidden; left:10px; top:-1px; width:103px; height:61px; z-index:12"><meta http-equiv=Page-Enter content=blendTrans(Duration=4.0)>
<head>
<style  type="text/css">
a:hover{color:white; BORDER-TOP: #B9836F
 1px solid; BACKGROUND: #B9836F
; BORDER-BOTTOM: #B9836F
 1px solid; text-decoration: none; }
a{color:#B9836F; text-decoration:none; }
</style>
</head>





</DIV>
<DIV style="position:absolute; overflow:hidden; left:147px; top:186px; width:83px; height:25px; z-index:13; background-color:#9A5E4B; border:#9A5E4B 4px double">
<FONT style="font-size:10pt" color=#FFCC99 face="Tahoma">
<DIV align=center><FONT color=#CDA798 face="Verdana">&nbsp;</FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; overflow:hidden; left:306px; top:70px; width:255px; height:53px; z-index:14; border:#9A5E4B 1px solid">
<FONT style="font-size:10pt" color=#CDA798 face="Tahoma">
<DIV align=center><FONT style="font-size:12pt" face="Verdana">питомник</FONT></DIV>
<DIV align=center><FONT style="font-size:18pt" face="Verdana"><B>"Осенняя Сказка"</B></FONT></DIV>
</FONT>
</DIV>
<DIV style="position:absolute; left:57px; top:30px; z-index:15">
<object width=774 height=150 classid=clsid:D27CDB6E-AE6D-11CF-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab>
<param name=movie value="C:\Documents and Settings\User\Desktop\fl.swf">
<param name=quality value=high>
<param name=loop value=1>
<param name=wmode value=window>
<embed src="C:\Documents and Settings\User\Desktop\fl.swf" width=774 height=150 quality=high TYPE=application/x-shockwave-flash pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash></embed></object>
</DIV>
<img width=392 height=502 style="position:absolute; left:412px; top:243px; z-index:16; border:#FFCC99 1px solid" border=0 src="C:\Мои документы\Поворот S4300066.JPG">
<DIV style="position:absolute; overflow:hidden; left:147px; top:279px; width:150px; height:90px; z-index:17">
<FONT style="font-size:10pt" color=#CDA798 face="Tahoma">
<DIV>Ну усё у нас уже прошел Старый новый год!!!!Поздравляю всех с праздником!!!!!!!!!!!!!!!!!!!!!!! </DIV>
</FONT>
</DIV>
</DIV><style>
<!--
BODY {SCROLLBAR-FACE-COLOR: #9A5E4B; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #DCC0B6; SCROLLBAR-3DLIGHT-COLOR: #DCC0B6; SCROLLBAR-ARROW-COLOR:  #DCC0B6; SCROLLBAR-TRACK-COLOR: #AF725C; SCROLLBAR-DARKSHADOW-COLOR: #C69988; }
-->
</style>
</BODY>
</HTML>

Автор: Kludge 23.1.2006, 21:41

Возьми все содержимое контейнера <body> </body> в таблицу (можно из одной ячейки, что никак не отразится на содержимое)
и установи размеры таблицы в нужном отношении с экраном.

аналогично выше сказанному:

Цитата

Код


<table width="70%" align="center"><tr><td>
Тут содержимое твоей страницы
</td></tr></table>

Автор: Cheba 24.1.2006, 15:13

Таблицы - не модно. smile

Мини-туториальчик по верстке div'ами

Код

<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
    <title>Centering div element</title>
    <style type="text/css">
#page {
    width: 80%; /* or 700px; any value of type Length or Percentage */
    margin-left: auto;
    margin-right: auto;
    background: green; /* just to see where our div is */
}
    </style>
</head>
<body>
    <div id="page">Content goes here</div>
</body>
</html>

Принцип действия очень прост. Если блочный элемент (у нас это div#page) имеет автоматические поля слева и справа, то броузер попытается сделать их равными. А поскольку отступы у нас будут равными и равняется относительно тела документа (растянутого на 100% ширины окна), то блок (div#page) встанет по середине страницы. Чего и надо было достичь.

А теперь небольшой "трюк", который позволяет сделать все то же, но без оборачивающего блочного элемента.

Код

<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
    <title>Centering div element</title>
    <style type="text/css">
html {
    background: white;
}
body {
    width: 80%; /* or 700px; any value of type Length or Percentage */
    margin-left: auto;
    margin-right: auto;
    background: green; /* just to see where our div is */
}
    </style>
</head>
<body>
    Content goes here
</body>
</html>

Здесь применяется тот же прием, но вместо оборачивающего блочного элемента используется элемент тела документа (body). А вместо элемента, относительно которого ровняем - сам документ (html).

Не уверен, что этот вариант совершенно правильно будет понят всеми броузерами, но IE 6, Firefox 1.5 и Konqueror 3.4.2 правильно это отображают.

Автор: R.M. 25.1.2006, 02:05

Цитата(Cheba @ 24.1.2006, 16:13

)

Таблицы - не модно. smile

С чего это? В некоторых моментах это очень удобно по сравнению с дивами

Автор: Cheba 25.1.2006, 03:25

Куксикус, HTML4 не умрет. Так что можешь не париться с div'ами.

Автор: R.M. 25.1.2006, 14:11

Cheba
Уже обсуждалось, что скажем таблицу чемпионата по футболу проще сделать в таблице чем дивами.

Автор: Cheba 25.1.2006, 14:52

Куксикус, это потому, что таблица - это таблица, а layout - это совсем другое. Если бы люди (и в том числе ты) читали специвикации, то было бы гораздо проще. XHTML тоже включает в спецификацию таблицы. Но там четко описано для чего и когда это нужно.

Когда ты доживешь до серьезных проектов, которые будут требовать соответствия стандартам (пусть даже HTML4), высоких уровней удобства (usability) и доступности (accessibility), ты будешь просто вынужден верстать div'ами. Это пока ты для себя или небольших конторок (не смыслящих в web'е ничего) занимаешься версткой, то таблицы вполне приемлемое решение.

Автор: R.M. 26.1.2006, 02:03

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