Layout Problems - CSS + HTML + Album

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
truslack

Layout Problems - CSS + HTML + Album

Post by truslack »

Just getting a CMSMS website up and running, but I don't seem to be able to make the vertical-align parameter in the CSS to work - it is always in the centre of the page instead of being at the top.


HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
</__body bgcolor="#ffffcc">

<table border="0" cellpadding="0" cellspacing="0" width="784" align="center">

  <tr>
    <td><img src="images/spacer.gif" width="390" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="324" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td><img name="Photography_r1_c1" src="images/Photography_r1_c1.gif" width="445" height="90" border="0" id="Photography_r1_c1" alt="" /></td>
   <td><img name="Photography_r1_c4" src="images/Photography_r1_c4.gif" width="15" height="90" border="0" id="Photography_r1_c4" alt="" /></td>
   <td><img name="Photography_r1_c5" src="images/Photography_r1_c5.gif" width="324" height="90" border="0" id="Photography_r1_c5" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="90" border="0" alt="" /></td>
  </tr>
  <tr>

   <td colspan="3" background="images/Photography_r2_c1.gif">    
{cms_module module='menumanager' template='cssmenu.tpl'}
   </td>


<!-- end menu -->
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  
  <tr>
    <td colspan="3" background="images/Photography_r3_c3.gif">

<!-- start content -->
<div id="content">
  <h1>{title}</h1>
  {content}
</div>
<!-- end content -->
   <td><img src="images/spacer.gif" width="1" height="440" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="Photography_r5_c1" src="images/Photography_r5_c1.gif" width="445" height="42" border="0" id="Photography_r5_c1" alt="" /></td>
   <td><img name="Photography_r5_c4" src="images/Photography_r5_c4.gif" width="15" height="42" border="0" id="Photography_r5_c4" alt="" /></td>
   <td><img name="Photography_r5_c5" src="images/Photography_r5_c5.gif" width="324" height="42" border="0" id="Photography_r5_c5" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="42" border="0" alt="" /></td>

  </tr>
	
</table>
<div align="center">
{global_content name='footer'}
</div>
<__body>
</__html>

Code: Select all

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 75.01%;

}

/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link 
a:active {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #18507C; 
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   background-color: #C3D4DF;
   color: #385C72;
}


body {
   background-color: #ccc;
   color: #333;
   margin:1em;    /* gives some air for the pagewrapper */
align: center
vertical-align: top;
}

div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;        /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em;        /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
}

 div#content {
   margin: 2em 2em 2em 2em;   /* some air above and under menu and content */
vertical-align: top,

}
Another little problem, the images in the Album mod are all aligned to the left, how can I centralise them?

Thanks

Mark
Attachments
Clipboard01.jpg
Last edited by truslack on Tue Dec 04, 2007 9:38 pm, edited 1 time in total.
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: Layout Problems - CSS + HTML + Album

Post by kermit »

eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
truslack

Re: Layout Problems - CSS + HTML + Album

Post by truslack »

Thanks for that.

Is there anything I can do to make the text start at the top?
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm

Re: Layout Problems - CSS + HTML + Album

Post by calguy1000 »

This is a topic not specifically related to CMS made simple.... some google searches and/or asking in the #css channel on freenode might help.

I consider this topic closed.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: Layout Problems - CSS + HTML + Album

Post by kermit »

truslack wrote: Thanks for that.

Is there anything I can do to make the text start at the top?
since you ARE using layout tables.... have you tried working on the TD that contains the content div? 
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
Locked

Return to “Layout and Design (CSS & HTML)”