Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
david wilson
Ambassador
1,707 posts
thanks Tom
david wilson
Ambassador
1,707 posts
OK, I've got a wondering going on here;
given the page http://dev.flyvifc.org/about_us.php
I was thinking of expanding the first column to 100% and tucking the second column inside with an <ASIDE> tag to see of the long pages will wrap around the <ASIDE> eventually expanding to full width?
This may take a little finagling, what do you think, am I on the wrong track??
given the page http://dev.flyvifc.org/about_us.php
I was thinking of expanding the first column to 100% and tucking the second column inside with an <ASIDE> tag to see of the long pages will wrap around the <ASIDE> eventually expanding to full width?
This may take a little finagling, what do you think, am I on the wrong track??
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
sstovert@satx.rr.com
Guest
5,410 posts
Give it a go. It won't hurt to try <ASIDE> from it not working properly. 
CoffeeCup... Yeah, they are the best!
david wilson
Ambassador
1,707 posts
Tom wrote:
Give it a go. It won't hurt to try <ASIDE> from it not working properly.
Give it a go. It won't hurt to try <ASIDE> from it not working properly.
I take it you had Wheaties for breakfast
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
david wilson
Ambassador
1,707 posts
No luck so far
I'm using
<div id="main-column">
<section>
<article id="aside-article">
<aside>
</aside>
</article>
</section>
</div>
css:
#main-column {background:#80FF80; width:880px; margin-left:auto; margin-right:auto;}
#aside-article {width:204px; position:relative; float:right; margin-top:2px; background:#00FFFF; }
I'm using
<div id="main-column">
<section>
<article id="aside-article">
<aside>
</aside>
</article>
</section>
</div>
css:
#main-column {background:#80FF80; width:880px; margin-left:auto; margin-right:auto;}
#aside-article {width:204px; position:relative; float:right; margin-top:2px; background:#00FFFF; }
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
david wilson
Ambassador
1,707 posts
OK after some tweaking, playing, crying, and drinking here is my solution, and hell it even works
the new css added
and the special work around for IE
effectively now this is a template that I can swap out PHP includes to build new pages rapidly.
My vote is HTML5 and CSS3 is good to go and once the W3C makes it official some of the CSS code will clean up a bit, but dive right in and start using it now.
site is dev.flyvifc.org more pages coming up soon.
<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="one-column">
<section id="main-article">
<aside id="aside-box" class="curved">
<article id="event-calendar"><?php include("content/calendar.html"); ?></article>
<article id="server-status"><?php include("content/teamspeak.html"); ?></article>
<article id="vatsim-link"><?php include("content/vatsim.html"); ?></article>
</aside><!-- close second-column-->
<?php include("content/main_page.html"); ?>
</section>
<section id="blog">
<?php include("content/news_blog.html"); ?>
</section>
</div><!-- close one-column-->
</div><!-- close content -->
<footer id="page-footer"><?php include("footer/footer.php"); ?><h4>Footer</h4></footer>
</div><!-- close page-box -->
</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="one-column">
<section id="main-article">
<aside id="aside-box" class="curved">
<article id="event-calendar"><?php include("content/calendar.html"); ?></article>
<article id="server-status"><?php include("content/teamspeak.html"); ?></article>
<article id="vatsim-link"><?php include("content/vatsim.html"); ?></article>
</aside><!-- close second-column-->
<?php include("content/main_page.html"); ?>
</section>
<section id="blog">
<?php include("content/news_blog.html"); ?>
</section>
</div><!-- close one-column-->
</div><!-- close content -->
<footer id="page-footer"><?php include("footer/footer.php"); ?><h4>Footer</h4></footer>
</div><!-- close page-box -->
</body>
the new css added
#one-column {width:880px; margin-left:auto; margin-right:auto; }
#aside-box {width:200px; float:right; margin-left:5px; margin-top:5px; padding:5px; background: rgba(251, 228, 81, 0.4);}
#aside-box {width:200px; float:right; margin-left:5px; margin-top:5px; padding:5px; background: rgba(251, 228, 81, 0.4);}
and the special work around for IE
#aside-box {background:#FDF3B3;}
effectively now this is a template that I can swap out PHP includes to build new pages rapidly.
My vote is HTML5 and CSS3 is good to go and once the W3C makes it official some of the CSS code will clean up a bit, but dive right in and start using it now.
site is dev.flyvifc.org more pages coming up soon.
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Inger
Senior Advisor
14,456 posts
David, I've been reading this with great interest. I'll be working on making myself a bit more acquainted with html5 and css3 over the next couple of weeks, so maybe I can even participate in this discussion 
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
david wilson
Ambassador
1,707 posts
By all means participate, the more the merrier as then we learn from each other, the best way
so here is onje to get started with, it is probably a simple solution that is escaping me at the moment.
geven the code:
why does not the css .map-background {background:#FF8040; } color just the article with the class map-background?
I've tried variations on the class name but the lowest down i can get is
#content or #content #one-column is as far as i can get the background to follow.
so here is onje to get started with, it is probably a simple solution that is escaping me at the moment.
geven the code:
<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="one-column" class="">
<section id="main-article">
<aside id="aside-box" class="curved">
<article id="event-calendar"><?php include("content/calendar.html"); ?></article>
<article id="server-status"><?php include("content/teamspeak.html"); ?></article>
<article id="vatsim-link"><?php include("content/vatsim.html"); ?></article>
</aside><!-- close second-column-->
<article class="map-background"><?php include("content/hq.html"); ?></article>
</section>
</div><!-- close one-column-->
</div><!-- close content -->
<footer id="page-footer"><?php include("footer/footer.php"); ?><h4>Footer</h4></footer>
</div><!-- close page-box -->
</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="one-column" class="">
<section id="main-article">
<aside id="aside-box" class="curved">
<article id="event-calendar"><?php include("content/calendar.html"); ?></article>
<article id="server-status"><?php include("content/teamspeak.html"); ?></article>
<article id="vatsim-link"><?php include("content/vatsim.html"); ?></article>
</aside><!-- close second-column-->
<article class="map-background"><?php include("content/hq.html"); ?></article>
</section>
</div><!-- close one-column-->
</div><!-- close content -->
<footer id="page-footer"><?php include("footer/footer.php"); ?><h4>Footer</h4></footer>
</div><!-- close page-box -->
</body>
why does not the css .map-background {background:#FF8040; } color just the article with the class map-background?
I've tried variations on the class name but the lowest down i can get is
#content or #content #one-column is as far as i can get the background to follow.
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
david wilson
Ambassador
1,707 posts
Everybody sit down, I'm going to say something and I don't want anyone to fall over....
"Whew... Thanks for IE, it solved my problem... well indirectly"
as soon as I saw the page in IE
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-12.jpg
I noticed the background was being applied to the text, not the space that the article resides in, so of course I needed to put the background in a column DIV,
if IE hadn't allowed for images to be part of the text line I would have muddled over this one for some time.
OK, everyone can now resume standing, but slowly, let's not have anyone passing out
"Whew... Thanks for IE, it solved my problem... well indirectly"
as soon as I saw the page in IE
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-12.jpg
I noticed the background was being applied to the text, not the space that the article resides in, so of course I needed to put the background in a column DIV,
if IE hadn't allowed for images to be part of the text line I would have muddled over this one for some time.
OK, everyone can now resume standing, but slowly, let's not have anyone passing out
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Lex
Registered User
2 posts
i purchased it (html editor 2010 SE, ftp direct etc., ) already, however, no one has been able to apprise me of how to create a background theme. do i have to keep buying themes for a background ? can anyone advise me as to how i can create a background starting with a new .html page ? i need instructions on where to place the "html code" for the theme to display
thanks.
thanks.
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.
