Помогите с вертской плз. Проблема с расположением блоков/картинок

[msk1]

Помогите новичку пожалуйста!

Сам разберусь точно не скоро, т.к. времени после работы крайне мало на изучение веб программирования. Для тех кто хорошо понимает css/html, там делов-то на раз плюнуть.

Вкратце:

Хочу сделать страничку с расположением объектов как на двух скриншотах внизу

http://i.imgur.com/E9UmjdD.jpg

http://i.imgur.com/ysMAPqi.jpg

Сама страничка - http://podstrigis.com/test

Буду благодарен за любую помощь!

Edited May 5, 2013 by msk1

[Kray Storm]

Т.е., картинка должна быть (1)прибита к низу внутри параграфа с текстом, (2)уходить вправо и при этом (3)обтекаться текстом, который идет сверху и (4)еще менять размер в зависимости от размеров окна?

С 1 и 2 проблем нет - ставишь <img> внутрь <p> и даешь ему float:right и margin-right:-...px;

Вот с 3 непонятно, потому как текст обтекает только те float-ы, которые идут выше.

Для 4 можно задать <img>-у min/max-width в %.

Для тех кто хорошо понимает css/html, там делов-то на раз плюнуть.

Как говорил один бывший начальник: "Тут дофига работы и все на вчера, но я знаю, что ты легко и быстро это сделаешь - давай, занимайся..." ))

Edited May 5, 2013 by Kray Storm

[msk1]

Т.е., картинка должна быть (1)прибита к низу внутри параграфа с текстом, (2)уходить вправо и при этом (3)обтекаться текстом, который идет сверху и (4)еще менять размер в зависимости от размеров окна?

С 1 и 2 проблем нет - ставишь <img> внутрь <p> и даешь ему float:right и margin-right:-...px;

Вот с 3 непонятно, потому как текст обтекает только те float-ы, которые идут выше.

Для 4 можно задать <img>-у min/max-width в %.

Для тех кто хорошо понимает css/html, там делов-то на раз плюнуть.

Как говорил один бывший начальник: "Тут дофига работы и все на вчера, но я знаю, что ты легко и быстро это сделаешь - давай, занимайся..." ))

Мозг на грани и скоро закипит ))))) У юриста немного другой склад ума и такие задачки даются особенно трудно )))))

Пока перелопатил гугл за последние 4 часа, максимум на что меня хватило -

http://podstrigis.com/test2

Очень близко к тому что хотел, но все равно немного не то... Мне нужно чтобы весь текст уезжал наверх, а пёсик был бы приклеен к контейнеру с картой ( как тут http://i.imgur.com/KLb6KYw.jpg )

 <style type="text/css">
.image {
float: right;
margin-right: -600px;
margin-top: 4%;
}

.image:before {
content: " ";
height: 300px;
width: 1px;
overflow: hidden;
}

#imgz {
	 pointer-events: none;
	 position: relative;
	 z-index: 2;
	 margin-left: 5%;
	 max-width: 302px;
	 width: 100%
}
#zed {
float: left;
width: 100%;
max-width:490px;
position: relative;
z-index: 1
}

#zed header {
width: 100%;
margin:0px auto;
}
#zed p {line-height: normal;
}
#zed h1 {
background: rgba(0,0,0,0.2);
text-align: left;
color:#fff;
font: 95px/1 "Cuprum";
text-transform: uppercase;
display: inline-block;
text-shadow:#253e45 -1px 1px 0,
#253e45 -2px 2px 0,
#d45848 -3px 3px 0,
#d45848 -4px 4px 0;
width: 100%;
margin: 5% auto 5%;
}
#map {width: 100%; height: 350px; position: relative; z-index: 3; margin-top: -5%; float: left;
}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<div id="imgz">
<img src="http://podstrigis.com/wp-content/uploads/2013/05/11dreamstime_xxl_84183891.png" class="scale-with-grid" align="left">
</div>





<div id="zed">
<header>
<h1 id="fittext">Squeeze with FitText</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>

<script src="http://podstrigis.com/js/fittext.js"></script>
<script type="text/javascript">
fitText(document.getElementById('fittext'), 1.2)
</script>
</div>

<div id="map">
<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=PEnMnvxxJ-j3vshlIHI1ecsxHE90IhzO&id=map"></script>
</div>

Edited May 5, 2013 by msk1

[Kray Storm]

Картинка привязанная к блоку-карте внизу и при этом обтекаемая крупным блоком текста сверху - это, если я правильно понимаю, задача немного противоречивая. Тогда придется делать два текстовых блока: один - основной, который будет над картинкой, а второй - колонкой слева от изображения. Ну и само изображение прибить вниз, естественно.

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

Читаем, и понимаем, что

там делов-то на раз плюнуть

было несколько оптимистично.

PS:

У юриста немного другой склад ума

Юрист, работающий в... парикмахерской... верстальщиком... Видать, тяжело сейчас юристам

Edited May 5, 2013 by Kray Storm

[pashkje]

А вот про юриста это ты зря))) Я по образованию правовед, но год уже работаю веб-мастером ))