Проблема с позиционированием картинок или дивов внутри дива.

SvetaMatsibora · March 4, 2014

Здравствуйте, помогите разобраться с позиционированием картинок (или дивов) внутри дива.

Вот так должен выглядеть сайт

Так он выглядит без картинок

Код на этом этапе

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Страница</title>
<style>

body{background-image:url('background.jpg');}
div.container{margin:0 auto;width:1117px;height:100%;}

div.header{height:250px;background-color:#F2F9FE;;}

div.nav{height:40px;border-left:1px solid #F2F9FE;;}

div.content{min-height:730px;background-color:#F2F9FE;;}

div.footer{height:20px;text-align:center;color:#000000;font-size:10px;}

div.menu-item{
background-color: #008ae9;
width:185px;
height:50px;
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
;
float:left;
text-align:center;
line-height:48px;
overflow:hidden;
color:#ffffff;
font-weight:bold;
}

div.menu-item:hover{overflow:visible;}

h1{margin:0px;text-align:right;position:relative;top:100px;padding-right:50px;color:#075cc7;}

p {margin:10px;text-indent:25px;font-size:10pt;}
</style>
</head>
<body>

<div class='container'>
<div class='header'>
<h1>Отдых в Феодосии. <br>Дом под ключ <br>с отдельным двором</h1>
</div>
<div class='nav'>
<div class='menu-item'>О нашем доме
</div>
<div class='menu-item'>Галнрея изображений
</div>
<div class='menu-item'> Стоимость проживания
</div>
<div class='menu-item'> Приятные дополнения
</div>
<div class='menu-item'> О нашем городе
</div>
<div class='menu-item'> Контакты
</div>
</div>
<div class='content'><p>...

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

(код с картинками)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Дом под ключ с отдельным двором - Отдых в Феодосии - частный сектор</title>
<style>

body{background-image:url('background.jpg');}
div.container{margin:0 auto;width:1117px;height:100%;}

div.header{height:250px;background-color:#F2F9FE; min-height: 300px;}

div.nav{height:40px;border-left:1px solid #F2F9FE;}

div.content{min-height:730px;background-color:#F2F9FE;}

div.footer{height:20px;text-align:center;color:#000000;font-size:10px;}

div.menu-item{
background-color: #008ae9;
width:185px;
height:50px;
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
;
float:left;
text-align:center;
line-height:48px;
overflow:hidden;
color:#ffffff;
font-weight:bold;
}
div.photos{width: 180; height:300px; float:left;}
div.h1 {width: 70; height:300px; float:right;}
img.header{border-radius: 10px; width: 100px; height: 80px;}

h1{color:#075cc7;}

p {margin:10px;text-indent:25px;font-size:10pt;}
</style>
</head>
<body>

<div class='container'>

<div class='header'>
<div class='photos'>
<div class='imgheader'><img class='header' src='header1.jpg'></div>
<div class='imgheader'><img class='header' src='header2.jpg'></div>
<div class='imgheader'><img class='header' src='header3.jpg'></div>
<div class='imgheader'><img class='header' src='header4.jpg'></div>
</div>
<div class='h1'>
<h1>Отдых в Феодосии. <br>Дом под ключ <br>с отдельным двором</h1>
</div>

<div class='nav'>
<div class='menu-item'>О нашем доме
</div>
<div class='menu-item'>Галнрея изображений
</div>
<div class='menu-item'> Стоимость проживания
</div>
<div class='menu-item'> Приятные дополнения
</div>
<div class='menu-item'> О нашем городе
</div>
<div class='menu-item'> Контакты
</div>
</div>

<div class='content'><p>

...

Edited March 5, 2014 by SvetaMatsibora

npofopr · March 5, 2014

Выкладывайте код или в песочнику, по типу jsfiddle

Или делайте страницу на бесплатном хостинге

SvetaMatsibora · March 5, 2014

npofopr, спасибо, что откликнулись

Вот ссылка на страницу

http://feodosia-dom.com.ua/complete.html

Я уже немного изменила код.

Но все же мне непонятно, как сделать 2 картинки сверху и две картинки под ними.

Естественно размер фотографий я уменьшу, уже как разберусь с позиционированием

Скажу, что я сделала:

Поместила каждую картинку в див, дивы с картинками в еще один див, еще сделала див с текстом.

Див с картинками и див с текстом поместила в див хэдэр. Я не знаю, как сделать правильно, поэтому делаю, как догадываюсь.

Vlad02 · March 5, 2014

как вариант, задать width блоку

<div class="pictures">

и вытащить картинки из дивов.

nfsworld · March 5, 2014

И ещё подсказка от меня.

для заголовка можно использовать тег <header>

А для подвала сайта тег <footer>

И отображение сайта в firefox не корректное в других браузерах пока ещё не проверял

Vlad02 · March 5, 2014

ну тогда и css в отдельный файл вынести

DivMan · March 5, 2014

img это строчный элемент, ну для начала можно попробовать через <br>

можно ещё через позиционирования, сдвигать вниз и в право

Edited March 5, 2014 by DivMan

Sign In

Проблема с позиционированием картинок или дивов внутри дива.

Question

SvetaMatsibora

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

SvetaMatsibora

Link to comment

Share on other sites

Vlad02

Link to comment

Share on other sites

nfsworld

Link to comment

Share on other sites

Vlad02

Link to comment

Share on other sites

DivMan

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information