Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> По центру экрана 
:(
    Опции темы
DrNemo
Дата 12.1.2006, 18:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 7.12.2005
Где: Не пейте ракетное топливо! :-)

Репутация: нет
Всего: 1



Есть вопрос:
Надо ограничеть страничку, допустим 70% от окна браузера, и как при этом сделать так чтобы она была по центру. smile
--------------------
На свете есть только две вещи которые сносят башню - космос и женщины (К.Ю.Бунин)Самый мастдаевский сакс в том, что рулезные фичи глючат :))
PM MAIL WWW ICQ   Вверх
DemoCode
Дата 12.1.2006, 18:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 890
Регистрация: 20.10.2005
Где: Россия

Репутация: 3
Всего: 41



Код

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



--------------------
Жить стало лучше, жить стало веселей
© И.В. Сталин 
PM MAIL ICQ   Вверх
Mili
Дата 14.1.2006, 06:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 1
Регистрация: 14.1.2006

Репутация: нет
Всего: нет



Добрый день!
У меня вот подобный вопрос, мне нужно ограничить страницу 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>


PM MAIL   Вверх
Kludge
Дата 23.1.2006, 21:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 11.1.2006

Репутация: нет
Всего: нет



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

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

Код

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



Это сообщение отредактировал(а) Kludge - 23.1.2006, 21:51
PM MAIL ICQ   Вверх
Cheba
Дата 24.1.2006, 15:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


pointless one
***


Профиль
Группа: Vingrad developer
Сообщений: 1777
Регистрация: 27.11.2003
Где: /dev/null

Репутация: 14
Всего: 62



Таблицы - не модно. 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 правильно это отображают.
PM MAIL ICQ   Вверх
R.M.
Дата 25.1.2006, 02:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30



Цитата(Cheba @ 24.1.2006, 16:13 Найти цитируемый пост)

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

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

Это сообщение отредактировал(а) Куксикус - 25.1.2006, 02:07


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
Cheba
Дата 25.1.2006, 03:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


pointless one
***


Профиль
Группа: Vingrad developer
Сообщений: 1777
Регистрация: 27.11.2003
Где: /dev/null

Репутация: 14
Всего: 62



Куксикус, HTML4 не умрет. Так что можешь не париться с div'ами.
PM MAIL ICQ   Вверх
R.M.
Дата 25.1.2006, 14:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30



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


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
Cheba
Дата 25.1.2006, 14:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


pointless one
***


Профиль
Группа: Vingrad developer
Сообщений: 1777
Регистрация: 27.11.2003
Где: /dev/null

Репутация: 14
Всего: 62



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

Когда ты доживешь до серьезных проектов, которые будут требовать соответствия стандартам (пусть даже HTML4), высоких уровней удобства (usability) и доступности (accessibility), ты будешь просто вынужден верстать div'ами. Это пока ты для себя или небольших конторок (не смыслящих в web'е ничего) занимаешься версткой, то таблицы вполне приемлемое решение.
PM MAIL ICQ   Вверх
R.M.
Дата 26.1.2006, 02:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30



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


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1422 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.