How do I make my div 100% height?
You need to know what the 100% is of, so the parent div must have a height set. One problem that people often come up against is making the main page fill the screen if there's little content. You can do that like this :
CSS
body, html {
height:100%;}
body {
margin:0;
padding:0;}
#wrap {
position:relative;
min-height:100%;}
* html #wrap {
height:100%;}
Here, the #wrap div goes around your whole page - it's like a sub-body.
You need to use 'min-height' rather than 'height' for Firefox because otherwise it will set it to 100% of the viewport and no more. Internet Explorer, being well... crap, treats 'height' as it should be treating 'min-height' which it doesn't recognise. (You can target IE by preceding your code with ' * html ').
How do I combine multiple sheets into one?
To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.:
<LINK REL=Stylesheet HREF="default.css" TITLE="combined">
<LINK REL=Stylesheet HREF="fonts.css" TITLE="combined">
<LINK REL=Stylesheet HREF="tables.css" TITLE="combined">
How do I centre my page?
This is very easy. If we take the code in the last question and change it to this :
CSS
body, html {
height:100%;}
body {
margin:0;
padding:0;}
#wrap {
position:relative;
width:780px;
margin:auto; min-height:100%;}
* html #wrap {
height:100%;}
you get a page that fits an 800x600 resolution screen without a horizontal scrollbar, which will be centered at higher resolutions.
Need a div which makes space at the bottom of the main page (inside the #wrap div). Then, the footer (being inside #wrap) can be placed in that space by using absolute positioning. Like this :
CSS
<div id="wrap">
...content goes here...
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list, e.g.;
Selector {declaration1; declaration2}
P {background: white; color: black}
Border around a table?
Try the following:
.tblboda {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;}
/*color, thickness and style can be altered*/
You put this style declaration either in
an external stylesheet, or you can stuff it in
the <head></head> section, like:
<style type="text/css">
(here you can place your styles)
</style>
and apply it to the table as follows:
<div class="tblboda">
<table yaddayadda>
<tr>
<td>Content text and more content</td>
</tr>
</table>
</div>
That should give you a grey thin border around this table.
How do you target a certain browser?
IE can be targetted by preceding your properties with '* html'. For example...
#nav {
position:fixed;}
* html #nav { /* this will target IE */
position:absolute;}
Another way to target IE is with conditional comments. Put this (below) in the head - just before the closing tag - and put anything you want to be directed only at IE in another stylesheet.
<!--[if IE]>
<link href="ieonly.css" rel="stylesheet" type="text/css">
<![endif]-->
If you need to target IE5x...
#wrap {
width:760px; /* for IE5x */
w\idth:780px; /* for all other major browsers */
}
How do I place text over an image?
To place text or image over an image you use the position property. The below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.
<div style="position: relative; width: 200px; height: 100px">
<div style="position: absolute; top: 0; left: 0; width: 200px">
<image>
</div>
<div style="position: absolute; top: 20%; left: 20%; width: 200px">
Text that nicely wraps
</div>
</div>
How do you make a tool tip that appears on hover?
The most simple way is to use the 'title' attribute like this...
HTML
<span title="Example of the title attribute in use">like this</span>
CSS
a.tooltip {
position:relative;
cursor:help;}
a.tooltip span {
display: none;
position:absolute;
top:1.5em;
left:0;
width:15em;
padding:0 2px;}
a.tooltip:hover {
display:inline;}
a.tooltip:hover span {
display:block;
border:1px solid gray;
background-color:white;}
HTML
<a class="tooltip" href="#n">Karl Marx<span>-info goes here-</span></a>
Without this part...
a.tooltip:hover {
display:inline;}
..it won't work in IE.
The "#n" in the link is to prevent the page from jumping to the top if the link is clicked. The "href" part is necessary as it won't work in IE without it.
How do I have a non-tiling (non-repeating) background image?
With CSS, you can use the background-repeat property. The background repeat can be included in the shorthand background property, as in this example:
body {
background: white url(example.gif) no-repeat ;
color: black ;}
How do I get rid of the gap under my image?
Images are inline elements, which means they are treated in the same way as text. Most people kind of know this - they know that if you use 'text-align:center' on an image it will be centred. What many people don't realise is that this means you will have a gap underneath an image. This gap is for the descenders of letters like j,q,p,y and g. To get rid of this gap you need to make the image block-level - like this :
CSS
img {display:block;}
One problem that this can cause is when you want to have a few images next to each other - if they are block-level, they won't be next to each other. To get around that, you can use float:left. Of course, this might present another problem - maybe you don't want the image to float left. In this case, you can use an unordered list like this :
CSS
ul, li {
list-style-type:none;
padding:0;
margin:0 auto;}
ul {
width:150px;}
li {
float:left;
}
HTML
<ul>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
</ul>
You need to know what the 100% is of, so the parent div must have a height set. One problem that people often come up against is making the main page fill the screen if there's little content. You can do that like this :
CSS
body, html {
height:100%;}
body {
margin:0;
padding:0;}
#wrap {
position:relative;
min-height:100%;}
* html #wrap {
height:100%;}
Here, the #wrap div goes around your whole page - it's like a sub-body.
You need to use 'min-height' rather than 'height' for Firefox because otherwise it will set it to 100% of the viewport and no more. Internet Explorer, being well... crap, treats 'height' as it should be treating 'min-height' which it doesn't recognise. (You can target IE by preceding your code with ' * html ').
How do I combine multiple sheets into one?
To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.:
<LINK REL=Stylesheet HREF="default.css" TITLE="combined">
<LINK REL=Stylesheet HREF="fonts.css" TITLE="combined">
<LINK REL=Stylesheet HREF="tables.css" TITLE="combined">
How do I centre my page?
This is very easy. If we take the code in the last question and change it to this :
CSS
body, html {
height:100%;}
body {
margin:0;
padding:0;}
#wrap {
position:relative;
width:780px;
margin:auto; min-height:100%;}
* html #wrap {
height:100%;}
you get a page that fits an 800x600 resolution screen without a horizontal scrollbar, which will be centered at higher resolutions.
How do I get my footer to sit at the bottom...?
Need a div which makes space at the bottom of the main page (inside the #wrap div). Then, the footer (being inside #wrap) can be placed in that space by using absolute positioning. Like this :
CSS
body, html {
height:100%;}
body {
margin:0;
padding:0;}
#wrap {
position:relative;
width:780px;
margin:auto; min-height:100%;}
* html #wrap {
height:100%;}
#clearfooter {
height:50px;
overflow:hidden;}
#footer {
position:absolute;
bottom:0;
width:100%;
height:50px;}
HTML
height:100%;}
body {
margin:0;
padding:0;}
#wrap {
position:relative;
width:780px;
margin:auto; min-height:100%;}
* html #wrap {
height:100%;}
#clearfooter {
height:50px;
overflow:hidden;}
#footer {
position:absolute;
bottom:0;
width:100%;
height:50px;}
HTML
<div id="wrap">
...content goes here...
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
Can I attach more than one declaration to a selector?
Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list, e.g.;
Selector {declaration1; declaration2}
P {background: white; color: black}
Border around a table?
Try the following:
.tblboda {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;}
/*color, thickness and style can be altered*/
You put this style declaration either in
an external stylesheet, or you can stuff it in
the <head></head> section, like:
<style type="text/css">
(here you can place your styles)
</style>
and apply it to the table as follows:
<div class="tblboda">
<table yaddayadda>
<tr>
<td>Content text and more content</td>
</tr>
</table>
</div>
That should give you a grey thin border around this table.
How do you target a certain browser?
IE can be targetted by preceding your properties with '* html'. For example...
#nav {
position:fixed;}
* html #nav { /* this will target IE */
position:absolute;}
Another way to target IE is with conditional comments. Put this (below) in the head - just before the closing tag - and put anything you want to be directed only at IE in another stylesheet.
<!--[if IE]>
<link href="ieonly.css" rel="stylesheet" type="text/css">
<![endif]-->
If you need to target IE5x...
#wrap {
width:760px; /* for IE5x */
w\idth:780px; /* for all other major browsers */
}
How do I place text over an image?
To place text or image over an image you use the position property. The below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.
<div style="position: relative; width: 200px; height: 100px">
<div style="position: absolute; top: 0; left: 0; width: 200px">
<image>
</div>
<div style="position: absolute; top: 20%; left: 20%; width: 200px">
Text that nicely wraps
</div>
</div>
How do you make a tool tip that appears on hover?
The most simple way is to use the 'title' attribute like this...
HTML
<span title="Example of the title attribute in use">like this</span>
CSS
a.tooltip {
position:relative;
cursor:help;}
a.tooltip span {
display: none;
position:absolute;
top:1.5em;
left:0;
width:15em;
padding:0 2px;}
a.tooltip:hover {
display:inline;}
a.tooltip:hover span {
display:block;
border:1px solid gray;
background-color:white;}
HTML
<a class="tooltip" href="#n">Karl Marx<span>-info goes here-</span></a>
Without this part...
a.tooltip:hover {
display:inline;}
..it won't work in IE.
The "#n" in the link is to prevent the page from jumping to the top if the link is clicked. The "href" part is necessary as it won't work in IE without it.
How do I have a non-tiling (non-repeating) background image?
With CSS, you can use the background-repeat property. The background repeat can be included in the shorthand background property, as in this example:
body {
background: white url(example.gif) no-repeat ;
color: black ;}
How do I get rid of the gap under my image?
Images are inline elements, which means they are treated in the same way as text. Most people kind of know this - they know that if you use 'text-align:center' on an image it will be centred. What many people don't realise is that this means you will have a gap underneath an image. This gap is for the descenders of letters like j,q,p,y and g. To get rid of this gap you need to make the image block-level - like this :
CSS
img {display:block;}
One problem that this can cause is when you want to have a few images next to each other - if they are block-level, they won't be next to each other. To get around that, you can use float:left. Of course, this might present another problem - maybe you don't want the image to float left. In this case, you can use an unordered list like this :
CSS
ul, li {
list-style-type:none;
padding:0;
margin:0 auto;}
ul {
width:150px;}
li {
float:left;
}
HTML
<ul>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
</ul>
No comments:
Post a Comment