롤오버, 또 가로문제 -ㅇ-

[litconan]

http://dych.byus.net/blog/

css를 잘못 건드렸는지 가운데 부분이 밑으로 내려가 버렸습니다 ('임태보목사' 부분이 가운데로 와야 합니다)
또 width 계산을 잘못 한 게 아닌가 싶어서 전체 가로를 크게 줘보기도 했는데 아닌 것 같습니다.

그리고 a:hover를 이용해서 롤오버를 해봤는데 Firefox에서는 이미지의 아랫부분 색만 바뀌고 IE에선 원하는대로 전체 색상이 바뀝니다. 왜 그런걸까요?

스타일시트는 정말 간단하게 했습니다.
#left a{
background-color: white;
}
#left a:hover{
background-color: #A9C7E4;
}
도움 좀 주세요

[빛알갱이]

http://dych.byus.net/blog/

그리고 a:hover를 이용해서 롤오버를 해봤는데 Firefox에서는 이미지의 아랫부분 색만 바뀌고 IE에선 원하는대로 전체 색상이 바뀝니다. 왜 그런걸까요?

그 부분이 그림이군요. Ctrl-+를 몇 번 누른 후에 마우스를 대면 전체가 다 바뀝니다. 모질라는 line-height만큼만 색을 바꾸네요. 아예 마우스를 그곳에 댄 채로 CTRL-+와 CTRL -(minus)로 크기를 늘였다 줄였다 해 보세요.

그 그림들을 (100x30짜리) 위한 class를 하나 지정하고, 그 class에 대해 그림들 높이만큼(30pixel) 명시적으로 line-height을 지정하면 되지 않을까요? 하는 김에 html에서 width와 height 지정한 것도 CSS로 빼 버리세요. 더 좋은 방법도 있을 것입니다만, 지금 생각나는 것이 그것 밖에 없어서...

[파란사오정]

#left 영역이 #middle 영역의 왼쪽에 뜨도록(float) 해보세요...

그럴려면...
#middle 영역이 float 되는 것이 아니고
#left 영역이 float되도록 하면 됩니다.


수정전

Code: Select all

#left
{
}

#middle
{
float: left;
}

수정후

Code: Select all

#left
{
float: left;
}

#middle
{
}

[hyeonseok]

단하게 했습니다.
#left a{
background-color: white;
}
#left a:hover{
background-color: #A9C7E4;
}

여기를....

Code: Select all

#left a{
	display: bolck:
	background-color: white;
	width: 100px;
	height: 30px;
}
#left a:hover{
	background-color: #A9C7E4;
}

이렇게 하시면 해결 될 듯...

[litconan]

모두 고맙습니다. 원하는 모습으로 나오네요