Wiki page for country - web page markup and styling now available for review

Sun Jul 25 21:38:22 UTC 2010

----- Original Message ----
> From: Máirín Duffy <duffy at fedoraproject.org>
> To: advisory-board at lists.fedoraproject.org
> Cc: design-team at lists.fedoraproject.org; websites at lists.fedoraproject.org
> Sent: Mon, 12 July, 2010 19:48:04
> Subject: Re: Wiki page for country
> 
> On Thu, 2010-07-08 at 22:00 -0500, Matt Domsch wrote:
> > I built a very  minimal top-level fedoracommunity.org and
> > www.fedoracommunity.org web  page now, linking to the existing
> > sub-domains.  It's in the  fedora-web module on fedorahosted, so anyone
> > on that team can update it,  and _please_, make it look prettier than
> > that hackjob I've  done.
> 
> So Sijis converted it to the 960.gs grid we've been looking at  using for
> the upcoming new www.fpo :
> 
> http://sijis.fedorapeople.org/mockup/fedoracommunity.org/
> 
> I did a  mockup today too of how it might be improved:
> 
>http://duffy.fedorapeople.org/webdesign/fedoracommunity.org/fedoracommunity.org.2.png
>
>
>
>
>g

I was very impressed by the design and so had a go and turning it into a web 
page:

http://astavale.co.uk/fedoracommunity/

I know the design has changed a bit since then, but the bulk of the work on the 
page is done and any amendments should hopefully be fairly quick.

The page is a fluid layout using floats and margins. It is optimized for 
1024x768, but will display fine at 800x480. The columns of links reduce from one 

to two. The columns also increase as the page size increase - try it with 
holding CTRL and pressing minus in Firefox. 930.gs seems to suffer a bit from 
divitis (lots of divs in the markup) so not sure it is the best solution. The 
code I've generated for this page is inline below for people to comment on and 
review.

I've put a lot of work in to the page to make it degrade gracefully, the only 
section that needs probably a bit more work is the in page navigation bar. It 
doesn't cope with two lines very well. Otherwise it works very well and the 
markup is clean. This will help with maintenance. A new link can be added just 
by copying a list item and amending the text. The items flow from right to left 
and down. Creating a down then on to another column on the right flow is more 
complex and less flexible. So it is a compromise.

The first China link is the same as the Bangladesh link, this was in the mockup 
too. Can someone please correct this.

The styling and markup are attached inline below for people to make comments:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd";;;>
<html>
<head>
<style type="text/css">
body { margin: 1em 1em 1em 130px;
    font-family: arial, helvetica, sans-serif;
    }
h1 { background: url( 'logo_fedoracommunity.org.png' ) no-repeat top left;
    text-indent: -900px;
    height: 80px;
    width: 220px;
    float: left;
    }
h2 { color: #6c91c7;
    text-transform: uppercase;
    font-size: 1em;
    float: left;
    padding-top: 1em;
    }
ul { list-style: none; }
a { text-decoration: none; }

.site_nav { float: right;
    border-top: solid 1px #babdb6;
    border-bottom: solid 1px #babdb6;
    border-left: solid 1px #babdb6;
    margin: 1em 1em 0 0;
    padding: 0;
    }
.site_nav li { float: left;
    margin: 0;
    padding: 0;
    }
.site_nav a { display: block;
    width: 7em;
    background: #e0e2df;
    text-transform: uppercase;
    text-align: center;
    color: #7f817d;
    padding: 0.25em;
    border-right: solid 1px #babdb6;
    }
.site_nav a:hover, .site_nav a:focus { background: #cccdca;
    color: #6a8ec1;
    }

/* ~~~~~~ Start of page specific styling. If moved to external site stylesheet 
may need to prefix some with #fedoracommunity_home  ~~~~~~~~~~ */

/* Introductory paragraphs and image */
#intro { clear: both;
    float: left;
    width: 98%;
    background: url( 'blue_hatching.png' ) repeat;
    padding: 0;
    margin: 0;
    }
#intro img { float: left; }
#intro p { color: white;
    font-size: 110%;
    margin: 1em 1em 0 450px;
    }

/* Layout and styling for in-page navigation */
#page_nav { margin: 0;
    padding: 0;
    clear: both;
    }
#page_nav li { float: left;
    line-height: 70px;
    margin: 0 0 2em 0;
    }
#page_nav a { display: block;
    background: url( 'inpage_shade.png') repeat-x;
    color: #294172;
    font-weight: bold;
    padding-left: 65px;
    }
#page_nav a:hover, #page_nav a:hover { background: url( 
'inpage_shade_active.png') repeat-x;
    color: #eeeeec;
    }
#aa_inpage { border-top: solid 6px #79db32;
    background: url( 'tab_label-asia.png' ) no-repeat 5px 15px;
    width: 25%;
    }
#ame_inpage { border-top: solid 6px #ad7fa8;
    background: url( 'tab_label-africa.png' ) no-repeat 5px 15px;
    width: 35%;
    }
#a_inpage { border-top: solid 6px #e59728;
    background: url( 'tab_label-americas.png' ) no-repeat 5px 15px;
    width: 20%;
    }
#e_inpage { border-top: solid 6px #db3279;
    background: url( 'tab_label-europe.png' ) no-repeat 5px 15px;
    width: 18%;
    }

/* Layout of regional links list.
    Maintenance issue: If a new line of text added causes layout to be jumbled 
increase width in '.links li { width: XXem'. Any increase likely to cause list 
to be display in one column at 1024x768.
    */
.links { clear: both;
    float: left; /* Give height to UL container as only LI floats inside */
    margin: 0 0 4em 0;
    padding: 0;
    /* Fix for IE to make container show two columns */
    width: 100%;
    }
.links li { width: 25.5em;
    float: left;
    margin: 0;
    padding: 1em 0 1em 1em;
    }
.links h4 { margin: 0; }
.links p { margin: 0;
    font-size: 90%;
    }
.links li a { display: block;
    padding: 0.5em;
    color: #294172;
    margin: 0 1em 0 0;
    }

/* Colours for Asia and Australia section */
#aalinks li { background: #fdeedf; }
#aalinks a { border-left: solid #fcdfc3 6em; }
#aalinks a:hover, #aalinks a:focus { background: #fcdfc3;    }

/* Colours for Africa and Middle East section */
#amelinks li { background: #f0fbe5; }
#amelinks a { border-left: solid #e0f6cb 6em; }
#amelinks a:hover, #amelinks a:focus { background: #e0f6cb;    }

/* Colours for Americas section */
#alinks li { background: #f4eef4; }
#alinks a { border-left: solid #e4dbe4 6em; }
#alinks a:hover, #alinks a:focus { background: #e4dbe4;    }

/* Colours for Europe section */
#elinks li { background: #fce4e4; }
#elinks a { border-left: solid #f6c7c7 6em; }
#elinks a:hover, #elinks a:focus { background: #f6c7c7;    }

/* Positioning and background images for section headings */
h3 { font-size: 2em;
    color: #888a85;
    float: left;
    height: 170px;
    padding: 0 1em 0 120px;
    margin: 0 0 -120px -120px;
    /* Fix for IE overflow hidden with negative margin */
    position: relative;
    /* Fix for IE negative margin doubled on float left */
    display: inline;
    /* Fix for IE to get headings to flow down the page */
    clear: left;
    }
#asiaaustralia { background: url( 'aaheading.png' ) no-repeat top left;    }
#africamiddleeast { background: url( 'ameheading.png' ) no-repeat top left; }
#americas { background: url( 'aheading.png' ) no-repeat top left;    }
#europe { background: url( 'eheading.png' ) no-repeat top left; }

.top { float: left;
    padding-right: 1em;
    color: #3c6eb4;
    background: url( 'to_top.png' ) no-repeat right top;
    }
/* Needed to stop all the 'Back to tops' floating up to the first secion. Needed 

when test with IE6 */
.ie6_float_fix { clear: both; }

/* Styling for more info on Fedora Project paragraph */
.more { clear: both;
    margin: 0 0 2em 0;
    color: #888a85;
    font-size: 110%;
    }
.more a { display: block;
    color: #3c6fb5;
    font-weight: bold;
    margin: 0.25em 0 1em 0;
    }

/* Styling for email address to add a new entry */
.contact { clear: both;
    margin: 0 0 2em 0;
    color: #888a85;
    }
.contact a { color: #3c6fb5;
    font-weight: bold;
    }

</style>
<title>Region Specific Fedora Websites - fedoracommunity.org</title>
<meta name="description" content="List of region specific Fedora Project 
websites.">
</head>
<body id="fedoracommunity_home">
<ul class="site_nav">
<li><a href="http://fedoraproject.org/">Home</a></li>
<li><a href="http://fedoraproject.org/get-fedora">Get Fedora</a></li>
<li><a href="http://fedoraproject.org/get-help">Help</a></li>
</ul>
<h1>FedoraCommunity.org</h1>
<h2>Region Specific Fedora Websites</h2>

<div id="intro">
<img src="worldmap.png" width="419" height="214" alt="Map of the world">
<p>Fedora Project contributors in various countries maintain their own region 
specific content. Each site is solely responsible for the content they post.</p>
<p>A list of region specific websites is available below.</p>
</div>

<ul id="page_nav">
<li id="aa_inpage"><a href="#asiaaustralia">Asia &amp; Australia</a></li>
<li id="ame_inpage"><a href="#africamiddleeast">Africa &amp; the Middle 
East</a></li>
<li id="a_inpage"><a href="#americas">the Americas</a></li>
<li id="e_inpage"><a href="#europe">Europe</a></li>
</ul>

<h3 id="asiaaustralia">Asia &amp; Australia</h3>
<p class="top"><a href="#fedoracommunity_home">Back to top</a></p>
<ul class="links" id="aalinks">
<li><a href="http://bd.fedoracommunity.org/";;;>
<h4>Bangladesh</h4>
<p>Fedora Bangladesh</p>
<p>http://bd.fedoracommunity.org/</p>
</a>
</li>
<li><a href="http://bd.fedoracommunity.org/";;;>
<h4>China</h4>
<p>Fedora Chinese User Group</p>
<p>http://bd.fedoracommunity.org/</p>
</a>
</li>
<li><a href="http://www.fedorachina.cn/";;;>
<h4>China</h4>
<p>Fedora China</p>
<p>http://www.fedorachina.cn/</p>
</a>
</li>
<li><a href="http://www.fedorachina.org/";;;>
<h4>China</h4>
<p>Fedora Chinese User Group Forum</p>
<p>http://www.fedorachina.org/</p>
</a>
</li>
<li><a href="http://oss.poyo.jp/fedora-ja/planet/";;;>
<h4>Japan</h4>
<p>Fedora Japanese Planet</p>
<p>http://oss.poyo.jp/fedora-ja/planet/</p>
</a>
</li>
<li><a href="http://fedorasrv.com/";;;>
<h4>Japan</h4>
<p>Fedora Japan</p>
<p>http://fedorasrv.com/</p>
</a>
</li>
<li><a href="http://ph.fedoracommunity.org/";;;>
<h4>Phillipines</h4>
<p>Fedora Phillipines</p>
<p>http://ph.fedoracommunity.org/</p>
</a>
</li>
<li><a href="http://fedora.tw/";;;>
<h4>Taiwan</h4>
<p>Fedora Taiwan</p>
<p>http://fedora.tw/</p>
</a>
</li>
<li><a href="http://vn.fedoracommunity.org/";;;>
<h4>Vietnam</h4>
<p>Fedora Vietnam</p>
<p>http://vn.fedoracommunity.org/</p>
</a>
</li>
</ul>

<div class="ie6_float_fix"></div>
<h3 id="africamiddleeast">Africa &amp; the Middle East</h3>
<p class="top"><a href="#fedoracommunity_home">Back to top</a></p>
<ul class="links" id="amelinks">
<li><a href="http://www.fedoraproject.ir/";;;>
<h4>Iran</h4>
<p>Fedora Iran</p>
<p>http://www.fedoraproject.ir/</p>
</a>
</li>
<li><a href="http://www.linuxguide.org.il/fedora/";;;>
<h4>Israel</h4>
<p>Fedora Israel</p>
<p>http://www.linuxguide.org.il/fedora/</p>
</a>
</li>
<li><a href="http://fedora-tunisia.org/";;;>
<h4>Tunisia</h4>
<p>Fedora Tunisia</p>
<p>http://fedora-tunisia.org/</p>
</a>
</li>
</ul>

<div class="ie6_float_fix"></div>
<h3 id="americas">the Americas: North and South America</h3>
<p class="top"><a href="#fedoracommunity_home">Back to top</a></p>
<ul class="links" id="alinks">
<li><a href="http://proyectofedora.org/argentina/";;;>
<h4>Argentina</h4>
<p>Communidad Usuarios Argentina</p>
<p>http://proyectofedora.org/argentina/</p>
</a>
</li>
<li><a href="http://www.projetofedora.org/";;;>
<h4>Brazil</h4>
<p>Projeto Fedora Brasil</p>
<p>http://www.projetofedora.org/</p>
</a>
</li>
<li><a href="http://www.fedora.org.br/";;;>
<h4>Brazil</h4>
<p>Comunidade ñao oficial Brasileira</p>
<p>http://www.fedora.org.br/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.cl/";;;>
<h4>Chile</h4>
<p>Proyecto Fedora Chile</p>
<p>http://www.proyectofedora.cl/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.org/colombia/";;;>
<h4>Colombia</h4>
<p>Fedora Colombia</p>
<p>http://www.proyectofedora.org/colombia/</p>
</a>
</li>
<li><a href="http://fedora.org.sv/";;;>
<h4>El Salvador</h4>
<p>Fedora El Salvador</p>
<p>http://fedora.org.sv/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.org/";;;>
<h4>Latin America</h4>
<p>Proyecto Fedora Latinoamerica</p>
<p>http://www.proyectofedora.org/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.org/mexico/";;;>
<h4>México</h4>
<p>Fedora México</p>
<p>http://www.proyectofedora.org/mexico/</p>
</a>
</li>
<li><a href="http://fedora.org.ni/";;;>
<h4>Nicaragua</h4>
<p>Fedora Nicaragua</p>
<p>http://fedora.org.ni/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.org/panama/";;;>
<h4>Panamá</h4>
<p>Comunidad Linux Panamá</p>
<p>http://www.proyectofedora.org/panama/</p>
</a>
</li>
<li><a href="http://proyectofedora.org/peru/";;;>
<h4>Peru</h4>
<p>Fedora Peru</p>
<p>http://proyectofedora.org/peru/</p>
</a>
</li>
<li><a href="http://fedora-uy.org/";;;>
<h4>Uruguay</h4>
<p>Fedora UY</p>
<p>http://fedora-uy.org/</p>
</a>
</li>
<li><a href="http://www.fedora-ve.org/";;;>
<h4>Venezuala</h4>
<p>Fedora Venezuala</p>
<p>http://www.fedora-ve.org/</p>
</a>
</li>
</ul>

<div class="ie6_float_fix"></div>
<h3 id="europe">Europe</h3>
<p class="top"><a href="#fedoracommunity_home">Back to top</a></p>
<ul class="links" id="elinks">
<li><a href="http://be.fedoracommunity.org/";;;>
<h4>Belgium</h4>
<p>Fedora Community Belgium</p>
<p>http://be.fedoracommunity.org/</p>
</a>
</li>
<li><a href="http://www.fedora.cz/";;;>
<h4>Czech Republic</h4>
<p>Fedora České Project</p>
<p>http://www.fedora.cz/</p>
</a>
</li>
<li><a href="http://www.fedora-fr.org/";;;>
<h4>France</h4>
<p>Communauté Francophone Fedora</p>
<p>http://www.fedora-fr.org/</p>
</a>
</li>
<li><a href="http://www.fedorausers.de/";;;>
<h4>Germany</h4>
<p>Unofficial German Fedora Portal</p>
<p>http://www.fedorausers.de/</p>
</a>
</li>
<li><a href="http://www.fedoraonline.it/";;;>
<h4>Italy</h4>
<p>Il Portale Italiano degli utenti di Fedora</p>
<p>http://www.fedoraonline.it/</p>
</a>
</li>
<li><a href="http://www.fedora-linux.nl/";;;>
<h4>Netherlands</h4>
<p>Fedora-Linux.nl</p>
<p>http://www.fedora-linux.nl/</p>
</a>
</li>
<li><a href="http://www.fedora.pl/";;;>
<h4>Poland</h4>
<p>Fedora.pl</p>
<p>http://www.fedora.pl/</p>
</a>
</li>
<li><a href="http://www.fedoraproject.ro/";;;>
<h4>Romania</h4>
<p>Comunitatea Românească Fedora</p>
<p>http://www.fedoraproject.ro/</p>
</a>
</li>
<li><a href="http://fedoramd.org/";;;>
<h4>Russia</h4>
<p>Russia MD</p>
<p>http://fedoramd.org/</p>
</a>
</li>
<li><a href="http://www.fedora-es.com/";;;>
<h4>Spain</h4>
<p>Comunidad Fedora en Castellano</p>
<p>http://www.fedora-es.com/</p>
</a>
</li>
<li><a href="http://uk.fedoracommunity.org/";;;>
<h4>United Kingdom</h4>
<p>Fedora UK</p>
<p>http://uk.fedoracommunity.org/</p>
</a>
</li>
</ul>

<p class="more">There's more to Fedora. Visit the official Fedora project 
website at: <a 
href="http://www.fedoraproject.org/">http://www.fedoraproject.org/</a></p>

<p class="contact">Want to add your local community's Fedora website to this 
directory? <a href="mailto:webmaster at fedoraproject.org?subject=Please add our 
local community website to FedoraCommunity.org directory">Email the Fedora 
Websites team.</a></p>

</body>
</html>