Well, I asked for advice a couple days ago about modding the java header from a dreamweaver static site to MODx, and the advice I got was spot on!!
I am quite stoked at this point as it all came together at once, seems like I was able to clean up almost everything structurally. Got the javascript in two chunks that do different things. The second one in the xtml is the header itself, and the first one is like the wings of the banner, to make it stretch. Don’t have the mouseover effect but I don’t care about that.
The current dev site is
http://dev.m289.net/ and the original is www.rayxi.com
There is some problem with the image on the left with the blue text, for some reason it is below where it is supposed to be. It is supposed to be part of that background black bar that the buttons are attached to, so slightly above the button text. There was anther black and white image on the right side as well that dropped.
I can get rid of it if I need to, can just put in a transparent image, so its no biggie if there is no easy fix. Just curious about it, the site would look better if that stayed, I think.
I cut the long and thin image that makes up the background behind the header down a little bit at the bottom side where it continued that black bar, because of the problem with the two sides. The two parts matched up perfectly, but on both sides the two pieces drop down.
Also wondering if I can arrange that top link to the English site a little better, to sit on the right side? In my super wide screen, it was like way at the edge, looked real dumb, but now on a small monitor its like almost in the middle, also dumb looking.
I think any n00bs will find this thing pretty simple. As I was learning I started several times with a new, fresh template to avoid crazy code. I hope I laid it out in a readable way. Fluid width layout set at 85%.
Other than that, I notice that my content and the things in the sidebar are not handling re-sizing or monitor size changes well, any advice on that?
Here is the code, inc;uding the java chunks in order:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>[(site_name)] | [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<base href="[(site_url)]"></base>
<script type="text/javascript"></script>
<link rel="stylesheet" href="/assets/templates/rayxi/css/rayxi.css" type="text/css" media="screen,projection" /
</head>
<body>
<div id="toplink">
<p class="p1"><span>Rayxi's <a href="http://dev.m289.net" title="Rayxi Content in English">English Site</a></span></p>
</div>
<div id="pagewidth" >
<div id="header">
{{rayxiheader}}
</div>
<div id="header2">
{{rayxiload}}
</div>
<div id="wrapper">
<div id="innerwrapper">
<div id="maincol" >
<div id="content">
[*content*]
</div>
</div>
<div id="leftcol" >
<div id="anotherspot"> </div>
{{rayxiLeftSidebar}}
</div>
<div id="sidebarright">
{{rayxiRightSidebar}}
</div>
</div>
<div id="footer" > Footer
</div>
</div>
</body>
</html>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
/* meyer reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* end meyer reset */
/* basic elements */
body {
font: 80.5%/1.6em "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif;
font-decoration:bold;
color:#050505;
margin:20px;
}
* {
margin:0;
padding:0;
}
a:link { color: #4B51C4; }
a:visited { color: #787CC4; }
a:hover {color: #2F302C;}
a:active { color: #fff; }
/* named elements */
#toplink{
position:absolute;
margin:0;
margin-left:800px;
margin-right: 60px;
z-index:8;
}
#toplink .p1{
font-decoration:bold;
color:#050505;
}
#header{
position:absolute;
top:18px;
height:250px;
width:92%;
margin-left:-70px;
background: url(../images/bg2.gif) repeat-x;
}
#header2 {
position:relative;
top:18px;
width: 1000px;
left:50%;
margin-left:-500px;
height: 210px;
}
#pagewidth{
width:85%;
text-align:left;
margin-left:auto;
margin-right:auto;
}
#anotherspot {
position:relative;
width: 90%;
height: 138px;
font: 98.5%/3em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
text-decoration:bold;
background: url(../images/ad_tel.gif)no-repeat center;
color:#050505;
}
#navlist
{
padding: 1px;
margin-left: 25px;
margin-bottom:13px;
font: bold 15px Verdana, sans-serif;
border: 2px solid;
border-color: #AAA #666 #666 #AAA;
background: silver;
width: 70%;
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em 1em;
border: 1px solid;
border-color: #FFF #AAA #AAA #FFF;
text-align: center;
}
#navlist li a { text-decoration: none; }
#navlist li a:link { color: black; }
#navlist li a:visited { color: gray; }
#header form {
padding:27px 25px 20px 25px;
float:right;
background:#fff;
width:160px;
margin:-20px -20px 0 0 !important;
border:none;
}
#header h1 {
float:left;
font:250% Georgia;
color:#333;
padding:5px 20px 5px 5px;
margin:0 20px 0 0;
}
#header h1 a {
color:#333;
text-decoration:none;
}
#header h1 a:hover {
color:#111;
}
#header h2 {
font:150% Georgia;
font-weight:normal;
color:#555;
padding:14px 0 0 0;
border:none;
}
#header h2 a {
color:#555;
text-decoration:none;
border-bottom:2px solid #f6f6f6;
}
#header a em {
font-style:bold;
text-decoration:none;
text-align:center;
}
/* structural elements */
#innerwrapper {
clear:both;
top:480px;
margin-top:55px;
border:5px;
border-color: black;
background-color:transparent;
padding:30px;
z-index:9;
}
#leftcol{
width:29%;
float:left;
position:relative;
margin-bottom:13px;
border:5px yellow;
background-color:#CED3D9;
}
#maincol{
float: right;
display:inline;
position: relative;
width:70%;
clear:both;
word-spacing:3px;
margin-bottom:13px;
border:5px yellow;
padding:3px 3px 3px 3px;
background-color:#E6E7EB;
}
#footer{
height:58px;
clear:both;
width:56%;
margin-left: auto;
margin-right:auto;
background-color:#CED3D9;
}
/* other elements */
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
<onload="MM_preloadImages('/assets/templates/rayxi/images/service_01_0.gif','/assets/templates/rayxi/images/service_02_0.gif','/assets/templates/rayxi/images/service_03_0.gif','/assets/templates/rayxi/images/service_04_0.gif','/assets/templates/rayxi/images/service_05_0.gif','/assets/templates/rayxi/images/service_06_0.gif','/assets/templates/rayxi/images/service_07_0.gif')">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/assets/templates/rayxi/images/top_logo_default.gif" alt="Rayxi" width="1000" height="190" /></td>
</tr>
<tr>
<td height="2" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="103" height="59" align="right" valign="top"><img src="/assets/templates/rayxi/images/sevice_00.gif" alt="Services:" width="103" height="24" /></td>
<td width="119"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','/assets/templates/rayxi/images/service_01_0.gif',1)"><img src="/assets/templates/rayxi/images/service_01.gif" alt="MBA" name="Image2" width="119" height="59" border="0" id="Image2" /></a></td>
<td width="119"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','/assets/templates/rayxi/images/service_02_0.gif',1)"><img src="/assets/templates/rayxi/images/service_02.gif" alt="·šÑ§Ôº" name="Image3" width="119" height="59" border="0" id="Image3" /></a></td>
<td width="119"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','/assets/templates/rayxi/images/service_03_0.gif',1)"><img src="/assets/templates/rayxi/images/service_03.gif" alt="ÑП¿ÉúÔº" name="Image4" width="119" height="59" border="0" id="Image4" /></a></td>
<td width="119"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','/assets/templates/rayxi/images/service_04_0.gif',1)"><img src="/assets/templates/rayxi/images/service_04.gif" alt="Ö°ÒµÅàѵ" name="Image5" width="119" height="59" border="0" id="Image5" /></a></td>
<td width="119"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','/assets/templates/rayxi/images/service_05_0.gif',1)"><img src="/assets/templates/rayxi/images/service_05.gif" alt="Žóѧ" name="Image6" width="119" height="59" border="0" id="Image6" /></a></td>
<td width="119"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/assets/templates/rayxi/images/service_06_0.gif',1)"><img src="/assets/templates/rayxi/images/service_06.gif" alt="žßÖÐ" name="Image7" width="119" height="59" border="0" id="Image7" /></a></td>
<td width="119"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','/assets/templates/rayxi/images/service_07_0.gif',1)"><img src="/assets/templates/rayxi/images/service_07.gif" alt="ʱÉÐÒôÀÖÀà" name="Image8" width="119" height="59" border="0" id="Image8" /></a></td>
<td width="64" background="/assets/templates/rayxi/images/service_BG.gif"> </td>
</tr>
</table></td>
</tr>
</table>
