그래프 이미지 정렬에 관한 질문입니다.
나예
보시면 질문1은 가로형그래프고
질문2는 세로형 그래프입니다.
이게 원래 테이블안에 테이블로 코딩되어있던 페이지인데 접근성 보완작업을 하고있습니다.
저 그래프 이미지를 리스트안에 넣었는데 말입니다.
vertical-align: bottom; 이 들어먹질 않습니다.
수치로 조정하려고 해도저것들이 가변적이기에; 고정값을 줄수가 없고요.
원래는 td 안에 테이블안에 그래프가 들어가서 valign=bottom 으로 정렬되어있던 것들인데
li 안에 집어넣고 바꾸려니 하단정렬이 안되네요.
기본적으로img{vertical:middle;}가 셋팅css에 포함되어있긴합니다.
이미지태그안에 직접 스타일을 넣어줘 보기도 하고
lispanimg src= alt=/span/li
이런식으로 li 안에 span 으로 한번 더 감싸서 클래스를 줘보기도 했는데 안되네요.
혹시나해서 소스는..dl.research_q2 {position:relative;clear:both;width:550px;}
dl.research_q2 dt {width:550px;}
dl.research_q2 dd {float:left;height:120px;width:90px;}
ul.research_list2 {clear:both;width:90px;height:100px;padding:0;}
ul.research_list2 li.kind {height:16px;margin:0 0 0 5px;text-align:center;}
ul.research_list2 li.graph {height:68px;width:100px;margin:0 0 0 0;text-align:center;}
ul.research_list2 li.num {width:100px;height:16px;text-align:center;}
tr
th scope=row질문2/th
td
!-- 세로형그래프 --
dl class=research_q2
dt귀하의 연령은 어떻게 되십니까?/dt
dd
ul class=research_list2
li class=num14 명 (35%)/li
li class=graphspan class=txt_bottomimg src=height_01.gif height=25% width=60 alt=/span/li
li class=kind1. 55세 미만/li
/ul
/dd
dd
ul class=research_list2
li class=num26 명 (65%)/li
li class=graphspan class=txt_bottomimg src=height_02.gif height=35% width=60 alt=/span/li
li class=kind2. 55세 초과/li
/ul
/dd
dd
ul class=research_list2
li class=num26 명 (65%)/li
li class=graphspan class=txt_bottomimg src=height_03.gif height=25% width=60 alt=/span/li
li class=kind3. 55세 초과/li
/ul
/dd
dd
ul class=research_list2
li class=num26 명 (65%)/li
li class=graphspan class=txt_bottomimg src=height_04.gif height=45% width=60 alt=/span/li
li class=kind4. 55세 초과/li
/ul
/dd
dd
ul class=research_list2
li class=num26 명 (65%)/li
li class=graphspan class=txt_bottomimg src=height_05.gif height=75% width=60 alt=/span/li
li class=kind5. 55세 초과/li
/ul
/dd
/dl
!-- 세로형그래프 --
/td
/tr
해결방법이 있으시면 좀 도와주시길 부탁해봅니다 ^^;;
-
계획자
아.. 밥님 댓글보니까 기억났다..
span class=\txt_bottom: -- 이거 없애시구요..
.graph { position:relative;}
.graph img { position:absolute; bottom:0;}
이렇게 하면 되요.. ㅋ -
가온길
그래프 이미지를 담고있는 span태그를 position:absolute;로 하셔도 될것 같은데요...
-
거늘
감사합니다. 소스가 많은 도움이 될것 같아요^^