Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → HTML та CSS → Заповнення пустого простору.
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися
От маю один div i треба щоб вiн завжди був таким а другия заповнював тростiр з провой сторони.
Ось скрин того що маю.
Але як вiкно браузеру зменшити бiлий блок залазить пiд фотку
Поможiть будь ласка.
PS: Вже була така тема але там всi приклади були з маштабуванням обох блокiв.
А як маштабувати один не чiпаючи iнший я не можу знайти.
може кинете лінк на сторінку чи перенесет на codepen ?
Взагалі незрозуміло, що саме Ви хочете зробити.
(а аватар крутий -
)
Хочу зробити стрiчку новин (бiлий блок) але щоб аватар не рухало
Хочу зробити стрiчку новин (бiлий блок) але щоб аватар не рухало
Рекомендую ознайомитися для початку з основами https://www.w3schools.com/css/css_positioning.asp
Хочу зробити стрiчку новин (бiлий блок) але щоб аватар не рухало
Людство ще не навчилися визначати проблеми коду дивлячись просто на результат його роботи, та ще й просто у вигляді картинки. 
(Я казав про аватар вашого профілю на форумі)
другия заповнював тростiр з провой сторони
я майже вас зрозумів)
без коду (тільки не записуйте до телепатів)
ліву частину робите фікс ширину, позиціонування можна абсолют, праву частину частину робите на 100% ширину, внутрішній відступ зліва на ширину лівого + декілька пікселів - власне той відступ котрий буде видимим
без коду (тільки не записуйте до телепатів)
Але як бачите є винятки...
221VOLT написав:без коду (тільки не записуйте до телепатів)
Але як бачите є винятки...
Код зараз дам...
А що до цього...
Вот так и хочу але червоний не тримає форму...
Ну телепати... От вам кодик)
Над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%;
}Key написав:Код зараз дам...
А що до цього...
Вот так и хочу але червоний не тримає форму...Ну телепати... От вам кодик)
Над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 не задую це обмеження зайве...
vtorgashov написав:Key написав:Код зараз дам...
А що до цього...
Вот так и хочу але червоний не тримає форму...Ну телепати... От вам кодик)
Над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 не дуже.
Для #posts{width: calc(100% - 270px)}
Для #posts{width: calc(100% - 270px)}
Уррряяя. Дякую
Уррряяя. Дякую
якщо будете змінювати фіксовану width блоку з аватором, або збільшувати margin, не забудьте їх мінусувати від 100%. padding можна не мінусувати.
будьте обережні
https://caniuse.com/#search=calc
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися