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


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

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

#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. Создание меню для Html, которое будет обновляться на всех страницах сайта...
  2. Как сделать меню без перезагрузки контента?
  3. Верстаем горизонтальное меню по мотивам MasterWEBS
  4. Прилипающее меню
  5. Текст в index.php

#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