Важная информация
Показано с 1 по 4 из 4

Тема: Адаптивная верстка

  1. #1 Адаптивная верстка 
    Новичок
    Регистрация
    13.12.2017
    Сообщений
    1
    Сказал(а) спасибо
    2
    Поблагодарили 0 раз(а) в 0 сообщениях
    Здравствуйте, верстаю сайт с помощью фраймворка bootstrap и столкнулась с проблемой. Есть пять картинок, они расположены в разном направлении с помощью position: relative и есть блок с контактной информацией. Так вот при изменении размера окна браузера блок с контактной информацией наезжает на фотографии, а картинки не подстраиваются под адаптив, хотя div class="row" и div class="col" есть и размер строки равен 12. Вопрос: "Как сделать чтоб изображения подстраивались под адаптив?"
    Ответить с цитированием  
     

  2. #2  
    Администратор
    Регистрация
    18.04.2014
    Сообщений
    26
    Сказал(а) спасибо
    0
    Поблагодарили 42 раз(а) в 24 сообщениях
    Здравствуйте. Попробуйте задать ширину и высоту картинке. Можно попробовать следующее:
    - width:auto, heigth:auto;
    - использовать параметр max-width, max-height;
    - задать размеры в процентах
    Ответить с цитированием  
     

  3. 3 пользователя(ей) сказали cпасибо:

    >Quiet Snow< (13.12.2017), Free Admin (18.12.2017), lekat10 (14.12.2017)

  4. #3  
    Новичок
    Регистрация
    04.02.2018
    Сообщений
    1
    Сказал(а) спасибо
    0
    Поблагодарили 0 раз(а) в 0 сообщениях
    Помогите, пож.
    Код html:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Домашняя работа 7</title>
    <style>
     
    *	{ margin: 0; padding: 2px;      	
    }
     
    html {
    	background: #fff;
    	color: #000;}
     
    div	{
    	position: absolute; /* разместите Абсолютно позиционированный блок по центру экрана, аналогично применению margin: auto; */
    	margin: auto; 
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;   	
    	width: 340px;
    	height: 190px;	
        box-shadow: 0 0 3px;
    	border: 5px solid rgb(0,153,0); /* пересчитайте цвет rgb(0,153,0) в шестнадцатеричную систему счисления */	
    	}
     
    p	{
    	font: 700 200px/160px Arial, sans-serif;	
    	left:50%;
        top:50%;
        position: absolute;	
    	}
     
    #red {
    	color: #f00;	
    	margin: auto;	
    	z-index: 3; 
    	left:10px;
        top:10px;
     
    	}
     
    #blue {
    	color: #00f;	
        margin: auto;	
        z-index: 2; 
    	left:16px;
        top:15px;
     
    	}
     
    /* псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов, в нашем случае - к третьему параграфу */
     
    :nth-child(3) {
        margin: auto;
    	z-index: 1; 
    	left:17px;
        top:23px;	
    	}	
     
    </style>
    </head>
     
    <body>
     
    <div>
     <p id='red'>3-D
     <p id='blue'>3-D
     <p>3-D
    </div>	
     
    </body>
    </html>
    Не встае.т 3д по центру рамки
    Последний раз редактировалось Kakos_nonos; 04.02.2018 в 22:03.
    Ответить с цитированием  
     

  5. #4  
    Супер модератор Аватар для Kakos_nonos
    Регистрация
    07.01.2011
    Адрес
    Кубань
    Сообщений
    1,541
    Сказал(а) спасибо
    128
    Поблагодарили 439 раз(а) в 297 сообщениях
    Записей в блоге
    6
    Надо тут закрыть параграфы

    Код html:
    <div>
     <p id='red'>3-D</p>
     <p id='blue'>3-D</p>
     <p>3-D</p>
    </div>
    Ответить с цитированием  
     

  6. Пользователь сказал cпасибо:

    >Quiet Snow< (04.02.2018)

Информация о теме
Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Похожие темы

  1. Ответов: 1
    Последнее сообщение: 05.10.2014, 12:56
  2. Требуется верстка сайта и помощь в его установке
    от AvonBarksdale в разделе Изготовление сайтов и дизайн
    Ответов: 0
    Последнее сообщение: 21.12.2013, 00:54
  3. Требуется верстка сайта и помощь в его установке
    от AvonBarksdale в разделе Изготовление сайтов и дизайн
    Ответов: 0
    Последнее сообщение: 21.12.2013, 00:21
  4. Неправельная верстка
    от Vladislav в разделе HTML, CSS
    Ответов: 2
    Последнее сообщение: 15.01.2013, 07:19
  5. Табличная верстка
    от Vladislav в разделе HTML, CSS
    Ответов: 7
    Последнее сообщение: 27.11.2012, 18:12
Ваши права
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •