|
CSS - Help W/ Elastic Design - Ems-to-px Not Converting Equally
Hey All,
I'm playing with elastic design for the first time--trying to use ems for all of my lengths, but I'm having a problem with my ems not converting to pixels consistently and I keep running into this using Firebug. For example: Code:
<body>
<div id="page-wrap" class="clearfix">
<div id="left-container"></div>
<div id="center-container"></div>
<div id="right-container"></div>
</div>
<body>
body {
font-size: 62.5%;
}
#page-wrap {
max-width: 96em;
}
#left-container {
position: relative;
float: left;
margin: 1.5em 0 1.5em 1em;
border: 0.1em solid red;
width: 22.8em;
height: 6em;
}
#center-container {
position: relative;
float: left;
margin: 1.5em 0;
border: 0.1em solid red;
padding: 0 1.5em;
width: 44.8em;
height: 6em;
}
#right-container {
position: relative;
float: left;
margin: 1.5em 0 1.5em 1em;
border: 0.1em solid red;
width: 22.8em;
height: 6em;
}
In firebug, the values are computing consistently and thus the right container is getting pushed down because of 3 pxs. In firebug, the computed values a page-wrap = 960px left-container margin-right = 10px border = 1px width = 229 px center-container border = 1px padding (left and right) = 15px width = 449 px right-container margin-left= 10px border = 1px width = 229 px Can anyone help me understand why the widths aren't converting consistently? Why they're adding a pixel? Similar Tutorialshi guys I've begun trying so I finally can leave <tables> I've started trying with a little opensource template, and now want to be how much correct I am... The following image shows the original design, also with the layers division I've created I'd like to know if I'm going ok with this initial design, or which would you modify, and so on. Then I'll follow up the thread with the code, so I can see if I learned correctly Thanks a lot in advance, I have a calendar on my website. Its in an area where witdh is set at 200px. How can I fit all 7 weekdays equally into this area? You can check it he http://www.pearl.ru/isdunyasi/calendar.asp Codes: PHP Code: #calendar { float:left; width:200px; height:200px; background:#FFFFFF url(images/button_bg.gif) top repeat-x; } #calendar h1{ margin-left:5px; margin-bottom:5px; font-size:16px; font-weight:bold; color:#000000; } #calendar p { padding:2px; margin:0; font-size:12px; } #calendar .month { background: #d7d7d7; text-align:center; } #calendar .wkday { float:left; background:#ebebeb; width:28px; height:20px; text-align:center; } #calendar .days { float:left; width:28px; height:20px; text-align:center; } #calendar .today,#calendar .days a:hover,#calendar .days a:active{ display:block; background: #ebebeb; } Hello guys, i'm looking for help. Ok, here is the problem - i have a bunch of "float:left" divs with pic inside each of them. It looks like several rows and columns of pics - but there is always a gap on the right side of a page - on different resolutions there are different number of divs in rows but this gap is always there - smaller or bigger. How can i make this divs to become elastic and fullfil all the horizontal space?? Thanks I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. Hi folks, Here's the comp that I'm trying to port over as strictly css/xhtml: http://www.buyblue.org/stg/images/layout1c.gif username:buyblue pass:letmein It's a comp built to fit an 800x600 resolution, however I'm developing it to be a liquid site. And here's the ongoing attempt: http://www.buyblue.org/stg (same user/pass if you need it) As you can see, it's a work in progress. Here's my problem. I need to have the outer glow running down the sides of the content_container, so I created the leftimg and rightimg divs to have a bg image of each respective sides glow. Set them both to 25px, and I'm getting nothing here. Even if I did get it to work, I think this workaround would be a problem because it wouldn't stretch down to the size of the content_container div. Since this is an elastic design, the faux background trick won't work, obviously, and I can't find anything on the web that even remotely touches on something like this. Here's the basic structure of what's going on: Code: Code: <div id="container"> <div id="header"></div> <div id="leftimg"></div> <div id="content_container"> <div id="sidebar-left"></div> <div id="main"></div> <div id="sidebar-right"></div> </div> <div id="rightimg"></div> </div> <div id="footer"></div> Help would be much appreciated! -jack look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. Hello, as im waiting for a reply to one previous thread today, i though i would also write this one too, as i REALLY need help. With the html page below, how "would" i make this all STRICT css and still have it look exactly the same. 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=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
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];}
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--
body {
margin-top: 0px;
}
.menuBlue {
FONT-SIZE: 11px; COLOR: #3c2c7c; FONT-FAMILY: Verdana, Helvetica, sans-serif
}
.menuBlue A {
COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:visited {
COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:hover {
COLOR: #99091c; TEXT-DECORATION: none
}
-->
</style></head>
<body onload="MM_preloadImages('images/Home_On.gif','images/About_On.gif','images/Search_On.gif','images/ContactUs_On.gif')">
<table width="407" height="91" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="70" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/Home_On.gif',1)"><img src="images/Home_Off.gif" alt="Homepage" name="home" width="70" height="18" border="0" id="home" /></a></td>
<td width="134" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/About_On.gif',1)"><img src="images/About_Off.gif" alt="About RE/MAX" name="about" width="134" height="18" border="0" id="about" /></a></td>
<td width="86" height="18"><DIV id=divSearch onmouseover="MM_showHideLayers('divSearch','','show')"
style="Z-INDEX: 6; VISIBILITY: hidden; WIDTH: 200px; POSITION: absolute; TOP: 18px; HEIGHT: 95px" onmouseout="MM_showHideLayers('divSearch','','hide')">
<table id="Table10" cellspacing="0" cellpadding="0" width="200" border="0">
<tbody>
<tr>
<td bgcolor="#3c2c7c" colspan="3"><img height="1" alt="" hspace="0"
src="images/Spacer.gif" width="200" border="0" /></td>
</tr>
<tr>
<td width="1" bgcolor="#3c2c7c"><img height="1" alt="" hspace="0"
src="images/Spacer.gif" width="1" border="0" /></td>
<td><table id="Table11" cellspacing="0" cellpadding="0" width="198" border="0">
<tbody>
<tr>
<td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt=""
src="images/Spacer.gif" width="1" border="0" /></td>
</tr>
<tr bgcolor="#bcccdc">
<td width="18"><img height="1" alt="" src="images/Spacer.gif"
width="10" border="0" /><img height="14" alt=""
src="images/ArrowRight.gif" width="8" border="0" /></td>
<td class="menuBlue" width="180"> <a
href="#">Properties</a></td>
</tr>
<tr bgcolor="#dce4ec">
<td><img height="1" alt="" src="images/Spacer.gif" width="10"
border="0" /><img height="14" alt="" src="images/ArrowRight.gif"
width="8" border="0" /></td>
<td class="menuBlue"> <a
href="#">Land</a></td>
</tr>
<tr bgcolor="#bcccdc">
<td><img height="1" alt="" src="images/Spacer.gif" width="10"
border="0" /><img height="14" alt="" src="images/ArrowRight.gif"
width="8" border="0" /></td>
<td class="menuBlue"> <a
href="#">Commercial</a></td>
</tr>
<tr bgcolor="#dce4ec">
<td><img height="1" alt="" src="images/Spacer.gif" width="10"
border="0" /><img height="14" alt="" src="images/ArrowRight.gif"
width="8" border="0" /></td>
<td class="menuBlue"> <a
href="#">Office and Agents</a></td>
</tr>
<tr bgcolor="#bcccdc">
<td><img height="1" alt="" src="images/Spacer.gif" width="10"
border="0" /><img height="14" alt="" src="images/ArrowRight.gif"
width="8" border="0" /></td>
<td class="menuBlue"> <a
href="#">Franchise Opportunities</a></td>
</tr>
<tr>
<td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt=""
hspace="0" src="images/Spacer.gif" width="1"
border="0" /></td>
</tr>
</tbody>
</table></td>
<td width="1" bgcolor="#3c2c7c"><img height="1" alt=""
src="images/Spacer.gif" width="1" border="0" /></td>
</tr>
<tr>
<td bgcolor="#3c2c7c" colspan="3"><img height="1" alt=""
src="images/Spacer.gif" width="200"
border="0" /></td>
</tr>
</tbody>
</table>
</DIV>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('search','','images/Search_On.gif',1)"><img src="images/Search_Off.gif" alt="Search" name="search" width="86" height="18" border="0" id="search" onmouseover="MM_showHideLayers('divSearch','','show')" onmouseout="MM_showHideLayers('divSearch','','hide')" /></a></td>
<td width="117" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/ContactUs_On.gif',1)"><img src="images/ContactUs_Off.gif" alt="Contact Us" name="contact" width="117" height="18" border="0" id="contact" /></a></td>
</tr>
<tr>
<td height="73"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Can someone please help me, I am fairly new to web design, I have been reading about CSS being the better way of web design than using tables. I have got the hang of creating layout, columns, etc. But can someone please help me with the code below. I am trying to convert this so it appears in the centre of the page Code:
<TABLE WIDTH=766 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=6 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=16 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=75 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=110 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=88 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=13 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_02.gif" WIDTH=91 HEIGHT=32 ALT=""></TD>
<TD COLSPAN=9 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=5 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_04.gif" WIDTH=92 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=8 ROWSPAN=2 ALIGN=left VALIGN=top><img src="images/index_05.gif" name="service" width="145" height="45" border="0"></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_06.gif" WIDTH=91 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_07.gif" WIDTH=110 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_08.gif" WIDTH=115 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_09.gif" WIDTH=112 HEIGHT=23 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_11.gif" WIDTH=38 HEIGHT=22 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=6 ALIGN=left VALIGN=top><IMG SRC="images/index_13.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><img src="images/index_14.gif" name="news" width="72" height="40" border="0"></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_15.gif" WIDTH=38 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_16.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_17.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_18.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_19.gif" WIDTH=83 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_22.gif" WIDTH=66 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_23.gif" name="quote" width="84" height="41" border="0"></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_24.gif" WIDTH=69 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_25.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_26.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_27.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_28.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_30.gif" WIDTH=23 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/index_31.gif" name="about" width="117" height="40" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_32.gif" WIDTH=79 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_33.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_34.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_35.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_36.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_38.gif" WIDTH=37 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_39.gif" name="specials" width="103" height="41" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_40.gif" WIDTH=79 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_41.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_42.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_43.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_44.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=9 ALIGN=left VALIGN=top><img src="images/index_46.gif" name="hosting" width="157" height="40" border="0"></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_47.gif" WIDTH=62 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_48.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_49.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_50.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_51.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_53.gif" WIDTH=72 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=7 ALIGN=left VALIGN=top><img src="images/index_54.gif" name="contact" width="130" height="44" border="0"></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_55.gif" WIDTH=17 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_56.gif" WIDTH=109 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_57.gif" WIDTH=110 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_58.gif" WIDTH=115 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_59.gif" WIDTH=112 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_60.gif" WIDTH=101 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_64.gif" WIDTH=75 HEIGHT=21 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_65.gif" WIDTH=110 HEIGHT=35 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_66.gif" WIDTH=115 HEIGHT=35 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=4 ALIGN=left VALIGN=top background="images/index_68.gif"><table width="85%" border="0" align="center">
<tr>
<td><form action="" method="post" name="form1">
Login <br>
<input name="login" type="text" id="login" size="12" maxlength="6">
<br>
Password:</span><br>
<input name="pass" type="password" id="pass" size="12">
<br>
<input type="submit" name="Submit" value="Submit">
</form></td>
</tr>
</table></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_70.gif" WIDTH=75 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=16 ROWSPAN=3 ALIGN=left VALIGN=top> <IMG SRC="images/index_71.gif" WIDTH=438 HEIGHT=77 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_80.gif" WIDTH=129 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=24 ALIGN=left VALIGN=top></TD>
</TR>
</TABLE>
Any help please??? Ive been trying to make this site for a friend, http://www.force-g.net/nathan/mainpage.html he wants a specific design so I made it with flash. The problem is useless with flash and thats as far as I can get. Can anyone give me a hand or some hints on how I could replicate this design with html and css. Would I have to use frames or can I divide the page with css? Or should I just stick to the flash design I have already? I'm a relative CSS newbie. I'm trying to convert an image heavy fireworks table created layout to all CSS for a friend. The designs not great but I'm trying to match it best i can Here's the comp... <a href="http://www.beardenfoundation.org/newpage.html">http://www.beardenfoundation.org/newpage.html</a> And here's my first stab at it... <a href="http://www.timmanteau.com/redo/redo_css.htm">http://www.timmanteau.com/redo/redo_css.htm</a> Can anyone give me a suggestion as the best way to approach this. I was thinking a fixed width, 3 column layout with a header and footer. Then I would place a repeating background image in each column to keep the look. How can I get the 3 columns to size to 100%. Any advice would be greatly appreciated. Thanks Tim Hi all, I am trying to convert my font info as global.css instead of hard coding it in every file. Code:
<font size="2" face="Arial, Helvetica, sans-serif">text</font>
to
.myFont {
font-size:14px; FONT-FAMILY: Arial, Helvetica, sans-serif;
}
But is not coming out the same in ie, why? Any help would be greatly appreciated. Hi there, I have a table which displays some links in columns, but I cannot work out how to convert it into CSS. This is the table code: PHP Code: <table width="100%" border="0" cellpadding="2" cellspacing="0" class="normal_12_blue"> {section name=row loop=$row_submenu_id} <tr> <td><a href="{$row_submenu_link[row]}" >{$row_submenu_name[row]} </a></td> {section name=col loop=$col_submenu_id[row]} <td><a href="{$col_submenu_link[row][col]}" class="normal_12_blue">{$col_submenu_name[row][col]} </a></td> {/section} </tr> {/section} </table> I tried using plain <div> tags, but it doesn't put them in columns. Any ideas how I can convert this? Hi, I need to convert a table to plain div tags, and have no idea how to do it. Here is the original code, and the code I need it to look like is after it: Code: <table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" height="29" background="images/table_top_l.PNG"> </td>
<td valign="bottom" background="images/table_top.PNG" class="style2"> TITLE</td>
<td width="10" background="images/table_top_r.PNG"> </td>
</tr>
<tr>
<td background="images/table_s_l.PNG"> </td>
<td><p> </p>
<p> </p></td>
<td background="images/table_s_r.PNG"> </td>
</tr>
<tr>
<td height="10" background="images/table_bot_l.PNG"></td>
<td background="images/table_bot.PNG"></td>
<td background="images/table_bot_r.PNG"></td>
</tr>
</table>
Here is what I need that to look like: Code: <div id="left_inner"> </div> Does anyone here know of any good generators for this kind of thing, I have been using tables for years and am stuck because Joomla requires css tags to dynamically generate modules. Any help I could get is appreciated! Need help converting the above to use 960 grid system. Most is already done by "cloning" the FourKitchens.com main page but I can't get this last bit of code converted. This code is contained within a container-16 element: Code:
<!-- COLUMN-LEFT -->
<div id="column-left" class="grid-11 suffix-1">
<!-- COLUMN-LEFT-INNER -->
<div id="column-left-inner" class="grid-11 clearfix">
<!-- CONTENT -->
<div id="content">
<!-- CONTENT-BODY -->
<div id="content-body">
<!-- HEADER_IMG -->
<div id="header_img">
<img src="images/banner4.jpg" width="640" id="banner" />
</div> <!-- END HEADER_IMG -->
<!-- FILTER-ROW -->
<div id="filter-row">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><strong>Filter by :</strong> <a href="categorytasks.php?category=&mny=&f=l">Latest</a> | <a href="categorytasks.php?category=&mny=&f=p">Most Popular</a> | <a href="categorytasks.php?category=&mny=&f=r11">Highest Rated</a> </td>
<td> </td>
<td><strong>For $</strong>
<form name="mnyform" method="post" enctype="multipart/form-data">
<select name="mnyindex" onChange="indexcategoryload(document.mnyform.mnyindex.value)">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1">1</option>
</select>
</form>
</td>
</tr>
</table>
</div> <!-- END FILTER-ROW -->
<!-- TASK-ROW -->
<div id="task-row">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="107">
<img src="taskimages/a4d11fddb35c9f__donate.jpg" width="106" height="76" />
</td>
<td width="17"> </td>
<td width="476">
<a href="task_desc.php?No=21" class="mainheading">I Will Keep it real for $1</a></span><br />
Just keep it real<br /><br />
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="15%">
<a href="task_desc.php?No=21" class="heading">
Read more
</a>
<img src="images/small_twitter.jpg" width="43" height="27" align="absmiddle" /> <span class="share" onClick="showHideDiv('share21')" style="cursor:pointer;"> Share</span>
</td>
<td width="8%">
<div id ="share21" style="display:none;">
<td width="4%"> </td>
<td>
<a href="fb_link" target="_blank" class="heading">
<img src="images/btn-facebook.png" alt="twitter" width="16" height="16" align="absmiddle" />
</a>
<a href="twitter_link" target="_blank" class="heading">
<img src="images/btn-twitter.png" alt="twitter" width="16" height="16" align="absmiddle" />
</a>
</td>
<td width="4%"> </td>
</div>
</td>
<td width="1%"> </td>
<td width="17%" align="right"><a href="task_desc.php?No=21"><img src="images/order_now_btn2.gif" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div> <!-- END TASK-ROW -->
</div> <!-- END CONTENT-BODY -->
</div> <!-- END CONTENT -->
</div> <!-- END COLUMN-LEFT-INNER -->
</div> <!-- COLUMN-LEFT -->
My current HTML looks like this... Code: <table width="90%" align="center"> <tr class="gen_small" height="25"> <td colspan="5"><b>Test Category</b></td> </tr> <tr class="gen_small" height="50"> <td width="50" align="center"><img src="./templates/images/forum_open.gif" border="0"></td> <td><b><a href="view_forum.php?f=1">Test Forum</a></b><br>This is a test forum</td> <td width="200" align="right"></td> <td width="50" align="center"></td> <td width="50" align="center"></td> </tr> </table> I have some ideas on how to get a similar layout but how do i ensure the distances specified by the widths are also kept intact? i have to move our site to drupal, and am having a huge issue with a certain div design. Version 1 - Original, old site shows it working perfectly but... Version 2 - Drupal, new site shows all the divs incorrectly. i have spent the past week, from 9-5 trying to figure this out but i think i have just burned out. .. can someone please help me here as this needs to be done since this is on the main page. I know it has something to do with the side-feature and afeature divs ... I know there are many benifits to moving from tables to css and div's and after trying to convert one page I have several question that i'm hopeing someone can help with. If everything goes well I will have about 100 pages to convert. Here is the code so far: <div position="float: left"> <span class="contentHeader">Direct Basics</span><br> <p><span class="h2"> Access Direct</span> </p> <p><span class="livetext">To access Direct: </span></P> <span class="livetext"> <ol> <li>On the Portal home page, you can either:<br> <p style="text-indent: 2em;"> Click the Tool Quicklink for <b>Assetwise Direct</b> </p> <p style="text-indent: 10em;"> or<br> <p style="text-indent: 2em;"> Click the <b>EVALUATE LOANS</b> menu to select <b>Assetwise Direct</b><br> </li> </ol> </span> <p class="SmallText"> <span class="livetext"> <ol start="2"> <li>When the security screen appears, enter your...<br> <p style="text-indent: 3em;"> user name <p style="text-indent: 4em;"> and password<br> <p style="text-indent: 5em;"> and click <b>OK</b><br> <br> Note: The user name and password fields are case sensitive.</li> </ol></span> </p> </div> <div style="position: absolute; left: 450px; top: 115px"><a target="_blank" href="images/access_awd.jpg"> <img border="0" src="images/access_awd_small.jpg" xthumbnail-orig-image="images/access_awd.jpg" width="100" height="60"></a> <br> <div style="text-align=center;"> <span class=reporttext> <a href="images/access_awd.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div> </div> <div style="position: absolute; left: 450px; top: 325px"> <a target="blank" href="images/password_box.jpg"> <img border="0" src="images/password_box_small.jpg" xthumbnail-orig-image="images/password_box.jpg" width="100" height="63"></a><br> <div style="text-align=center"><span class=reporttext> <a href="images/password_box.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div> </div> <p class=livetext style="position: absolute; float: left; left: 515px; top: 500px"> <a href="#" onClick="window.history.back(); return false;">Back</a> </p> THe actual page will have a menu on the left and top and this code will be in the main part of the screen. Now, my problem's with the code, other than I have the css in the file (will move to .css file later), a i'm not sure if ive used the best way for positioning images or codeing style for that matter, and when text is resized in a browser it will overlap the images, is there a way around that? Once i'm done with this page someone else (who is comfortable with tables and has limited web design experience) will be doing updates in FrontPage. For that would it be easier for them to just stick with tables? Any help would be greatly appreciated. I haven't had much luck on converting the html table with an image in it to a css <div> that can look like a html table in a way. Old Way Code:
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<td>
<img src="test.gif">
</td>
</tr>
</table>
New Way Code:
<style type="text/css">
div.divTest
{
margin: 12px 0px 0px 30px;
padding: 8px 8px 8px 8px;
border: 3px double #000000;
/* width: 0px; */
}
</style>
<div class="divTest">
<img src="test1.gif">
</div>
Since the html table is for displaying the data and the image isn't one of them as stated by the w3.org's rule. Thanks.. |
|||||||