Hi
Some very basic CSS questions.
Please see the following page: joewalkden.co.uk/test2
1. When previewed in Mozilla, it looks pretty much as I want it to. However, I'm not sure why, when I give the background and lines a height value of 100%, it doesn't work so I've had to put the value in pixels instead.
2. When previewed in IE, it will allow me to use height values in percentage but as you can see, there's a white strip on the far right of the page and my horizontal line is not 5 pixels in height.
3. I attempted to use some z-values but failed. My understanding is that z-index:1 says this div should take priority with while the div with z-index:2 should be underneath and so on. For some reason this didn't seem to work.
Thanks in advance for pointers.
JoeI am still thinking about line 2 but the following css allows you to use percentage values and so gets rid of the scroll bars:
html {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
*html {
height: 100%;
width: 100%;
}
body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
*body {
height: 100%;
width: 100%;
}
#background
{position: absolute;
top:0px;
left:0px;
min-height:100%;
min-width:100%;
background-color:black
}
*body #background {
height: 100%;
width: 100%;
}
#joewalkdenbanner
{position: absolute;
top:20px;
left:680px;
height:40px;
width:200px;
background-color:black
}
#line1
{position: absolute;
top:0px;
left:80px;
height:100%;
width:5px;
background-color:yellow
}
#line2
{
position: absolute;
top:80px;
left:0px;
height:5px;
width:100%;
background-color: yellow;
margin: 0;
padding: 0;
border: 0;
}
#col1
{position: absolute;
top:100px;
left:110px;
height:400px;
width:400px;
background-color: black
}
#col2
{position: absolute;
top:100px;
left:530px;
height:400px;
width:400px;
background-color: black
}
p.bodytext
{
text-indent: 10px;
text-align:justify;
margin: 0px 3px 0px 3px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: yellow;
}
p.bannertext
{
margin: 0;
font-family: Georgia, Times New Roman, Times, serif;
text-indent: 0.2cm;
font-size: 30px;
color: yellow;
}
Also if you end all your CSS values with a semi-colon it makes for easier editing later.
If you use percentages they are relative to the parent element (div). If that element is zero pixels in size and the element inside is 100% then it will measure 100% of zero. I.E. it will have no size.Thanks very much for all this - Weird that it still doesn't work in IE isn't it?
Would you mind explaining a little further as I can't really figure out how this works:
html {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
*html {
height: 100%;
width: 100%;
}
In simple terms, what happens when the browser reads the above html?
Thanks..Percentages are based on the size of the parent element but your parent elements don't have size. That css make the parent element equal the size of the viewport. In the first block we set the size with min-height. This allows for content that is larger than 100%. The second block only works in IE which doesn't have min-height but treats height as min height. We don't want other browsers to see this though or their size will really be fixed at 100% and if the content is larger it will spill out of the containing element. The '*' stops other browsers seeing this CSS.
The '*' block must come after the block it is substituting not before or it will be ignored. Here is another example:
#left_nav{
position: fixed;
}
That works fine in FireFox and the left menu is fixed (doesn't scroll). IE doesn't recognise 'fixed' though so places the element incorrectly so we add another block for IE:
*html #left_nav{
position: absolute;
}
Although this isn't perfect it get the effect we want in FireFox while in IE it makes the best attempt possible. Here's a real example! (<!-- m --><a class="postlink" href="http://myhomewebserver.co.uk/dns_test.php">http://myhomewebserver.co.uk/dns_test.php</a><!-- m -->) Try it in FF and IE. Enter a domain and press send. Now the content is longer than the page. Try scrolling the page in FF and IE.thanks for the reply bokeh, been off line for a few days!
Some very basic CSS questions.
Please see the following page: joewalkden.co.uk/test2
1. When previewed in Mozilla, it looks pretty much as I want it to. However, I'm not sure why, when I give the background and lines a height value of 100%, it doesn't work so I've had to put the value in pixels instead.
2. When previewed in IE, it will allow me to use height values in percentage but as you can see, there's a white strip on the far right of the page and my horizontal line is not 5 pixels in height.
3. I attempted to use some z-values but failed. My understanding is that z-index:1 says this div should take priority with while the div with z-index:2 should be underneath and so on. For some reason this didn't seem to work.
Thanks in advance for pointers.
JoeI am still thinking about line 2 but the following css allows you to use percentage values and so gets rid of the scroll bars:
html {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
*html {
height: 100%;
width: 100%;
}
body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
*body {
height: 100%;
width: 100%;
}
#background
{position: absolute;
top:0px;
left:0px;
min-height:100%;
min-width:100%;
background-color:black
}
*body #background {
height: 100%;
width: 100%;
}
#joewalkdenbanner
{position: absolute;
top:20px;
left:680px;
height:40px;
width:200px;
background-color:black
}
#line1
{position: absolute;
top:0px;
left:80px;
height:100%;
width:5px;
background-color:yellow
}
#line2
{
position: absolute;
top:80px;
left:0px;
height:5px;
width:100%;
background-color: yellow;
margin: 0;
padding: 0;
border: 0;
}
#col1
{position: absolute;
top:100px;
left:110px;
height:400px;
width:400px;
background-color: black
}
#col2
{position: absolute;
top:100px;
left:530px;
height:400px;
width:400px;
background-color: black
}
p.bodytext
{
text-indent: 10px;
text-align:justify;
margin: 0px 3px 0px 3px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: yellow;
}
p.bannertext
{
margin: 0;
font-family: Georgia, Times New Roman, Times, serif;
text-indent: 0.2cm;
font-size: 30px;
color: yellow;
}
Also if you end all your CSS values with a semi-colon it makes for easier editing later.
If you use percentages they are relative to the parent element (div). If that element is zero pixels in size and the element inside is 100% then it will measure 100% of zero. I.E. it will have no size.Thanks very much for all this - Weird that it still doesn't work in IE isn't it?
Would you mind explaining a little further as I can't really figure out how this works:
html {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
*html {
height: 100%;
width: 100%;
}
In simple terms, what happens when the browser reads the above html?
Thanks..Percentages are based on the size of the parent element but your parent elements don't have size. That css make the parent element equal the size of the viewport. In the first block we set the size with min-height. This allows for content that is larger than 100%. The second block only works in IE which doesn't have min-height but treats height as min height. We don't want other browsers to see this though or their size will really be fixed at 100% and if the content is larger it will spill out of the containing element. The '*' stops other browsers seeing this CSS.
The '*' block must come after the block it is substituting not before or it will be ignored. Here is another example:
#left_nav{
position: fixed;
}
That works fine in FireFox and the left menu is fixed (doesn't scroll). IE doesn't recognise 'fixed' though so places the element incorrectly so we add another block for IE:
*html #left_nav{
position: absolute;
}
Although this isn't perfect it get the effect we want in FireFox while in IE it makes the best attempt possible. Here's a real example! (<!-- m --><a class="postlink" href="http://myhomewebserver.co.uk/dns_test.php">http://myhomewebserver.co.uk/dns_test.php</a><!-- m -->) Try it in FF and IE. Enter a domain and press send. Now the content is longer than the page. Try scrolling the page in FF and IE.thanks for the reply bokeh, been off line for a few days!