|
CSS - Xhtml/css Conversion Failing
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 Similar Tutorialscan anyone tell me why the control div with the links and the div to contain the images for my photo album do not look properly aligned? link to photo Album can be found here but please note this is a dynamically set IP so is likely to change: http://85.210.107.231/PA.html Hi everyone, I am bad at this bit and i don't really know why. I have a div and a floated UL. I want the div to sit next to the UL, however, it sits above it and I cannot get them to sit together. Could someone please just post a brief method of getting them to sit side by side and I will try and work it for myself. Thanks. Page is http://www.wellandpower.net I posted this by accident in the html forum , so im asking he I have this in my CSS page: Code:
a.mainlevell:link, a.mainlevel:visited {
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-bottom: 1px;
font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}
And I use this style for four links: Code: <a href="mobile.html" class="mainlevell">Home</a> <a href="m_about.html" class="mainlevell">About Us</a> <a href="m_games.html" class="mainlevell">Games</a> <a href="m_links.html" class="mainlevell">Links</a> When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't. However, putting an m_ in front of the mobile.html makes the link work. Why? This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to. However, I have a similar set up for another menu that does almost the same CSS as the above: Code:
<table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
<td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
</table>
and this one works fine ( even with the mobile.html) 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! 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. 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. Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections. I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though. I can't explain much better than that, so without further ado: CSS: Code: .columns-float{
float : left;
width : 80%;
}
.column-one
{
width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
inquiring about. The above problem assumes this attribute
is set to "auto". */
float : right;
}
.column-two
{
width : 25%;
float : left;
}
.column-three{
width : 20%;
float : right;
}
.box-footer{
clear : both;
}
.column-one-content{
margin-left: 1px;
margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
p\osition: relative;
}
(Above was borrowed from here, albeit with modifications.) HTML: Code: ... <div class="columns-float"> <div class="column-one"> <div class="column-one-content"> <h2>column 1</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="column-two"> <div class="column-two-content"> <h2>column 2</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> </div><!-- close boxbody --> <div class="column-three"> <div class="column-three-content"> <h2>column 3</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> <div class="box-footer">Footer </div> Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me. Any help would be appreciated, and I thank you very much for your time. This is driving me batty. 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 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. I hope one of you can help, as this is driving me mad. I've got a div that I'm using to display a background colour that has a fixed width and height="100%" (I'm having a problem with the hieght as well but I'm confident I can sort that), as soon as I change the declaration at the top of the page from the HTML 4.01 Transitional to the XHTML 1.0 Transitional the div disappears, why? Cheers, Ellroy I am developing websites using ASP.NET and C# for the code-behind. I just started using css design and I realized after trying to validate my rendered pages that some things in ASP.NET would be VERY difficult to make completely valid. IE: ASP.NET automatically renders this piece of code everytime the page is rendered: Code:
<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["frm"];
}
else {
theform = document.frm;
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
That right there is invalid due to the fact that it does not have type="text/javascript" in the <script>. There are many other instances of this that I won't go into detail. In order to fix this you have to override ASP.NET's page rendering methods and do a Regex! thats right, a regex on EACH line of code to replace the line above with valid XHTML. This can become VERY inefficient if you are serving 30+ pages a second. My question is this: at this point is it really worth the performance hit on my web server to make my asp.net sites XHTML compliant? on a side note, I would like to bludgeon the MS designer that wrote these chunks of code into ASP.NET!@!$%#$ thanks! I'm having some serious difficulties... but not the standard, "what's wrong with my code", everything validates properly. Seperately... I really dislike linking outside of a forum to describe a situation... but in this scenario I think it is the only feasible way to explain it. The template that I have created for my website validates as, xhtml 1.1 -- tentatively as do all other documents that validate against the formal parsing. See the following to understand my situation. EDIT: Validation of my pages template in html format. - yay! it validates as XHTML 1.1 EDIT: Validation of my pages stylesheet - yay! it validates as CSS 2.0 EDIT: Validation of them both together returns the following: - Boooo! It won't validate and also tells me: Code: "Please, validate your XML document first! Line 2 Column 3 The markup declarations contained or pointed to by the document type declaration must be well-formed. " I would have thought that these things are dependent on eachother. Does it make sense that something can pass a XHTML compliant, but then be formed badly in such a way that a formal parser would read it wrong with respect to CSS? Is it because of my comments? If you look at the code of the page I have detailed a few things that I thought were important. Hello, I was just wondering how XHTML and CSS works within data-driven websites. I am new to developing database driven sites and need to develop one that uses XHTML and CSS formatting for content as this is what the company I work is aiming towards, due to web accessibility requirements. Does anybody know of any good books/resources that cover developing database driven (php/mysql) websites and implementing XHTML/CSS from within these sites. Would I be right to say that an area for the database content is created in the page which is written in XHTML? if this is correct does this area link to the CSS? Any help would be gratefully appreciated.... Thanks, Andy I am building a new navigation menu which works fine as you can see below: http://www.hotlinkhosting.com/test/menu.php However, the following version does not: http://www.hotlinkhosting.com/test/menu.php?. The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help. Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors. I've seen several examples of how to emulate frames using CSS, but I haven't seen anywhere explain how to create "frames" without having to add the entire frame code to every page in which it appears. With frames, I used to be able to create a menu which would appear throughout my site. I would modify the one, single menu.html file, and the changes would be visible throughout the site. How can I do this using the CSS-emulated frames? Thanks Hi, I want to validate my page to XHTML 1.1, but to do that I need to remove border="0" (Only used on two header images). I have tried putting border-style:none in my CSS in EVERY place I could think of, but it just doesn't work. My css is he http://www.planetphillip.com/style.css One other thing, when I remove the border="0" code, IE6 vertically re-aligns the header images. Would somebody be kind enough to explain why. BTW the site in question is: http://www.planetphillip.com/ TIA Phillip In my ongoing project I am making a complex fixed footer that has downloadable resources. I am placing three social network 64x64 thumbnails linking to those sites side by side. The question I am conflicted with is should I make the images available in the xhtml mark up between the <li> tags or should I create images in the css as separate divs inside the footer with floating properties so that they line up next to each other? I know it is a matter of file size vs preference but in this case it seems there would be less code all around by placing it in the <li> tags in the xhtml and styling the <li> as inline rather than creating three separate divs and styling those in the css that goes along with it. Or is there an easier way entirely? Thanks for your thoughts LB Ok, getting to grips with desiging my site with CSS now, but a question that I had is, do I use HTML for my site or XHTML? If someone could explain the differences and benefits it would be really helpful. I am fairly good with HTML but I haven't ventured into XHTML before and if possible I'd really like it to be valid too. Any pointers, tips or comments for design with CSS would be great. |
|||||||