0
HTML 및 CSS 기반 일정/캘린더를 만들고 있지만 몇 가지 문제가 있습니다. 여기 HTML/CSS 요소 위치 지정 (html schedule/calendar)
내가 지금까지이 작업은 다음과 같습니다 http://jsfiddle.net/Lpfg5/는 내가 원하는하고있어 예 : "블록-A"또는 "블록 B"로 "블록"중 하나를 가질 수있을 것입니다, 늘어 아웃. 블록 뒤에있는 회색 막대는 그리드입니다.
또한 가장 좋은 방법은 그레이 그리드를 맨 위에있는 시간과 일렬로 만드는 것입니다.
도움을 주시면 감사하겠습니다.
HTML 코드 :
<div id="schedule_row">
<div class="day">
</div>
<div class="timehead">
6 AM
</div>
<div class="timehead">
7 AM
</div>
<div class="timehead">
8 AM
</div>
<div class="timehead">
9 AM
</div>
<div class="timehead">
10 AM
</div>
<div class="timehead">
11 AM
</div>
<div class="timehead">
12 PM
</div>
<div class="timehead">
1 PM
</div>
<div class="timehead">
2 PM
</div>
<div class="timehead">
3 PM
</div>
<div class="timehead">
4 PM
</div>
<div class="timehead">
5 PM
</div>
<div class="timehead">
6 PM
</div>
<div class="timehead">
7 PM
</div>
<div class="timehead">
8 PM
</div>
<div class="timehead">
9 PM
</div>
<div class="timehead">
10 PM
</div>
<div class="timehead">
11 PM
</div>
</div>
<div id="schedule_row" style="margin-top: -20px;">
<div class="day daylist">
<span class="weekday">Today</span>
<span class="date">Oct 19, 2012</span>
</div>
<div class="timeslot first"><div class="requestblock blue 2hr">Block A</div></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"><div class="requestblock red 2hr">Block B</div></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
</div>
<div id="schedule_row">
<div class="day daylist">
<span class="weekday">Saturday</span>
<span class="date">Oct 20, 2012</span>
</div>
<div class="timeslot first"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
<div class="timeslot"></div>
</div>
CSS : 내가 제대로 이해하고있는 경우
#schedule_row {
min-height: 60px;
display: inline-block;
}
.day {
display: inline-block;
min-width: 100px !important;
font-size: 14px;
color: #6D645D;
float: left;
}
.daylist {
margin-top: 30px;
}
.timeslot {
display: inline-block;
float: left;
background: #E1E1E1;
margin-right: 3px;
padding: 8px;
position: relative;
min-height: 80px;
width: 20px;
}
.timehead {
color: #6D645D;
font-size: 12px;
display: inline-block;
margin-right: 5px;
width: 25px;
float: left;
margin-left: 10px;
text-align:center;
line-height: 13px;
}
span.weekday {
font-size: 15px;
font-weight: bold;
}
span.date {
font-size: 12px;
color: #A8A7A5;
display: block;
}
.requestblock {
background: #777777;
color: #fff;
padding: 1px 2px;
margin-top: 30px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
position: relative;
top: 0;
left:0;
z-index: 10;
font-size: 9px;
}
.blue {
background: #3A87AD;
}
.red {
background: #B94A48;
}
.first {
margin-left:5px;
}
.1hr {
min-width: 300px !important;
}
.2hr {
min-width: 100px !important;
}
"내가 원하는 것은"블록 -A "또는"블록 -B "와 같은"블록 "을 가질 수 있다는 것입니다. 블록 뒤에있는 회색 막대는 그리드입니다. " - 뭘, 언제? 이 상자 또는 다른 상자를 지정하는 방아쇠 또는 규칙은 무엇입니까? 당신의 의도는 불분명합니다. 또한 시간표는 테이블과 행에 모두 존재하는 데이터입니다. 열 내용을 사용하여 열 머리글의 크기를 조정하려면 표를 사용합니다. 그것이 우리가 한 일입니다. 그렇게해서 50k 달러짜리 소프트웨어를 구입 한 것입니다. (http://allocateplus.com.au/students.html) – enhzflep