Абсолютное позиционирование

@Mykola Balanov · Регистрация: 08.05.2013

Author24 — интернет-сервис помощи студентам

Доброе утро, CSS начал использовать совсем недавно. База знаний - вроде неплохая, но не могу разобраться. Сейчас вот, например с абсолютным позиционированием - какая то непонятк. Стили такие:

CSS

#page{
    width:1200px;
    margin:20px auto;
}
#blockFirst{
    background-color: #3bbbca;
    height: 220px;
    font-size: 25px;
}
#LOGO{
    position: absolute;
    top: 30px;
    left: 370px;
}
#pages{
    position: absolute;
    left: 900px;
    top: 200px;
}
#block_main {
    background-color: #7b8b98;
    text-shadow: 1px 1px 0 black;
    padding: 30px; 
}
#AddImages{
    
}

Код страницы такой:

HTML5

<div id="page">
 
    <div id="blockFirst">
        <div id="LOGO"><img src="logo.gif" width="400" height="200" /></div>    
        <div id=Pages">Images: 10</div>
        <div id="AddImages">
            <form name="ADD" method="POST" action="crop.php">
                
            </ form>
        </div>        
    </div>
    
    <div id="block_main">
        <h2>Crop</h2>
        <p>Drag on the larger image to select crop area.</p>
<p>
    <img id="photo" src="photo.jpg" height="700" alt="" title="" style="margin: 0 0 0 10px;" />
</p>

Логотип ложиться верно, а вот блок #pages - совсем не туда ложиться. Я скорее всего, что-то опустил. Что?

@smirnov1 · 02.06.2013, 07:46

То что id=Pages" только я заметил? Кавычку откройте перед названием идентификатора.

@Mykola Balanov · 02.06.2013, 08:08 **[ТС]**

Сообщение от smirnov1

То что id=Pages" только я заметил? Кавычку откройте перед названием идентификатора.

Этот ляп я заметил после того как отправил на сервер, ляп исправил - проблема осталась.

@-ReSideNT- · 02.06.2013, 11:45

Mykola Balanov,
Для родительского блока blockFirst попробуйте задать

CSS

#blockFirst{
    background-color: #3bbbca;
    height: 220px;
    font-size: 25px;
    position: relative; /* это позволит позиционировать внутренние элементы относительно этого блока  */
}

А элементам внутри блока с id blockFirst задайте необходимые отступы - left, top, right и bottom

@Mykola Balanov · 02.06.2013, 11:50 **[ТС]**

Добавил, задал необходимые свойтсва для дочерних блоков - проблема осталась

@gulliver · 02.06.2013, 11:55

где должен находиться блок pages?, сейчас он в левом верхнем углу.

@Mykola Balanov · 02.06.2013, 13:25 **[ТС]**

Этот блок родительский для остальных... В принцыпе на странице два блока один под другим в верхнем блоке три блока в ниэнем блоке тоже будет несколько блоков..

@gulliver · 02.06.2013, 13:33

что то я вас не понимаю. вы говорите что блок pages, "не туда ложиться" куда он должен лечь ?

@Mykola Balanov · 02.06.2013, 15:55 **[ТС]**

Я не говорю что блок page ну туда ложиться. (Моежет здесь я направильно вернее не совсем читабельно блоки назвал) Есть блок page - он родитель для всех остальных блоков страницы, и еть блок Pages - он дочерний для блока blockFirst.
Не туда ложиться в данный момент блок LOGO в прочем как и все остальные дочерние блоки блока blockFirst

Добавлено через 2 минуты
Если примерно описать то словами то дочерние блоки блока blockFirst должны "ложиться," так левый верхний угол - LOGO, по центру - Pages, правый верхний угол - AddImages

@-ReSideNT- · 02.06.2013, 17:03

Сейчас заметил ошибку - Pages и pages - это не одно и тоже, регистр соблюдайте

HTML5

1	<div id=Pages">Images: 10</div>

CSS

#pages{
    position: absolute;
    left: 900px;
    top: 200px;
}

в остальном делайте как я предлагал выше и все будет ок

@smirnov1 1 / 1 / 0 Регистрация: 01.02.2011 Сообщений: 15
	02.06.2013, 07:46	2
	То что id=Pages" только я заметил? Кавычку откройте перед названием идентификатора. 0

@Mykola Balanov 0 / 0 / 0 Регистрация: 08.05.2013 Сообщений: 94
	02.06.2013, 08:08 [ТС]	3
	Сообщение от smirnov1 То что id=Pages" только я заметил? Кавычку откройте перед названием идентификатора. Этот ляп я заметил после того как отправил на сервер, ляп исправил - проблема осталась. 0

@Mykola Balanov 0 / 0 / 0 Регистрация: 08.05.2013 Сообщений: 94
	02.06.2013, 11:50 [ТС]	5
	Добавил, задал необходимые свойтсва для дочерних блоков - проблема осталась 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	02.06.2013, 11:55	6
	где должен находиться блок pages?, сейчас он в левом верхнем углу. 0

@Mykola Balanov 0 / 0 / 0 Регистрация: 08.05.2013 Сообщений: 94
	02.06.2013, 13:25 [ТС]	7
	Этот блок родительский для остальных... В принцыпе на странице два блока один под другим в верхнем блоке три блока в ниэнем блоке тоже будет несколько блоков.. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	02.06.2013, 13:33	8
	что то я вас не понимаю. вы говорите что блок pages, "не туда ложиться" куда он должен лечь ? 0

@Mykola Balanov 0 / 0 / 0 Регистрация: 08.05.2013 Сообщений: 94
	02.06.2013, 15:55 [ТС]	9
	Я не говорю что блок page ну туда ложиться. (Моежет здесь я направильно вернее не совсем читабельно блоки назвал) Есть блок page - он родитель для всех остальных блоков страницы, и еть блок Pages - он дочерний для блока blockFirst. Не туда ложиться в данный момент блок LOGO в прочем как и все остальные дочерние блоки блока blockFirst Добавлено через 2 минуты Если примерно описать то словами то дочерние блоки блока blockFirst должны "ложиться," так левый верхний угол - LOGO, по центру - Pages, правый верхний угол - AddImages 0

	02.06.2013, 17:03