Отрицательный запас CSS не работает?

Question

Хорошо, это должно быть просто. В принципе, то, что я пытаюсь сделать здесь, это создать макет для галереи изображений карусели. JSFiddle здесь ...

http://jsfiddle.net/G5Us4/1/

CSS ...

.gallery { 

margin-left: auto; 
margin-right: auto; 
width: 600px; 
background-color: #000000; 
height: 300px; 
overflow: hidden; 
white-space: nowrap; 

} 

.image { 

margin-right: 300px; 
margin-top: 50px; 
position: relative; 
height: 200px; 

} 

#image { 

margin-left: -600px; 
width: 287px; 

} 

#image-two { 

width: 231px; 

} 

#image-three { 

width: 242px; 

} 

HTML ...

<div class="gallery" 
    ><img src="../images/templateone.jpg" id ="#image" class="image" alt="" 
    /><img src="../images/templatetwo.jpg" id="#image-two" class="image" alt="" 
    /><img src="../images/templatethree.jpg" id="#image-three" class="image" alt=""/> 
</div> 

Это так просто, и я боялся спросить, из страха пропустить что-то глупое просто. Я посмотрел в Интернете, и я просто не могу понять, почему этот простой запас не работает.

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

По какой-то странной причине первое изображение не хочет выходить за пределы изображения слева. Помоги пожалуйста!

Спасибо, продвинутый!

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

Answer 1

Во-первых, сменить id="#image-three на id="image-three" в вашем HTML. Удалите # на изображении один и два.

<img src="../images/templateone.jpg" id ="image" class="image" alt=""/> 
<img src="../images/templatetwo.jpg" id="image-two" class="image" alt="" /> 
<img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/> 

Во-вторых, чтобы получить его, как вы описали, просто увеличьте этот отрицательный запас.

#image { 
margin-left: -920px; 
width: 287px; 
} 

См - jsFiddle

Answer 2

удалить # из идентификаторов в вашем HTML код,

<div class="gallery" 
    ><img src="../images/templateone.jpg" id ="image" class="image" alt="" 
    /><img src="../images/templatetwo.jpg" id="image-two" class="image" alt="" 
    /><img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/> 
</div>