Jump to content
  • 0

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


ForSecond
 Share

Question

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

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

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

538096_s.png

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

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

538109_s.png

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

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

538144_s.png

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

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


<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>


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;}

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

Add

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

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

Edited by ForSecond
Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy