Jump to content

Rounded corners...

SFB

By SFB
in CSS

 Share

Recommended Posts

SFB Member

SFB

Posted
Posted

My html/phpnote that locations have been cut short in my php just to be safe. 

<?phpsession_start();$username = $_SESSION['username'];$first = $_SESSION['first'];$last = $_SESSION['last'];$email = $_SESSION['email'];$website = $_SESSION['website'];$style = "/test/style.php";$snav = "/nav/snav.txt";$bnav = "/nav/bnav.txt";?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>	<title>Snow Fort Builders -- Home </title>	<meta name='keywords' content='Snow Fort, snowfort, snow fort builders, snow, fort ' />	<meta name='description' content='Learn how to build snow forts just like mine, see pictures of my snow forts and other winter related activities' />	<meta name='robots' content='all' />	<meta http-equiv='content-Type' content='text/html charset=ISO-8859-1' /><?php include($style); ?><base href='http://dcole.ath.cx/sfb/' />  	</head><div class='header'>Snow Fort Builders</div></td><div class='url'>http://snowforts.ath.cx</div><table class='sfb' cellspacing='3' cellpadding='3'>	<tr>  <td colspan='2' class='welcome'><div class='welcome'><?php if(isset($_SESSION['username'])){print" Welcome $first $last | <a class='welcome' href='/login/profile.php'><div class='welcome'>Profile</div></a> | <a class='welcome' href='/login/logout.php'><div class='welcome'>logout</div></a> ";}else{print"Welcome <a class='welcome' href='/login/newuser.php'><div class='welcome'>Guest</div></a>| <a class='welcome' href='/login'><div class='welcome'>Login</div></a>";}?></div></td>	</tr>	<tr>	  <td class='corner'>  	<div class=rtop></div><div class=r2></div><div class=r3></div><div class=r4></div><div class=r5></div>    <div class=rc><div class='bc'>Navigation</div></div>  	<div class=r5></div><div class=r4></div><div class=r3></div><div class=r2></div><div class=rbottom></div>  </td>  <td class='pgtitle'>  	<div class=rtop></div><div class=r2></div><div class=r3></div><div class=r4></div><div class=r5></div>    <div class=rc><div class='bc'>Home</div></div>  	<div class=r5></div><div class=r4></div><div class=r3></div><div class=r2></div><div class=rbottom></div>  </td>	</tr>	<tr class='nb'>  <td class='nav'>  	<div class=rtop></div><div class=r2></div><div class=r3></div><div class=r4></div><div class=r5></div>    <div class=rc><div><?php include($snav); ?></div></div>  	<div class=r5></div><div class=r4></div><div class=r3></div><div class=r2></div><div class=rbottom></div>  </td>  <td class='body'>  	<div class=rtop></div><div class=r2></div><div class=r3></div><div class=r4></div><div class=r5></div>  	<div class='scroll'>    <div class="bold">Welcome </div>    Welcome to Snow Fort Builders @ [url="http://snowforts.ath.cx"]http://snowforts.ath.cx[/url] <br /><br />    <div class="bold">Snow Fort News </div>    The end of snow fort building season has come to an end!  Last year was not very good for snow forts.  January and Febuary were too warm and we did not recive much snow. In march we recived over a foot of snow but I felt like making a sleading track insted.      <br /><br /><br />    <div class="bold">Updates </div>    <div class='bold'>XHTML</div>--This site is now Valid XHTML <br />    <div class='bold'>New photos</div>--I added some pictures of my snow forts form before 2003  <br />    <div class='bold'>Contact Us</div>--I got the Contact page working again.<br />    <div class='bold'>Settings</div>--You can choose the colors as well as some preset settings.<br />    <div class='bold'>Message Board</div>--Added style tags and improved display in Internet Explorer.<br />    <div class='bold'>Loading Time</div>--decreased loading time by removing statcounter<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />  	</div></div>  	<div class=r5></div><div class=r4></div><div class=r3></div><div class=r2></div><div class=rbottom></div>  </td>	</tr>	<tr>  <td colspan='2'class='bottom'>  	<div class='bnav'>    <div class=rtop></div><div class=r2></div><div class=r3></div><div class=r4></div><div class=r5></div>    	<div class=rc><div><?php include($bnav); ?></div></div>    <div class=r5></div><div class=r4></div><div class=r3></div><div class=r2></div><div class=rbottom></div>  	</div>  </td>	</tr></table></body></html>

my dynamic stylesheet

<?phpif(isset($_COOKIE['background'])){$color = $_COOKIE['background'];$color1 = $_COOKIE['tdbg'];$color2 = $_COOKIE['links'];$color4 = $_COOKIE['title'];$color5 = $_COOKIE['text'];}else{$color = "F0F8FF";$color1 = "039";$color2 = "F0F8FF";$color4 = "039";$color5 = "F0F8FF";}print <<<STYLESHEET<style type="text/css">	body {	overfolow: auto;	font-family: verdana, arial, sans-serif;	font-size: small;	background-color: #$color;}table.sfb{	margin-left: auto;	margin-right: auto;	height: auto;	width: 800px;}td.welcome{	vertical-align: top;	text-align: right;	width: 800px;	height: 20px;}td.corner{	vertical-align: top;	text-align: center;	width: 180px;	height: 20px;}td.pgtitle{	vertical-align: top;	text-align: center;	width: 620px;	height: 20px;}td.nav{	vertical-align: top;	text-align: left;	width: 180px;	height: auto;}td.body{	vertical-align: top;	text-align: left;	width: 620px;	height: auto;}td.bottom{	text-align: center;	width: 800px;	height: 20px;}.rtop {	display: block;	overflow: hidden;	height: 1px;	font-size: 1px;	background: #$color1;	margin: 0px 5px;}.rbottom {	display: block;	overflow: hidden;	height: 1px;	font-size: 1px;	background: #$color1;	margin: 0px 5px;}.r2 {	display: block;	overflow: hidden;	height: 1px;	font-size: 1px;	background: #$color1;	margin: 0px 3px;}.r3 {	display: block;	overflow: hidden;	height: 1px;	font-size: 1px;	background: #$color1;	margin: 0px 2px;}.r4 {	display: block;	overflow: hidden;	height: 1px;	font-size: 1px;	background: #$color1;	margin: 0px 1px;}.r5 {	display: block;	overflow: hidden;	height: 1px;	font-size: 1px;	background: #$color1;	margin: 0px 1px;}.rc {	background: #$color1;	font-size: small;	overflow-x: hidden;	overflow-y: hidden;	display: block;	height: 100%;	padding-right: 5px;	padding-left: 5px;}div.scroll {	background: #$color1;	height: 100%;	overflow-x: hidden;	overflow-y: auto;	display: block;	padding-right: 5px;	padding-left: 5px;	scrollbar-face-color: #$color1;	scrollbar-highlight-color: #$color;	scrollbar-3dlight-color: #$color1;	scrollbar-darkshadow-color: #$color1;	scrollbar-shadow-color: #$color;	scrollbar-arrow-color: #$color;	scrollbar-track-color: #$color1;}a.snav:link, a.snav:active, a.snav:visited{	text-indent:10px;	vertical-align: top;	font-size: small; 	color:#$color2;	border: solid 1px #$color1;	text-decoration:none;	display:block;}a.snav:hover{	text-indent:10px;	vertical-align: top;	font-size: small;	color:#$color2;	border: solid 1px #$color2;	text-decoration: none;	display:block;}a.bnav:link, a.bnav:active, a.bnav:visited, a.bnav:hover{	font-size: small;	text-decoration: none;	color: #$color2;}a:link, a:active, a:visited, a:hover{	text-decoration: underline;	color: #$color2;}hr{	width: 100%;	height: 1px;	color: #$color5;}div.bc{	color: #$color5;	font-weight: bold;	display: inline; }div.bold{	color: #$color2;	font-size: small;	font-weight: bold;	display: inline; }div.bnav{	color: #$color2;	font-size: small;	display: inline; }div.header{	font-family: Comic Sans MS, arial, verdana, sans-serif;	font-size: 50px; 	font-weight: bold;	display: block;	text-align: center;	vertical-align: top;	color: #$color4;}div.url{	font-family: Comic Sans MS, arial, verdana, sans-serif;	font-size: 20px;	font-weight: bold;	text-align: center;	display: block;	color: #$color4;}div.welcome{	font-size: small; 	color: #$color4;}div{	font-size: small;	color: #$color5;	display: inline;}</style>STYLESHEET;?>

when the td for my navigation links loads it decides it is just long enough for the links to fit in. then when the body td loads it makes it longer than the nav one. I have tried setting the hight for the tr but that didnt help eather. you can sometimes see what i am talking about at http://snowforts.ath.cx/test but i may be changing the script so you may not see the problem. I will try and post a screan print here (immage wont show up untill i take the screan print and upload it) test.jpghttp://snowforts.ath.cx/test.jpgas you can see the blue from the nav is shorter than the blue for the body section. I want them to be the same. i have had a scroll bar on the body section but it is annoying(at least i think) Many of my pages are different lengths and i dont want to go setting sizes differently for all of them. I could write a dynamic php script but i would rather try and get it to work without one.edit: how do i get the code boxes that scroll?

Link to comment
Share on other sites
SFB Member

SFB

Posted
  • Author
Posted

they are different!this is a compleatly different topic. If i didnt have rounded corners it wouldnt even relate to this. my problem would still occur without the rounded corners. my problem is with tables and divs more than rounded corners. I have rounded corners down but the div inside of the table is what is bothering me.

Link to comment
Share on other sites
Jonas Devoted Member

Jonas

Posted
Posted

Sorry about that then. Make sure you give your topics a distinct title.

Link to comment
Share on other sites
yoshida Member

yoshida

Posted
Posted

Good thing the problem has nothing to do with the code I gave you. :)You may want to try to have the navigation and the menu bar in one div, and the Home bar and the body in another one. One should float, so the other's aligned properly to it.Also, all elements from the rounded corners should be 'overflow: hidden;' , open the page in IE6 to see why.If you set a border left and right of each element you can try to fake anti-aliasing by giving the border an 'inbetween' color.

Link to comment
Share on other sites
yoshida Member

yoshida

Posted
Posted
I didnt see what was wrong with it in IE6  I want that scroll bar there if that is what you are talking about.

The rounded corners get twice as high in IE as in FF if you don't add overflow:hidden; (at least where I live they do).Anyways, the site design is neat and I think those corners really add something to the look and feel of your page.
Link to comment
Share on other sites
yoshida Member

yoshida

Posted
Posted

It looks great now, except the divs with the links and the main content look much higher in Firefox than in IE.You still might want to add an anti-aliasing by adding a border left and right of each corner element, and give it a bluewhite-ish color. IMO the sharp contrast between the border and the background color distract attention from the content.I still love what you did and how you did it. Nice job. :)

Link to comment
Share on other sites
yoshida Member

yoshida

Posted
Posted

Try 778bb0, that's the mathematical inbetween.If you're not entirely hapy with that keep punching color codes untill you are.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...