Layout Problems - CSS + HTML + Album
Posted: Tue Dec 04, 2007 9:36 pm
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:
Another little problem, the images in the Album mod are all aligned to the left, how can I centralise them?
Thanks
Mark
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,
}Thanks
Mark