19 replies [Last post]
BBLinda
Offline
Regular
Last seen: 9 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-08-31
Posts: 14
Points: 0

Hi,

I am new to this forum, and also quite new to CSS, so please don't be too harsh on me Wink

I am trying to set up my first div-only website, and after hours of creating code, I guess I have created a total chaos.....
Everything is showing well, background images etc. stretch as they should, only the footer wouldn't stick to the end of the page (not to the bottom of browser window).

So far I've tried out a few things I found on the web, but I guess I only confused my already chaotic code even more......Could you please help me to clean up my code?

Here is the CSS (sorry but it is quite long):

@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
* html .paperbackground {
	height: 100%;
}
* html .paperbottom {
	height: 100%;
}
* html .boxcontainer {
	height: 100%;
}
* html .content {
	height: 100%;
}
html, body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align:center;
	background:url(../images/site_background.jpg) repeat-x;
	height:100%; 
}
html, body, .paperbackground {height: 100%;}
body > .paperbackground {height: auto; min-height: 100%;}
 
 
 
.paperbackground {
	position:absolute;
	width:963px;
	top:0px;
	left: 50%;
	margin-left: -481px;
	z-index:1;
	visibility: visible;
	height:auto;
	min-height:100%;
}
.papertop {
	background:url(../images/paper_background_top.jpg) no-repeat;
	width:963px;
	height:630px;
}
.papermiddle {
	background:url(../images/paper_background_1.jpg) no-repeat;
	width:963px;
	height:639px;
}
.paperbottom {
	position:absolute;
	background:url(../images/paper_background_rep.jpg) repeat-y;
	width:963px;
	min-height: 100%;
}
.top {
	position:absolute;
	background-color:transparent;
	width:1192px;
	height:380px;
	top:0px;
	left: 50%;
	margin-left: -596px;
	z-index:2;
	visibility: visible;
}
.topleft  {
	width:526px;
	height:380px;
	float:left;
	background:url(../images/top_elements_left.png) no-repeat;
}
.topright {
	width:666px;
	height:227px;
	float:right;
	background:url(../images/top_elements_right.png) no-repeat;
	top:0px;
}
.homelink {
	position:absolute;
	background-color:transparent;
	width:400px;
	height:120px;
	top:18px;
	left: 50%;
	margin-left: -596px;
	text-align:left;
	z-index:4;
	visibility: visible;
}
.navigation {
	position:absolute;
	background-color:transparent;
	width:728px;
	height:225px;
	top:0px;
	left: 50%;
	margin-left: -364px;
	z-index:3;
	visibility: visible;
}
.btnhome {
	position: absolute;
	top:148px;
	left:0px;
	z-index:5;
	visibility: visible;
}
.btnaboutus {
	position: absolute;
	top:53px;
	left:196px;
	z-index:6;
	visibility: visible;
}
.btngrenada {
	position: absolute;
	top:85px;
	left:245px;
	z-index:7;
	visibility: visible;
}
.btntours {
	position: absolute;
	top:106px;
	left:279px;
	z-index:8;
	visibility: visible;
}
.btntaxi {
	position: absolute;
	top:156px;
	left:255px;
	z-index:9;
	visibility: visible;
}
.btntravel {
	position: absolute;
	top:121px;
	left:518px;
	z-index:10;
	visibility: visible;
}
.btncontact {
	position: absolute;
	top:160px;
	left:587px;
	z-index:11;
	visibility: visible;
}
#footer {
	position:relative;
	background:url(../images/footer_bg.png) no-repeat;
	width:728px;
	height:68px;
	left:50%;
	margin-left: -364px;
	margin-top:-68px;
	z-index:12;
	clear:both;
}
.content {
	position:absolute;
	width: 728px;
	top:230px;
	left: 50%;
	margin-left: -364px;
	padding-bottom:64px;
}
.interactiveflash {
	position:absolute;
	width: 728px;
	height: 400px;	
}
.homecontent {
	position:absolute;
	width: 728px;
	height: auto;
	top:646px;
	left: 50%;
	margin-left: -364px;
}
.contentboxcontainershort {
	background:url(../images/contentbox_short.png) no-repeat;
	position:absolute;
	width: 508px;
	height: 698px;
	top:0px;
	left: 0px;
	float:left;
}
.contentboxcontainerlong {
	background:url(../images/contentbox_long.png) no-repeat;
	position:absolute;
	width: 508px;
	height: 1127px;
	top:0px;
	left: 0px;
	float:left;
}
/* CLEAR FIX*/
.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 */
 
@charset "utf-8";
/* CSS Document */
.boxheader {
	position:relative;
	left:65px;
	top: 40px;
	text-align:left;
	font-family:georgia,garamond,serif;
	font-weight:bold;
	font-size:17px;
	color:#415F2C;
}
.boxcontent {
	position:relative;
	width:420px;
	line-height:155%;
	left:44px;
	top: 65px;
	text-align:left;
	font-family:georgia,garamond,serif;
	font-size:12px;
	color:#000000;
}
.boxcontent a:link {
	color:#000000;
}
.boxcontent a:visited {
	color:#000000;
}
.boxcontent a:active {
	color:#000000;
}
.boxcontent a:hover {
	color:#339900;
}
.footercontent {
	font-family:georgia,garamond,serif;
	font-size:12px;
	line-height: 140%;
	color:#5E3E13;
	position: relative;
   	left: 50%;
   	top: 50%;
   	text-align:center;
   	width: 728px;
   	height: 68px;
   	margin-left: -364px;
   	margin-top: -26px; 
 
}
.footercontent a:link,a:visited,a:active{
	color:#5E3E13;
}
.footercontent a:hover{
	color:#339900;
}
.header1 {
	font-family:georgia,garamond,serif;
	font-size:15px;
	font-weight:bold;
	color:#D84B00;
	line-height:220%;
 
}
/* for non-CSS 3 aware browsers */ 
.imgleft { 
	padding: 4px;
	margin-top:4px;
	margin-right:6px;
	margin-bottom:4px;
	background-color: #fff; 
	border: solid #d7d7d7 1px;
	float:left;
}
.imgright { 
	padding: 4px;
	margin-top:4px;
	margin-left:6px;
	margin-bottom:4px;
	background-color: #fff; 
	border: solid #d7d7d7 1px;
	float:right;
}
 
/* for CSS 3 aware browsers */ 
.imgleft:nth-of-type(1n) { 
	padding: 4px; 
	margin-top:4px;
	margin-right:6px;
	margin-bottom:4px;
	background-color: #fff; 
	border-top: solid #d7d7d7 1px; 
	border-right: solid #d7d7d7 3px; 
	border-bottom: solid #d7d7d7 4px; 
	border-left: solid #d7d7d7 3px; 
	-webkit-border-image: url("../images/imgframe/frame.png") 1 3 4 3 stretch stretch; 
	-moz-border-image: url("../images/imgframe/frame.png") 1 3 4 3 stretch stretch; 
	border-image: url("../images/imgframe/frame.png") 1 3 4 3 stretch stretch; 
	-webkit-background-clip: padding; 
	float:left;
}
.imgright:nth-of-type(1n) { 
	padding: 4px; 
	margin-top:4px;
	margin-left:6px;
	margin-bottom:4px;
	background-color: #fff; 
	border-top: solid #d7d7d7 1px; 
	border-right: solid #d7d7d7 3px; 
	border-bottom: solid #d7d7d7 4px; 
	border-left: solid #d7d7d7 3px; 
	-webkit-border-image: url("../images/imgframe/frame.png") 1 3 4 3 stretch stretch; 
	-moz-border-image: url("../images/imgframe/frame.png") 1 3 4 3 stretch stretch; 
	border-image: url("../images/imgframe/frame.png") 1 3 4 3 stretch stretch; 
	-webkit-background-clip: padding; 
	float:right;
}
.divider {
	width:420px;
	height:6px;
	text-align:left;
	background:url(../images/divider.png) no-repeat;
	margin-top:20px;
	margin-bottom:20px;
}
.teasercontainer {
	position:relative;
	float:right;
	width:188px;
	height:auto;
	left:0px;
}

And here is the html:

<!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=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Grenada Tours - Duffy's Tours &amp; Taxi Services, Grenada, Caribbean</title>
<!-- TemplateEndEditable -->
<link href="../css/background.css" rel="stylesheet" type="text/css" />
<link href="../css/content.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>
<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" language="JavaScript">
function allocateSidebarHeight() {
var contentDom = document.getElementById("boxcontent");
var sidebarDom = document.getElementById("paperbackground");
if((contentDom.offsetHeight-800) > sidebarDom.offsetHeight) {
sidebarDom.style.height = (contentDom.offsetHeight-800)+"px"; }
}
 
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("paperbackground");
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", ""); } } } }
allocateSidebarHeight(); }
 
window.onload=startList;
</script>
<script type="text/javascript">
<!--
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_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
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_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>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
 
<body onload="MM_preloadImages('../images/btns/btn_home_2.png','../images/btns/btn_aboutus_2.png','../images/btns/btn_grenada_2.png','../images/btns/btn_tours_2.png','../images/btns/btn_travel_2.png','../images/btns/btn_contact_2.png','../images/btns/teaserbutton_specials_2.png')">
<div class="paperbackground">
  <div class="papertop"></div>
    <div class="papermiddle"></div>
  <div class="paperbottom"></div>
  <!-- TemplateBeginEditable name="Content" -->
    <div class="content">    
    	<div class="interactiveflash"><img src="../images/flash_placeholder.png" /></div>
    </div>
  <div class="homecontent">
   		<div class="contentboxcontainerlong">
        	<div class="boxheader">Welcome to the beautiful island of Grenada!</div>
            <div class="boxcontent">
              <p>There are many variations of passages of Lorem Ipsum available, but the majority have <a href="#">suffered</a> alteration in some form, by 		injected humour, or randomise words which 			don’t look even slightly believable.<br />
<span class="header1">Fauna &amp; Flora </span><br />
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.<a href="../images/test_big.jpg" rel="lightbox[group]" caption="Sugarloaf Island" title="Sugarloaf Island"><img src="../images/test.jpg" alt="Sugarloaf Island" width="210" height="154" class="imgright" /></a> It uses a dictionary of over 200 Latin words, combined There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.<br />
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined.<a href="../images/test_big.jpg" rel="lightbox[group]" caption="Testcaption" title="Testcaption"><img src="../images/test.jpg" alt="Sugarloaf Island" width="210" height="154" class="imgleft" /></a>&nbsp;If you are going to use a passage of Lorem Ipsum, you need to be sure  there isn’t anything embarrassing hidden in the middle of text. All the  Lorem Ipsum generators on the Internet tend to repeat predefined chunks  as necessary, making this the first true generator on the Internet. It  uses a dictionary of over 200 Latin words, combined. If you are going to use a passage of Lorem Ipsum, you need to be sure  there isn’t anything embarrassing hidden in the middle of text. <br />
<span class="header1">About Grenada</span><br />
All the  Lorem Ipsum generators on the Internet tend to repeat predefined chunks  as necessary, making this the first true generator on the Internet. It  uses a dictionary of over 200 Latin words, combined. <br />
All the  Lorem Ipsum generators on the Internet tend to repeat predefined chunks  as necessary, making this the first true generator on the Internet. It  uses a dictionary of over 200 Latin words, combined.<br />
All the  Lorem Ipsum generators on the Internet tend to repeat predefined chunks  as necessary, making this the first true generator on the Internet. It  uses a dictionary of over 200 Latin words, combined.<br />
              </p>
 
</div>            
    	</div><div id="footer">
    	<div class="footercontent"><a href="../privacypolicy.html" target="_top">Privacy Policy</a>  -  <a href="../disclaimer.html" target="_top">Disclaimer</a>  -  <a href="mailto:[email protected]">		Email</a><br /> 
Copyright © 2009 Duffy’s Tours &amp; Taxi Service - St. George’s / Grenada - (+473) 406 2841<br />
Explore Grenada with Us!</div>
  		</div>
    <div class="teasercontainer"><a href="../specials.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Teaserbutton_Specials','','../images/btns/teaserbutton_specials_2.png',1)"><img src="../images/btns/teaserbutton_specials_1.png" vspace="5px" alt="Duffy's Specials" name="Teaserbutton_Specials" width="184" height="176" border="0" id="Teaserbutton_Specials" /></a>
    <a href="../gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Teaserbutton_Gallery','','../images/btns/teaserbutton_gallery_2.png',1)"><img src="../images/btns/teaserbutton_gallery_1.png" vspace="5px" alt="Duffy's Gallery" name="Teaserbutton_Gallery" width="184" height="176" border="0" id="Teaserbutton_Gallery" /></a>
    <a href="../interactiveguide.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Teaserbutton_Interactive','','../images/btns/teaserbutton_interactive_2.png',1)"><img src="../images/btns/teaserbutton_interactive_1.png" vspace="5px" alt="Interactive Tour Guide" name="Teaserbutton_Interactive" width="184" height="176" border="0" id="Teaserbutton_Interactive" /></a></div>
 
</div>         <!-- TemplateEndEditable -->
 </div>
 
<div class="top">
  <div class="topleft"></div>	
  <div class="topright">Iguana Flash comes here</div>
</div>
<div class="homelink"><a href="../index.html" target="_top"><img src="../images/spacer.gif" alt="Home" name="Home1" width="420" height="120" border="0" id="Home1"/></a></div>
<!-- TemplateBeginEditable name="Navigation" --><div class="navigation">
<div class="btnhome"><a href="../index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','../images/btns/btn_home_2.png',1)" onmouseover=						"MM_nbGroup('over','Home','../images/btns/btn_home_2.png','../images/btns/btn_home_2.png',1)" onmouseout="MM_nbGroup('out')"><img src="../images/btns/btn_home_1.png" alt="Home" name="Home" width="136" height="77" border="0" id="Home" onload="" /></a></div>
    	<div class="btnaboutus"><a href="../aboutus.html" target="_top" onclick="MM_nbGroup('down','group1','About Us','../images/btns/btn_aboutus_2.png',1)" onmouseover="MM_nbGroup('over','About Us','../images/btns/btn_aboutus_2.png','../images/btns/btn_aboutus_2.png',1)" onmouseout="MM_nbGroup('out')"><img src="../images/btns/btn_aboutus_1.png" alt="About Us" name="About Us" width="135" height="62" border="0" id="About Us" onload="" /></a></div>
        <div class="btngrenada"><a href="../grenada.html" target="_top" onclick="MM_nbGroup('down','group1','Grenada','../images/btns/btn_grenada_2.png',1)" onmouseover="MM_nbGroup('over','Grenada','../images/btns/btn_grenada_2.png','../images/btns/btn_grenada_2.png',1)" onmouseout="MM_nbGroup('out')"><img src="../images/btns/btn_grenada_1.png" alt="Grenada" name="Grenada" width="137" height="55" border="0" id="Grenada" onload="" /></a></div>
         <div class="btntours"><a href="../tours.html" target="_top" onclick="MM_nbGroup('down','group1','Tours','../images/btns/btn_tours_2.png',1)" onmouseover="MM_nbGroup('over','Tours','../images/btns/btn_tours_2.png','../images/btns/btn_tours_2.png',1)" onmouseout="MM_nbGroup('out')"><img src="../images/btns/btn_tours_1.png" alt="Tours" name="Tours" width="140" height="75" border="0" usemap="#ToursMap" id="Tours" onload="" />
             <map name="ToursMap" id="ToursMap">
               <area shape="poly" coords="9,38,124,6,131,29,15,62" href="../tours.html" target="_top"/>
             </map>
</a></div>
         <div class="btntaxi"><a href="../taxi.html" target="_top" onclick="MM_nbGroup('down','group1','Taxi Service','../images/btns/btn_taxi_2.png',1)" onmouseover="MM_nbGroup('over','Taxi Service','../images/btns/btn_taxi_2.png','../images/btns/btn_taxi_2.png',1)" onmouseout="MM_nbGroup('out')"><img src="../images/btns/btn_taxi_1.png" alt="Taxi Service" name="Taxi Service" width="140" height="56" border="0" id="Taxi Service" onload="" /></a></div>
         <div class="btntravel"><a href="../travelservices.html" target="_top" onclick="MM_nbGroup('down','group1','Travel Service','../images/btns/btn_travel_2.png',1)" onmouseover="MM_nbGroup('over','Travel Service','../images/btns/btn_travel_2.png','../images/btns/btn_travel_2.png',1)" onmouseout="MM_nbGroup('out')"><img src="../images/btns/btn_travel_1.png" alt="Travel Service" name="Travel Service" width="147" height="80" border="0" id="Travel Service" onload="" /></a></div>
         <div class="btncontact"><a href="../contact.html" target="_top" onclick="MM_nbGroup('down','group1','Contact Us','../images/btns/btn_contact_2.png',1)" onmouseover="MM_nbGroup('over','Contact Us','../images/btns/btn_contact_2.png','../images/btns/btn_contact_2.png',1)" onmouseout="MM_nbGroup('out')"><img src="../images/btns/btn_contact_1.png" alt="Contact Us" name="Contact Us" width="132" height="54" border="0" id="Contact Us" onload="" /></a></div>
</div><!-- TemplateEndEditable -->
</body>
</html>

******

I really hope you don't tear me apart because of this - obviously - poor attempt, but as I said, I am still learning.........Please help!!!!

THANKS!

BBLinda
Offline
Regular
Last seen: 9 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-08-31
Posts: 14
Points: 0

Link to site

Here is the link to what I just posted:

http://www.grenada-spiceisland.com/clients/duffy/

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

1. Write valid markup before

1. Write valid markup before doing any css. Get the code to validate.

2. when the code is written correctly, create the layout without use of absolute positioning. Use floats and margins to layout the page.

BBLinda
Offline
Regular
Last seen: 9 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-08-31
Posts: 14
Points: 0

Thanks, but....

...could you please be a little more specific?
To explain, before, I built websites with Adobe Fireworks and Dreamweaver, I never really coded on my own. With FW and DW, my workflow was great, I knew what I was doing, but now, I am totally lost...So if you could give me some specific advice how to continue with this project, I would be more than thankful...

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

dont ever allow DW or FW to

dont ever allow DW or FW to write code for you. It seems you need some direction on self education. Learn how to write valid html, then learn css.

htmldog
W3 schools

BBLinda
Offline
Regular
Last seen: 9 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-08-31
Posts: 14
Points: 0

OK :/

Thank you, you are right, I really need to start at the beginning of all, instead of rushing through a few tutorials. I am not the youngest anymore LOL so this is a little bit difficult, but I really want to learn it. I will go through the steps you mentioned, hopefully I will be able to build simple websites after that Wink

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

i understand, moving out of

i understand, moving out of table-based design, into css based design, was a huge step for me, and not an easy one. But, here I am!

BBLinda
Offline
Regular
Last seen: 9 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-08-31
Posts: 14
Points: 0

:)

Well, I am a designer, always was, no programmer, but I just love to learn new things, and building websites on my own (without FW LOL) is so much fun. Only drawback is just that I messed up with the new project and now I am stuck haha. But I guess to start over now and learn Html and CSS from zero is better than continue struggling with basics. I am actually doing the W3school tutorials and it is quite interesting and fun Smile

Do you have any other tips for me regarding learning all that stuff (from a designer's point of view)?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I too am a designer, not a

I too am a designer, not a programmer. The tables to css design was quite a struggle for me to wrap my head round. I learn better with books, so I went out to the local book store and browsed through some looking for books that were written with designers in mind. My best advise, practice, practice, practice, and come to this forum often to read posts.

Design something simple. Write valid xhtml with semantics in mind. Layout the design using css. Research, research, research. Get stuck, or just need to know you're headed in the right direction, come here and ask!

BBLinda
Offline
Regular
Last seen: 9 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-08-31
Posts: 14
Points: 0

:)

Thanks again, I am pretty sure you will see me around here more often shortly Wink
Right now I am doing the CSS W3School tutorial, almost through it and so far, it went pretty easy. Most of the stuff I used already, but a lot of the tags etc. I used wrong by not knowing the rules LOL
The thing with the books is a huge problem for me, because I too learn better when having a "real" book in hands, no ebook. But living on a tiny island in the Caribbean makes purchasing literature very difficult. Still, I am using what I have access to, and forums and W3School are great sources.

Oh, one more problem for me was the language barrier. My mother language is German, and though I speak English pretty good for many years already, it's two different pair of shoes if just talking to people or for example, learning Html or CSS in English. Just too many words I had to search for in a dictionary Wink
But it is getting better every day, and I am positive that I will be able to build valid markup soon Wink

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

also, read through the

also, read through the "How-to" area of this forum. Their is fruitful information to absorb. Be sure to read the article on divitis. This will give you a good idea of how to write clean semantic meaningful html.

BBLinda
Offline
Regular
Last seen: 9 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-08-31
Posts: 14
Points: 0

Will do that ;)

Good morning Smile
Finished the W3Schools last night, will now read what you posted here today.
Sounds funny I guess, but all night I was wondering how to (re-)build this tour website I posted in the beginning, what did I do wrong, and how to start to build the div-structure from scratch, without making the mistakes I obviously made.......was wondering if you could give me some advise of how to build that div structure? I read much about this #wrapper things and how to stretch background to 100% of the browser window height etc., but I assume with that design, it needs some workaround for the background images?

Any help of you is very much appreciated Wink

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

BBLinda wrote:...was

BBLinda wrote:

...was wondering if you could give me some advise of how to build that div structure?

Now thats not how you learn. Take a crack at it yourself with the new knowledge you've learned. Do it without using absolute positioning. build the layout with floats with margins. Your menu should be a list like

    .I'm eager to see what you come up with!

    BBLinda
    Offline
    Regular
    Last seen: 9 years 47 weeks ago
    Timezone: GMT-4
    Joined: 2009-08-31
    Posts: 14
    Points: 0

    Yeh!

    Hi CupidsToejam,

    I did it (I guess) Wink After one night and a day, I guess I rebuilt the homepage again, but now with VALID markup;) I validated over and over, and now I am really proud of myself Wink
    Would you do me a favor and check it out, and please let me know if there is still anything "bad" in it I should reconsider?

    http://www.grenada-spiceisland.com/clients/duffy

    THANKS in advance Wink

    CupidsToejam
    CupidsToejam's picture
    Offline
    Guru
    Florida
    Last seen: 4 years 5 weeks ago
    Florida
    Timezone: GMT-4
    Joined: 2008-08-15
    Posts: 2637
    Points: 1556

    Glad too!

    1. do a couple browser text-size increases with Ctrl and +. You'll see the text breaks out of its container graphic contentbox_short.png. This is not good. You may want to reconstruct the graphic and iv so that it will expand or grow if needed. You may want to add text to that area later, then you would not be able to.

    2. css doesnt validate

    3. Most around here arent supporters of Flash content. Flash is fine as long as it doesnt provide the user with useful information. Alot of people have flash turned off. Flash content isnt assessable for people with disabilities. It's not a "bad" thing, but there are some thngs to consider.

    4. research the differenced between STRICT and TRANSITIONAL !DOCTYPE. Most here will use strict.

    5. Im not totally sure about only have lightbox.css set to screen. Shouldnt they all be screen except print?

    6. The menu at the top. Some folks have JS turned off. There are better css ways of doing menus. Like I said before, it should be a

      . Having lots of divs to handle each menu item is not semantic. You are using JS for rollover elsewhere too. CSS can handle ALL your rollover needs with Pseudo-classes. I made this site a while back, and is loaded with them.

    7. divitis, did you read it yet? Your logo or homelink should be your without a div. you can style html tags just like divs. Too many divs throughout the layout.

    8. You are using alot of absolute positioning all over the place. This should be avoided for page layout. It can be very problematic.

    9. is the footer supposed to be way down there like that?

    You did very well with this. Just need to polish it down now!! Great work!!! oh, and i told you how much I love the design? Its very cool! Love that background that the see-side at a distance-look. Very sweet idea! did you create the seashell and sand graphics? Need to give me some pointers!!

    BBLinda
    Offline
    Regular
    Last seen: 9 years 47 weeks ago
    Timezone: GMT-4
    Joined: 2009-08-31
    Posts: 14
    Points: 0

    Thanks for the feedback!

    Hi,

    I knew there might be some additional work to do on that, so I do appreciate your input very much!

    1.
    At the beginning, I was trying to crop the graphic for the content background so that it can be dynamically resized (stretched) if needed. But somehow I couldn't get it to work.....any hints on how to do it? For now I have two different graphics for that, a short and a long one, and I planned to choose it according to the amount of content. Of course I still have the content pages to prepare, because this one here is just the front page, which doesn't contain much content really.

    2. UPS! I thought with the validator I used (http://validator.w3.org) everything is covered....ohoh...so I have to work on the CSS validation now.

    3.
    Well I have to admit that I am kind a Flash "freak", cause when I switched over from my "real" profession, which is fashion design, I choose to be a motion graphics designer, which is what I started with in 1999. I agree that Flash should be used with care, but I also believe that when it comes to specific topics like Tourism (which is emotional), it can be a great tool to visualize content better than plain html. Of course when it comes to plain information, Flash is not the best tool to use. I only use Flash when I want to deliver emotional and interactive content, like the Interactive Flash Map I am planning for the new site.

    4.
    I did some research on the doctype stuff, and I thought, transitional is the best choice, at least that's what they said on W3schools.com in their tutorials. But thanks for the tipp, I will now use strict instead.

    5.
    Thanks, didn't notice that yet, will def. change fix it.

    6.
    Since I worked throught the tutorials on W3schools.com, I was thinking about using a list for the main navigation, but to be honest, I didn't get it to work, or, better said, it seemed to complicated for me, since all the buttons are positioned differently....I didn't know how to work this out with ul/li??

    7.
    Oh yes, I read that article, and I know that I am infected with it haha Wink I really tried hard not to use too many divs, but the ones I used I really thought were needed. You can see that the logo on top is included in the background graphics, I just didn't know how to work around that otherwise.....
    I have read about the h1 stuff for logos, but in this case, I just don't know how to do it.....any help?

    8.
    I know that too, tried to avoid it, but somehow, the background graphics (paperbackgrounds) didn't work when positioning relative. I got some strange problems when using relative, for example, when scrolling one of the bg-graphics "disappeared" according to the scrollbar-movement. Very strange...couldn't find an alternative to it......maybe you can tell me what I did wrong with the background graphics, that they didn't work with relative positioning at all?

    9.
    Of course the footer shouldn't be that far away from the content. But since my background graphics are built in a quite complicated way (didn't know how else to do it), the background stretches that far down by default. Of course it would be nicer if the footer is at the bottom of the content, depending on the length of it. But I just don't know how to do it, and - honestly - this job needs to be finished soon, so I am also on a tight timeframe.....Sad Maybe you could give me some advise how to make it better?

    Thanks for the compliments about the design! The client loves it too, it took me quite a while to finish that design. Yes, I made the "sand-graphic" in the background, it is a combination of grungy elements, old paper structures, brushes (the text border) and the shell, nutmeg, anis... graphics. This was a lot of work I did in Photoshop, and for that, I did a few tutorials which I found online. If you need some advise on that, I would be happy to help you in return for your great feedback!

    P.S. - I did now fix the CSS errors, it is now valid Smile Also fixed the stylesheet type issue.

    CupidsToejam
    CupidsToejam's picture
    Offline
    Guru
    Florida
    Last seen: 4 years 5 weeks ago
    Florida
    Timezone: GMT-4
    Joined: 2008-08-15
    Posts: 2637
    Points: 1556

    1. lets think about this. I

    1. lets think about this. I see us using three images for this whole box. We need a top image, a content image that repeats Y, and a bottom graphic. In caes like these, I would use a div just to keep it tidy and easy to move around.

    <div id="contentshort">
       <h2>Welcome to the beautiful island of Grenada!</h2>
       <p>content</p>
       <ul id="printnav"><li>content</li></ul>
    </div>

    div#contentshort {
      background: url(image.jpg) repeat-y;
      width: 508px;
    }
    div#contentshort h2 {
      background: url(image-top.jpg) no-repeat;
    }
    div#contentshort ul {
      background: url(image-bottom.jpg) no-repeat;
    }

    I would try somethng like this. This isnt tested, so you may need to play around with getting positioned just right. I used a div here because it is a division, or block of similar content. It will also make it easy to structure and move around if you need to later.

    2. W3 has a css validator also!

    3. If you must provide useful content within the flash, then you must provide the same content in plain html somewhere else on the site. Like i said before, I will never see that content if I have flash turned off, not supported, or am disabled and my screen-reader cant "read" flash content. I might create the html content somewhere on the page, but not have it visible. We could simply move that block of information off-screen with absolute positioning or something.

    4. The Strict DTD promotes a separation of structure and presentation, which makes a site so much easier to maintain.

    6. I agree that this menu is different, but can be achieved with the list. You already have the images right. make the list. Apply the graphics as

  • backgrounds lie you are with the divs. Relativly position each
  • where you want it. Easy!
  • 7. Duffy's This is your masthead. The h1 would act as a container, or div, for alof it. Research image replacement techniques to make this work. Look at number eight!

    8. The page should be layout using a combination of floats with margins.

    9. absolute positioning is the culprit.

    BBLinda
    Offline
    Regular
    Last seen: 9 years 47 weeks ago
    Timezone: GMT-4
    Joined: 2009-08-31
    Posts: 14
    Points: 0

    Thanks again :)

    I will try your tips first, let's see if I can make it all work, otherwise, I do hope you wouldn't be angry if I come back to you with more questions Wink

    ad 3.
    The interactive Flash Map is just an addition to the "plain" listing of offered trips on the island. Means, there will also a simple list of tours, with small, static maps and pictures. So the interactive flash is really a "gimmick" to the site, and I (not only) included this because all the other tourguides here only have boring and poor websites, so I wanted to offer the (few, so far) tourists something to interact with, somethign that makes fun too Wink

    CupidsToejam
    CupidsToejam's picture
    Offline
    Guru
    Florida
    Last seen: 4 years 5 weeks ago
    Florida
    Timezone: GMT-4
    Joined: 2008-08-15
    Posts: 2637
    Points: 1556

    #footer

    #footer {
    	background:url(../images/footer_bg.png) no-repeat;
    	width:728px;
    	height:81px;
    	position:absolute;
            top: 750px;
    	left: 13%;
    	text-align:center;
    	color:#5E3E13;
    	padding:8px 0px 5px 0px;
    }

    make these changes

    BBLinda
    Offline
    Regular
    Last seen: 9 years 47 weeks ago
    Timezone: GMT-4
    Joined: 2009-08-31
    Posts: 14
    Points: 0

    Oh no....

    I tried your suggestion with the content background, but couldn't get it to work.
    Once I had all the bg-graphics showing up, but I couldn't position them properly, and then with the bottom graphic, the ul didn't work anymore (didn't show up as inline anymore, no icons etc.).
    Then, the repeated graphics first showed up at the top, so that the h2 bg-graphic overlapped it.
    After I could position the h2 bg-graphic properly, suddenly the repeat-graphic showed up like 50px below it???? I gave up......could you give me some more advice on that please??

    FOOTER
    I tried your suggestion too, was fine, the footer showed up below the content. BUT later, when the content was longer, the footer didn't move downwards accordingly. It just stick to the same position, which means, the footer was overlapped by the content-background.
    So I changed everything back to how I had it before, because I think, even if the code is not 100% optimized, it is still quite good, and valid too Wink I need to move on with that website now and produce the remaining stuff. Still a lot of work to do.....

    Also, for this project, I skip on the navigation switch to li. With the next job (which I need to start tonight aaaaaargh) I will try to remember the issues I had with Duffy's and hopefully the next code will be better. If you could only see what crap people down here are producing, I guess they will give me an award for my "perfect" code HAHA Wink

    But the content-bg thing with the 3 graphics I would love to get to work though......can you please help????