Search the Community
Showing results for tags 'позиционирование картинки'.
Found 1 result
-
Проблема с позиционированием картинок или дивов внутри дива.
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> ...