Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → HTML та CSS → Як зробити ширину блока абсолютно повну?
Для відправлення відповіді ви повинні увійти або зареєструватися
От є в мене хедер сайту, по ширині він має займати всю ширину вікна арбузера і виглядати от так.
Але коли я збілюшую розмір сторінки, то ширина теж збільшується і з'являється полоса прокрутки знизу, і якщо поскролити вправо, то можна побачити от таке
Як зробити, щоб ширина блоку завжди була максимальною і збільшувалась при збільшенні сторінки?
Покажіть код.
власне я вже вигадав костиль, але блок header до сих пір не на всю ширину
http://jsfiddle.net/KzAn2/
Якщо прибрати властивість width або вказати auto або inherit в селкторі #header .content, то все буде гуд. Або ше можна написати overflow: hidden; для цього селектору. Але результат буде зовсім іншим.
Якщо прибрати властивість width або вказати auto або inherit в селкторі #header .content, то все буде гуд. Або ше можна написати overflow: hidden; для цього селектору. Але результат буде зовсім іншим.
а чуйте, щоб тему нову не створювати. Як зробити, щоб з одного боку блок був по середині, а з іншого, щоб одна з його сторін "добудовувалася" до кінця вікна браузера?
от я заплямував цей блок гарним кольором, бачите? він з одного боку по середині, ну лівий відступ не фіксований, а з іншого боку права частина продовжується
от вам ще скріншот, щоб наглядніше було
Якщо потрібно щоб той блок був розташований в якомусь певному місці, то можна скористатися відсотками для його позиціонування відносно чогось або задати ширину в відсотках.
Якщо потрібно щоб той блок був розташований в якомусь певному місці, то можна скористатися відсотками для його позиціонування відносно чогось або задати ширину в відсотках.
та ні, ширина там фіксована, а от відступ зліва - ні. Це ніби зробити
#block {
height: 100px;
width: 940px;
margin: 0 auto;
}а потім замалювати правий margin
Але, якщо виставити фіксовану ширину для #header .content, то буде таке як у першому вашому повідомленні.
Але, якщо виставити фіксовану ширину для #header .content, то буде таке як у першому вашому повідомленні.
да я вже розібрався з тим хедером, я вас за інше питаю!11
Якось так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="h" style="position:absolute;left:20%;top:0;width:80%;background-color:red;height:200px;"></div>
<div id="l" style="float:left;width:20%;background-color:yellow;height:500px;"></div>
<div id="ll" style="float:left;width:60%;background-color:black;height:500px;"></div>
<div id="lll" style="float:left;width:20%;background-color:green;height:500px;"></div>
</body>
</html>Або можна написати position:fixed замість position:absolute в блоці з ідентифікатором h і тоді блок буде завжди видно, навіть коли гортаєш сторінку до низу.
то все, звичайно, круто, але там ширина у відсотках, а тре у пікселях.
У відсотках краще — масштабується.
У відсотках краще — масштабується.
воно-то так, але у макеті ясно сказано - 940px, і, як казав Replace - "Дизайнер все правильно зробив. Це його ідея. ", тому тре робити, як в макеті, от так.
Отак:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="h" style="position:absolute;z-index:1;left:20%;top:0;width:80%;background-color:red;height:200px;"></div>
<!--<div id="l" style="float:left;width:20%;background-color:yellow;height:500px;"></div>-->
<div id="ll" style="position:absolute;z-index:0;left:20%;right:20%;width:1024px;background-color:black;height:100%;"></div>
<!--<div id="lll" style="float:left;width:20%;background-color:green;height:500px;"></div>-->
</body>
</html>Тут висоту блоку з id ll можна вказати таку щоб він не перекривав те що знаходиться вище нього. Тоді і z-index не доведеться використовувати.
Я, блін, пікассо якийсь (в тому смислі що все квадратами).
PS
А як же верстка таблицями?
Я, блін, пікассо якийсь (в тому смислі що все квадратами).
PS
А як же верстка таблицями?
то минуле століття і так ніхто зара не робе, нам викладач казав.
Треба йти проти течії.
Треба йти проти течії.
кому треба? навіщо? може давайте ще будемо користуватись IE6 чи що? А-то всі нав'язують нам сучасні та функціональні браузери, а нам такого не треее... ТРЕБА ЙТИ ПРОТИ ТЕЧІЇ
Іще варіант:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#container {position: absolute;left: 50%; width: 940px; margin-left: -470px;background-color:none;height:100%;border-right: 1px solid black;border-left: 1px solid black;}
#content {margin-top: 75px;border:1px solid black;height:auto;}
#content2 {margin-top:2px;border:1px solid black;height:auto;}
#nav {position:fixed;top:0;width:inherit;border-top: 1xp solid orange;border-top: 1xp solid orange;background-color:pink;height:40px;}
</style>
</head>
<body>
<div id="container">
<div id="nav"></div>
<!-- Всі блоки тут -->
<div id="content">
<p>Блок номер 1. Поле зверху — 75px.</p>
</div>
<div id="content2">
<p>Блок номер 2</p>
</div>
</div>
</div>
</body>
</html>Для відправлення відповіді ви повинні увійти або зареєструватися