Archive for May 2009
- In: CSS | HTML
- Leave a Comment
Hanging Indents makes the first line start from its margin and the rest will get flushed towards right. To do this look for the below code, you will get a clear idea.
HTML code
<p class=”hangingindent”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
CSS for the above goes here
<style>
.hangingindent {
padding-left: 22px ;
text-indent: -22px ;
}
</style>
- In: CSS | HTML
- Leave a Comment
Well I have found this serious problem when I need to make this inline styles override. I always thought that this could be impossible to override inline styles using style sheet. But later found one solution to do this, its very easy to do here is the sample code to override inline styles
<div class=”container”>
<span style=”font-weight: bold; color: red;”>Some text goes here…</span>
</div>
<style type=”text/css”>
.container span{
font-weight: normal !important;
color: #000000 !important;
}
</style>
Toggle display the block element
Posted on: May 6, 2009
Here is a code to toggle and display the bock element using simple JavaScript and CSS. Try the below code
Put this code in your body section
<a href=”toggle(‘myDiv’)”>Toggle</a><br />
<div id=”myDiv” style=”display:none;”>
<p>Some Text goes here … Blah Blah Blah….</p>
</div>
Put this in the head section of your page
<script language=”javascript”>
<!–
function toggle(someid){
if(document.getElementById(someid).style.display == “none”){
document.getElementById(someid).style.display = “block”;
}else{
document.getElementById(someid).style.display = “none”;
}
}
//–>
</script>
Mywebdunia's Blog 