X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Выравнивание по центру по вертикали и горизонтали
se85
se85
Topic Starter сообщение 1.9.2008, 0:34; Ответить: se85
Сообщение #1


Надо просто разместить картинку по центру страницы (по вертикали и горизонтали), чтобы при изменении размеров окна картинка всегда была по середине. Вроде очень простая задача, но я ваще не соображаю. Делаю с помощью таблицы (3х3) в центральной ячейке которой лежит картинка.
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td width="50%" height="50%">&nbsp;</td>
<td width="248" height="50%">&nbsp;</td>
<td width="50%" height="50%">&nbsp;</td>
</tr>
<tr>
<td width="50%" height="103">&nbsp;</td>
<td width="248" height="103"><img src="images/logo.jpg" alt="" width="248" height="103"></td>
<td width="50%" height="103">&nbsp;</td>
</tr>
<tr>
<td width="50%" height="50%">&nbsp;</td>
<td width="248" height="50%">&nbsp;</td>
<td width="50%" height="50%">&nbsp;</td>
</tr>
</table>


Без тега DOCTYPE все работат прекрасно, но если я указываю HTML 4.01 или XHTML то таблица никак не хочет раздвигаться в высоту страницы. (((
Я больше чем уверен что моя задача решается намного проще создания таблицы. Как можно сделать чтоб картинка выравнивалась по середине страницы? Я уже кипю :wacko:
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 1.9.2008, 0:37; Ответить: Webmaster_hb
Сообщение #2


css
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin:0px;
padding:0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

делаете таблицу с одной ячейкой на 100% в ширину и высоту заданную в стилях
и вставляете картинку в ячейку с выравниванием center/middle
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 1.9.2008, 0:58; Ответить: Exterior
Сообщение #3


se85,
CSS:
body {
    background: url(your_image.jpg) no-repeat center;
    background-attachment: fixed;
}


еще здесь - Выравнивание изображения по центру блока
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
se85
se85
Topic Starter сообщение 1.9.2008, 21:20; Ответить: se85
Сообщение #4


Всем спасибо. Помогло )
Но все равно меня удивляет почему простая таблица со значениями ширины и высоты в процентах не работает в HTML 4.01 и XHTML 1. Неужели разработкчики этих стандартов убрали из них такую простую функцию как высота таблицы в процентах?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kot.minsk
kot.minsk
сообщение 25.10.2008, 15:46; Ответить: kot.minsk
Сообщение #5


(se85 @ 2.9.2008, 00:20) *
Всем спасибо. Помогло )
Но все равно меня удивляет почему простая таблица со значениями ширины и высоты в процентах не работает в HTML 4.01 и XHTML 1. Неужели разработкчики этих стандартов убрали из них такую простую функцию как высота таблицы в процентах?


с шириной, как раз-таки по-моему все ок. с высотой - да,отдельный разговор. кстати, надо бы спецификацию перечитать по этому поводу. но пока до нее руки дойдут...((( может ли ктонть в нескольких словах объяснить, в чем тут дело?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Tixoff
Tixoff
сообщение 15.1.2010, 23:44; Ответить: Tixoff
Сообщение #6


Господа, если кто может помочь, помогите, пожалуйста!
У меня задача почти такая же, как и у автора темы.
Уже всю голову сломал и прогуглил много часов, но не понимаю, в чем проблема.

Суть - есть код (ниже), без указания стандарта, работает нормально, но хочется сделать "как положено". При указании стандарта, вторая таблица не выравнивается по вертикали.
Помогите пожалуйста!
Код:
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body  bgcolor=#060606>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr align="center" ><td valign="middle">
        <table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="images/01_01.jpg"></td>
        <td>
            <img src="images/01_02.jpg"></td>
        <td>
            <img src="images/01_03.jpg"></td>
        <td>
            <img src="images/01_04.jpg"></td>
        <td>
            <img src="images/01_05.jpg"></td>
        <td>
            <img src="images/01_06.jpg"></td>
        <td><a href="index.html">
            <img src="images/01_07.jpg"></a></td>
    </tr>
    <tr>
        <td>
            <img src="images/01_08.jpg"></td>
        <td>
            <img src="images/01_09.jpg"></td>
        <td>
            <img src="images/01_10.jpg"></td>
        <td>
            <img src="images/01_11.jpg"></td>
        <td>
            <img src="images/01_12.jpg"></td>
        <td>
            <img src="images/01_13.jpg"></td>
        <td>
            <img src="images/01_14.jpg"></td>
    </tr>
    <tr>
        <td>
            <img src="images/01_15.jpg"></td>
        <td>
            <img src="images/01_16.jpg"></td>
        <td>
            <img src="images/01_17.jpg"></td>
        <td>
            <img src="images/01_18.jpg"></td>
        <td>
            <img src="images/01_19.jpg"></td>
        <td>
            <img src="images/01_20.jpg"></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="images/01_22.jpg"></td>
        <td rowspan="5">
            <img src="images/01_23.jpg"></td>
        <td rowspan="5">
            <img src="images/01_24.jpg"></td>
        <td rowspan="5">
            <img src="images/01_25.jpg"></td>
        <td rowspan="5">
            <img src="images/01_26.jpg"></td>
        <td rowspan="5">
            <img src="images/01_27.jpg"></td>
        <td><a href="about.html"><img src="images/01_28.jpg" onMouseOver="this.src='images/01_28_1.jpg'" onMouseOut="this.src='images/01_28.jpg'"border=0></a></td>
    </tr>
    <tr>
        <td><a href="service.html"><img src="images/01_29.jpg" onMouseOver="this.src='images/01_29_1.jpg'" onMouseOut="this.src='images/01_29.jpg'"border=0></a></td>
    </tr>
    <tr>
        <td><a href="request.html"><img src="images/01_30.jpg" onMouseOver="this.src='images/01_30_1.jpg'" onMouseOut="this.src='images/01_30.jpg'"border=0></a></td>
    </tr>
    <tr>
        <td><a href="partners.html"><img src="images/01_31.jpg" onMouseOver="this.src='images/01_31_1.jpg'" onMouseOut="this.src='images/01_31.jpg'"border=0></a></td>
    </tr>
    <tr>
        <td><a href="contacts.html"><img src="images/01_32.jpg" onMouseOver="this.src='images/01_32_1.jpg'" onMouseOut="this.src='images/01_32.jpg'"border=0></a></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/01_33.jpg"></td>
        <td rowspan="2">
            <img src="images/01_34.jpg"></td>
        <td rowspan="2">
            <img src="images/01_35.jpg"></td>
        <td rowspan="2">
            <img src="images/01_36.jpg"></td>
        <td rowspan="2">
            <img src="images/01_37.jpg"></td>
        <td rowspan="2">
            <img src="images/01_38.jpg"></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td valign="bottom"><a href="contacts.html">
            <img src="images/01_40.jpg"></a></td>
    </tr>
    </table>
    </td></tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 16.1.2010, 0:04; Ответить: Webmaster_hb
Сообщение #7


Tixoff, добавьте стили в заголовок

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
html,body {
height:100%;
margin:0;
padding:0;
}
</style>
</head>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Tixoff
Tixoff
сообщение 16.1.2010, 0:10; Ответить: Tixoff
Сообщение #8


Webmaster, спасибо!
Помогло. Странно, добавлял, как Вы уже писали ранее в этом топике, но не работало.
Не понимаю в чем была проблема, был бы рад если бы ткнули пальцем.

Хотя конечно, возможно, проблема в руках:pardon:

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Kadam.net - Промышленные объемы трафика под все вертикали | 90% отчисления паблишерам!
 2 support_kadam 1803 18.4.2022, 16:40
автор: support_kadam
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
 10 NikN 2637 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Выравнивание содержимого footer'a
 0 press74 4993 2.7.2019, 18:58
автор: -iiwanc-
Открытая тема (нет новых ответов) Выровнить абсолютный блок по центру НЕИЗВЕСТНОГО размера без js
 2 lensoy 5590 27.9.2015, 19:08
автор: -lensoy-
Открытая тема (нет новых ответов) Выравнивание по центру
 5 Markelok 5327 24.8.2014, 15:28
автор: -Dima3456-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 18.4.2024, 15:07

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet