Помогите с абсолютно позиционированным изображением css, застрявшим в верхнем левом углу браузера

Я новичок во всех вещах css, и я неоднократно пытался расположить изображение (прозрачный png) над центрированной таблицей, но по какой-то причине графика не сдвинется с места в верхнем левом углу браузера. Абсолютное позиционирование должно позволить мне разместить элемент в любом месте. Если кто-то может помочь определить, что я сделал неправильно, я был бы очень признателен.

------------------------------------ HTML-------------- -----------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Welcome to Knock on Wood Productions!<title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

</head>

<body>
<div id="branch">

</div>

    <table width="803" border="0" cellpading="0" cellspacing="0" align="center">
    <tr>

        <!-- The 1st nested table starts here. -->

        <td width="355" height="180" background= "images/grn1.png">
 </td>
        <td width="10" height="180" background= "images/grn2.png"></td>
        <td width="438" height="180" background= "images/grn3.png"></td>
    </tr>    
    </table>

</body>

</head>

------------------------------------ css --------------------------- -----------------------

body                {   background-color: #fff8a7;

                       }

#wrapper         {  position: absolute; width: 803;
                        margin-left: auto ;
                         margin-right: auto ;


                      }

#branch          {  position: absolute; width: 548;
                    top: 60;
                        left: 50;
        /* background-image: url(images/gbranch.png); */
        z-index: 2;
                      }

td                { border: solid thin red;

html css absolute
person user195412    schedule 23.10.2009    source источник
comment
сделайте отступ кода на 4 пробела.   -  person Daren Schwenke    schedule 23.10.2009
comment
Я пытался следовать этому, но я просто испортил все это. ржу не могу!   -  person user195412    schedule 23.10.2009

Ответы (3)


arrow_upward
6
arrow_downward

Дайте родительскому элементу (в вашем случае центрированную таблицу) «позиция: относительная».

person Pekka    schedule 23.10.2009

arrow_upward
4
arrow_downward

Вы указали длину без единиц измерения для свойств width, top и left. Вы должны написать:

#branch {
   width: 548px;
   top: 60px;
   left: 50px;
}

Также вы можете указать высоту для этого элемента.

person Community    schedule 23.10.2009

arrow_upward
0
arrow_downward

Fumblr прав - объявить высоту, равную хотя бы высоте изображения. Код Fumblr должен работать.

@Fumblr - я бы поставил вам большой палец вверх, но мне пока нельзя!

person tahdhaze09    schedule 26.10.2009