|
CSS - Calendar Formatting Problems
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; } Similar TutorialsHi, 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>
Hi. I am a relative CSS newbie working on a new layout. My intended format is:
A sidebar (a div with no visible border) containing a set of smaller divs.
A main div for the content on the right.
About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is: Code: <div class="sidebar">
<div class="cv">
<font size="3"><b><center>
Current Version Info
</center></b></font>
</div>
<div class="ver">
<center>
Version:
<br/>
<b>0.0.0</b>
</center>
</div>
<div class="rel">
<center>
Released:
<br/>
<b>00/00/00</b>
</center>
</div>
<div class="nav">
</div>
</div>
<div class="main">
<center>
Lorum ipsum
</center>
</div>
The relevant CSS code is: Code: div.sidebar {
width: 202px;
float: left;
border: 0px solid #00CC99;
}
div.cv {
width: 200px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.ver {
width: 99px;
border: 1px solid #00CC99;
float: left;
background-color: rgb(33,33,33)
}
div.rel {
width: 99px;
border: 1px solid #00CC99;
float: right;
background-color: rgb(33,33,33)
}
div.nav {
margin-top: 30px;
width: 200px;
height: 100px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.main {
width: 500px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33);
float: right;
}
In particular, div.main and div.sidebar are the ones giving me trouble. What would you recommend? Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it. Hi 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 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. 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! 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... 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. please close thread 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? I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
hi all, need one help from you.. i have to format a div tag which is generated dynamically.. if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar overflow:auto; overflow-x:hidden; height:200px; in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag.. can anybody help me... I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently: 1) IE seems to put equal whitespace above and below the element 2) Firefox seems to put less whitespace AFTER the <h1> tag. Anyway to smooth this out so it displays close to similiar? My gratitude ahead of time... Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
I'm working on a project where the client wants a table of data, and one column of data is money, such as "$1.23". The client would like all the "$" aligned on the left side of the column and all the amounts aligned on the right side. Now I could do something like: Code: <td> <div style="float:left">$</div> <div style="float:right">1.23</div> <td> (Obviously I'd change those to classes.) That works, but it seems sloppy, so many extra divs for a tiny little formatting thing. I could also put the "$" into a background image, but then you lose something if you're using a screen reader. I looked into doing something with :first-letter, but there's no way to say "everything else but the first letter float right" without wrapping the amount in a span or div, which still seems sloppy to me. Is there another way to approach this, CSS or otherwise? This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and of course, it displays at it should in IE6: http://computerslayer1.spymac.com/formpics/IE---1.gif http://computerslayer1.spymac.com/formpics/IE---2.gif In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing. http://computerslayer1.spymac.com/f...s/opera---1.gif http://computerslayer1.spymac.com/f...s/opera---2.gif Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8. http://computerslayer1.spymac.com/f.../firefox--1.gif http://computerslayer1.spymac.com/f.../firefox--2.gif Any ideas, guys? I'm stuck. I have a table whose class is "dogs" How do I make all the <tr> elements within the table dogs have a certain style and not all the <tr> elements on the page? |
|||||||