4 replies [Last post]
DtY
DtY's picture
Offline
newbie
Last seen: 10 years 38 weeks ago
Timezone: GMT+8
Joined: 2010-01-14
Posts: 6
Points: 7

Hi I hope I am not going to embarrass myself! I have been working for awhile and think I have something that is worth asking for feedback. Tongue

I have been working to convert my static html site made with dreamweaver into a dynamic site using the MODx cms system. You can find the static site at the website linked in my name, and the current modded site is at http://dev.m289.net/

My immediate question is why does that one small image with the blue text fall below the javascript navbar? It is supposed to be part of that bar that the buttons are 'attached' to. I had to hack down the image that creates the wings on the header because at the bottom it had that black bar, and there were two breaks, one on either side! Not looking good.

But in general I would just like some input, if I have any problems, and so on. I think I just have to do a couple dozen more small things before I send to my designer for the final treatment, can anyone see any looming clouds anywhere? I am pretty happy with the look, and I know with a custom background and some decent styling it will be looking pretty good. I am also excited about what I can do with css to the site in the future. Planning on tinkering for months to come!! Love

One issue is the content in the sidebar and main area are not handling re-sizes or different monitor sizes, am I doing something wrong there?

Because its in MODx the html is simplified and the calls are changed. My header call goes to a javascript code that I cut out of the static site, its in two pieces. First piece is the background, (I took the css that was in the dreamweaver code and put it in there) and second is the header.

Any advice is welcome! I have enjoyed using the site as I have been learning, and thought I would help add to the knowledge base in some small way!!

Laughing out loud

<!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:
 
 <a href="http://www.csscreator.com/attributes/containedfloat.php" rel="nofollow">http://www.csscreator.com/attributes/containedfloat.php</a> *** */ 
 
.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">&nbsp;</td>
        </tr>
    </table></td>
  </tr>
</table>

DtY
DtY's picture
Offline
newbie
Last seen: 10 years 38 weeks ago
Timezone: GMT+8
Joined: 2010-01-14
Posts: 6
Points: 7

website

sorry the original site is www.rayxi.com

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Might help if you added the

Might help if you added the closing caret to
<link rel="stylesheet" href="/assets/templates/rayxi/css/rayxi.css" type="text/css" media="screen,projection" /

This is why we ask that you validate your code before posting.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdev.m289.net%2F

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Bloody root vegetables!

Bloody root vegetables!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DtY
DtY's picture
Offline
newbie
Last seen: 10 years 38 weeks ago
Timezone: GMT+8
Joined: 2010-01-14
Posts: 6
Points: 7

Tubers!

They're tuber's damit!

Holy Crap! Embarrassed myself after all. Looks like all those errors are right there in the report.

Ok, ok I am going to validate now...