Jump to content
  • 0

divы в div

aov000

Asked by aov000,

 Share

Question

aov000 Explorer

aov000

Posted
Posted

Пытаюсь сделать вот такую структуру:

b34ebdc87fe5.png

Задача у меня такая: на общем фоне будут 6 блоков в которые в дальнейшем будут выводиться посты (анонсы).

Что-то я делаю не так... Сайт не резиновый и чётко ограничен размерами 1024х800пикс.

Подскажите как разложить дивы что бы позиционировались относительно основного дива, а не по экрану??

код:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="main">

<div class="menu">

<ul class="menu">

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</div>

<div class="line"></div>

<div class="header"></div>

<div class="content" align="center">content</div>

<div align="center"></div>

<div class="block1">block1</div>

<div class="block2">block2</div>

<div class="block3">block3</div>

<div class="block4">block4</div>

<div class="block5">block5</div>

<div class="block6">block6</div>

<div class="clear"></div>

<div class="footer">footer</div>

</div>

</body>

</html>

стиль:

{padding:0px;

margin:0px;

}

body{

background:#000;

height:1024;

width:799;

margin:0 auto;

float:none;

}

.menu{background-image:url(images/menu.png);

width:1024px;

height:39px;

margin:0 auto;

z-index:7;

}

.menu li{float:left; padding:10; overflow:hidden;

position:relative;

float:left; padding:5px;

}

.line{width:820px; height:2px; margin:0 auto;

background-color:#996633;

z-index:8;

}

.content{position:relative;

display:block;

line-height:800px;

background-image:url(images/fon.png);

margin:0 auto; width:1024px; height:800px;

z-index:0;

}

.block1 {float:left;

position:relative;

display:inline-block;

vertical-align:middle;

line-height:0.8;

width: 328px;

height:140px;

font-style:italic; color:#FFFFFF

background-image:url(images/fonblock.png);

padding: 0px;

z-index:1;

}

.block2 {

float:left;

position:relative;

display:inline-block;

vertical-align:middle;

line-height:1.2;

width: 328px;

height:140px;

background-image:url(images/fonblock.png);

padding: 0px;

left:10px;

z-index:2;

}

.block3 {

float:left;

position:relative;

display:inline-block;

vertical-align:middle;

line-height:1.2;

width: 328px;

height:140px;

background-image:url(images/fonblock.png);

padding: 5px;

left:10px;

z-index:3;

}

.block4 {

float:left;

position:relative;

display:inline-block;

vertical-align:middle;

line-height:1.2;

width: 328px;

height:140px;

background-image:url(images/fonblock.png);

padding: 5px;

left:10px;

z-index:4;

}

.block5 {

float:left;

position:relative;

display:inline-block;

vertical-align:middle;

line-height:1.2;

width: 328px;

height:140px;

background-image:url(images/fonblock.png);

padding: 5px;

left:10px;

z-index:5;

}

.block6 {

float:left;

position:relative;

display:inline-block;

vertical-align:middle;

line-height:1.2;

width: 328px;

height:140px;

background-image:url(images/fonblock.png);

padding: 5px;

left:10px;

z-index:6;

}

.clear{

width:0;

height:0;

}

.footer{

}

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
aov000 Explorer

aov000

Posted
  • Author
Posted

Мне необходимо, что бы внутренние блоки позиционировались относительно основного.Сайт не резиновый, и по этому очень важен такой момент.

Что бы на разных разрешениях мониторов сайт выглядел одинаково.

Link to comment
Share on other sites
  • 0
tius Explorer

tius

Posted
Posted
{padding:0px;

margin:0px;

}

эти пишется так: * {padding:0; margin: 0}

height:1024;

width:799;

Что это? Попугаи, удавы, проценты, пиксели?

всем внутренним слоям задать ширину и float:left;

после каждого второго блока - вставлять разрыв с clear:both;

Link to comment
Share on other sites
  • 0
aov000 Explorer

aov000

Posted
  • Author
Posted
height:1024;

width:799;

Что это? Попугаи, удавы, проценты, пиксели?

Я был уверен что размеры по умолчанию воспринимаются как пикселы. :blush:

И не надо на меня кричать.

В html вёрстке я новичок,-собственно по этому и спрашиваю совета.

Хочу научиться верстать сайты грамотно.

Если в коде что-то не так ткните меня.

Спасибо.

Link to comment
Share on other sites
  • 0
aov000 Explorer

aov000

Posted
  • Author
Posted

Я не кричу.

В коде что-то не так - указываю (а вы обижаетесь, ай-яй-яй).

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

Каталог сверстать для полиграфии не вопрос, а тут полный тупняк из-за множества статей и вариантов + нет определённого багажа знаний.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept