zwwcn

Just another WordPress.com site

Category Archives: CSS

Position An awesomefont background Relative to its Container Using CSS

<div id="container">
   <div id="box"> </div>
</div>
#container {
  position: relative;
}

#box:after {
  content: "\f154"; 
  font-family: FontAwesome;
  font-size: 100px;
  position: absolute;
  top: 40px;
  left:20px;
  z-index: 1;
}

ref : http://stackoverflow.com/questions/104953/position-an-html-element-relative-to-its-container-using-css

Placing text after css background image

css code:

</code>

.category-list li:nth-child(1) a{
background-image: url('/image.jpg');
background-repeat: no-repeat;
background-position: center;
padding: 160px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display:block;
width:220px;
height:203px;
color:#58595b;
}

<code>

Clickable image and text link shows below:

sample

js script to check ajax page change

We could add break point in firebug to check ajax page changes

<script type=”text/javascript” language=”javascript”>
document.documentElement.addEventListener(‘mouseup’, function(e){
mouseDown = false;
var str = “Mouse up”;
});
</script>

 

 

Fixed column width and text overflow

table
{
table-layout:fixed; //will fix the width, may not necessary
}

</code>
p.test {
	white-space: nowrap;         //all text go to one line
	width: 100%;
	overflow: hidden;            //extra text will be hiden
	text-overflow: ellipsis;     //three periods append to the text
}

set width for rich:datatable

<rich:dataTable id="itemsTable" style="width:930px;" value="#{scheduleItems}">

<rich:column id="addressCol" styleClass="#{scheduleItem.invoice.quote ? 'highlight' : '' }" style="width:120px;">
<code>