SvetaMatsibora
-
Posts
2 -
Joined
-
Last visited
SvetaMatsibora's Achievements
Explorer (1/14)
0
Reputation
-
Проблема с позиционированием картинок или дивов внутри дива.
SvetaMatsibora replied to SvetaMatsibora's question in HTML Coding
npofopr, спасибо, что откликнулись Вот ссылка на страницу http://feodosia-dom.com.ua/complete.html Я уже немного изменила код. Но все же мне непонятно, как сделать 2 картинки сверху и две картинки под ними. Естественно размер фотографий я уменьшу, уже как разберусь с позиционированием Скажу, что я сделала: Поместила каждую картинку в див, дивы с картинками в еще один див, еще сделала див с текстом. Див с картинками и див с текстом поместила в див хэдэр. Я не знаю, как сделать правильно, поэтому делаю, как догадываюсь. -
Проблема с позиционированием картинок или дивов внутри дива.
SvetaMatsibora posted a question in HTML Coding
Здравствуйте, помогите разобраться с позиционированием картинок (или дивов) внутри дива. Вот так должен выглядеть сайт Так он выглядит без картинок Код на этом этапе <!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> ...