Относительное позиционирование - HTML и CSS

melkortheshadow · 13.04.2011, 16:13

Люди, помогите, пожалуйста. Мне нужно, чтобы на любом мониторе блок с картинками отображался как на макете. Как это сделать можно?
Сделал для своего монитора абсолютное позиционирование, но так же нельзя(((. Должно быть вот так на любом мониторе:

Мой код:

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>melkortheshadow.com</title>
  <style>
    body{
    margin:20px;
    padding:0;
    font-family:tahoma;
    font-size:11px;
    background-color:#fcfcfd;
    }
    p{
    color:#393939;
    }
    #menu{
    position:absolute;
    top:9px;
    left:440px;
    }
    #menu a{
    color:#393939;
    margin-right:14px;
    }
    #menu a:hover{
    color:#c1c1c1;
    }
    #container{
    position:absolute;
    top:387;
    left:218;
    z-index:0;
    height:150px;
    }
    #container div{
    display:inline;
    }
    #container div a img{
    border:none;
    }
    #first{
    margin-right:10px;
    padding:0;
    }
    #second{
    margin-left:10px;
    padding:0;
    }
  </style>
  </head>
  
  <body>
  
  <!--
  <table style="position:absolute; left:0; top:0;" width="100%" height="100%" border="1px" cellpadding="0" cellspacing="20">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>        
  </table>
  -->
  <div id="container">
    <div id="first">
      <a href="#"><img width="200" height="150" /></a>
    </div>
    <div id="second">
      <a href="#"><img width="200" height="150" /></a>
    </div>
  </div>
  
  <div id="menu">
  <a href="#">about me</a>
  <a href="#">works</a>
  <a href="#">contacts</a>
  <a href="#">blog</a>
  </div>
  
  </body>
</html>

Спасибо!

hisbvdis · 13.04.2011, 17:06

Цитата:

Сделал для своего монитора абсолютное позиционирование, но так же нельзя

А Вы задайте родительскому блоку относительное позиционирование и тогда все внутренние блоки с абсолютным позиционированием будут размещаться внутри родительского блока и в зависимости от его границ. Независимо от разрешения экрана.
Только тогда родительскому блоку еще нужно задать фиксированные размеры вроде.

P.S.Сам новичок, могу ошибаться

melkortheshadow · 13.04.2011, 20:26

А как это сделать? Можно какой-нибудь пример кода?

hisbvdis · 13.04.2011, 21:24

В общем, если я правильно понял, в чем проблема:
Код HTML:

Код HTML:

<body>
<div id="main">  <!--Главный блок-->
    <div id="d1"> <!--Первый внутренний-->

    </div>
    <div id="d2"> <!--Второй внутренний--Ю
        
    </div>
</div>

Код CSS:

Код:

#main{
            width:800px;
            height:500px;
            border:1px solid #000;
            position:relative;       /*Относительное позиционирование*/
        }
        #d1, #d2{
            width:150px;
            height:150px;
            border:1px solid #000;
            position:absolute;   /*Абсолютное позиционирование внутренних блоков*/
        }
        #d1{
            top:50px;   /*Расположение относительно верхней границы ГЛАВНОГО БЛОКА*/
            left:50px;   /*То же для левой границы*/
        }
        #d2{
            top:50px;
            left:250px;
        }

melkortheshadow · 13.04.2011, 22:49

Спасибо, заработало, но не решена главная проблема - как поместить блок #main на низ второй трети страницы по-вертикали и поставить его на четкую середину первой и второй третей по-горизонтали.

hisbvdis · 13.04.2011, 23:02

Правила top и left .
Нет?
Если указать для елементов html и body ширину и высоту по 100%, то можно будет и для #main указывать расположение в процентах относительно родительского блока (в данном случае <body>)

melkortheshadow · 13.04.2011, 23:10

Тут не совсем все просто. Прошу обратить внимание на сетку макета (верхний). Он так не ляжет. Либо, не встанет на двихло(((. Надо что-то более действенное в данном случае. А что, если попробовать их не в одном блоке, а как 2 разных пихать? Проще не станет?

13.04.2011, 22:49	#5
melkortheshadow Пользователь Регистрация: 11.06.2009 Сообщений: 19	Спасибо, заработало, но не решена главная проблема - как поместить блок #main на низ второй трети страницы по-вертикали и поставить его на четкую середину первой и второй третей по-горизонтали. Каждый должен совершать свои собственные ошибки (с) Агата Кристи

13.04.2011, 23:10	#7
melkortheshadow Пользователь Регистрация: 11.06.2009 Сообщений: 19	Тут не совсем все просто. Прошу обратить внимание на сетку макета (верхний). Он так не ляжет. Либо, не встанет на двихло(((. Надо что-то более действенное в данном случае. А что, если попробовать их не в одном блоке, а как 2 разных пихать? Проще не станет? Каждый должен совершать свои собственные ошибки (с) Агата Кристи

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема с рамами/Проблема с ЖД	DRAGGER	Компьютерное железо	6	04.01.2009 23:37

13.04.2011, 20:26	#3
melkortheshadow Пользователь Регистрация: 11.06.2009 Сообщений: 19	А как это сделать? Можно какой-нибудь пример кода? Каждый должен совершать свои собственные ошибки (с) Агата Кристи

13.04.2011, 23:02	#6
hisbvdis Регистрация: 08.04.2011 Сообщений: 8	Правила top и left . Нет? Если указать для елементов html и body ширину и высоту по 100%, то можно будет и для #main указывать расположение в процентах относительно родительского блока (в данном случае <body>)