не могу создать элемент div - без position: absolute;

Zero-11 · August 13, 2014

Не могу создать элемент DIV - не прописав свойство position: absolute из-за чего не получается смаштабировать сайт:

<!DOCTYPE html><html> <head>  <title>Сайт по WEB-разработке</title>   <meta charset="utf-8">   <link rel='stylesheet' href='../css/style.css' /><script type='text/javascript' src='../js/jquery-1.11.1.min.js'></script><script type="text/javascript" src="../js/jguery-1.4.2.min.js"></script><script type="text/javascript" src="./js/jguery-ui-1.8.2.custom.min.js"></script><script type="text/javascript" src="../js/jguery.ghindaVideoPlayer.js"></script>   <script>   document.createElement('figure');   document.createElement('figcaption');  </script>  	  </head>   <body> <div id="wrap-6"> </div> <div id="wrap-4"> <div id="wrap-5"> <h1>Сайт по WEB-разработке</h1> <h2>Проектирование современного дизайна сайта</h2>   </div> </div>  <div id="wrap">   <div id="header">   		<div id="nav">	   <div id="head">	     <div id="logo" ><a href="#" title="logo"></a></div>		   </div>		 <ul id="links">             <li><a href="#">Home</li> 		              <li><a href="#">Order</a></li>              <li><a href="#">About as</a></li>              <li><a href="#">Contact as</a></li>          </ul>           </div>	     </div>	 </div>  <div id="wrap-2"> <form method="POST" action="index.html">  <input type="text" name="name">  <button>Text</button>  </form></div> <div id="wrap-3"> <figure><img src="../images/my_4.png" align="left" alt="разработка медиа-контента"> <figcaption>HTML5-плееры для разработчика</figcaption></figure> <figure><img src="../images/my_3.png" align="left" alt="разработка медиа-контента"><figcaption>HTML5-плееры для разработчика</figcaption></figure>  <figure><img src="../images/my_2.png" align="left" alt="разработка медиа-контента"><figcaption>HTML5-плееры для разработчика</figcaption></figure> </div>  <div class="main">  	<div id="content_sidebar"></div> 	  <div id="content">	   	<div id="content_wrapper">           <section class="warning"> <img src="../images/web.png" class="voodoohead" alt="" width="49" height="92"> <header><h1><img src="../images/Microsoft.jpg" alt="WEB-дизайн"       width="137" height="30"></h1></header> <p style="color:#FF0000" align="justify">Современный WEB-разработчик должен быть знакомым с HTML5/CSS3 и знать спецификацию, знать технологию Ajax. Стандартным средствомобработки успешного выполнения запроса, является указание собственной функции в параметре success. При вызове она получает данные переданные сервером, текстовый статус выполнения запроса, а так же Объект jqXHR.Начиная с jQuery-1.5, метод $.get() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred, что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы .success(), .error() и .complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов. Однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования. Другими возможностями помимо серверных технологий является поддержка медиа-плагинов и работа с аудио,вот примерный список плагинов, поддерживаемых JQuery.</p></section><section>  <header><center><h1><a href="./js/script.html">Разработанный HTML5-плеер</a></h1></center></header>  <p style="color:#FF0000" align="left" align="top:10px;">Современный стандарт HTML5 автоматически опреджеляет код и технологию сжатия,это свойство тега Video, что позволяет оптимизировать, качесвто видео   при воспроизведении, потоковое видео и подобрать потимальное качесвто, из пропускной способности канала, за счет использование кодека Vp8/vorbis, формат webm</p>  <ul>     <li><a href="">ссылка</a></li>	 <li><a href="">ссылка</a></li>	 <li><a href="">ссылка</a></li>	 <li><a href="">ссылка</a></li>     <li><a href="">ссылка</a></li>	 <li><a href="">ссылка</a></li>	 <li><a href="">ссылка</a></li>	 <li><a href="">ссылка</a></li>     <li><a href="">ссылка</a></li></ul>  </section>     </div>    </div>   </div> <header><h1>Использование JQuery</h1></header><section>  <div class="main">  <div id="wrapper"><iframe src="../slider/slider.html" frameborder="0" height="343" width="610" scrolling="no" name="frame"></iframe></div> <div id="my_wrapper"><iframe src="../slider_1/slider_show.html" frameborder="0" height="250" width="350" scrolling="no" name="frame"></iframe><div id="my_wrapper_1"><p style="color:#FF0000" align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,  vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum  felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.  Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p></section></div> </div>   </div><div id="my_wrapper_2"><p style="color:#FF0000" align="left">При помощи Java можно реализовать вот такое слайд шоу и для этого используется DOM - объектнпая модель документа,что позволяет быстро настрайватьскрипт и стилизовать его</p>  </div></div> <div id="nav_1">  <ul>       <li><a href="http://www.microsoft.com/ru-ru/default.aspx">Microsoft</a></li>       <li><a href="http://windows.microsoft.com/ru-ru/windows-8/meet">Windows 8.1</a></li>       <li><a href="http://windows.microsoft.com/ru-ru/internet-explorer/download-ie">Internet Explorer</a></li>       <li><a href="http://office.microsoft.com/ru-RU">Продукты Office</a></li>       <li><a href="http://www.visualstudio.com/">Visual Studio</a></li>       <li><a href="https://www.microsoft.com/ru-ru/outlook-com/">Outlook.com</li></a>  	   <li><a href=""></a></li>       <li><a href=""></a></li>       <li><a href=""></a></li>	   <li><a href=""></a></li>	   <li><a href=""></a></li>         <li><a href=""></a></li>       <li><a href=""></a></li>	   <li><a href=""></a></li>	</ul> </div><div id="content_2"></div><div id="nav_content"></div>   <div id="sidebar">  <ul>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>	 <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>	 <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>	 <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>	 <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>	 <li><a href="">ссылка</li></a>     <li><a href="">ссылка</li></a>	 <li><a href="">ссылка</li></a>  </ul></div><div id="my_content_4"> <div style="margin-left:24%"><div id="center"><div class="content-1"><h3>Мой плеер на Query</h3></div></div><iframe  width="508" height="260" frameborder="0" scrolling="no" marginheight="0"  marginwidth="0"  align="center" ; src="../my_play/index.html"></iframe></div> </div> <div id="my_block_6">  </div>  <div id="my_content_7">    </div> <div id="my_content_8">    </div>	     <footer>  <div class="footer-bg">  <div class="copyright">   <p><strong>Учебный сайт «Как поймать льва в пустыне»</strong></p>   <p>© Влад Мержевич</p>  </div> </div></footer>     </body></html>

Нарек · August 13, 2014

А почему не можете? Берешь и прописываешь

<div> этот блок без absolute </div>

а в css вообще его не трогаешь. Вот и все. :boast:

Zero-11 · August 13, 2014

То есть не могук найти ошибку в коде - пришлось его выгрузить сюда, стал для сайта делать частично резиновый макет, шапка, первый текстовой блок <div id="content_wrapper"> в разделе отображается нормально, а остальные если убрать свойство position: absolute - не отображаются:

А остальные элементы смещаются а если убрать position:absolute - они не отображаются.

Так мне нужно его убрать - если я удалю и напишиу к примеру:

#content_2{
width: 180px;
height: 502px;
top: 890px;
left: 1068px;
margin-right: 20px;
background-image: url(./images/fon.jpg);
vertical-align: img;
float:right;

вместо:

#content_2{
position: absolute;
width: 180px;
height: 502px;
top: 890px;
left: 1068px;
margin-right: 20px;
background-image: url(./images/fon.jpg);
vertical-align: img;
float:right;

он вообще не отобразится.

А почему не можете? Берешь и прописываешь
<div> этот блок без absolute </div>
а в css вообще его не трогаешь. Вот и все.

#content_2{
width: 180px;
height: 502px;
top: 890px;
left: 1068px;
margin-right: 20px;
background-image: url(./images/fon.jpg);
vertical-align: img;
float:right;

вместо:

#content_2{
position: absolute;
width: 180px;
height: 502px;
top: 890px;
left: 1068px;
margin-right: 20px;
background-image: url(./images/fon.jpg);
vertical-align: img;
float:right;

Нарек · August 13, 2014

на jsfiddle хотя бы залили, или ссылку на сайт дали, сколько в коде ковырятся?

что то новое постоянно на форуме всплывает. То float: center; то vertical-align: img;

Edited August 13, 2014 by Нарек

npofopr · August 14, 2014

Снова вы со своим супер современным сайтом.

Вам уже не раз говорили, что у вас там бедлам полный.

То float: center; то vertical-align: img;

И зачем кидать сюда код, когда у вас есть ссылка на сайт?

Sergik+ · August 14, 2014

Книжки людям лень читать, меня может сейчас закидают тапками но я считаю

в начале пути веб-разработчика примерно 80% должно уходить на чтение книг,

форумов и статей, можно и видео вменяемое смотреть.

ЛИБО НЕЗАЧЕМ ИЗОБРЕТАТЬ ВЕЛОСИПЕД.

Zero-11 · August 14, 2014

Изучаю спецификацию по CSS3 - по ссылке которой вы мне дали - у меня на чтение книг и статей по соответвующий тематике уходит 90%- ов времени, я сайт еще не доработал, поэтому и не выгрузил его, я заполняю контент, есть скрытая ошибка - возможно в конструкции:

 <section class="warning"> <img src="../images/web.png" class="voodoohead" alt="" width="49" height="92"> <header><h1><img src="../images/Microsoft.jpg" alt="WEB-дизайн"    width="137" height="30"></h1></header>

Sergik+ · August 14, 2014

Вот вам подсказка: срочно в песочницу.

Объясню как, делаете абсолютно новый проект с нуля и с самого верха начинаете как правильно.

Если шапка не идет кидаете на форум и все вместе разбираемся, а то что книжку начали читать это

хорошо.

Сверстать ваш сайт меньше чем за 3-4 часа можно.

Блин многа написал, если именно как у вас то и за 30 минут можно не спеша.

Edited August 14, 2014 by Sergik+

Sign In

не могу создать элемент div - без position: absolute;

Question

Zero-11

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Нарек

Link to comment

Share on other sites

Zero-11

Link to comment

Share on other sites

Нарек

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Sergik+

Link to comment

Share on other sites

Zero-11

Link to comment

Share on other sites

Sergik+

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information