centring float left elements

HTML No Comments »

I wanted to center the divs which are floated left.

I searched the web and found this and it is working for me.

http://stackoverflow.com/questions/1084666/how-can-i-center-the-contents-of-a-div-that-float-left

This is just a copy for my reference even if that content is getting deleted future.

Besides, the following is the code which does the exact trick which is referred in the above stackoverflow url.

http://www.pmob.co.uk/temp/centred-float4.htm

<style type="text/css">
html,body{
	margin:0;
	padding:30px 10px;
	text-align:center;
}
#outer{
	width:780px;
	margin:auto;
	text-align:left;
	border:1px solid #000;
}
#outer{position:relative}
.navwrap{
	float:right;
	position:relative;
	left:-50%;
	text-align:left;
	margin-bottom:2em;
}
.navwrap ul{
	list-style:none; 
	position:relative;
	left:50%;
	margin:0;
	padding:0;
} 
.navwrap li{
	border:1px solid #eff2df;
	float:left;
	margin:0 10px 0 0;
	background:#809900;
}
.navwrap li.last{margin-right:0}
.navwrap li a{
	float:left;
	border:1px solid #4c7300;
	position:relative;
	left:-2px;
	top:-2px;
	background:#eff2df;
	color:#4c7300;
	text-decoration:none;
	padding:6px 10px;
	font-weight:bold;
}
.navwrap li a:hover{
	background:#809900;
	color:#fff;
}
p{clear:both;padding:10px}
h1{text-align:center;margin:1em 0;}
.clearer{
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	clear:both;
}
 
 
 
</style>
<!--[if IE ]>
<style type="text/css">
.navwrap ul{float:left;} 
 
</style>
<![endif]-->
 
<div id="outer">
	<h1>Centred Widthless floats</h1>
	<div class="navwrap">
 
		<ul>
			<li><a href="#">Button 1</a></li>
			<li><a href="#">Button 2's a bit longer</a></li>
			<li><a href="#">This is Button 3</a></li>
			<li><a href="#">B 4</a></li>
			<li><a href="#">Button 5</a></li>
 
			<li class="last"><a href="#">This is Button 6</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	<div class="navwrap">
		<ul>
			<li><a href="#">Button 1</a></li>
 
			<li><a href="#">Button 2's a bit longer</a></li>
			<li class="last"><a href="#">This is Button 3</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	<div class="navwrap">
		<ul>
 
			<li class="last"><a href="#">Button 1</a></li>
		</ul>
	</div>
	<p>The above navigation is floated using widthless floats and centred using a technique that moves the right floated parent wrapper 50% back towards the left using relative positioning -50%) and then applying a +50% left shift on the inner element also using relative positioning.</p>
	<p> The combined effect of this is to center the navigation within our layout</p>
</div>

embedding flash in html for XHTML strict doc type

HTML No Comments »

Normally when we include flash html code it will have an object tag which will have a child tag which works well i all browsers with html document type transitional.

When we set html document type to strict then w3c validation shows error on embed tag. So what could be the alternate to include a flash code for w3c strict mode.

i found this code in google codes… and i have given the link below to the resource which is in detail and also has a java script alternate of including flash content in a html page.

 
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>

the complete documentation can be found at the following url…

http://code.google.com/p/swfobject/wiki/documentation

Entries RSS