|
CSS - Calendar - Style With Css?
Again I have arrived with yet another inquiry regarding tableless layouts.
I have been tasked with the creation of a fairly complex calendar application. Creating this using tables would be no problem for me, but I am wondering if this is what I should be doing. I remember hearing that you should only display "tabular data" using tables, which would imply that I should be using divs and the like to create this app, not tables. Does anyone have any resources that specifically tackle the task of creating a calendar using CSS techniques? I feel that I could do it, but I just need a basic approach to get me started. The biggest issue I am having is regarding the days dropping down to a new "row" after seven boxes have been displayed. I can provide no code, obviously, since I haven't started yet. I'm just merely looking for some insight. Thanks in advance! Similar TutorialsHi all. I wonder if anybody can point me in the right direction. I want/need to make a calendar that looks very similar to the google calendar's month view. So, basically I need to span multi-day events over the days that they appear (mainly for readability). The calendar reads all the event information from a database, with data entry being on a different part of the site and independent of the actual calendar display. I don't need any fancy drag and drop scripts, or AJAX type things for it either. I just want to know how I can do the same spanning effect as google calendar does. I assume it will only involve html and css (Don't see how javascript would come into the equation) Oh, and if somebody has already posted a solution, i'm sorry for reposting, I'm not really sure what search terms to actually use for this If you know how to do it, or can point me in the correct direction, please do so. Thanks in advance I have two questions related to modification of a Plans Calendar! Are my problems my css modifications or my lack of understanding of perl? I want to make a seven day calendar into a five day calendar, displaying only Mon - Friday. The calendar can be seen at www.doldaycare.com (my kids' daycare center) In plans/theme/style.css, i make my changes like below. The result is great for the change related to Quote: .day.saturday, .day.sunday { display:none; Saturday and Sunday only stop displaying as desired. My problem is that the words Saturday and Sunday still display such that the table cell for Monday has Sunday as a header, Tuesday has Monday as a header, etc. This bring me to changing the other css class (correct term?) related today_names. All of the table cell properties for all days stop displaying when I try: Quote: : /* td.day_names, sunday { display:none; } */ Instead I just want Saturday and Sunday to stop displaying. Is my css incorrect? Here is my css as modified Code:
td.day_names { /* used for Sunday, Monday, etc.*/
color:#000;
font-weight:bold;
font-size:small;
font-style:italic;
text-align:center;
background-color:transparent;
border-style:solid;
border-width:0px;
border-color: #000;
margin:0px;
width:14%; /* -- modified from orginal 150px --this line makes each calendar cell at least a certain width */
}
/* td.day_names, sunday {
display:none;
} */
.day { /* used for calendar cells*/
background-color:#fff;
border:solid 1px #333;
padding:0;
padding-left:2px;
padding-right:2px;
width:11%;
font-size:small;
font-weight:normal;
vertical-align:top;
height:2px;
}
/*.day.saturday, .day.sunday {
display:none;
}*/
I believe that the key part of the perl.cgi related to the html display is: Code:
# print day names
$return_text .=<<p1;
<table class="calendar">
<tr>
<td class="day_names">$weekday_sequence[0]</td>
<td class="day_names">$weekday_sequence[1]</td>
<td class="day_names">$weekday_sequence[2]</td>
<td class="day_names">$weekday_sequence[3]</td>
<td class="day_names">$weekday_sequence[4]</td>
<td class="day_names">$weekday_sequence[5]</td>
<td class="day_names">$weekday_sequence[6]</td>
</tr>
p1
where @weekday_sequence = @day_names; I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! I know I've seen it somewhere, but I can't seem to find it anymore. If someone could tell me of a site that has a calendar made using a CSS layout only (No tables), I'd appreciate it. I want to see the code, because I figure it'll be a good lesson in CSS layout. Thanks in advance. Hi, I need help with formatting a calendar using CSS. Here's a list of the goals I'm trying to achieve: The day numbers are positioned in the top right corner of the cell. The event text is centered both vertically and horizontally within each cell. The day number doesn't affect the centering of the event text (i.e., it's as if it has zero width). I need to be able specify a minimum width and height for the cells. I have a png of the effect I am trying to achieve, but unfortunately I can't post it being a brand-new member. If seeing it would help, let me know and I guess I can PM the url to you. Update: Here's the link to the png: Code: http://tapestryfolkdance.org/images/calendar.png Below is what I've tried. However, the event text is not centered vertically within each cell, and the first couple of events are not centered horizontally in the cell. It is fine if the event text overlaps with the day number. Code:
<html><head><style>
table { text-align: center; border-style: solid; border-width: medium; border-spacing: 0px }
td { border-style: solid; border-width: thin; border-color: black; }
.day {
margin: 0px; text-align: center; font-style: bold;
border-style: solid; border-width: thin; border-spacing: 1px;
font-size: large; color: black;
float: right;
}
td {
text-align: center; color: black; font-size: small; min-width: 60px; min-height: 120px;
vertical-align: top;
}
</style>
</head><body>
<table>
<tr>
<td>
<div class=day>2</div>event 1<br></td>
<td>
<div class=day>3</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>4</div>event 1<br></td>
<td>
<div class=day>5</div>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>6</span>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>7</span>event 1<br>event 2<br></td>
<td>
<div class=day>8</div>event 1<br></td>
</tr>
<tr>
<td>
<div class=day>9</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>10</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>11</div>event 1<br></td>
<td>
<div class=day>12</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>13</div>event 1<br></td>
<td>
<div class=day>14</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>15</div>event 1<br>event 2<br></td>
</tr>
</table>
</body>
</html>
I was wondering how to layout a calendar in CSS. One of the ones you see everywhere, usually done as tabular data that has boxes for each date and are laid out 1 2 3 4 5 6 7 8 9 10 etc etc... I have a style sheet which creates a calendar which is hooked up to a recordset. Like a blog calendar. My problem is on months that seem to have more data then others the calendar table pushes the page or the table therefor creating problems. Here is my CSS, is there a way to lock the table so if data population does occur it doesnt knock everything out of wack? Thanks so much for any help you may offer. Steve /* CSS Document */ table#calendar { font-family:Verdana, Arial, Helvetica, sans-serif; } table#calendar caption { font-size: 10px; font-weight: normal; } table#calendar a { text-decoration:none; } table#calendar tr#days th { font-size: 10px; color: #000000; background-color: #FFFFFF; font-weight: normal; padding: .3em 1px; } table#calendar tr#title th { font-size: 10px; background: White; color: Black; font-size: 10px; border: 0px solid #224; padding-top: 0.3em; padding-left: 0.3px; } table#calendar td { font-size: 10px; width: 30px; color: #000000; text-align: right; border: 0px solid gray; border-color: FFFFFF; vertical-align: top; } table#calendar .day7 { border-right: 0px solid #FFFFFF; } table#calendar td a { font-weight: normal; display: block; margin: 0; padding: 0px; width: 30px; } table#calendar th a { font-weight: normal; } table#calendar a:link {color: 0000CC;} table#calendar a:visited {color: 0000CC;} table#calendar a:hover { background: Silver; } table#calendar .day1, table#calendar .day7 { background: White; } table#calendar .blank { background: White; border: 0px solid #; border-right: 0px solid #99A; } table#calendar .lastweek td { border-bottom: 0px solid #AAB; } table#calendar .today { background-color: #A3AEB0; border: 0px solid black; } please close thread What've I done wrong...? See what's happening with my calendar he tuirennhurstfield.com/calendartrial.php In IE8 the SUN & MON columns are replacing columns FRI & SAT and are pushing TUES-SAT down a level so they are below... This seems to only be happening in IE8, works fine in IE6, IE7, Safari and Firefox... I purchased this script and the script worked fine in IE8 on the demo (see he codecanyon.net/item/smooth-php-calendar-reloaded/full_screen_preview/105891 ) I've clearly edited something wrong in the CSS when I was making it work with the visual look of my site... But I'm not sure what I'm looking at, and the original developer has given me the sterling advice of "check your css" If you can help at all please let me know! Thanks!!! Ok. I've got a calendar all set up, and it displays properly in its frame in Firefox. using firefox, try the following link: http://www.kennedygallery.org (click events calendar) in IE, the whole thing is right-justified or centered or something. Since I discovered the problem, I even started putting redundant declarations in the calendar's style sheet: Code: body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background : #FFFFFF ;
color : #505458;
margin: 0px;
margin-left: 10px !important;
width:590px !important;
}
.maintable {
position: absolute;
left: 10px !important;
margin-top: 0px;
margin-bottom: 0px;
margin-left:0px;
}
etc, etc. So is there a positioning bug or something that I have to work around to make it display as it does in Firefox? Thanks, Perry. I am try to make a page that is similar to outlooks calendar page for a day. The page would have a scrollbar that scrolls from 12am to 12am(next day), but the initial position is 8 am instead of 12am. I can set an anchor and make sure the page opens to that anchor, but it is an awkward solution and might cause some linking problems. Anyone know who to do this? on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
Whenever I use <br> the above class style no longer applies to the following content. Can I use something else instead of line-break to jump a line? Or can it be within the body tag? What is the standard? TIA |
|||||||