Смещение блока

Тема в разделе "Веб-дизайн", создана пользователем Hilo, 23 ноя 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Hilo

    Hilo

    Moderator
    Регистр.:
    31 мар 2008
    Сообщения:
    927
    Симпатии:
    582
    Чет неполучается... Интегрировал php скрипт "формы" в html страницу. А менюшка, сайта, слева, сместилась. Как сделать менюшку и результат вывода скрипта на одном уровне.
    Не привожу примеров, прошу лишь напомнить, как выровнять эти 2 блока. Блок меню с блоком вывода результата скрипта.
    Р.S. А лучше вопрос, как интегрировать в тот же блок меню результат вывода скрипта, без смещения
     
  2. bonzaza

    bonzaza Постоялец

    Регистр.:
    13 ноя 2007
    Сообщения:
    53
    Симпатии:
    9
    Без примера крайне сложно ответить, потому что не известно какой вариант верстки (табличная или блочная), и неизвестно куда именно уехала менюшка.

    Самый простой способ не зная ничего, это выровнять форму, задав ей свойство position:absolute; а дальше выровнять ее через top:числоpx; left:числоpx; и т.д. При этом родительский блок, который содержит форму, должен иметь свойство position:relative;

    А так вообще надо смотреть пример, это пальцем в небо тыкать, не видя примера :D
     
  3. Hilo

    Hilo

    Moderator
    Регистр.:
    31 мар 2008
    Сообщения:
    927
    Симпатии:
    582
    Вот Css блока
    HTML:
    .body {
    background-color:#F2CCDA;
    color:#000000;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    padding:15px 15px 7px;
    text-align:justify;
    vertical-align:top;
    }
    Вот сам код
    HTML:
    <div class="body">
       <p class="стиль1"><?php include ("скрипт.php"); ?></p>
       <p class="стиль1"></p>
       <p class="стиль1"><a href="index.html" class="style">Главная</a></p>
       <p class="стиль1"><a href="We.html" class="style">О нас</a></p>
       <p class="стиль1"><a href="questions.html"class="style">Вопросы</a></p>
         </div> 
    Как правильно интегрировать скрипт.php чтобы меню было слева, форма результата скрипта справа. Т.е. напротив менюшки, на одном уровне.
     
  4. bonzaza

    bonzaza Постоялец

    Регистр.:
    13 ноя 2007
    Сообщения:
    53
    Симпатии:
    9
    Примерно так:
    HTML:
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .body_txt {float:left;width:200px;background:#F2CCDA;color:#000000;font-family:Arial,Helvetica,sans-serif;font-size:12px;padding:15px 15px 7px;text-align:justify;}
    .script_txt {margin-left:200px;background:#CCC;}
    </style>
    </head>
    <body>
    <div class="body_txt">
       <p class="стиль1"></p>
       <p class="стиль1"><a href="index.html" class="style">Главная</a></p>
       <p class="стиль1"><a href="We.html" class="style">О нас</a></p>
       <p class="стиль1"><a href="questions.html"class="style">Вопросы</a></p>
    </div>
    <div class="script_txt">
    	<p class="стиль1"><?php include ("скрипт.php"); ?> adfkasdjf lakjdfs</p>
    </div>
    </body>
    </html>
    
     
  5. Hilo

    Hilo

    Moderator
    Регистр.:
    31 мар 2008
    Сообщения:
    927
    Симпатии:
    582
    Неподходит. Форма вывода результата все равно ниже меню. А необходимо чтобы была это форма по правую сторону от меню на одном уровне, а не ниже.
     
  6. bonzaza

    bonzaza Постоялец

    Регистр.:
    13 ноя 2007
    Сообщения:
    53
    Симпатии:
    9
    Решение такое:

    Код блока вывода контента меняем на этот:
    HTML:
    
    <div class="body_txt">
    	<div id="lft">
       		<p class="стиль1">&nbsp;</p> <!-- эту строчку удалить, чтобы меню начиналось слева сверху без отступа -->
       		<p class="стиль1">&nbsp;</p> <!-- эту строчку удалить, чтобы меню начиналось слева сверху без отступа -->
       		<p class="стиль1"><a href="index.html" class="стиль2">Главная</a></p>
       		<p class="стиль1"><a href="cena.html" class="стиль2">Прайс</a></p>
       		<p class="стиль1"><a href="zakaz.html" class="стиль2">Сделать заказ</a></p>
       		<p class="стиль1"><a href="kontakti.html" class="стиль2">Контакты</a></p>
       		<p class="стиль1"><a href="guest/comment.php" class="стиль2">Отзывы</a></p>
       		<p class="стиль1"><a href="o nas.html" class="стиль2">О нас</a></p>
       		<p class="стиль1">&nbsp;</p>
       		<p class="style1">&nbsp;</p>
       </div>
    	<div id="rht">
    	<p class="стиль1"><?php include ("скрипт.php"); ?> Вопросы</p>
       </div> 
    </div>
    
    в CSS дописываем:
    HTML:
    
    .body_txt {float:left;margin:0 0 10px;padding:15px 15px 7px 15px;color:#000000;text-align:justify;background:#f2ccda;font:12px Arial, Helvetica, sans-serif;}
    #lft {float:left;vertical-align:top;}
    #rht {margin-left:200px;background:#CCC;}
    
    Теперь позиционируется относительно меню ;)
     
    Hilo нравится это.
Статус темы:
Закрыта.