Archive for the ‘CSS’ Category
- In: CSS | HTML
- Leave a Comment
We all know how to align a table at the center. Just say <table cellspacing="0" cellpadding="0" align="center" wiidth="100%"> its gets the table aligned to the center of the page. In the same way how about aligning a div at the center of the page. There are a few different methods how to make it in the center.
Here are these methods
1. Using <center> tag
Ex:
<center>
<div class="xyz">Some content goes here…</div>
</center>
This will get the div aligned at the center along with this the content also gets aligned at the center. Well you might be knowing that the <center> tag is a deprecated tag[Read More]. So now is not receomended to use it. Still most of the browsers will allow you to use it. But this is not the feasible and recomended method.
2. Using align attribute
Ex:
<div class="xyz" align="center">Some content goes here…</div>
Also by using the above tag the div wount get aligned to center instead only the content gets aligned to the center. Align attribute is also a deprecated attribute, its no more recomended. So this is not the feasible and recomended method.
3. Using CSS attributes
Ex:
<div class="pqr">Some content goes here..</div>
<style type="text/css">
.pqr{
width:500px;
border:1px solid #666666;
margin: 0, auto;
}
</style>
By using the above style you can align the div at the center of the page. The margin=0 that is the top and bottom margin is 0 and the left and right margin is auto in the sense fill the gap automatically, by which the div gets aligned to the center, either of the whole page or within the block element. This is the best and recomended method to align a div at the center. This is tested in all the browsers.
Try this and test it on different browsers, if you find any issues let me know.
Small heights in your site
Posted on: November 23, 2009
- In: CSS
- Leave a Comment
If you are creating a layout, with some very small heights as custom borders for elements. Usually, what you will do is you’ll just have to add height: XXpx to the style’s declarations and think that it should be fine.but check your page once in IE and you’ll probably know what is the answer.
Check out with this example
HTML Code:
<div> id=”smallHeight”</div>
CSS Code:
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
}
Surprised to see a block with around 22px height in IE.
Well you might be thinking now how to fix this issue. Thats very simple one, we have two fixes for such IE bugs.
1 Solution:
Simply add a font-size:0 for the div, this is because IE refuses to set the font-size less than the default one. So the height of the div is set to approx 22px.
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
font-size:0;
}
This will solve your problem.
2 Solution:
Well second solution is to set overflow:hidden for the particular div block.
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
overflow:hidden;
}
Thats quite a very handy and a simple solution. 🙂
Min-Height Hack in IE
Posted on: November 13, 2009
- In: CSS
- Leave a Comment
As we all know that min-height doesn’t work in IE 6. Say for example if your site doesn’t have much content then you web page will end up till the content is there. So if you want to set some minimum height so that the page looks good. If you set some exact height for the webpage it will lead to a problem when the content is more. So to avoid this issue, there is a solution for this min-height works with mozilla, opera, chrome, safari,IE 7, IE 8 but doesn’t work with IE 6.
So to make it work with IE 6 we need to hack it. Below is the solution for such an issue
Ex:
<div id=”container”>
Some content goes here…..
</div>
<style type=”text/css” >
#container{
min-height:300px;
}
</style>
The above code works only with mozilla, safari, chrome, opera, IE7 & 8.
Solution for IE 6:
#container{
min-height:300px;
height:auto !important; //IE hack
height:300px;
}
Thats it, so simple solution no CSS 3 required, no external javascript required. Check it out.
- In: CSS | Tutorials
- Leave a Comment
Well all of us might be knowing how to align a text or an image at the bottom when you are using a table. Just say vertical-align:bottom; this will work out. But when you are working with div’s this woun’t work out. So for this to work we need to give the div’s some special treatment. The down below code will get you the this working in the div’s.
HTML code :
<div id=”outerLogo”>
<div id=”innerLogo”>
<div id=”logo”>
<a href=”index.htm” title=”Ideaken”><img src=”images/logo.gif” alt=”alt text” border=”0″ /></a>
</div>
</div>
</div>
CSS code :
<style type=”text/css”>
#outerLogo {
width:220px;
height:140px;
}
#innerLogo {
width:220px;
height:100%;
position:relative;
}
#logo {
position:absolute;
bottom:0;
left:0;
}
</style>
With this the logo div with position absolute and bottom as 0 makes it to get align at the bottom. The relative positioned div inherits its height from its parent.
This code is checked with the mozilla, IE – 6 and IE -7.
Related to this post:
Vertical align Div Center
- 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>
Mywebdunia's Blog 