1

Тема: Заповнення пустого простору.

От маю один div i треба щоб вiн завжди був таким а другия заповнював тростiр з провой сторони.

Ось скрин того що маю.
Але як вiкно браузеру зменшити бiлий блок залазить пiд фотку
http://i.imgur.com/dS5fP9A.png

Поможiть будь ласка.

PS: Вже була така тема але там всi приклади були з маштабуванням обох блокiв.
А як маштабувати один не чiпаючи iнший я не можу знайти.

2

Re: Заповнення пустого простору.

може кинете лінк на сторінку чи перенесет на codepen ?

Подякували: ostap34PHP, Monolith, 221VOLT3

3

Re: Заповнення пустого простору.

Взагалі незрозуміло, що саме Ви хочете зробити.

(а аватар крутий -  *THUMBSUP* )

Подякували: 221VOLT1

4

Re: Заповнення пустого простору.

misha_bondar_2012 написав:

Взагалі незрозуміло, що саме Ви хочете зробити.

(а аватар крутий -  *THUMBSUP* )

Хочу зробити стрiчку новин (бiлий блок) але щоб аватар не рухало

5

Re: Заповнення пустого простору.

Хочу зробити стрiчку новин (бiлий блок) але щоб аватар не рухало

Рекомендую ознайомитися для початку з основами https://www.w3schools.com/css/css_positioning.asp

Подякували: ostap34PHP, 221VOLT2

6 Востаннє редагувалося Monolith (03.05.2017 00:34:40)

Re: Заповнення пустого простору.

vtorgashov написав:

Хочу зробити стрiчку новин (бiлий блок) але щоб аватар не рухало

Людство ще не навчилися визначати проблеми коду дивлячись просто на результат його роботи, та ще й просто у вигляді картинки.  *DONT_KNOW*

(Я казав про аватар вашого профілю на форумі)

Подякували: 221VOLT1

7

Re: Заповнення пустого простору.

https://jsfiddle.net/1pcf1gex/

Подякували: 221VOLT, ostap34PHP2

8 Востаннє редагувалося 221VOLT (03.05.2017 11:30:27)

Re: Заповнення пустого простору.

другия заповнював тростiр з провой сторони

я майже вас зрозумів)
без коду (тільки не записуйте до телепатів)

ліву частину робите фікс ширину, позиціонування можна абсолют, праву частину частину робите на 100% ширину, внутрішній відступ зліва на ширину лівого + декілька пікселів - власне той відступ котрий буде видимим

Подякували: Monolith, ostap34PHP2

9

Re: Заповнення пустого простору.

221VOLT написав:

без коду (тільки не записуйте до телепатів)

Але як бачите є винятки...

Подякували: 221VOLT, ostap34PHP2

10

Re: Заповнення пустого простору.

misha_bondar_2012 написав:
221VOLT написав:

без коду (тільки не записуйте до телепатів)

Але як бачите є винятки...

:D  8)

Подякували: ostap34PHP1

11 Востаннє редагувалося Fox (03.05.2017 15:57:20)

Re: Заповнення пустого простору.

Код зараз дам...
А що до цього...
Вот так и хочу але червоний не тримає форму...

Ну телепати... От вам кодик)
Надiюся допоможете :3

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Project number 9</title>
  <link href="main.css" rel="stylesheet">
 </head>
 <body> 
     <div id="menu">
         <a class="buttons" id="mainlist">Тестова кнопка</a>
     </div>
     <div id="information">
         <div id="photo">
             <img src="image/avatars/Jack_Savage.png" width="250" height="250">
         </div>
         <div id="posts">
         </div>
     </div>
 </body>
</html>

css

body
{
    background: rgba(242,242,242,1);
    padding: 0px;
    margin: 0px;
}
#menu
{
    width: 100%;
    height: 30px;
    background: white;
    text-align: left;
    padding-top: 10px; 
    padding-left: 20px;
}
.buttons
{
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}
#information
{
    background: gray;
    width: 100%;
    height: 1200px;
}
#photo
{
    width: 250px;
    height: 250px;
    background: white;
    margin-left: 20px;
    margin-top: 20px;
    border: 5px solid white;
    float: left;
}
#posts
{
    background: white;
    height: 96%;
    width: 70%;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
    min-width: 40%;
}

12

Re: Заповнення пустого простору.

vtorgashov написав:

Код зараз дам...
А що до цього...
Вот так и хочу але червоний не тримає форму...

Ну телепати... От вам кодик)
Надiюся допоможете :3

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Project number 9</title>
  <link href="main.css" rel="stylesheet">
 </head>
 <body> 
     <div id="menu">
         <a class="buttons" id="mainlist">Тестова кнопка</a>
     </div>
     <div id="information">
         <div id="photo">
             <img src="image/avatars/Jack_Savage.png" width="250" height="250">
         </div>
         <div id="posts">
         </div>
     </div>
 </body>
</html>

css

body
{
    background: rgba(242,242,242,1);
    padding: 0px;
    margin: 0px;
}
#menu
{
    width: 100%;
    height: 30px;
    background: white;
    text-align: left;
    padding-top: 10px; 
    padding-left: 20px;
}
.buttons
{
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}
#information
{
    background: gray;
    width: 100%;
    height: 1200px;
}
#photo
{
    width: 250px;
    height: 250px;
    background: white;
    margin-left: 20px;
    margin-top: 20px;
    border: 5px solid white;
    float: left;
}
#posts
{
    background: white;
    height: 96%;
    width: 70%;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
    min-width: 40%;
}

дякую звичайно але я вже 100років не використовую float(тільки в навчальних цілях). + height не задую це обмеження зайве...

13

Re: Заповнення пустого простору.

Key написав:
vtorgashov написав:

Код зараз дам...
А що до цього...
Вот так и хочу але червоний не тримає форму...

Ну телепати... От вам кодик)
Надiюся допоможете :3

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Project number 9</title>
  <link href="main.css" rel="stylesheet">
 </head>
 <body> 
     <div id="menu">
         <a class="buttons" id="mainlist">Тестова кнопка</a>
     </div>
     <div id="information">
         <div id="photo">
             <img src="image/avatars/Jack_Savage.png" width="250" height="250">
         </div>
         <div id="posts">
         </div>
     </div>
 </body>
</html>

css

body
{
    background: rgba(242,242,242,1);
    padding: 0px;
    margin: 0px;
}
#menu
{
    width: 100%;
    height: 30px;
    background: white;
    text-align: left;
    padding-top: 10px; 
    padding-left: 20px;
}
.buttons
{
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}
#information
{
    background: gray;
    width: 100%;
    height: 1200px;
}
#photo
{
    width: 250px;
    height: 250px;
    background: white;
    margin-left: 20px;
    margin-top: 20px;
    border: 5px solid white;
    float: left;
}
#posts
{
    background: white;
    height: 96%;
    width: 70%;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
    min-width: 40%;
}

дякую звичайно але я вже 100років не використовую float(тільки в навчальних цілях). + height не задую це обмеження зайве...

Я в html/css не дуже.

14

Re: Заповнення пустого простору.

Для #posts{width: calc(100% - 270px)}

Подякували: 0xDADA11C7, NaharD, Fox, 221VOLT4

15

Re: Заповнення пустого простору.

yurec написав:

Для #posts{width: calc(100% - 270px)}

Уррряяя. Дякую

16 Востаннє редагувалося yurec (04.05.2017 21:58:07)

Re: Заповнення пустого простору.

vtorgashov написав:

Уррряяя. Дякую

якщо будете змінювати фіксовану width блоку з аватором, або збільшувати margin, не забудьте їх мінусувати від 100%. padding можна не мінусувати.

17 Востаннє редагувалося Key (05.05.2017 08:21:50)

Re: Заповнення пустого простору.

будьте обережні
https://caniuse.com/#search=calc

Подякували: 0xDADA11C7, 221VOLT2