달력 마크업 질문
나려
안녕하세요.
어쩌다보니 마크업 관련해서도 질문하게 되네요.
달력인데요. 숫자는 좌측 상단 그러니까 11시 방향에 항상 고정되어야 하구요.
내용은 항상 수평, 수직 가운데 정렬이 되어야 합니다.
내용이 많아지면 기준인 div가 움직이면서 숫자 위치도 따라 움직여 버리니 문제입니다.
div만 top정렬이 되면 해결되는 문제이긴 한대, 방법이 딱히 떠오르질 않네요.
정 안되면 내용을 위쪽부터 시작하게 맞출까도 고민중입니다.
아래 내용 복사해서 그대로 붙여다 놓고 확인해보시면 됩니다. 에디트플러스에서 바로 확인하셔도 됩니다.
조언 부탁드릴게요.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml
head
title new document /title
meta name=generator content=editplus /
meta name=author content= /
meta name=keywords content= /
meta name=description content= /
style type=text/css
*{margin:0;padding:0}
body{font:.75em dotum, 돋움;color:#666}
table{border-spacing:0;border-collapse:collapse}
td{height:95px;vertical-align:middle;background:#ddd;border:1px solid #aaa;text-align:center}
table div{position:relative;width:100%;height:0}
table div span{position:absolute;left:12px;top:12px}
/style
/head
body
table width=680
colgroup
col width=15% /
col width=14% /
col width=14% /
col width=14% /
col width=14% /
col width=14% /
col width=* /
/colgroup
tr
tddivspan1/span/div내용내용/td
tddivspan2/span/div내용내용br /내용내용/td
tddivspan3/span/div내용내용br /내용내용br /내용내용/td
tddivspan4/span/div/td
tddivspan5/span/div/td
tddivspan6/span/div/td
tddivspan7/span/div/td
/tr
/table
/body
/html
-
갤투
답변 감사드립니다. 원리가 신기하네요.
홈피에 있는 소스 잘 퍼다 쓰고 있습니다. ㅎㅎ
그런데 ie8 실브라우저에서는 라인이 안나오네요. top정렬로 쇼부쳐야겠어요 으 -
슬아
글자수 제한이 없으면 문제가 되겠네요 ㅡ,ㅡ...
글자수 제한이 없어서 문제가 발생하면 그냥 상단 정렬으로 쇼부치심이 -0-; 어떠신지요 ㅋ -
꽃바라기슬아
table width=\680\
colgroup
col width=\15%\ /col width=\14%\ /col width=\14%\ /col width=\14%\ /
col width=\14%\ /col width=\14%\ /col width=\*\ /
/colgroup
tbody
\t tr
\t tdspan class=\l\1/spanspan class=\r\내용내용/span/td
\t tdspan class=\l\2/spans -
다연
*{margin:0;padding:0}
body{font:.75em dotum, \돋움\;color:#666; padding:100px;}
table {border-spacing:0;border-collapse:separate;}
tr {}
td {position:relative; width:95px; height:95px; white-space:nowrap; text-align:center; border:5px solid red; background: -
김자영
답변 감사드립니다. 저도 이거 방법이 없을거 같은데 혹시나 해서 올려본 질문입니다.
가운데 정렬을 포기해야 하는가 아응 -
보나
안될듯합니다. div하나 주고 100%높이를 잡고 숫자를 11시 방향에 잡는다고 한들 valign이 먹히지 않아서 컨텐츠들은 상단에 고정이 됩니다.
그렇다고 div에 높이를 주지 않으면 컨텐츠가 늘어날때마다 날짜의 좌표가 바뀌겠죠 -
핫블루
답변 감사드립니다. 그런데 td에는 relative를 주면 크로스브라우징이 안되네요. 보시면 아시겠지만 라인도 제대로 안나오고 파폭에서는 다 깨집니다 ㅜ.ㅜ
-
조으다
제가 한게 맞는지는 모르겠지만...
우선 css는 아래와 같이 했구요 (table css 아래부분부터 수정했어요~~ )
td{position:relative; height:95px;text-align:center; border:1px solid #aaa;background:#ddd;}
td span{position:absolute;left:5px;top:5px}
html 부분은
tdspan1/spandiv내용내용br/내용내용br/내용내용내용내용br/내