CSS - Calendar Page Scrollbar That Starts In The Middle

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;

Ok guys, ive looked all over to try to find a code that will work, nothing so far.

So here it is

css Code:
Original - css Code * { margin: 0px; padding: 0px; } html { width: 100%; height: 100%; } body { height: auto !important; height: 100%; min-height: 100%; background-color: #efead0; margin: 0px; padding: 0px; position: relative; } .clear { clear: both; } /* Start Site - Container sets the width for the whole page Divs: - Top is the top image - Top li is for the menus - Content is for the actual site - Footer is for the bottom image */ #div_container { margin: 0px auto; width: 800px; height: 100%; } #div_top { background-image: url(images/body_top.png); background-repeat: no-repeat; width: 800px; height: 100px; } #div_banner { text-align: center; margin-left: auto; margin-right: auto; } #div_top li { position: absolute; top: 50px; list-style-type: none; } #div_content { background-image: url(images/body_main.png); background-repeat: repeat-y; width: 800px; } #div_footer { position: absolute; bottom: 0; background-image: url(images/body_bottom.png); background-repeat: no-repeat; width: 800px; height: 100px; }

  

  


 *


 {


  


     margin: 0px;


  


     padding: 0px;


  


 }


 html


 {


  


     width: 100%;


     height: 100%;


 }


 body


 {


     height: auto !important;


     height: 100%;


     min-height: 100%;


     background-color: #efead0;


     margin: 0px;


     padding: 0px;


  


     position: relative;


 }


 .clear


 {


     clear: both;


 }


  


 /*


     Start Site


     - Container sets the width for the whole page


     Divs:


     - Top is the top image


     - Top li is for the menus


     - Content is for the actual site


     - Footer is for the bottom image


 */


 #div_container


 {


  


     margin: 0px auto;


  


     width: 800px;


     height: 100%;


  


 }


 #div_top


 {


  


     background-image: url(images/body_top.png);


     background-repeat: no-repeat;


  


     width: 800px;


  


     height: 100px;


  


 }


 #div_banner


 {


     text-align: center;


     margin-left: auto;


     margin-right: auto;


 }


 #div_top li


 {


  


     position: absolute;


  


     top: 50px;  


  


     list-style-type: none;


  


 }


 #div_content


 {


  


     background-image: url(images/body_main.png);


  


     background-repeat: repeat-y;


  


     width: 800px;


  


 }


 #div_footer


 {


     position: absolute;


     bottom: 0;


  


     background-image: url(images/body_bottom.png);


  


     background-repeat: no-repeat;


  


     width: 800px;


     height: 100px;


  


 } 

and the html


html Code:
Original - html Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" URLWASBLOCKED> <html xmlns=URLWASBLOCKED> <head> <title>{L_TITLE}</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="site.css" /> </head> <body> <div id="div_container"> <div id="div_top"> </div> <div id="div_content"> <div id="div_banner"> <img src="images/banner3.png" width="755px" height="136px"> </div> </div> <div id="div_footer"> </div> </div> </body> </html>

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" URLWASBLOCKED>

<html xmlns=URLWASBLOCKED>

<head>

<title>{L_TITLE}</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="site.css" />

</head>
<body>
<div id="div_container">
    <div id="div_top">
    </div>
    <div id="div_content">
        <div id="div_banner">
            <img src="images/banner3.png" width="755px" height="136px">
        </div>
    </div>
    <div id="div_footer">
    </div>
</div>
</body>

</html>

What i am trying to do is have div_content take 100% of the page. having the top div stuck to the top, and the footer stuck to the bottom.

I managed to do the bottom but i cant seem to make it so that the middle div takes 100% of the page.

Im using Linux, so i am using firefox and chrome for testing but i also need it to be IE compatible.

Help?
Thanks.

hi
is there a way to get a div to be in the vertical middle of the screen. i tried :

margin-top: auto;
margin-bottom: auto;

but it doesn't work.

thanks

I have this code:

Code:

<html>
<head>
<style type="text/css">

body {
	font-family: arial, helvetica, serif;
	font-size: 100%;
	background: white;
	padding: 2em;
	margin: 0;
}

#content {
	width: 34em;
	background-color: #ffffff;
	padding: 1em 0;
	border: 6px double #6DA9CA;
	margin: auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 32em;
}
html>body #content {
	width: 32em;
} 

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #790;
}

a:active {
	color: red;
}

a:hover {
	text-decoration: underline;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
	
li {
	float: left;
	position: relative;
	width: 10em;
	text-align: left;
	cursor: default;
	background-color: white;
}
	
li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border: solid 1px #6DA9CA;
}

#submenu li ul {
	border: solid 1px #6DA9CA;
}

li>ul {
	top: auto;
	left: auto;
}

#nav a {
	color: black;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #6DA9CA;
	border-width: 0 5px;
}
	
li:hover ul, li.over ul{ display: block; }
	
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
</head>
<body>

<ul id="nav">
  <li><a href="">Home</a></li>

  <li><a href="">Guiding Principles</a></li>

  <li>Background & Qualifications</a>
    <ul>
      <li><a href="">Biography</a></li>
      <li><a href="">Dispute Resolution</a></li>
    </ul>
  </li>
	
  <li>Developments
    <ul>
      <li><a href="">International</a></li>
			<li><a href="">Specialty & Agrichemical News & Regulations</a></li>
			<li><a href="">Archive</a></li>
    </ul>
  </li>
	
	<li><a href="">Other Resources</a></li>
</ul>

</body>
</html>

And I like it - but I have one problem - I want there to be lines between each of the <li>s in the submenus - meaning between Biography and Dispute Resolution I want a line - I know there is no border-middle value - so how do I do this?

how can i get a div in the middle of the y-axis of the browser window?

hi to all

I have a round boxes using div, Inside this div there is an picture image which doesn't have a fix size fot both height and with. I want to put on the left and right side of another image such as left_anim.gif and right_anim.gif . But I want to center vertically this gif. If the picture image have a fix size I can center it vertically but it will varies depend on the size of the pictures, How can I achive this.

any suggestions would greatly appreciated

thanks in advance
Tirso

here is the sample link

http://www.tirso.webberzsoft.com/mypicturecards_individual_others.php

here is the code

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Example - How to create rounded corner boxes using CSS</title>
<link type="text/css" rel="stylesheet" href="css/css.css" />
</head>

<body>
 <div id="formdiv">
   <div id="picturecards_individual">	                   
      <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">
          <div id="buttons">
            <div class="cont">
              <div class="frame" id="frameimage">
               <div style="float:left; vertical-align: middle"><img src="images/left_anim.gif" /></div><img src="picturecards/individual/DSCF0011.JPG"/></div>
            </div>
          </div>
          <div style="clear:both"></div>                           
      </div></div></div></div></div></div></div></div>  <!--end of rounded box-->
  </div>
</div>                             
</body>
</html>

Ive tried to put stuff to the left of the news room in the blank spot and cannot seem to do so.. here is css:
Code:

#header {
	position: relative;
	margin: 0 auto;
	background: transparent url(img/bg/header-v2.gif) no-repeat bottom left;
	height: 235px;
	width: 760px;
	text-align: left;
	z-index: 10;
}
'#content {
	position: relative;
	background-color: #FFFFFF;
	height:inherit;
	width: 760px;
	margin: 0 auto 0 auto;
	text-align: left;
	border: 1px double rgb(72,183,239);
	overflow: hidden;
		font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftpanel{
position: inherit;
float: left;
background-color: #f5f5f5;
height: inherit;
width: 170px;
margin-left: 3px;
}
#leftpanel-head{
width: 158px;
height: 26px;
background-image: url(img/bg/leftpanel-head.png);
padding-left: 12px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
}
#content-right {
width: 585px;
height: inherit;
float: right;
}



#newsroom {
float: right;
width: 300px;
height: 30px;
margin-left: 2px;
}

#newsroom-header {
width: 300px;
height: inherit;
background-image:url(img/bg/video-player-head.png);
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#welcome{
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#welcome-text {
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#primary-nav {
	position: absolute;
	background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
	list-style: none;
	width: 760px;
	height: 26px;
	top: 203px;
	left: 1px;
	z-index: 10;
	padding-left: 5px;
}

#primary-nav li {
	float: left;
	background-position: 0 -26px; 
}

#primary-nav li ul {
	position: absolute;
	background: transparent url(img/primary-nav-top.png) no-repeat;
	list-style: none;
	width: 159px;
	left: -9999px;
	margin-left: -9px;
	padding-top: 5px;
}

#primary-nav a {
	display: block;
	height: 0px !important;
	text-decoration: none;
	overflow: hidden;
}

#primary-nav li a {
	background-position: 0 0; 
}

#primary-nav li#nav-1 {
	background: transparent url(img/bg/nav-1.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-2 {
	background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
	margin-right: 1px;
}
#primary-nav li#nav-3 {
	background: transparent url(img/bg/nav-3-restaurants.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-4 {
	background: transparent url(img/bg/nav-4-hotels.png) no-repeat;
}

#primary-nav li#nav-5 {
	background: transparent url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-6 {
	background: transparent url(img/bg/nav-6-links.png) no-repeat;
}
#primary-nav li#nav-7 {
	background: transparent url(img/bg/nav-7-about.png) no-repeat;
}


#primary-nav li#nav-1:hover, 
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover, 
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-3.hover,
#primary-nav li#nav-3.sfhover,
#primary-nav li#nav-4:hover, 
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5:hover, 
#primary-nav li#nav-5.sfhover,
#primary-nav li#nav-6:hover, 
#primary-nav li#nav-6.sfhover,
#primary-nav li#nav-7:hover, 
#primary-nav li#nav-7.sfhover{
	background-position: 0 -26px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#primary-nav li#nav-1 a, 
#primary-nav li#nav-2 a,
#primary-nav li#nav-3 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a,
#primary-nav li#nav-6 a,
#primary-nav li#nav-7 a  {
	width: 107px;
	height /**/: 26px;
	padding: 26px 0 0 0;
}

#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-3 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li,
#primary-nav li#nav-6 ul li,
#primary-nav li#nav-7 ul li{
	background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
	height: 21px;
}

#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-3 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom,
#primary-nav li#nav-6 ul li.bottom,
#primary-nav li#nav-7 ul li.bottom{
	background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
	height: 14px;
	width: 159px;
}

#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-3 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a,
#primary-nav li#nav-6 ul li a,
#primary-nav li#nav-7 ul li a {
	overflow: hidden !important;
	overflow: visible;
	font-size: 10px;
	color: #FFF;
	height: 19px !important;
	height: 19px;
	width: 107px;
	padding: 1px 3px 2px 19px;
}

#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-3 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover,
#primary-nav li#nav-6 ul li a:hover,
#primary-nav li#nav-7 ul li a:hover {
	background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}

#primary-nav li:hover ul, 
#primary-nav li.sfhover ul {
	left: auto;
}

html:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
	<title>TysonsCorner.com&trade;</title>
	<link rel="shortcut icon" href="#">
	<link href="home.css" rel="stylesheet" type="text/css">
	<link href="global.css" rel="stylesheet" type="text/css">
    <link href="nav1.css" rel="stylesheet" type="text/css">

</head><body>
<div id="container">
	<!-- HEADER AREA STARTS HERE -->
        <div id="content">
<div id="header">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="760" height="200" id="Banner(FLASH) - Beta" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="Banner(FLASH) - Beta.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="Banner(FLASH) - Beta.swf" quality="high" bgcolor="#ffffff" width="760" height="200" name="Banner(FLASH) - Beta" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
		<ul id="primary-nav">
			<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
			<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">News</a></li>
					<li><a href="#" title="Tysons 2 Stores">Events</a></li>
                    <li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
			<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">Tysons I</a></li>
					<li><a href="#" title="Tysons 2 Stores">Tysons II</a></li>
                    <li><a href="#" title="More Tysons Shopping">More Shopping</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
			<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
				<ul>
					<li><a href="#" title="Cajun Food">Cajun</a></li>
					<li><a href="#" title="Grilled Food">Grilled</a></li>
					<li><a href="#" title="Foreign Food">Foreign</a></li>
					<li><a href="#" title=" Full List Restaurants">Complete List</a></li>

					<li class="bottom"></li>
				</ul>
                <li id="nav-4"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-5"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-6"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-7"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
		</li>
    </ul>

</div>

<div id="leftpanel">
<div id="leftpanel-head">
Search
</div>

<form id="form1" method="post" action="">
  <p>
    <label>
      <input type="text" name="IDsearch" id="IDsearch" width="150"/>
      </label>
  </p>
</form>

<div id="leftpanel-head">
Events Calendar
</div>


<div id="leftpanel-head">
Sponsored Ads
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 120x600, created 10/23/08 */
google_ad_slot = "1782998545";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>  


<div id="newsroom">
<div id="newsroom-header">News Room</div>
</div>    

<div id="welcome">Test</div>

<div id="newsroom">
<script language="javascript" src="http://www.thenewsroom.com//mash/swf/voxant_player.js?a=V3126802&m=669243&w=300&h=290&v=2"></script>
</div> 
</div>  


</body></html>

Demo: http://www.reston.com/Tysons Corner COM

I have been looking for this all over the place but cant find the right solution.

I want a div aligned like it's on this website.

Code:

http://www.captaincrawl.com/

1. It's aligned in the center/middle of the screen
2. It's relative so it moves according to the window size
3. It should work on major browsers such as IE

Can anyone help me please?

I'm working on a new page at http://www.plumeriawebdesign.com/webdevgirl/ and am having problems aligning the middle div column.

In IE it shows approximately 25px below the dark blue date bar while it shows correctly in FF. I'm also having problems with it extending further than the 100% wrapper div.

Here is my HTML

Code:

<body>
<div id="wrapper">
  <div id="top" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
	<div id="nav">
	  <?php
	    $today = date("D M d Y");
		echo "$today\n";
	  ?>
	</div>
	<div id="left">left column</div>
	<div id="right">right column</div>
  <div id="middle">middle column</div>
</div>
</body>

CSS is he

Code:

/* CSS Document */
html {
  height: 100%;
}
body {
	margin: 0px 0px 0px 0px;
	background-color:#333;
	padding:0px;
	font:11px verdana, arial, helvetica, sans-serif;
	position: relative;
	min-width: 600px;
	width: 100%;
	height: 100%;
	color: #333;
}

#wrapper {
  width: 100%;
  height: 100%;
}
html>body #wrapper {
  height: 100%;
}
#left {
  float: left;
  left:0px;
  top:113px;
  width:12%;
  background-color: #a2cde3;
  border-right: 2px solid #333;
  padding: 5px 5px;
}

#middle {
  top: 0px;
  voice-family: "\"}\"";
  voice-family: inherit;
  margin-left: 12%;
  margin-right:12%;
  padding: 5px 5px;
  height: 100%;
  min-width: 360px;
  width: 76%;
  background-color: #626262;
  color: #000;
}

html>body #middle {
  margin-left: 12%;
  margin-right:12%;
}

#right {
  float: right;
  top: 0;
  width:12%;
  background-color: #a2cde3;
  border-left:  2px solid #333;
  padding: 5px 5px;
}
	
#top {
  min-width: 600px;
  width: 100%;
  height: 100px;
  background-color: #FFF;
  color: #FFF;
  voice-family: "\"}\"";
  voice-family: inherit;
}
html>body #top {
  height:100px;
}

#nav {
  top: 100px;
  left: 0;
  min-width: 600px;
  width: 100%;
  height: 12px;
  background-color: #005698;
  color: #e4e4e4;
  vertical-align: bottom;
  text-align:left;
  text-indent: 5px;
  clear: both;
}
	

I've got an image that is 75px high. Right beside it, I have a H1. I want to vertically align the H1 in the middle of the image. Vertical align doesn't work, and for some reason, setting the line height to the height of the image doesn't work either.

Hello. I have no idea how to fix my problem, and I am hoping someone would be kind enough to help me.

I have set up my template to have a wrapper div with a top, middle, and bottom div inside.

What I need to do is have the footer (bottom div called (wrapper_bottom) move down when the content in the middle div (wrapper_middle) has more content added. Currently, when content is added to the middle div (wrapper_middle), it pushes the bottom div content out of the way. Maybe I have the divs set up wrong or maybe have them listed in the html file incorrectly?

I have uploaded a zip file of my files he
www (*) dpegues (*) com (slash) site_help (*) zip

Also, I have posted a live version of it at:
www (*) dpegues (*) com (slash) site_help

It contains my site images, the template in the folder called Templates, and the css file.

And one more thing if everyone doesn't mind - how do I keep the bottom buttons attached to the bottom of the footer bar?

I am learning CSS right now, and unfortunately have to teach myself. I think I have learned a lot though in the few days I have been doing it!!!

Thank you everyone.

Ok, you can do this with a table by setting its height and width to 100% and then valigning to middle and centering. However is there a way to do it using CSS?

Hello, 1st post on this forum.

How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered?

I would post links to the pages but this forum will not let me.

Thanks for the help