|
CSS - Html To Css Conversion
how would i convert:
<table border="1" cellspacing="0" style="border-collapse: collapse; text-align: left; border-style: ridge; margin: 0; padding: 0" bordercolor="#111111" width="779" id="table3"> <tr> <td width="649"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner1.jpg" width="649" height="92"></font></td> <td width="174"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner2.jpg" width="167" height="92"></font></td> </tr> </table> to simple CSS code? I tried doing that all in one style and nothing worked! Similar TutorialsI am working on converting my site (http://www.thejokejukebox.com ) from html to css/xhtml . I am working on the header image. I've used Photoshop's image slicing routine to cut the photoshop image into smaller pieces and have outputted the css code for the images. While this is mostly fine, Photoshop outputs css using absolute positioning. My goal is to have the header graphic displayed centered regardless of the screen resolution of the user. This is how the site appears now using html. On either side of the centered image is a filler graphic (bg.gif) that is repeated in x only. What approach should I take to accomplish this look in css? I've read a bit on using floating divs . Is this the route I should be looking at? If so, can someone give me a rough idea on how I can position the individual images to make the continous graphic within the floating div? As you can tell, I am very green when it comes to CSS, so your patience and time is appreciated. Hi guys, I'm new to the boards, but I have done a search before posting. I've got a page based completely on tables that I want to convert to tableless.. URL is my original site, I tried to transport it to URL And I lost my navigation icons.. Not a huge deal, but I'd still like to have them. Anyway, Heres the code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Guttermonkey</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
p {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
margin: 2px;
line-height: 14px;
padding-left: 20px;
color: #000000;
}
h3 {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 16px;
margin: 10px;
line-height: 18px;
padding-left: 5px;
color: #e9f2fc;
}
.smallheader
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 10px;
padding-right: 5px;
line-height: 14px;
color: #e9f2fc;
}
.small {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 5px;
line-height: 14px;
color: #e9f2fc;
}
a:link {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:active {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:hover {
color:#707770;
font-weight: normal;
text-decoration: none;
}
.info
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 13px;
padding-left: 5px;
color: #e9f2fc;
}
.infohead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 12px;
padding-left: 20px;
color: #e9f2fc;
}
.newshead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
line-height: 13px;
padding-left: 5px;
color: #333333;
}
input, textarea, select {
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #333333;
padding: 0px;
}
-->
</style></head>
<body bgcolor="#808080">
<br>
<center>
<!-- Main Table -->
<table bgcolor="#808080" border="0" cellpadding="1" cellspacing="0" width="670"><tbody><tr><td colspan="2">
<!-- Header -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#808080" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="smallheader" align="right" bgcolor="#354463">Last update: 28/06/2002, v4.0</td>
</tr>
<tr>
<td bgcolor="#354463"><h3>// Guttermonkey</h3></td>
</tr>
<tr>
<td class="smallheader" align="right" bgcolor="#354463">"I never think of the future, it comes soon enough." - A. Einstein</td>
</tr>
</tbody></table>
</td></tr></tbody></table>
<!-- End Header -->
</td></tr>
<tr><td>
</td></tr>
<tr><td colspan="2">
<!-- Main Field -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#dcdcdc" border="0" cellpadding="0" cellspacing="10" width="100%"><tbody><tr><td align="center" valign="top" width="160">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
<table border=0 width=100% height="100%">
<td width="495" height=100% valign="top">
Ewwwwww!<td width="175" height="100%" valign="top">
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#bfc4cb" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#354463" border="0" cellpadding="2" cellspacing="2" width="175">
<tbody><tr>
<td class="infohead" bgcolor="#354463"><b>:: Navigation</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<link rel="StyleSheet" href="navbar_files/dtree.css" type="text/css">
<script type="text/javascript" src="navbar_files/dtree.js"></script></head>
<body>
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Guttermonkey.com');
d.add(1,0,'Home','index.php');
d.add(2,0,'Calendar','index.php?page=calendar');
d.add(3,0,'Poetry','index.php?page=poetry');
d.add(4,0,'Blog','index.php?page=blog');
d.add(5,0,'Download','index.php?page=download');
d.add(6,0,'Photo Gallery','javascript:void','RC\'s Picture Folder!','','','img/imgfolder.gif');
d.add(7,6,'RC Naked','index.php?page=naked','You sick ****!','','','img/jpg.gif');
document.write(d);
//-->
</script>
</body></html> </tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: VITAL STATS</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Name</b>: RC</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Nick</b>: The Freaky Penguin</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Location</b>: New Perth</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Born</b>: Begotten before time</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Mood</b>: Wonky</td>
</tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: SYSTEM</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MB</b>: TF-486 with 256K cache</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>CPU</b>: AMD 486-66MHz</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MEM</b>: 4MB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>HD</b>: Quantum Fireball 2 GB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>VGA</b>: Number Nine GXE 2MB ISA video card</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>OS</b>: MS-DOS 5.7 </td>
</tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</table>
</body></html>
I havent done serious web design in a couple years, and to tell you the truth its over my head now. Oh, and when I moved the site, I FTP transfered the entire public_http folder, so I know the images are there for the nav bar. But thats not important, getting table-less is... Any help on where/how to begin? Much thanks in advance, rcmaples. Hi everyone, I am in the midst of converting my fathers website from an old frames based version into a CSS version, and I have had some trouble getting it working properly in both firefox and ie explorer. I would really appreciate if anyone could give me some advice! The original page is he http://www.qualspec.com.au I have started by just trying to replicate the frames look with css, and have come up with this single page: http://www.qualspec.com.au/test/testid.html It seems to work well in internet explorer, but as soon as I load up firefox, it looks ugly as hell (I was using topstyle which uses IE as the internal css and html preview). Can anyone help me out here? Thanks in advance! Regards, Thomas. Hi, I'm having a little problem getting a layout to work with divs. I can hack it fairly easily with tables, but I am realying on undefined behavior to make it work, so I would rather do it right with css. Here is the code, if you can make the page, you can see the result I would like, and as close as I could get with css. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
padding-top: 5px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Center Test</title>
<style type="text/css">
.navCell {
width: 14%;
text-align: center;
background-color: teal;
float: left;
}
</style>
</head>
<body>
<div style="width: 100%; height: 20px; background-color: red;">
<div style="width: 196px; text-align: center; background-color: green; position: absolute; left: 0px;"><p>Stay Home</p></div>
<div id="restOfNav" class="restOfNav" style=" padding-left: 196px; ">
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
</div>
</div>
<p>Desired result</p>
<table cellpadding="0" cellspacing="0" style="height: 20px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr align="center" >
<td class="headerCell" ><div style="width: 196px; background-color: green;"><span>Stay Home</span></div></td>
<!-- <td class="dividerCell"></td> -->
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks for any help you all can give me. I am so determined to get my entire site table-less but i ma having some more trouble on a "complicated" table layout This is the current table Code:
<table>
<tr>
<td width="50px"></td>
<td></td>
<td width="200px"></td>
<td width="50px"></td>
<td width="50px"></td>
</tr>
</table>
Now what i have done so far to convert this to CSS is the following Code: <div class="forums"> <span class="image"></span> <span class="name"><span> <span class="lastpost"></span> <span class="topics"></span> <span class="posts"></span> </div> however i do not know the CSS code to make it look like the table layout above. I have messed around with width and float but i am not getting it how it should be. some CSS code i wrote Code:
div.forums
{
width: 90%;
clear: both;
height: 50px;
margin: 0 auto;
}
span.image
{
float: left;
width: 10%;
}
span.name
{
float: left;
}
span.lastpost
{
float: left;
width: 20%;
}
span.topics
{
float: left;
width: 10%;
}
span.posts
{
float: left;
width: 10%;
}
I had to redo my page because none of it was validating through w3c so I'm trying it again and attempting to get my css right however the widths of my divs correct to match my psd. Any thoughts on what I'm doing wrong? PSD jpg kansasoutlawwrestling.com/wrestling2.jpg Site kansasoutlawwrestling.com Hi, I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink. (For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input). I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future. I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers. For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser. Any hint or suggestion ? Hey guys. I am having trouble getting a column to go the full length of the page. Here is a link to the page http://www.tjshafer.com/projects/ca...me/subpage.html I have marked in the page where the table is that should have a height of 100%. Also here is the section that needs to be 100%. This is the td which has the code in it, Code: <td id="leftcell" valign="top" height="100%"> <!--begin table for menu which includes background--> <table border="0" cellspacing="0" id="menucell"><tr><td width="247" valign="top"> <!--begin menu table--> <table cellspacing="0" id="menuitems" border="0" width="159"> <tr><td> </td><td id="menuheader" align="left" width="159" style="line-height:12px"> <br>CONTEMPORARY<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Sofas & Chairs</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot" border="0"> Casual Dining & Bar Stools</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Bedroom</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Home Entertainment</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Home Office</a><br><br> WICKER & RATTON<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Sofas & Chairs</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Dining</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Bedroom</a><br><br> OUTDOOR<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Aluminum</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Cast Aluminum</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Wrought Iron</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> All Weather Wicker</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Wood</a></td> </tr> </table> <!--end menu table--> </td></tr></table> <!--end table which includes background--> </td> I tried adding height="100%" everywhere i could think. Any help would be greatly appreciated. hey guys i didnt know what to do so came here to ask im making just one web page, i have done all the coding and everything is set it works fine in Firefox and works fine with IE7 and IE8.... but i am having problems with the page when i open with IE6 help would be appreciated as a new user i cannot add webpage link anyone who is interested to help i can PM them the webpage or here im adding webpage hope i dont get banned for this linux103.mysite4now.net/desimafia/test2/tvshows.htm view it in IE6 and you will know the problem thanks Im not certain whether or not this is an HTML or CSS problem, or if its just a bug i will have to live with. I cannot for love nor money get IE6 to use my specified link colors... ---------FROM MY CSS SHEET--------------------- a:link { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } a:active { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } a:visited { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } A:hover { background-color: #FFCC33 ; color : #000000 ; font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; } a:hover img { background-color: #000000; } A:link.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; } A:active.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; background-color: #000000 } A:visited.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; } A:hover.noback { color : #000000 ; background-color : #000000 ; font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; } in Firefox, this is all displayed as I want it to be, but in IE6, I get pants defaults. I have been able to remove the initial color by adding <Body link="000000"> to the body, but, that doesnt seem like a complete solution. I have spent all morning at work (nice job i know) trying to figure this out, and have had no joy... I bow to the infinate wisdom of the masses. anyone know of a good resource site/s for creating css/html div/layers/template ? Hello all, First time poster here...hoping to find some answers! I think this is a pretty common issue so I'll be brief. I have a header that is currently coded in HTML (with tables), and I want to convert it to CSS. Of course I need to do this with my entire site, but I figure the header will be a good place to start. This is what I need to convert to CSS: eyemagic.net/zc_header4.htm Thank you for your help! -Dave I am having trouble getting my published file to be centered in a browser window. below is the code I am using. Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#000000">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '800',
'height', '600',
'src', 'index',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'index',
'bgcolor', '#000000',
'name', 'index',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'index',
'salign', ''
); //end AC code
}
</script>
<noscript>
<div align="center">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="800" height="600" id="index" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="index.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /> <embed src="index.swf" quality="high" bgcolor="#000000" width="800" height="600" name="index" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</noscript>
</body>
</html>
Are the HTML tags, <style></style>, in the CSS file? Why do you have two separate body sectors in your CSS? Just put them into one. I am not sure if something like the attached should be put in an html table or done with css positioning. Any thoughts? I'm having issues with the HTML/CSS, only in IE, on the following page: http://www.datamonkeys.co.uk/webmail/webmail/log_in.php It looks ok in FF....It has something to do with the absolute/relative positioning, i think.... can anyone help me out here? thanks.. Warning: if you're using the popular * html hack for ie-only rules, be awa this hack does not work with the ::first-letter pseudoelement and perhaps not with any pseudoclasses or pseudoelements! Hello, I have two designs that I am unsure of on how to get to work. I need to transfer a friends design over to css and html and can do everything except the below two issues. The first one is in a menu. I would like to get the selected option sticking out higher than the rest. You can see what I need in the picture below. The second one is in the below picture. I would like the icon to be sticking out of the box header. I know how to make the box fine with the rounded corners and such but the only thing I dont know is the icon part. Any ideas? Thanks |
|||||||