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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Форма поверх картинки 
V
    Опции темы
NLspieler
Дата 11.3.2009, 00:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Работаю над созданием шапки для будующего сайтика.

В веб-дизайне нифига не шарю. Поэтому за глупый вопрос сильно не пинайте.


Пока сделал вот такую вот шапку. http://blsamler.110mb.com/oben.html
Код

<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="300"><img src="logo.jpg" width="100%" height="100" /></td>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="o.jpg" width="100%" height="50" /></td>
      </tr>
      <tr>
        <td><img src="o.jpg" width="100%" height="50" /></td>
      </tr>
    </table></td>
  </tr>
</table>


А вопрос вот в чем, как в юго-восточном сегменте, прям поверх изображения наложить форму (текстовое поле + кнопка)?

И второй, менее важный вопрос. Как сделать так, что бы шапка начиналась с самого верха страницы, т.е. не было этого уродского отступа?
PM MAIL   Вверх
bars80080
Дата 11.3.2009, 01:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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



Цитата(NLspieler @  10.3.2009,  23:37 Найти цитируемый пост)
ак сделать так, что бы шапка начиналась с самого верха страницы, т.е. не было этого уродского отступа? 

самый первый стиль:

Код

* { margin: 0px; padding: 0px; }



Цитата(NLspieler @  10.3.2009,  23:37 Найти цитируемый пост)
А вопрос вот в чем, как в юго-восточном сегменте, прям поверх изображения наложить форму (текстовое поле + кнопка)?

если там ячейка и она пустая, то пихаем в ячейку слой div, в него форму.
если ячейка не пустая, то лучше сделать наоборот: один слой div, в нём твоя таблица с шапкой, после таблицы (  ... </table><div> ...) кладём ещё один див с формой

внешнему присваиваем стиль - position: relative;
внутреннему (тому, что после таблицы) - position: absolute; right: 0px; bottom: 0px;

всё
PM MAIL WWW   Вверх
NLspieler
Дата 11.3.2009, 02:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Огромное спасибо! Теперь все заработало.


Но в эксплолере, форма висит не на шапке, как должна, а где то внизу сайта. 

Эксплоллер - необычайно тупой браузер. Обычно все косяки и непонятки возникают исключительно в нем.

http://blsamler.110mb.com/oben1.html



Это сообщение отредактировал(а) NLspieler - 11.3.2009, 02:15
PM MAIL   Вверх
bars80080
Дата 11.3.2009, 14:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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



Цитата(NLspieler @  11.3.2009,  01:09 Найти цитируемый пост)
Эксплоллер - необычайно тупой браузер. Обычно все косяки и непонятки возникают исключительно в нем.

давай не будем о кривизне рук


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

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml " lang="en" xml:lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <title>TITLE</title>
        
<style type="text/css">
* { margin: 0px; padding: 0px; }

.sss { position: relative; background: #00ff00; }
.fff { position: absolute; right: 45px; bottom: 15px; background: #ff0000; }
</style>
</head>
<body>
    
    
<div align="center" class="sss">
<table width="96%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="300"><img src="logo.jpg" width="100%" height="100" /></td>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="o.jpg" width="100%" height="50" /></td>
      </tr>
      <tr>
        <td><img src="o.jpg" width="100%" height="50" /></td>
      </tr>
    </table></td>
  </tr>
</table>
 
<div class="fff"> 
    <form method="POST">
    <p align="left">  
    <input type="text"   name="p_1" size="50" class="text" maxlength="50" value="" >
      <input type="submit" name="submit" value="submit" /></p>
      
</form> 
</div>
</div>


</body>    
</html>

PM MAIL WWW   Вверх
NLspieler
Дата 11.3.2009, 16:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Теперь все ОК. Спасибо тебе bars80080, за помощь.
Честно говоря, я раньше думал что 
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml " lang="en" xml:lang="en">

эти строки не нужны, т.к. все работало и без них.
Оказывается, что от них тоже есть польза. 

Еще бы понять, что конкретно они означают.
Ни в каких учебниках html упоминания о них я не встречал. 

Это сообщение отредактировал(а) NLspieler - 11.3.2009, 17:23
PM MAIL   Вверх
bars80080
Дата 11.3.2009, 18:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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



Цитата(NLspieler @  11.3.2009,  15:57 Найти цитируемый пост)
Ни в каких учебниках html упоминания о них я не встречал. 

не есть, мне приходилось видеть

небольшой минимум: http://htmlbook.ru/html/!doctype.html

смысл его в том, что он указывает как обрабатывать пришедшую разметку. она ведь сейчас разных стандартов есть html1.0, html4.0, xhtml и т.д. и если доктайп не указан, браузеры переходят в режим самоопознавания, а это уже для них вольный поиск
PM MAIL WWW   Вверх
NLspieler
Дата 17.3.2009, 15:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Попробовал протестировать в старых exploler|ах.
Оказалось, что во всех, кроме 7 версии, форма поиска съесжает куда-то взниз или вообще не показывается. 
Прошу помощи, т.к. сам ничего придумать не могу.
PM MAIL   Вверх
bars80080
Дата 17.3.2009, 15:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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



странно, мой последний пример идёт в ИЕ6. форма там наверху
PM MAIL WWW   Вверх
NLspieler
Дата 18.3.2009, 01:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Наверное проблема возникла вот из-за чего.
Я попробовал сделать так.


Код

<div>

<div>
Ссылки
</div

<div>
Форма поиска
</div


</div


Теперь же я сделал так. И все стало нормально работать.
Код

<div>

<div>
Ссылки и
Форма поиска
</div


</div


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


 




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


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

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