www.cedarstreetchurch.org/calendar.html
My sites: www.cedarstreetchurch.org, www.lojope.com and www.dteu.info
Mark Sleep
Registered User
388 posts
I do have a working calendar on my page now but not really what I cwas looking for.
www.cedarstreetchurch.org/calendar.html
www.cedarstreetchurch.org/calendar.html
Inger
Senior Advisor
14,456 posts
Online Now
Mark Sleep wrote:
Hey Inger that coding worked on another page I made but not in my regular page.
Now a dumb question.: How to get it to center vertically?
Hey Inger that coding worked on another page I made but not in my regular page.
Now a dumb question.: How to get it to center vertically?
Hi,
Not sure about the vertical centering. Maybe someone else has some better advice. What I do is setting a value for top and bottom margin that looks fine on my monitor' e.g. like this:
#cc_webcalendar { margin: 80px auto 80px; width: 500px;}
It will not exactly center it vertically, but it keeps at least the said margin above and below. You'll have to remember, though, that not all monitors have the same size, so the result might not always be the best.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Mark Sleep
Registered User
388 posts
Thats why I liked the tables TD valign and align coding. Made it easy.
My sites: www.cedarstreetchurch.org, www.lojope.com and www.dteu.info
sstovert@satx.rr.com
Guest
5,410 posts
Here is a sample html using css to center a div on the screen.
CoffeeCup... Yeah, they are the best!
Inger
Senior Advisor
14,456 posts
Online Now
Thanks! 
I knew it was something with 50%, but I was not able to remember the bit about the negative margin!
I knew it was something with 50%, but I was not able to remember the bit about the negative margin!
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Mark Sleep
Registered User
388 posts
1. Hey Tom, could you put it in normal looking code? It is all spread out to the right instead on up and down.
2. How would this be inserted into the page to center the calendar?
2. How would this be inserted into the page to center the calendar?
My sites: www.cedarstreetchurch.org, www.lojope.com and www.dteu.info
Jo Rice
Senior Advisor
10,951 posts
Tried to get tab spacing in there to make it look proper but the forums won't put it in there sorry 
<!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>Center Stage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#center {
position:absolute;
width:400px;
height:300px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-150px;
background-color: blue;
}
p{
color: #ffffff;
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size: 10pt;
margin: 12px;
text-align: center;
}
</style>
</head>
<body>
<div id="center">
<p>I'm center stage.</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Center Stage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#center {
position:absolute;
width:400px;
height:300px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-150px;
background-color: blue;
}
p{
color: #ffffff;
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size: 10pt;
margin: 12px;
text-align: center;
}
</style>
</head>
<body>
<div id="center">
<p>I'm center stage.</p>
</div>
</body>
</html>
Inger
Senior Advisor
14,456 posts
Online Now
Mark, to get this into your page, take this chunk:
...and insert it into your exported monthstyles.css. You can put it in right at the bottom. Then change the following:
'#center' to '.center'
the width from 400px to 700px
the height to something like 750px
the two margins have to be exactly half of the width and height as negative values.
Leave the blue background in for now, we'll use that in a bit.
In the exported calendar.html change this line:
You will see that I have added class="center" to the original div.
Now, since the height of the calendar is calculated by the programme, we don't know the exact height - yet. Therefore, when you look at the result, you will have some blue colour sticking out below the calendar. Then reduce the height in the css file, say to 748px - and the margin-top to -374px, and go on reducing until the blue colour is no more visible, then you have the height.
#center {
position:absolute;
width:400px;
height:300px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-150px;
background-color: blue;
}
position:absolute;
width:400px;
height:300px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-150px;
background-color: blue;
}
...and insert it into your exported monthstyles.css. You can put it in right at the bottom. Then change the following:
'#center' to '.center'
the width from 400px to 700px
the height to something like 750px
the two margins have to be exactly half of the width and height as negative values.
Leave the blue background in for now, we'll use that in a bit.
In the exported calendar.html change this line:
<!-- this is where the calendar's html will be inserted -->
<div id="cc_webcalendar" class="center">
</div>
<div id="cc_webcalendar" class="center">
</div>
You will see that I have added class="center" to the original div.
Now, since the height of the calendar is calculated by the programme, we don't know the exact height - yet. Therefore, when you look at the result, you will have some blue colour sticking out below the calendar. Then reduce the height in the css file, say to 748px - and the margin-top to -374px, and go on reducing until the blue colour is no more visible, then you have the height.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
andrew cameron
Registered User
3 posts
I tried using the new web calender 5.0 in wordpress.
I wanted it in the sidebar, so I opened an html widget and posted both pieces of code inside.
It actually worked perfect on the home page but not on other pages. I know this happened because I should add the absolute paths to the code.
However, I couldn't get it to work on other pages even when I did this.
I didn't persevere because I also noticed that when I added the calender code, it messed up the text colours in my nav bar.
I gather thats because of placing the code that should be between the head tags in a sidebar widget.
Can anyone help?
I wanted it in the sidebar, so I opened an html widget and posted both pieces of code inside.
It actually worked perfect on the home page but not on other pages. I know this happened because I should add the absolute paths to the code.
However, I couldn't get it to work on other pages even when I did this.
I didn't persevere because I also noticed that when I added the calender code, it messed up the text colours in my nav bar.
I gather thats because of placing the code that should be between the head tags in a sidebar widget.
Can anyone help?
andrew cameron
Registered User
3 posts
I've since added the code in the <head> section of wordpress and although the calender shows up, the nav bar text has disapeared again.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
