Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Текст наезжает на меню

#1 dima60216

dima60216
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 01 Ноябрь 2014 - 12:15

Подскажите, пожалуйста, как сделать так, чтобы текст раздвигал кнопки, а не наезжал на них? Нужно как-то сделать "резиновый" блок контента. Код не мой
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
		<title>QHSE</title>
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="stylesheet" type="text/css" href="textstyles.css">
		</head>
	<body><!-- <img src= "images/unc.jpg"> -->
		<center>
			<div id="main_block">
					<a href="/contact.html" style="left: 0px; top: -155px;"><img src="images/new_logo_contactus.png"></a>
				<!-- <a href="/contact.html" style="left: 96px; top: -155px;"><img src="images/new_logo_2.png"></a> -->
				<a href="/index1.html" style="left: 235px; top: -155px;"><img src="images/new_logo_3.png"></a>
				<a href="/mwd.html" style="left: 406px; top: -155px;"><img src="images/new_logo_4.png"></a>
				<a href="/dd.html" style="left: 625px; top: -155px;"><img src="images/new_logo_DD.png"></a>
				<a href="/dfs.html" style="left: 0px; top: -102px;"><img src="images/new_logo_6.png"></a>
				<a href="/coman.html" style="left: 623px; top: 270px;"><img src="images/new_logo_CoMan.png"></a>
				<a href="/index1.html" style="left: 810px; top: 270px;"><img src="images/new_logo_AE3.png"></a>
				<a href="/index1.html" style="left: 0px; top: 270px;"><img src="images/new_logo_AE2.png"></a>
				<a href="/qhse.html" style="left: 103px; top: 270px;"><img src="images/new_logo_QHSE.png"></a> <!-- was 10 -->
				<a href="/ae.html" style="left: 319px; top: 270px;"><img src="images/new_logo_AEnergissimo.png"></a> <!-- was a href="https://mail.google.com" -->
				<!-- <a href="/index1.html" style="left: 518px; top: 270px;"><img src="images/new_logo_12.png"></a> -->
				<a href="/wanted.html" style="left: 319px; top: 338px;"><img src="images/new_logo_Wanted.png"></a>
				<a href="/drilling.html" style="left: 625px; top: -62px;"><img src="images/new_logo_14.png"></a>
				<div id="content">
Безопасность и качество

Политика Aphanas Energissimo в сфере безопасности соответствует действующим мировым стандартам качества, охраны окружающей среды, труда и промышленной безопасности (HSE).

Приоритеты:
<ul><li>
•	внедрение и совершенствование системы менеджмента качества (СМК), в соответствии с требованиями международного стандарта ISO 9001:2008;
</li><li>
•	соблюдение законодательства стран, в которых компания ведет свою деятельность;
</li><li>
•	снижение рисков и нестандартных ситуаций путем регулярного аудита;
</li><li>
•	создание максимально защищенных условий труда, сохранение жизни и здоровья сотрудников;
</li><li>
•	обеспечение экологической безопасности и минимизация нанесения вреда окружающей среде в зонах работы персонала компании и подрядчиков;
</li><li>
•	модернизация существующего оборудования и разработка новейших технологий безопасного бурения.
</li><li>
•	обеспечение экологической безопасности и минимизация нанесения вреда окружающей среде в зонах работы персонала компании и подрядчиков;
</li><li>
•	модернизация существующего оборудования и разработка новейших технологий безопасного бурения.
</li></ul>
Политика безопасности распространяется на всех сотрудников, состоящих в штате или работающих по контракту в любой стране мира.
		</center>
		<div id="oblaka"></div>
	</body>
</html>
			body
			{
				margin: 0;
				padding: 0;
				padding-top: 160px;
			}
			#main_block
			{
				height:240px;
				left:50%;
				;
				margin-top:-130px;
				padding:0;
				position:absolute;
				top:50%;
				width:900px;
			}
			#index_page
			{
				height:240px;
				left:50%;
				;
				margin-top:-160px;
				padding:0;
				position:absolute;
				top:50%;
				width:900px;
			}
			a
			{
				position: absolute;
				border: none;
			}
			a.int /*link in text*/
			{
				position: static;
				border: none;
			}
			img
			{
				border: none;
			}
			li
			{
			text-indent: 0px;
			margin-left: 10px;
			padding-left: 5px;
			list-style-position: outside;
			list-style-image: url("images/marker_logo.gif"); /* logo instead of li */
			}
			.one
			{
			position: absolute;
			top: 0;
			left: 0;
			}
			.two
			{
			position: absolute;
			top: 0;
			left: 0;
			}
			.ae img
			{
			-moz-transition: all 1s ease-in-out;
			-webkit-transition: all 1s ease-in-out;
			-o-transition: all 1s ease-in-out;
			transition: all 1s ease-in-out;
			}
			.ae img.one
			{
			opacity: 0;
			filter: alpha(opacity=0);
			-moz-transform:scale(0);
			-webkit-transform:scale(0);
			-o-transform:scale(0);
			-ms-transform:scale(0);
			}
			.ae:hover img.one
			{
			opacity: 1;
box-shadow: 1px 3px 5px #ccc;
			filter: alpha(opacity=100);
			-moz-transform:scale(1);
			-webkit-transform:scale(1);
			-o-transform:scale(1);
			-ms-transform:scale(1);
			}
			.ae:hover img.two, .completion img.two:hover
			{			
			opacity: 0;
			filter: alpha(opacity=1);
			-moz-transform:scale(1);
			-webkit-transform:scale(1);
			-o-transform:scale(1);
			-ms-transform:scale(1);
			}
			#content
			{
				position: absolute;
				top: 0px;
				left: 0;
				width: 900px;
				height: 365px;
				font-family: Arial;
				font-size: 14px;
				text-align: left;
				overflow-y: auto;
				overflow-x: hidden;
			    text-indent: 20px;
			}
			#content p
			{
				padding: 5px;
				padding-top: 0px;
				padding-bottom: 0px;
				font-family: Arial;
				font-size: 14px;
				color: black;
			}
			#citata p
			{
				font-family: Arial;
				font-size: 12px;
				font-style: italic;
				/* text-indent: 250pt; */
				text-align:right ;
				margin: 0;
			}
			#oblaka
			{
				z-index: -100;
				position: fixed;
				bottom: 0;
				height: 500px;
				width: 100%;
				animation: animate-cloud 50s infinite;
				-moz-animation: animate-cloud 50s infinite;
				-webkit-animation: animate-cloud 50s infinite;
				-o-animation: animate-cloud 50s infinite;
				background: url(images/oblak.png) left repeat-x;
			}
			@-webkit-keyframes animate-cloud{from{background-position:1581px 100%;}to{background-position:0 100%;}}
			@-moz-keyframes animate-cloud{from{background-position:1581px 100%;}to{background-position:0 100%;}}
			@-ms-keyframes animate-cloud{from{background-position:1581px 100%;}to{background-position:0 100%;}}
			@-o-keyframes animate-cloud{from{background-position:1581px 100%;}to{background-position:0 100%;}}.animate-cloud-key from{background-position:1581px  100%;}
			.animate-cloud-key to{background-position:0 100%;}

Прикрепленные изображения

  • Без-имени-2.jpg

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Выпадающее меню на CSS
  2. Скрипт вертикального меню на CSS
  3. Выплывающие меню на CSS
  4. Не индексируется текст на форуме
  5. Как быстро яндекс замечает, что текст на странице сайта поменялся?

#2 Алия

Алия
  • Пользователь
  • 42 сообщений
  • Репутация: 10

Отправлено 01 Ноябрь 2014 - 23:07

У всех блоков на Вашей странице в html и css прописано абсолютное позиционирование. Замена на плавающие потребует времени и переделки кода, парой кликов это не исправить.

Вы можете сами поменять высоту содержательного блока, изменив числовое значение top: в html коде у ссылочных блоков (например, вместо 270 прописать 340), блоки сместятся вниз, но при этом их позиционирование останется абсолютным.

Ещё можете добавить в html завершающие

</div></div>

перед

</center>

Тогда код будет более корректным и должна появиться прописанная в css вертикальная прокрутка блока контента. 


Сообщение отредактировал Алия: 01 Ноябрь 2014 - 23:35

  • 1

#3 temp-market

temp-market
  • Пользователь
  • 45 сообщений
  • Репутация: -3

Отправлено 14 Ноябрь 2014 - 22:02

Такая куча кодов никто не станет читать, дай ссылку с какого-нибудь html песочника http://www.cssdesk.com/


  • 0


Оформление форума – IPBSkins.ru