Вопросы Теги

CSS: Делаем дочерний элемент div по высоте и ширине на X пикселей меньше, чем у родительского элемента.

Я делаю шаблон для веб-сайта, и у меня возникают некоторые проблемы с некоторыми очень простыми CSS .

По сути, я пытаюсь разделить сайт на разделы с помощью элементов div и хочу, чтобы каждый раздел содержал полупрозрачный черный фон с полностью прозрачной рамкой вокруг него.

Идея состоит в том, что есть фоновое изображение и новости, разделенные на черные блоки, которые на самом деле не соприкасаются и не перекрывают друг друга (то есть вокруг них есть поля). Черные блоки слегка прозрачны, а области между ними (размером в несколько пикселей) пусты, и вы можете просто видеть фон.

На данный момент у меня есть следующее:

Сайт: 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="mainPage.css" />
    <title>Some site</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="images/SomeImage.bmp" alt="ImageName"/>
        </div>
        <div class="latestBlockLeft">
            <div class="transDiv">
                <p> latestBlockLeft1 </p>
            </div>
        </div>
        <div class="randomBlockRight">
            <h1> Heading test</h1>
            <p> randomBlockRight </p>
        </div>
        <div class="latestBlockLeft">
            <div class="transDiv">
                <p> latestBlockLeft2 </p>
            </div>
        </div>
        <div class="latestBlockLeft">
            <div class="transDiv">
                <p> latestBlockLeft3 </p>
            </div>
        </div>
        <div class="menuStrip">
            <p> menuStrip </p>
        </div>
        <div class="sectionedNews">
            <p> sectionedNews </p>
        </div>
        <div class="disclaimer">
            <p> disclaimer </p>
        </div>
    </div>
</body>

Соответствующий код CSS: 

html, body {padding: 0px; margin: 0px; height: 100%;}

body
{
    background-color:white;
    font-size:100%;
    background-image:url('images/Famicom cartridges.jpg');
    background-attachment:fixed;
}

h1
{
    background-color:transparent;
    color:#8B0000;
}

/* Link style */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

/* Classes */
.container
{
    background-color:beige;
    width: 1020px;
    margin: 0 auto;
}

.transDiv
{
    position:relative;
    float:left;
    color:white;
    width:100%;
    height:100%;
    background-color: black;
    opacity: 0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
}

.header
{
    height: 120px;
    width: 100%;
    background-color: black;
margin: 0 auto;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

.latestBlockLeft
{
/*  padding-top:3px;
padding-right:3px; */
    height: 170px;
    width: 70%;
   /* background-color: yellow;*/
    float: left;
}

.randomBlockRight       ........... and so on

Что продолжает происходить, если я пытаюсь использовать поля, так это то, что поле идет вокруг деления div и подталкивает мои другие элементы повсюду на странице. Я мог бы сделать это, используя точные размеры пикселей для каждого элемента, но я хочу иметь возможность сказать, что блок div занимает 70% ширины div моего основного контейнера и имеет пустые поля Xpix, просматриваемые через поля внутри этого поля. Я не хочу, чтобы в этих местах появлялся мой прозрачный фон.Как это сделать? Я вообще придерживаюсь правильного подхода к дизайну?

Спасибо!

6
задан 8bitcartridge 14 November 2011 в 22:22
поделиться