I am currently attempting ot make my background fill the entire window screen no matter how big the screen. I thought I had it correct by using a div tag and having the image repeat-y. For some reason it is only scalling as far as my table is inside the div tag. (currently the link has this info on the table i had it on the div and it did the same thing).
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/">http://digitalarts.bgsu.edu/hughes/new_site/</a><!-- m -->
Here is what i have as my css.. is there a way to get the background image to go to the entire bottom to fill the whole screen white no matter how big the resolution of the users browser?
body{
background-image: url(images/background_blocks.gif);
margin:0;
padding
;
text-align: center; /* hack to force IE5.x pc to center your wrapper div */
}
#wrapper{
margin:0 auto;
background-image: url(images/Main_Fade.gif);
background-repeat:repeat-y;
width:800px;
height:auto;
text-align: left; /* re-align the text to the left after the above hack */.
}
Here is my background image:
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/images/background_blocks.gif">http://digitalarts.bgsu.edu/hughes/new_ ... blocks.gif</a><!-- m -->
My white middle part:
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/images/Main_Fade.gif">http://digitalarts.bgsu.edu/hughes/new_ ... n_Fade.gif</a><!-- m -->
Does anyone know how this is possible?
Am I able to make a div tag for the footer to do make a rounded looking effect?http://www.alistapart.com/articles/holygrailso im way off arent i?i don't get what it is you're trying to do.
the page looks great for me in mozilla.
and another thing, if you want people in the 800x600 resolution to see your page without having to scroll left and right, you may want to reduce its width to about 780 instead of 800. Browsers have stuff on the left and right (like scrollbars) which take up pixel space. I recommend doing it 768 wide, which is what i design most of my sites too.What my concern is that I want no matter what resolution that the white space touch the bottom of the browser window... so its like a stripe no matter what dpi they have their screen. Is there a way to inlay my footer also? I am really getting the grasp of css I was always just using it for font manipulation. Now I actually have seen some light and I am getting an understanding for how this works. So thank you guys for helping me with these questions.
I was wondering if you can restrict not only the size of the table but make it wrap so that the table will NOT expand if information is inputted into it?
Thanks,
Andywow... so i got creative.. and I think I figured it out! Now my question is from a design standpoint.. Since the pattern changes when u scroll your background is it a good idea for me to ditch the checkard look? is it a no no? I think I should make it all one color?
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/ahhh!">http://digitalarts.bgsu.edu/hughes/new_site/ahhh!</a><!-- m -->! why doesnt my footer work in Modzilla? help!!?!??!?!!
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/Try">http://digitalarts.bgsu.edu/hughes/new_site/Try</a><!-- m --> it inside the wrapper and do all the styling in your #Footer css.Great thanks! I got that to work.. i was looking on that link you sent me and I cant find the information for the #header css tag.. I guess im confused on how the header div works. can u explain?Yeah, he doesn't seem to explain that, maybe he thought it was obvious. The #header just sits up there at the top of the page. It may just be there to hold a background image.Isnt there a way to correctly get my footer and my page to line up in the center? I dont think this is correct:
background-position:top center;
isnt there a way to set it to top and center? I dont think this works right.. its only working in IE.Delete position:fixed in #wrapper.
Put margin:0 auto; in your #Footer.I did that.. Add when I look at it in firefox it seems to be positioned to the left and I dont see any footer.... is there a reason? here is what I have for my css...
body{
background-image: url(images/background_blocks.gif);
margin:0;
padding;
text-align: center; /* hack to force IE5.x pc to center your wrapper div */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#wrapper{
margin:0 auto;
background-image: url(images/Main_Fade.gif);
background-repeat:repeat-y;
background-position:top center;
width:800px;
height:auto;
text-align: left; /* re-align the text to the left after the above hack */.
}
#Right_Bot{
margin:0 auto;
padding:0;
background-image:url(images/SideBox_bg.gif);
background-repeat:repeat-y;
width:180px;
text-align:left;
}
a:link, a:active {
color: #3B73B9;
text-decoration: none;}
a:visited {
color: #636;
text-decoration: none;}
a:hover {
color: #A9B8DF;
text-decoration: underline;}
a.bold {
font-weight: bold;}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #666666;
}
li {
padding-left:0px;
list-style-image: url(images/list_dot.gif);
vertical-align: middle;
padding-top: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
list-style-position: outside;
}
.Copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF9B37;
}
#Footer{
margin:0 auto;
padding:0;
background-image: url(images/Bottom_Test.gif);
width:800px;
height:40px;
text-align: left;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
}
#Container_header{
background-image:url(images/top_container.gif);
margin:0;
padding:0;
width:750px;
height:300px;
background-position:center;
text-align:center;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: small-caps;
color: #D98430;
text-decoration: none;
}fixed it.. lol....
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/">http://digitalarts.bgsu.edu/hughes/new_site/</a><!-- m -->
Here is what i have as my css.. is there a way to get the background image to go to the entire bottom to fill the whole screen white no matter how big the resolution of the users browser?
body{
background-image: url(images/background_blocks.gif);
margin:0;
padding
;text-align: center; /* hack to force IE5.x pc to center your wrapper div */
}
#wrapper{
margin:0 auto;
background-image: url(images/Main_Fade.gif);
background-repeat:repeat-y;
width:800px;
height:auto;
text-align: left; /* re-align the text to the left after the above hack */.
}
Here is my background image:
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/images/background_blocks.gif">http://digitalarts.bgsu.edu/hughes/new_ ... blocks.gif</a><!-- m -->
My white middle part:
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/images/Main_Fade.gif">http://digitalarts.bgsu.edu/hughes/new_ ... n_Fade.gif</a><!-- m -->
Does anyone know how this is possible?
Am I able to make a div tag for the footer to do make a rounded looking effect?http://www.alistapart.com/articles/holygrailso im way off arent i?i don't get what it is you're trying to do.
the page looks great for me in mozilla.
and another thing, if you want people in the 800x600 resolution to see your page without having to scroll left and right, you may want to reduce its width to about 780 instead of 800. Browsers have stuff on the left and right (like scrollbars) which take up pixel space. I recommend doing it 768 wide, which is what i design most of my sites too.What my concern is that I want no matter what resolution that the white space touch the bottom of the browser window... so its like a stripe no matter what dpi they have their screen. Is there a way to inlay my footer also? I am really getting the grasp of css I was always just using it for font manipulation. Now I actually have seen some light and I am getting an understanding for how this works. So thank you guys for helping me with these questions.
I was wondering if you can restrict not only the size of the table but make it wrap so that the table will NOT expand if information is inputted into it?
Thanks,
Andywow... so i got creative.. and I think I figured it out! Now my question is from a design standpoint.. Since the pattern changes when u scroll your background is it a good idea for me to ditch the checkard look? is it a no no? I think I should make it all one color?
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/ahhh!">http://digitalarts.bgsu.edu/hughes/new_site/ahhh!</a><!-- m -->! why doesnt my footer work in Modzilla? help!!?!??!?!!
<!-- m --><a class="postlink" href="http://digitalarts.bgsu.edu/hughes/new_site/Try">http://digitalarts.bgsu.edu/hughes/new_site/Try</a><!-- m --> it inside the wrapper and do all the styling in your #Footer css.Great thanks! I got that to work.. i was looking on that link you sent me and I cant find the information for the #header css tag.. I guess im confused on how the header div works. can u explain?Yeah, he doesn't seem to explain that, maybe he thought it was obvious. The #header just sits up there at the top of the page. It may just be there to hold a background image.Isnt there a way to correctly get my footer and my page to line up in the center? I dont think this is correct:
background-position:top center;
isnt there a way to set it to top and center? I dont think this works right.. its only working in IE.Delete position:fixed in #wrapper.
Put margin:0 auto; in your #Footer.I did that.. Add when I look at it in firefox it seems to be positioned to the left and I dont see any footer.... is there a reason? here is what I have for my css...
body{
background-image: url(images/background_blocks.gif);
margin:0;
padding
;text-align: center; /* hack to force IE5.x pc to center your wrapper div */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#wrapper{
margin:0 auto;
background-image: url(images/Main_Fade.gif);
background-repeat:repeat-y;
background-position:top center;
width:800px;
height:auto;
text-align: left; /* re-align the text to the left after the above hack */.
}
#Right_Bot{
margin:0 auto;
padding:0;
background-image:url(images/SideBox_bg.gif);
background-repeat:repeat-y;
width:180px;
text-align:left;
}
a:link, a:active {
color: #3B73B9;
text-decoration: none;}
a:visited {
color: #636;
text-decoration: none;}
a:hover {
color: #A9B8DF;
text-decoration: underline;}
a.bold {
font-weight: bold;}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #666666;
}
li {
padding-left:0px;
list-style-image: url(images/list_dot.gif);
vertical-align: middle;
padding-top: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
list-style-position: outside;
}
.Copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF9B37;
}
#Footer{
margin:0 auto;
padding:0;
background-image: url(images/Bottom_Test.gif);
width:800px;
height:40px;
text-align: left;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
}
#Container_header{
background-image:url(images/top_container.gif);
margin:0;
padding:0;
width:750px;
height:300px;
background-position:center;
text-align:center;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: small-caps;
color: #D98430;
text-decoration: none;
}fixed it.. lol....