July 7, 200818 yr i'm building my own website, and i chose for a layout with tables, since i find tha tthe easiest way to do it. this is my code: <!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" /> <title>Coreper's Online Portfolio</title> <style type="text/css"> <!-- body { background-image: url(images/bg_mainframe.png); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } --> </style> <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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc; } 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[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/buttons/Button_About-Active.png','images/buttons/Button_Links-Active.png','images/buttons/Button_Info-Active.png','images/buttons/Button_Home-Active.png','images/buttons/Button_Portfolio-Active.png')"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <th width="20" height="146" align="left" valign="top" background="images/header/Menu_Corner_Left.png" scope="col"> </th> <th background="images/header/Menu_Stretch.png" scope="col"> </th> <th width="959" height="238" align="center" valign="middle" background="images/header/Menu_Bar.png" scope="col"><div align="center"><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Button_Portfolio','','images/buttons/Button_Portfolio-Active.png',1)"><img src="images/buttons/Button_Portfolio.png" alt="Button_Portfolio" name="Button_Portfolio" width="116" height="66" border="0" id="Button_Portfolio" /></a> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Button_Home','','images/buttons/Button_Home-Active.png',1)"><img src="images/buttons/Button_Home.png" alt="Button_Home" name="Button_Home" width="116" height="66" border="0" id="Button_Home" /></a> <a href="info.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Button_Info','','images/buttons/Button_Info-Active.png',1)"> <img src="images/buttons/Button_Info.png" alt="Button_Info" name="Button_Info" width="116" height="66" border="0" id="Button_Info" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Button_About','','images/buttons/Button_About-Active.png',1)"><img src="images/buttons/Button_About.png" alt="Button_About" name="Button_About" width="116" height="66" border="0" align="bottom" id="Button_About" /></a><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Button_Links','','images/buttons/Button_Links-Active.png',1)"><img src="images/buttons/Button_Links.png" alt="Button_Links" name="Button_Links" width="116" height="66" border="0" id="Button_Links" /></a></div></th> <th background="images/header/Menu_Stretch.png" scope="col"> </th> <th width="20" height="146" background="images/header/Menu_Corner_Right.png" scope="col"> </th> </tr> </table> </body> </html> this is how it looks in Dreamweaver: and this is how i want it to look: does anyone know how i can make it look like the final image?
July 7, 200818 yr To be honest, I would lose the tables in favour of css. You will have a lot more control over your site.
July 7, 200818 yr Author well, i tried doing it with CSS, but without success... this is what i got using CSS: and this was the code i used: <!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" /> <title>Coreper - Online Portfolio</title> <link rel="stylesheet" type="text/css" href="layout.css" /> </head> <body> <div align="center"> <div id="Header"> <div id="HeaderUp"> <div id="HeaderUpCornerLeft"></div> <div id="HeaderUpCornerRight"></div> <div id="HeaderUpMiddle"></div> </div> </div> <div id="buttons"> <div id="innerbuttons"> <div id="leftbox"> <div id="align"> <a href="portfolio.html"> <div id="Button_Portfolio"></div> </a> </div> <div id="align"> <a href="index.html"> <div id="Button_Home"></div> </a> </div> </div> <div id="rightbox"> <div id="align"> <a href="info.html"> <div id="Button_Info"></div> </a> </div> <div id="align"> <a href="about.html"> <div id="Button_About"></div> </a> </div> </div> </div> </div> </div> </body> </html> i made this with help from someone else, on another forum, see the topic here: http://forums.windowsforum.org/index.php?showtopic=35840
July 7, 200818 yr Author oh, i forgot: here is the css styles file's coding: body { background-image: url('images/bg_mainframe.png'); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; text-align:center; } /*Header*/ #Header { width: 100%; min-width:998px; } #HeaderUpCornerLeft { float: left; background-image: url('images/header/Menu_Corner_Left.png'); width: 20px; height: 146px; clear:none; } #HeaderUpCornerRight { float: right; background-image: url('images/header/Menu_Corner_Right.png'); width: 20px; height: 146px; clear:none; } #HeaderUpMiddle { background-image: url('images/header/Menu_Bar.png'); width: 958px; height: 238px; clear:none; } #HeaderUp { background-image: url('images/header/Menu_Stretch.png'); height: 146px; } /*Buttons*/ #buttons{ width:100%; position: absolute; top:85px; float:none; } #innerbuttons{ width:60%; float:none; } #leftbox { width:250px; float:left; clear:none; } #rightbox { width:250px; float:right; clear:none; } #align { width:250px; } #Button_Portfolio { background-image: url('images/buttons/Button_Portfolio.png'); height:66px; width:116px; float:left; clear:none; } #Button_Home { background-image: url('images/buttons/Button_Home.png'); height:66px; width:116px; float:right; clear:none; } #Button_Info { background-image: url('images/buttons/Button_Info.png'); height:66px; width:116px; float:left; clear:none; } #Button_About { background-image: url('images/buttons/Button_About.png'); height:66px; width:116px; float:left; clear:none; } #Button_Links { padding-right:300px; padding-top:87px; clear:none; height:66px; width:116px; } but another problem with this CSS is, that i dont know how to easily add mouseover images and hyperlinks to the css styles so they appear properly in the website... you could say im pretty much a newbie with webcoding
July 7, 200818 yr to be honest, you're probably better going back to the tables, as looking at your code and design so far in CSS, you've got a bit of a mountain to climb! it's a bit tricky at the mo to work out what's going on by just looking at the jpg and code. Maybe put it up somewhere?
July 7, 200818 yr Tables are considered a "no-no" when it comes to webpage design and layout. CSS (Cascading Style Sheets) are much more powerful, customizable and browser-accepted. You'll start having a nightmare of a time with Tables when you begin trying to make your site look the same between Firefox, InternetExplorer and Safari. You really are better off using CSS, rather than tables. You're just going to have to take the time to learn how it all works. Maybe the design you are trying to do should be put aside until you make a few more basic sites using CSS? You could also use an HTML Image map for the menu. Google <map></map> and see if it might be useful. Its basically turning all those buttons into one (or more) big PNG or JPG images and then using the map function to make certain areas of the image clickable.
July 9, 200818 yr Author to be honest, you're probably better going back to the tables, as looking at your code and design so far in CSS, you've got a bit of a mountain to climb!it's a bit tricky at the mo to work out what's going on by just looking at the jpg and code. Maybe put it up somewhere? i know, and i also said that i knew as good as nothing about CSS... what version would you like to see online? the CSS version or the tables version? Tables are considered a "no-no" when it comes to webpage design and layout. CSS (Cascading Style Sheets) are much more powerful, customizable and browser-accepted. You'll start having a nightmare of a time with Tables when you begin trying to make your site look the same between Firefox, InternetExplorer and Safari. You really are better off using CSS, rather than tables. You're just going to have to take the time to learn how it all works. Maybe the design you are trying to do should be put aside until you make a few more basic sites using CSS? You could also use an HTML Image map for the menu. Google <map></map> and see if it might be useful. Its basically turning all those buttons into one (or more) big PNG or JPG images and then using the map function to make certain areas of the image clickable. could you tell me how i can use this HTML Image Mapping technique? thanks in advance
Create an account or sign in to comment