:: a z y u r e . c o m :: » css http://www.azyure.com the home of the cass Sun, 25 Jul 2010 19:02:00 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 background transparency on div with solid text – all browsers http://www.azyure.com/2010/03/24/background-transparency-on-div-with-solid-text-all-browsers/ http://www.azyure.com/2010/03/24/background-transparency-on-div-with-solid-text-all-browsers/#comments Wed, 24 Mar 2010 10:50:44 +0000 azyure http://www.azyure.com/?p=434 Text in transparent box – all browsers IE6 / IE7 / FF/ Safari / Opera

The css looks like this:

and the html looks like this:

This is some text that is placed in the transparent box.

This came from: http://www.w3schools.com/Css/css_image_transparency.asp

]]> http://www.azyure.com/2010/03/24/background-transparency-on-div-with-solid-text-all-browsers/feed/ 0 accessibile css styled headings h1/h2/h3’s and menu navigation http://www.azyure.com/2009/07/14/accessibile-css-styles/ http://www.azyure.com/2009/07/14/accessibile-css-styles/#comments Tue, 14 Jul 2009 14:57:49 +0000 azyure http://www.azyure.com/?p=355 This is for heading/navigation etc.  It allows you to style images so they degrade gracefully (if the image is broken etc – it will show the text)

Is accessible!

Can be used on h1/h2/h3 etc for headings with a div/span or with an ul/li/a tag for a menu/navigation – can combine lots of combinations

H1 example

<div id=”contentMain”>

<h1 class=”heading”>Heading</h1>

</div>

#content h1
{
display:block;
height: 0px;
padding-top:23px; (this is the height of the image)
overflow:hidden;
color: #444444;
}
#contentMain h1.heading
{
background:transparent url(~/url/to/the/image/heading.gif) no-repeat left top;
}

<ul id=”mainMenu”>
<li id=”home”><a href=”home.htm”>Home</a></li>
</ul>

Active Page
<ul id=”mainMenu”>
<li id=”home”><a href=”home.htm” class=”highlighted”>Home</a></li>
</ul>

#mainMenu
{
float: left;
list-style: none;
overflow: hidden;
padding-top: 40px;
text-decoration: none;
}

#mainMenu #home a
{
display:block;
height: 40px;
width: 100px;
background: url(~/url/to/the/image/Home_Off.png);
background-repeat: no-repeat;
}
#mainMenu #home a:hover, #mainMenu #home .highlighed (for when you roll over & on the active page)
{
display:block;
height: 40px;
width: 100px;
background: url(~/url/to/the/image/Home_Off.png);
background-repeat: no-repeat;
}

]]> http://www.azyure.com/2009/07/14/accessibile-css-styles/feed/ 0 Center align site using CSS http://www.azyure.com/2009/06/17/center-align-site-using-css/ http://www.azyure.com/2009/06/17/center-align-site-using-css/#comments Wed, 17 Jun 2009 08:25:35 +0000 azyure http://www.azyure.com/?p=344 HTML bit

<body>
<div id="wrapper">
**Rest of site goes here**
</div>
</body>

CSS bit

body {
text-align: center;
}

#container {
margin: 0 auto;
width: ***px;
}

]]> http://www.azyure.com/2009/06/17/center-align-site-using-css/feed/ 0