hey...a few of you might remember me..
anyways, i have a few problems with mywebsite (<!-- m --><a class="postlink" href="http://hh.fateback.com">http://hh.fateback.com</a><!-- m -->)...
see the orange side bars? i your screen resolution is anything under 1400x1050, the gray box in the middle will extend past the end of the side bars, and the design looks ugly. this is how it's supposed to look like: screenshot of layout (<!-- m --><a class="postlink" href="http://hharchive.port5.com/screen.GIF">http://hharchive.port5.com/screen.GIF</a><!-- m -->)
see, i've set the height of the side bars "#side" and "#sid" to be 100%, but as you can see, i didn't realize it was only 100% of the current viewable height. is there any way i can set the height of the sidebars to be something like 110% of the height of the contents(the gray box)? i want to have some empty space (say, 50 pixels) after the hit counter ("34" in the picture).
one option is to just make the height 300% and tell the user to not scroll down, but that isn't very good.
somebody, help me! i'm trying to make my site as accesible as i can...
Hi, I don't know if this relates to your problem in some way, but you have two errors <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhh.fateback.com%2Fstyle.css&warning=1&profile=css2">http://jigsaw.w3.org/css-validator/vali ... ofile=css2</a><!-- m --> that you need to sort - ignore the warnings as most of them are irrelevant. The only relevant one is the generic font family alternative.
Anyway, moving swiftly on as they say, how about using
border-left: 30px solid orange;
border-right: 30px solid orange;
On your Div. Then set the height of the div to 100%?my first priority is to get the layout fixed...
good idea, but if i do that, the orange is contained within the gray box... i need them to extend beyond the gray box.however, if i apply that border to the body instead, the result is close... the sidebars are on the edges, the scrollbar is to the left of the right sidebar, and the sidebars stay out if you scroll down...
is there a way to get the border to be "margined"further to the center?
image (<!-- m --><a class="postlink" href="http://hharchive.port5.com/sidebars.JPG">http://hharchive.port5.com/sidebars.JPG</a><!-- m -->)
EDIT:i fixed the css validation problems, but if i change height:100%px; to height:100%; the layout is messed up... why ?
how about applying a % width to your body? use margin:auto; and text-align:center; to center it for IE and Moz.
Response to edit: I don't know, but if you change it to px...man... doesnt work.
it just makes the gray box fill up everything.. is there any hope for me???
can anybody help me??
EDIT: I've been working an an alternative... and i have finally finished it. however, i do feel sad that i had to sacrifice some sidebars... but it's the only way it can look good on lower resolution screens.
what it would look like on 800x600:
<!-- m --><a class="postlink" href="http://home.graffiti.net/sirhans004:graffiti.net/800x600.GIF">http://home.graffiti.net/sirhans004:gra ... 00x600.GIF</a><!-- m -->
what it looks like on my res (1400x1050):
<!-- m --><a class="postlink" href="http://home.graffiti.net/sirhans004:graffiti.net/1400x1050.GIF">http://home.graffiti.net/sirhans004:gra ... 0x1050.GIF</a><!-- m -->
so, does anybody think this is the only way to go, or should i try to keep it the way it was?
EDIT2: EUREKA!!! I AM A GENIUS!!!
well, i finally fixed it. now it looks perfect on smaller resolutions and bigger ones!!! YESSSSSS!!
go here: <!-- m --><a class="postlink" href="http://hh.fateback.com/index2.htm">http://hh.fateback.com/index2.htm</a><!-- m -->
it should look just like <!-- m --><a class="postlink" href="http://hh.fateback.com">http://hh.fateback.com</a><!-- m -->
YAY!! (I'm just so happy!)Perhaps some code like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
html, body {
height: 100%
}
body {
background-color: #000000;
color: #ffffff;
width: 90%;
text-align: center;
margin: auto;
}
#content {
width: 90%;
background-color: #000000;
color: #ffffff;
height: 100%;
border-left: 30px solid #ff9900;
border-right: 30px solid #ff9900;
}
-->
</style>
</head>
<body>
<div id="content">hello</div>
</body>
</html>
anyways, i have a few problems with mywebsite (<!-- m --><a class="postlink" href="http://hh.fateback.com">http://hh.fateback.com</a><!-- m -->)...
see the orange side bars? i your screen resolution is anything under 1400x1050, the gray box in the middle will extend past the end of the side bars, and the design looks ugly. this is how it's supposed to look like: screenshot of layout (<!-- m --><a class="postlink" href="http://hharchive.port5.com/screen.GIF">http://hharchive.port5.com/screen.GIF</a><!-- m -->)
see, i've set the height of the side bars "#side" and "#sid" to be 100%, but as you can see, i didn't realize it was only 100% of the current viewable height. is there any way i can set the height of the sidebars to be something like 110% of the height of the contents(the gray box)? i want to have some empty space (say, 50 pixels) after the hit counter ("34" in the picture).
one option is to just make the height 300% and tell the user to not scroll down, but that isn't very good.
somebody, help me! i'm trying to make my site as accesible as i can...
Hi, I don't know if this relates to your problem in some way, but you have two errors <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhh.fateback.com%2Fstyle.css&warning=1&profile=css2">http://jigsaw.w3.org/css-validator/vali ... ofile=css2</a><!-- m --> that you need to sort - ignore the warnings as most of them are irrelevant. The only relevant one is the generic font family alternative.Anyway, moving swiftly on as they say, how about using
border-left: 30px solid orange;
border-right: 30px solid orange;
On your Div. Then set the height of the div to 100%?my first priority is to get the layout fixed...
good idea, but if i do that, the orange is contained within the gray box... i need them to extend beyond the gray box.however, if i apply that border to the body instead, the result is close... the sidebars are on the edges, the scrollbar is to the left of the right sidebar, and the sidebars stay out if you scroll down...
is there a way to get the border to be "margined"further to the center?
image (<!-- m --><a class="postlink" href="http://hharchive.port5.com/sidebars.JPG">http://hharchive.port5.com/sidebars.JPG</a><!-- m -->)
EDIT:i fixed the css validation problems, but if i change height:100%px; to height:100%; the layout is messed up... why ?
how about applying a % width to your body? use margin:auto; and text-align:center; to center it for IE and Moz.Response to edit: I don't know, but if you change it to px...man... doesnt work.
it just makes the gray box fill up everything.. is there any hope for me???
can anybody help me??EDIT: I've been working an an alternative... and i have finally finished it. however, i do feel sad that i had to sacrifice some sidebars... but it's the only way it can look good on lower resolution screens.
what it would look like on 800x600:
<!-- m --><a class="postlink" href="http://home.graffiti.net/sirhans004:graffiti.net/800x600.GIF">http://home.graffiti.net/sirhans004:gra ... 00x600.GIF</a><!-- m -->
what it looks like on my res (1400x1050):
<!-- m --><a class="postlink" href="http://home.graffiti.net/sirhans004:graffiti.net/1400x1050.GIF">http://home.graffiti.net/sirhans004:gra ... 0x1050.GIF</a><!-- m -->
so, does anybody think this is the only way to go, or should i try to keep it the way it was?
EDIT2: EUREKA!!! I AM A GENIUS!!!
well, i finally fixed it. now it looks perfect on smaller resolutions and bigger ones!!! YESSSSSS!!
go here: <!-- m --><a class="postlink" href="http://hh.fateback.com/index2.htm">http://hh.fateback.com/index2.htm</a><!-- m -->
it should look just like <!-- m --><a class="postlink" href="http://hh.fateback.com">http://hh.fateback.com</a><!-- m -->
YAY!! (I'm just so happy!)Perhaps some code like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
html, body {
height: 100%
}
body {
background-color: #000000;
color: #ffffff;
width: 90%;
text-align: center;
margin: auto;
}
#content {
width: 90%;
background-color: #000000;
color: #ffffff;
height: 100%;
border-left: 30px solid #ff9900;
border-right: 30px solid #ff9900;
}
-->
</style>
</head>
<body>
<div id="content">hello</div>
</body>
</html>