Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: резиновая верстка
 
 автор: dod   (18.04.2008 в 16:01)   письмо автору
 
 

подскажите как сделать что-бы при верстки таким способом при уменьшении размеров окна браузера элементы "блок2" и "блок3" невыходили за пределы окна .

<div id="header" style=" height: 120px;"><h2>1-ый блок</h2></div>
<div style="position: relative; top: -100px; margin-bottom: -100px; z-index: 5; height: 100px; padding-left: 900px;">Блок2</div>
<div style="position: relative; top: -130px; margin-bottom: -100px; z-index: 5; height: 100px; padding-left: 900px;">Блок3</div>

или может быть есть другой вариант?

   
 
 автор: Slyfox   (18.04.2008 в 18:58)   письмо автору
 
   для: dod   (18.04.2008 в 16:01)
 

px можно поменять на %

   
 
 автор: Niks1   (18.04.2008 в 19:32)   письмо автору
 
   для: dod   (18.04.2008 в 16:01)
 


<div style="position: relative;width: 100%;">
    <div style="width: 200px;position: absolute;left: 0px;top: 0px;">Блок1</div>
    <div style="margin-left: 200px;">Блок2</div>
</div>

   
 
 автор: hatsker   (18.04.2008 в 21:31)   письмо автору
 
   для: Niks1   (18.04.2008 в 19:32)
 

width помоему даже ставить не нужно. он сам по умолчанию станет 100%.

   
 
 автор: 3ABAPKA   (19.04.2008 в 07:35)   письмо автору
 
   для: dod   (18.04.2008 в 16:01)
 

Пробуй
margin-......: -100px
и все похожее написать так
margin-.........: -?%

? - всмысле цыфра
........ - параметрт

   
 
 автор: mechanic   (19.04.2008 в 12:13)   письмо автору
 
   для: dod   (18.04.2008 в 16:01)
 

<div id="header" style="height: 120px;margin-right:100px;">
<h2>1-ый блок</h2>

<div style="position:absolute;height: 100px;right:0px;border:1px solid black;top:0px;">
Блок2
</div>
<div style="position:absolute;height: 100px;right:0px;border:1px solid black;">
Блок3
</div>
</div>

покатит?

   
 
 автор: dod   (19.04.2008 в 16:00)   письмо автору
 
   для: mechanic   (19.04.2008 в 12:13)
 

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

   
 
 автор: dod   (19.04.2008 в 22:18)   письмо автору
 
   для: dod   (19.04.2008 в 16:00)
 

Нет , все безполезно !
Все равно вылазит при уменьшении окна :

#header {
margin: 0 0 0.2em 0;
padding: 1em 1.5em;
height:8em;

background: #343434 url('header.jpg') no-repeat top left ;
border:1px solid ##2D5289;;
}

<div id="header">
<div style="position: relative;width: 100%;">
    <div style="width: 100%;position: absolute;left: 0px;top: 0px;">
    <div style="margin-left: 85%;"><form name="" action="" method="post">
        <table width='200' border='0' cellspacing='0' cellpadding='0' class='3'>
          <tr>
            <td align='center' class='3'>Имя:<br> Пароль:</td>
            <td align='center' class='3'><input style="padding-left:20px" name="Name" type="text" value="" size="15">
              <br> <input style="padding-left:20px" name="Name" type="text" value="" size="15">
              <br> </td>
          </tr>
          <tr>
            <td align='center' class='3'>&nbsp;</td>
            <td align='center' class='3'><input name="submit" type="submit" value="Send" /></td>
          </tr>
          <tr>
            <td align='center' class='3'>&nbsp;</td>
            <td align='center' class='3'><a href="">Регистрация</a>
              <hr width=80 /></td>
          </tr>
          <tr>
            <td align='center' class='3'>&nbsp;</td>
            <td align='center' class='3'><a href="">Забыли пароль?</a> </td>
          </tr>
        </table>
      </form>&nbsp;
</div>
</div>
</div>
</div>



Как - же сделать что-бы невылазило ?

   
 
 автор: 3ABAPKA   (21.04.2008 в 07:04)   письмо автору
 
   для: dod   (19.04.2008 в 22:18)
 

Так нравится?

<div id="header">
      <form name="" action="" method="post" >
        <table width='200' border='1' cellspacing='0' cellpadding='0' class='3' align="right">
          <tr>
            <td align='center' class='3'>Имя:<br> Пароль:</td>
            <td align='center' class='3'><input style="padding-left:20px" name="Name" type="text" value="" size="15">
              <br> <input style="padding-left:20px" name="Name" type="text" value="" size="15">
              <br> </td>
          </tr>
          <tr>
            <td align='center' class='3'>&nbsp;</td>
            <td align='center' class='3'><input name="submit" type="submit" value="Send" /></td>
          </tr>
          <tr>
            <td align='center' class='3'>&nbsp;</td>
            <td align='center' class='3'><a href="">Регистрация</a>
              <hr width=80 /></td>
          </tr>
          <tr>
            <td align='center' class='3'>&nbsp;</td>
            <td align='center' class='3'><a href="">Забыли пароль?</a> </td>
          </tr>
        </table>
      </form>
</div> 

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования