|
CSS - Redesigning Site In Xhtml / Css
Would it be worth it to redesign this site (http://www.innerspect.net/) using CSS only for the layout, instead of tables? Making a few things look cleaner as well (Fonts / layout positions / etc)? Could someone give me tips for doing this. Thanks. (i.e. use what for the main body, something inside that nested for the left side, right, etc.)?
Similar TutorialsHello everyone, At the moment I am trying to achieve a re-design of my website (http://www.madewithpixels.co.uk) in pure XHTML/CSS. After many hours of tweaking and a little bit of help here and there, I now have a version that almost exactly matches my original html design save for a couple of issues. I'm aiming to have a fixed sized header, 2 content boxes that fill the available height of the browser window and and a footer that sticks to the bottom of the browser, I'm so very nearly there, except somethings not quite right.... I can get the container expanding in height with the browser window no problem, by setting the height attributes in the CSS and the height of the DIV in the html to 100% height ... except it's TOO big, the footer is waaay down the bottom and requires me to scroll down to it (not what i want)....AND... it doesnt work in mozilla... so, after a bit more tweaking, I changed the %'s for em's and now mozilla works correctly... so far so good, now to get the content boxes and the footer to remain in view all the time.... easy i think, just play about with the height attributes in the CSS and the DIV and everthing should be fairly straightforward. But no! it doesnt work, whatever i do, i cannot get the main content coloumns and the footer to remain in view and fit to 100% height of the browser at the same time, I've tried every combination of % and EM's that I can think of, and can acheive both effects, but not at the same time. also, in IE I have about 10px of white above the footer that i cant eliminate... If anyone can give me an explanation as to what is happening (im sure the two problems are related) I'd be very grateful. I've been tweaking this code for two days now and am getting nowhere. i'm getting closer all the time, i just need to understand whats happening here and I reckon i'll be ready to start putting the rest of the elements in like the navigation etc Thanks very much to anyone who has the time to make a suggestion, its very much appreciated. For reference, you can see the latest version he http://www.madewithpixels.co.uk/sandbox/latest.htm cheers Mike 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'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. 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! 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 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 I've got simple webpage like this: <html> <style type="text/css"> div { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;} td { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;} input { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; vertical-align: middle;} select { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; vertical-align: middle;} </style> <body> <div> <select onchange="" style="width: 210px;"> <option value="0"> aa </option> <option value="1"> bb </option> <option value="2"> cc </option> </select> </div> <div> <table cellspacing="0" summary="" style="height: 210px; width: 210px; nowrap; border: solid #666666 1px; overflow: auto;"> <tr> <td> table </td> </tr> </table> </div> <div> <input name="custom" type="text" style="width: 210px;" value="" /> </body> </html> Everything is ok until I put XHTML DOCTYPE. After that width of <INPUT> tag is not the same as in <TABLE> or <SELECT>. What am I doing wrong? How to fix it? Elephant What is this? XHTML don't like the css scrollbar styles... CSS scrollbars is only supported in IE 5.5++. I'm using IE 6.0... try it in IE 5.5...see if it works... Code:
body {
background-color: #a7b1ae;
background-image:url('../images/bg.gif');
margin-left: 30px;
margin-right: 30px;
margin-top: 0px;
margin-bottom: 0px;
scrollbar-face-color: #96A096;
scrollbar-shadow-color: #96A096;
scrollbar-highlight-color: #96A096;
scrollbar-3dlight-color: #9AB6C4;
scrollbar-darkshadow-color: #20253A;
scrollbar-track-color: #738278;
scrollbar-arrow-color: #000000;
}
I include this in a .html XHTML file with: Code: <link rel="stylesheet" type="text/css" href="sub/deworks.css" /> ok... here is the whole XHTML file named sc.html: 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" xml:lang="en" lang="en"> <head> <title>css scrollbars</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="sub/deworks.css" /> </head> <body> <p>hello</p> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> </body> </html> now the scrollbar css doesn't work... but if i remove the Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> It works perfectly! hmmm how strange... is w3s XHTML .dtd files ****ed up? or doesn't XHTML support css scrollbars? please help... -meself Hi All. I've had a problem with a website for the last few days, i've done the design, and the html side is no problem in a table layout, but i'm trying to get it working using DIVS and pure CSS. I'm attaching an image of the layout. URL Look at the image, i want the design, aligned center and vertically in the middle. Here is a key to each section. Yellow, Text would be in this section. Red, Bar that goes the width of the screen. Green, The Menu, Home | About etc etc etc (the red bar is actually the menu bar but only used for a menu where the green is) Blue, This is an image, that over laps the menu bar. White, this is just where the copyright notice goes. If anyone could knock up a quick template i'd be extremely grateful, that is ofcourse if a layout like that is possible with DIVS etc. Thanks people. I usually build in XHTML Traditional, and modify via CSS... but i want to learn how to build in XHTML strict.. and practice i notice is putting data in ul lists... which when the css is taken off, gives quite a nice structured layout of text and such... problem is, i dont know how to do it to where the "dot" doesnt show up... anyhelp would be great. thanks Currently, I'm working on an XHTML home page. After PHP, this is the result: index.php Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="Author" content="Neil E. Hodges" />
<meta name="Description" content="A site about the Kamakura Era" />
<link rel="stylesheet" type="text/css" href="kstyle.css" />
<title>index</title>
<script type="application/x-javascript" src="switch.js" />
<title>frames</title>
</head>
<body>
<div id="top">
<form id="switch" name="switch" action="">
<input type="button" onclick="ch('left');" id="toLeft" value="To Left" disabled="disabled" />
<input type="button" onclick="ch('right');" id="toRight" value="To Right" />
</form>
<h1>Kamakura Era</h1>
</div>
<div id="sidebar" class="leftside">
<a href="index.php" title="Home">Home</a>
</div>
<div id="main">
<h2>Main</h2>
<h3>H3</h3>
</div>
</body>
</html>
kstyle.css Code: @charset "UTF-8";
div#top {
width:100%;
display:block;
border-bottom:2px solid rgb(0,100,0);
height:10px;
height:4em;
background-color:rgb(255,255,240);
}
div#top h1 {
display:block;
text-align:center;
font:bold italic 3em/1 'Lucida Calligraphy', 'URW Chancery', 'Times New Roman', 'Nimbus Roman', 'Serif';
width:80%;
color:rgb(250,200,50);
}
form#switch {
display:block;
background-color: rgb(100,100,0);
float:right;
width:10%;
height:3em;
}
form#switch input {
display:block;
margin:1%;
height:48%;
width:98%;
}
div.rightside {
float:right;
text-align:left;
padding:1% 3% 1% 1%;
border-left:1px dashed rgb(0,100,0);
}
div.leftside {
float:left;
text-align:right;
padding:1% 1% 1% 3%;
border-right:1px dashed rgb(0,100,0);
}
div#sidebar {
width:15%;
min-height:100em;
background-color:rgb(240,240,255);
}
div#sidebar a {
color:rgb(150,0,50);
font:italic normal 1.1/1 'Nimbus Roman', 'Bitsream Charcter', 'Times New Roman', 'Computer';
text-decoration:none;
display:block;
padding:2%;
width:96%;
}
div#sidebar a:hover {
color:rgb(150,75,200);
font-weight:bold;
text-decoration:none;
border:0.5px solid rgb(150,75,50);
margin-bottom:1.5em;
}
div#sidebar a:visited {
color:rgb(50,75,150);
text-decoration:underline;
}
div#main {
padding:1em;
width:85%;
min-height:100em;
}
div#main h2 {
color:rgb(0,100,200);
font:italic bold 2.5em/1.1 'URW Bookman L', 'Times New Roman', 'Courier New', 'Sans-Serif';
text-align:center;
text-decoration:underline;
}
div#main h3 {
color:rgb(175,0,50);
font:bold normal 1.75/1.1 'Utopia', 'Lucida Handwriting', 'Serif';
text-indent:5em;
}
switcher.js Code: function ch(dir)
{
if(dir == 'right')
{
document.getElementById("sidebar").setAttribute("class", "rightside");
document.getElementById("toLeft").disabled = false;
document.getElementById("toRight").disabled = true;
// document.getElementById("toLeft").setAttribute("disabled", false);
// document.getElementById("toRight").setAttribute("disabled", true);
}
else if(dir == 'left')
{
document.getElementById("sidebar").setAttribute("class", "leftside");
document.getElementById("toRight").disabled = false;
document.getElementById("toLeft").disabled = true;
// document.getElementById("toRight").setAttribute("disabled", false);
// document.getElementById("toLeft").setAttribute("disabled", true);
}
}
If you enter all of these into their respectful files, except index.php into index.xhtml, there's a little white above the top of the page. I want to get rid of this margin. Can anyone help? Also, this is mainly a problem in Firefox, since IE doesn't have XHTML support. OK, I've been pulling my hair out here. I've been googling around for a couple days now trying to find some solution to this.... I have been crunched by what I think is a nasty little bug within IE6 when running with a DocType of XHTML 1.0 Transitional. Observe he http://www.drcwbt.com/codetests/scrolltest.htm My problem: The horizontal scrollbar. It's nasty. I need to get rid of that puppy. Only happens on IE6 AND when running XHTML DocType. My attempted (and failed) solutions: My Googles led me to what looked like a similar bug in IE 5 Mac. Unfortunately, those solutions don't help me here Addition of MS only "overflow-x:hidden" property. While this does get rid of the scrollbar, it also chops off the rightmost edge of the content within the DIV. 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. 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 I'm new to css and have been impressed with the way you can make style changes to a whole site by just altering one stylesheet (if you've set if up right). My question is, can css or xhtml be used to do that with content? I want to create a site with a Nav column floated on the left hand side of every page, but I'm worried I'd have to change hundreds of pages if i ever added/altered the column. Is there any way I can get every page to pull a table/other-xhmtl from one source, maybe by putting something in the stylesheet? Thanks. I am new to xhtml and am working on my web page i want to use a graphic to split my different areas and the book i was using only showed how to put in a plain line, In .css PHP Code: h2 {border-top:1px solid #4D65A0} I have found a graphic i want to use from the animation factory cd's i have and now im lost as to how to put it in. new line: slash_blue_mw.gif sorry posted in the wrong spot b4 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 |
|||||||