klapy Posted April 2, 2006 Share Posted April 2, 2006 I'm just starting to build another 1 of my own webpages... For anyone one that's interested it is going to be a weblog/portfolio of everything that I do / have done....I'm just working on the best layout out at the moment, I found a nice one but somehow the right side isnt outlined correctlyThe top banner part is just a pixel longer than the home part.... I have no idea how I can fix this. edit: this is hosted on my own webserver on a normal internet connection so it might be slow!!Link: http://klapy.no-ip.infoCode: <table width="100%"><tr><td><div class="pageheader">klapy.no-ip.info</div></td></tr></table><table width="100%"><tr><td align="left" width="10%"><div class="top">Navigation</div><div class="body">Test <br />blaat <br /></div></td><td align="left" valign="top" width="90%"><div class="top">Home</div></td></tr></table></body></html> Link to comment Share on other sites More sharing options...
raimo Posted April 2, 2006 Share Posted April 2, 2006 First I think there is no that 1px at all, but yes it was, but only with IE.Can't explain all details, so it is easier when I put whole code.I'd move all widths and alings from HTML to CSS.It's a bit of cooler that way, I think. :)I can see You just now editing it Yourself, but hope this help still. :)padding-right: 1px; in home-class fixes that one pixel width case.Move CSS to Your CSS-file from head section and uncomment stylesheet link-tag. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><!--<link rel="stylesheet" type="text/css" href="styles.css"/>--><style type="text/css"><!--body{padding: 0px; /* opera has small bug */background-color: #E0FFFF;color: #000000;margin: 15px;font-size: 16pt;}table{width: 100%;}div.pageheader{text-align: left;border: solid 1px #000000;font-size: 24pt;background-color: #B4CDCD;color: inherit;}div.top{border: 1px solid #000000;background-color: #B4CDCD;color: inherit;}div.body{background-color: #F0FFFF;color: inherit;border-top: none;border-right: 1px solid #000000;border-left: 1px solid #000000;border-bottom: 1px solid #000000;}#zoom{text-align: right;}.menu{width: 100px;}.home{padding-right: 1px; /* for MSIE */vertical-align: top;}--></style><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>klapy.no-ip.info</title></head><body><table><tr><td><div class="pageheader">klapy.no-ip.info</div><div class="body" id="zoom"><a href="index.php?page=large">A</a> / <a href="page=small">a</a></div></td></tr></table><table><tr><td class="menu"><div class="top">Navigation</div><div class="body"><a href="index.php?page=home">Home</a><br /><a href="index.php#">Nothing</a> <br /></div></td><td class="home"><div class="top">Home</div></td></tr></table></body></html> edit:tested and OK with MSIE 6.0, Opera 8.53, Opera 9, Firefox, K-Meleon and Tidy. Link to comment Share on other sites More sharing options...
klapy Posted April 2, 2006 Author Share Posted April 2, 2006 thank you for your help it indeed works :)Another question... What exactly does color:inherit do?And yes I was indeed editting it, I was trying to get the A / a function to work properly, but I'm overlooking something Link to comment Share on other sites More sharing options...
raimo Posted April 2, 2006 Share Posted April 2, 2006 thank you for your help it indeed works :)Another question... What exactly does color:inherit do?And yes I was indeed editting it, I was trying to get the A / a function to work properly, but I'm overlooking something <{POST_SNAPBACK}> When You use background-color You should use color too (says W3C)and when You use color You shoud use background-color too. (says W3C again) :)color: inherit; means that color is inherited (descended) from parent-element (body etc) to the child-element.So if You has body-section, color setted as #000000;child-div color is automatically setted to #000000; right? No, it is not.That is not enough to W3C, somehow. W3C says: both color-attributes should be there! And in this example color: inherit; is same as color: #000000;One way to handle the A / a -case can be: there is way to change whole CSS-file as "on the fly" (no need to reload page) with JavaScript/DOM. So You can set easily different colors, sizes and .. everything.Small function is here, use if needed.You must put ID (id="css") to the stylesheet link tag.Javascript:function changeCSSFile(file){document.getElementById('css').setAttribute('href', file);}HTML:<button onclick="changeCSSFile('style2.css')">Change CSS-file</button> You can use a link or select-element etc. to change the file.Out there exists other ways (CSS-rules, etc.) but this one works with all real browsers and MSIE 5.0 > Link to comment Share on other sites More sharing options...
klapy Posted April 3, 2006 Author Share Posted April 3, 2006 I finished the A / a part, I overlooked something in my pageloading (the ?page=) part. I forgot to close the loop and it basicly looped through the entire if loop everytime....Thanks for your help!It looks like this: if($_GET['style'] == 'large') { setcookie('large', '1'); header("Location: $refer");}if($_GET['style'] == 'small') { setcookie('large', '0'); header("Location: $refer");} the head part in between and then: if($_COOKIE['large'] == '1') { ?> <body class="large"> <?php } else { ?> <body> <?php} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now