HTML5 & CSS3 the deep end - Post ID...

User 463058 Photo


Ambassador
1,072 posts

david wilson wrote:
my plan is to have 2 css files, one for css3 and one for css2 that way when eventually all browsers support the css3 I am using i can just remove the 'if' statements and go on.


Have you tried simply linking the css 2 style sheet followed by linking the css 3 style sheet, and seeing if browsers will use the right styling for there capabilities?
User 184085 Photo


Ambassador
1,707 posts

I thought of that, but the problem comes from the need to use both the html and body tags to render the gradient in IE so if i load the css2 file before the css3 file, the background image on the body tag overwrites the gradient in the css3 file.

However changing the css3 html gradient, to a body tag gradient, fixed that

thanks for the suggestion. :)

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/css3styles.css" type="text/css" media="screen" />
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 184085 Photo


Ambassador
1,707 posts

So this morning was interesting.

I threw in a rotating header using the PHP snippet but the header changed the background

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-7.jpg

The gradient expanded, my first thought was that I applied the gradient to the body tag but changing it back to the html tag rendered the same results, so I pondered over a coffee.

Some pondering and caffeine clued me to the fact that my gradient is based on percentage sizing and as I add elements to the page, the length grows and therefor the gradient expands.

I guess this would be OK if you were applying a gradient to multi-height items as a class and wanted varying effects, but for the background the constantly changing background with different height pages would be un-wanted (at least to me).

So now the css3 is:

body {background: -webkit-gradient(linear, left top, left bottom, from(#91918F), to(#CDCDCD), color-stop( 100px, #CDCDCD), color-stop(0, #91918F)); background-image: -moz-linear-gradient(top, #91918F, #CDCDCD 100px); background-repeat: repeat-x; background-color: #CDCDCD;}


http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-8.jpg

the header css is:

.page-header {display:block; margin-left:auto; margin-right:auto; width:900px; height:202px; }
.page-header h1 {display:none; }


and page code:

<header class="page-header">
<?php include("content/page_header.php"); ?>
<h1>Page Header</h1>
</header>


I think i will have a bagel for lunch :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 184085 Photo


Ambassador
1,707 posts

So I revitalized the gradient as a class, and went to percentages 50%, as well as changed the shadow to a class and added another shadow class with 10px radius

updated css;

.shaddow25 { -moz-box-shadow: 5px 5px 9px #91918F; -moz-border-radius-topright: 25px; -moz-border-radius-bottomright: 25px; -moz-border-radius-bottomleft: 25px; -webkit-box-shadow: 5px 5px 7px #91918F; -webkit-border-top-right-radius: 25px; -webkit-border-bottom-right-radius: 25px; -webkit-border-bottom-left-radius: 25px; }

.shaddow10 { -moz-box-shadow: 5px 3px 9px #91918F; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; -webkit-box-shadow: 5px 3px 9px #91918F; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; }

.gradient50 {background: -webkit-gradient(linear, left top, left bottom, from(#91918F), to(#CDCDCD), color-stop( 0.5, #CDCDCD), color-stop(0, #91918F)); background-image: -moz-linear-gradient(top, #91918F, #CDCDCD 50%); background-repeat: repeat-x; background-color: #CDCDCD;}


so to tackle the nav section;

#site-nav {display:block; margin-top:15px; margin-left:auto; margin-right:auto; width:890px; height:25px; border-top: 1px solid #91918F; border-right: 3px solid #91918F; border-bottom: 1px solid #91918F; border-left: .5px solid #91918F; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#site-nav h2 {display:none; }


and code;
<nav id="site-nav" class="shaddow10 gradient50" >
<h2>Site Navigation</h2>
<ul>
<li></li>
</ul>
</nav>


gives a very respectable nav bar that look acrylic :)

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-9.jpg

all this blows chunks right now in IE and Opera :( will need to find their own specific solutions)

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-10.jpg

so it's 2pm, and I think this is a good start to end the week :)
Attachments:
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 184085 Photo


Ambassador
1,707 posts

OK, next step is to go online and complete the menu so at http://dev.flyvifc.org is the current version of the HTML5 page

After more reading on the weekend I got the answer to overcome the growing gradient issue on the HTML tag, is is a simple fix, feel a bit silly actually :)

create a class with a set height and gradient.

current css, code and menu stuff is up, and scratching my head as to why the menu won't center in the nav container.

Off to coffee, and think, any suggestions would be appreciated though :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 184085 Photo


Ambassador
1,707 posts

Thanks Jon, menu is lean and mean now :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 184085 Photo


Ambassador
1,707 posts

Most of the page is rendered now, just have to work on the middle part, the column part which is always challenging, lets see how HTML5 does here :)

So far the site is 100% CoffeeCup and Photoshop

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-11.jpg
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 184085 Photo


Ambassador
1,707 posts

So here we are so far;

HTML5
<!DOCTYPE html>
<html lang="en" class="background">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Mon, 19 Jul 2010 13:51:52 GMT">
<meta name="author" content="David Wilson" />
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="revised" content="" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/css2styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="menu/css/vifc-menu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/css3styles.css" type="text/css" media="screen" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Virtual International Flying Club - Welcome Friends!</title>
<style type="text/css">

</style>

</head>
<body>
<div id="page-box" class="shadow curved" >
<header id="page-header" class="shadow" ><?php include("content/page_header.php"); ?><h1>Virtual International Flying Club, for the enjoyment of virtual flight and building of friendships</h1></header>
<nav id="site-nav" class="shadow" ><h2>Site Navigation</h2><?php include("menu/menu.html"); ?></nav>

<div id="content">

<div id="main-column" class="curved">
<section id="main-article"><?php include("content/main_page.html"); ?></section>
<section id="blog"></section>
</div><!-- close main-column-->

<div id="second-column" class="curved">
<section id="event-calendar"><?php include("content/calendar.html"); ?></section>
<section id="server-status"><?php include("content/teamspeak.html"); ?></section>
<section id="vatsim-link"><?php include("content/vatsim.html"); ?></section>
</div><!-- close second-column-->

</div><!-- close content -->

<footer id="page-footer"><?php include("footer/footer.php"); ?><h4>Footer</h4></footer>

</div><!-- close page-box -->

</body>
</html>


CSS3
/* css3styles.css */

/* =page layout */
.background {height: 500px; background: -moz-linear-gradient(top, #91918F 0%, #fff 100%); background: -webkit-gradient(linear, left top, left bottom, from(#91918F), to(#fff)); background-repeat:repeat-x;}
#page-box {width:910px; border-style:solid; border-color:#91918F; border-width:1px; margin-top:5px; margin-left:auto; margin-right:auto; background-color:#FFFFFF; }
#page-header {display:block; padding-top:5px; margin-left:auto; margin-right:auto; width:900px; height:225px; }
#page-header h1 {display:none;}


#content {width:900px; margin-left:auto; margin-right:auto; margin-top:15px; overflow:auto; }

#main-column {width:670px; float:left; padding:5px;}
#second-column {width:200px; float:left; margin-left:5px; padding:5px; background: rgba(251, 228, 81, 0.4);}


#page-footer {width:98%; position:relative; margin-left:auto; margin-right:auto; clear:both; }
#page-footer h4 {display:none; }
#page-footer p {padding-bottom:5px; line-height:.95em; letter-spacing:.05em; text-align:center; color:#0103FF; font-size: .9em; font-weight:bold ;font-variant:small-caps;}
#page-footer ul {margin-top:10px; text-align:center; }
#page-footer ul li {display:inline; }
#page-footer ul li a:link, #page-footer ul li a:visited {text-decoration:none; line-height:.95em; letter-spacing:.05em; text-align:center; color:#9C0001; font-size: .8em ; font-weight:bold; font-variant:small-caps; }
#page-footer ul li a:hover {color:#FFFFFF; background-color:#9C0001; }

/* =menu */
#site-nav {display:block; margin-top:15px; margin-left:auto; margin-right:auto; width:882px; height:25px; background-image:url('../images/menu_background.png'); background-repeat:repeat-x; }
#site-nav h2 {display:none; }
.vifc-menu li {background-image:url('../images/menu_background.png'); background-repeat:repeat-x; }
.vifc-menu a {border-top:none; border-bottom:none; padding:4px 5px 6px 5px; }
.vifc-menu li:hover, .vifc-menu li.sfHover,
.vifc-menu a:focus, .vifc-menu a:hover, .vifc-menu a:active {background:#9C0001;}
.vifc-menu a:hover, .vifc-menu a:active {color:#FBE451;}
.vifc-menu li li a:hover, .vifc-menu li li a:active, .vifc-menu li li a:focus {color: #FBE451;}

/* =section */
#main-article h2 {margin-bottom:15px; background: rgba(1, 3, 255, 0.4); font-style:italic; font-weight:bold; color:#FFFFFF; font-size:1.25em; letter-spacing:.01em; padding:5px 0 5px 5px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; -moz-box-shadow: 4px 5px 9px #91918F; -webkit-box-shadow: 4px 5px 7px #91918F; }
#main-article p {text-align:left; color:#9C0001; line-height:125%; margin-bottom:.5em; letter-spacing:.05em; }
#main-article a {text-decoration: inherit; font-style: inherit; color: inherit;}
#main-article a:link, article a:visited {border:none; font-weight:bold; border-bottom:thin; border-bottom-style:dotted; text-decoration:none; font-style:italic; color:#9C0001;}
#main-article a:hover {text-decoration: none; border-bottom:dashed; color: #0103FF;}
#main-article ul {list-style-type:none; list-style-position:outside; color:#0103FF; padding:0; margin:0;}
#main-article ul li {text-align:left; list-style-image:url('../images/airplane_bullet.png'); margin-left:3em; text-height:1.05em; font-weight:bold; text-transform:capitalize; padding: 0px 0px 3px 3px;}
#main-article header { }
/* =specialties */
.shadow {-moz-box-shadow: 4px 5px 9px #91918F; -webkit-box-shadow: 4px 5px 7px #91918F;}
#teamspeak { margin-bottom:1.5em; text-align:left;}
span.nolink a, span.nolink a:visited, span.nolink a:focus, span.nolink a:hover {border-bottom: none; font-weight:normal; font-variant:small-caps; }
img.center {display:block; margin-left:auto; margin-right:auto;}
.curved { -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}


CSS2
/* css2styles.css */

/* css2 styles */
html {background-color:#FFFFFF; background-image:url('../images/html_background.png'); background-repeat:repeat-x; }

#second-column {background:#FDF3B3;}
#main-article h2{background:#9798FF; }


and the current page
http://dev.flyvifc.org/

so now, the to do list is to convert the existing page chunks into 'articles'
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 364143 Photo


Guest
5,410 posts

Looking good, David. :)
CoffeeCup... Yeah, they are the best!
User 184085 Photo


Ambassador
1,707 posts

tweak the <UL> spacing and padding
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.