Создать обтекаемый слева и снизу div с картинкой

ForSecond · May 12, 2012

Доброго времени суток.

Есть задание по одному предмету в ВУЗе: создать свой сайт. Самый простой, но не в этом суть.

Я набросала в фотошопе, что хочу изобразить.

Сайт делается в IE9 и демонстрироваться будет в IE7 или 8.

Сейчас он выглядит так:

И проблема в том, что не выходит расположить картинку с собакой так, как хотелось бы.

Всё делается в слоях. Структура div'ов на рисунке ниже.

Свойства border сделаны, просто чтобы видеть границы слоёв.

Ну, и возможно ли сделать как я хочу? Если да, то каким образом, в каком направлении двигаться?

Reveal hidden contents


<html>
	<head>
		<title>Личная страница моей собаки – Главная</title>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<link rel="SHORTCUT ICON" type="image/png" href="dog-icon_.png">
		<link rel="stylesheet" type="text/css" href="pagestyle.css">

		<script type="text/javascript">
			function showBlock(id) 
			{
				if (document.getElementById(id).style.display == 'none')  {		document.getElementById(id).style.display='inline';		} 
				else {	document.getElementById(id).style.display = 'none';	}
			}
		</script>
	</head>

	<body>
		<div id="main">
			<!--<img src="images/logo.png" alt="logo" width="224" height="284" align="right" border="0" style="float: right;">-->
			<div id="header">
				<div id="h_title" align="center">
					Личная страница 
					<p style="text-indent: 30%">моей собаки</p>
				</div>

				<div id="h_logo" align="right">
					<img src="images/logo.png" alt="logo" width="224" height="284">
				</div>
			</div>
			<div id="inbody">

				<div id="menu">
					<p align="center"><font size="+3">Меню</font></p>
					<ul class="verticalmenu">
						<li><a href="#">Обо мне</a> </li>
						<li><a href="#" onclick="showBlock('menu0');" style="cursor: pointer;">О собаках </a></li>				
						<ul class="menuNum" id="menu0" style="display: none;">
							<li>— <a href="#" target="_blank">о породах</a></li>
							<li>— <a href="#" target="_blank">о питании</a></li>
							<li>— <a href="#" target="_blank">о поведении</a></li>
							<li>— <a href="#" target="_blank">о дрессировке</a></li>
							<br />
						</ul>
						<li><a href="#" onclick="showBlock('menu1');" style="cursor: pointer;">Ветеринария </a></li>
						<ul class="menuNum" id="menu1" style="display: none;">		
							<li>— <a href="#" target="_blank">Типичные проблемы</a></li>
							<li>— <a href="#" target="_blank">Вет. клиники Влад-ка</a></li>
							<li>— <a href="#" target="_blank">Зоомагазины и вет. <br />аптеки Влад-ка</a></li>
							<li>— <a href="#" target="_blank">Зоотакси</a></li>
							<br />
						</ul>
						<li><a href="#" onclick="showBlock('menu2');" style="cursor: pointer;">Фотографии </a></li>
						<ul class="menuNum" id="menu2" style="display: none;">		
							<li>— <a href="#" target="_blank">Малыш</a></li>
							<li>— <a href="#" target="_blank">Подросток</a></li>
							<li>— <a href="#" target="_blank">Взрослый</a></li>
							<br />
						</ul>
						<li><a href="#">Гостевая книга</a> </li>
					</ul>
				</div>

				<div id="content">
					<p><font size="+4">Здравствуйте! </font></p>
					<p>Меня зовут Дейл. <br />
					Рад видеть Вас на моей личной страничке. <br />
					Решил её завести постольку, поскольку сложно каждый раз по новой искать необходимую информацию. <br />
					Буду собирать её здесь. <br />
					Надеюсь, Вам она так же окажется полезной. </p>
				</div>

			</div>
			<div id="footer">
				<a href="mailto:myDog's_site@ya.ru">Пишите</a>
			</div>

		</div>
	</body>
</html>

Reveal hidden contents


body 
{
	background: fixed #4C2B03 url(images/fon_2.jpeg) repeat;
	font-family: Georgia, Trebuchet MS, Comic Sans MS, Serif, Times;
	margin: 0;
	padding: 0 15%;	
	width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 800 ? "800px" : "auto");
}

	A { text-decoration: none }
	A:link { color: #FFFFFF } /*сама ссылка*/
	A:visited { color: #FFFFFF } /*посещённая ссылка*/
	A:active { color: #FF0000 } /*активная или только что посещённая ссылка*/
	A:hover { color: #8A0829; text-decoration: underline } /*ссылка, на кот. указывает курсор*/


#main 
{	
	background: #000000;
	border-radius: 5em/2.5em;
	height: 100%;
	min-height: 600px;
	min-width: 800px;
	width: 100%;	
}

#header
{	
	background: #0B591A;
	border-top-left-radius: 5em 2.5em;
	height: 234px;	
	margin: 0;
	padding: 0;
	width: 100%;
}
	#h_title
	{
		border: 2px #FFFFFF solid;
		float: left;
		font: 3em Comic Sans MS; /*[font-style||font-variant||font-weight] font-size [/line-height] font-family */
		line-height: 0.6;
		padding: 3% 0;		
		width: 73%;
	}

	#h_logo
	{
		border: 2px #FFF000 solid;
		margin-left: 73%;
		overflow: visible ;
	}

#inbody 
{
	display: block;
	height: 65%;
	margin: 0;
	padding: 0;
	width: 100%;
}
	#menu
	{
		border: 2px #FF0000 solid;
		color: #FFFFFF;
		float: left;
		height: 100%;
		padding-top: 6%;
		width: 25%;
	}

	.verticalmenu 
	{
		display: block;
		list-style: none;
		padding: 0 0 0 6%;
		margin: 0;
		width: 100%;
	}

	.verticalmenu li
	{
		font: 1.4em Trebuchet MS;
		text-align: left;
	}

	.menuNum
	{
		list-style: none;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	.menuNum li
	{
		font: 1em Trebuchet MS;
	}

	#content
	{
		background: #FFFFFF;
		border: 2px #00FFF0 solid;
		font: 1.4em Georgia;
		margin-left: 25%;
		padding: 0 0 0 3%;
		height: 100%;
	}
#footer 
{
	background: #FFFFFF;
	border-bottom-right-radius: 5em 2.5em;
	float: right;
	width: 75%;
	height: 5%
}

	#footer A:link {color: #000000;}
	#footer A:visited {color: #000000;}

alexforce2 · May 12, 2012

Было бы легче помочь, если бы вы выложили ваш код.

Елeна · May 12, 2012

Сверстайте как на изображении 1, если бы не было фотографии собакина. Потом добавьте div: <div id='sobakin'><img src='img/sobak.png' alt='пёсик'></div> , пропишите ему relative позиционирование и расположите с помощью top / left.

ForSecond · May 12, 2012

alexforce2, а Вы не заглядываете в скрытый текст? Он весь там.

Елeна, куда именно добавить описываемый вами div? Я попробую с имеющимся сделать, что Вы предлагаете.

Add

Елена, благодарю, Вы дали хорошую подсказку. Только у div с собакой "#h_logo" пишем "position: absolute;" и выравнивание делаем по top и right. Поскольку отсчёт координат будет относительно всей страницы, а не элемента, кот. содержит данный. Может быть, в других браузерах иначе, но IE так работает, и в данном случае остальное неважно.

Не знаю насколько верно данное решение, в принципе, но оно привёло к желаемому результату.

Edited May 13, 2012 by ForSecond

Елeна · May 13, 2012

On 5/12/2012 at 11:30 PM, ForSecond said:
Елена, благодарю, Вы дали хорошую подсказку. Только у div с собакой "#h_logo" пишем "position: absolute;" и выравнивание делаем по top и right. Поскольку отсчёт координат будет относительно всей страницы, а не элемента, кот. содержит данный. Может быть, в других браузерах иначе, но IE так работает, и в данном случае остальное неважно.
Не знаю насколько верно данное решение, в принципе, но оно привёло к желаемому результату.

При использовании absolute могут возникнуть проблемы при масштабировании страницы - попробуйте поставить в браузере масштаб 80% и посмотрите как будет выглядеть Ваша страница.

По поводу кроссбраузерности - всё написано по ссылкам выше.

ForSecond · May 13, 2012

Елeна, Вы читали исходное моё сообщение? Мне не нужны другие браузеры. В IE меня всё устраивает. И не надо цитировать так много текста, достаточно обращения.

Sign In

Создать обтекаемый слева и снизу div с картинкой

Question

ForSecond

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

alexforce2

Link to comment

Share on other sites

Елeна

Link to comment

Share on other sites

ForSecond

Link to comment

Share on other sites

Елeна

Link to comment

Share on other sites

ForSecond

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information