hi all,
i have been desiging a site for my local cricket club
Eggborough Power Station Cricket club i have used css and tested it on my resolution 1280x1024.
i know this isnt a standard res for most people but i have tried making the site available for 1024x768 but i am having some problems.
i only started with css about a week ago and my coding is taken from various tutorials around the web and looks terrible ( i am still learning )
could someone please take a look at where i am going wrong with this site and guide me to the fixes it requires to work in browsers with lower resolutions.
i will post my css code below ( please dont laugh)
p.s.
i do have a problem with scaling bg for my content the bg i made isnt seemless and as such will cause me problems once content gets too long any way i can sort this out?
Code:
html, body {
text-align: center;
background-image: url(imagestest/background.jpg);
background-attachment: fixed;
background-color: #000000;
}
h1, h2, h3, h4, h5, h6
{
color: #872020;
font-family: comic sans MS, Times New Roman, Times, serif;
line-height: 100%;
padding: 20px 0px 8px 0px;
margin:0;
font-size: 20px;
}
/* images outside of container */
#champs
{
position: absolute;
left: 950px;
top: 350px;
background-image: url(imagestest/champs.png);
background-repeat: no-repeat;
width: 222px;
height: 170px;
}
#capn
{
position: absolute;
left: 950px;
top: 16px;
background-image: url(imagestest/captain.png);
background-repeat: no-repeat;
width: 160px;
height: 276px;
overflow: hidden;
margin:0;
}
/* end of images outside */
body {
font-family: comic sans MS, Arial, Verdana, Helvetica, Sans-serif;
font-size: 15px;
color: #000000;
text-align: center;
font-size: 13px;
}
#container
{
width: 599px;
margin: auto;
text-align: left;
}
#header
{
background-image: url(imagestest/banner.png);
background-repeat: no-repeat;
width: 599px;
height: 231px;
}
#topmenu
{
background-image: url(imagestest/links.png);
background-repeat: no-repeat;
width: 599px;
height: 100px;
margin: none;
padding: 0;
}
ul#menu
{
margin-left: 70px;
padding-left: 0;
list-style-type: none;
float: left;
width: 500px;
padding: 0;
}
ul#menu li
{
display: inline;
}
ul#menu a
{
display: block;
float: left;
padding: .1em .5em;
text-decoration: none;
}
ul#menu a:link img
{
border-style: none;
}
ul#menu a:visited img
{
border-style: none;
}
#contentbox
{
background-image: url(imagestest/contentbg2.png);
background-repeat: repeat-x;
width: 599px;/* was 599px */
height: auto;
margin: 0;
padding: 0;
}
/* test for affiliate links */
#page2
{
background-image: url(imagestest/contentbg2.png);
width: auto;/* was 599px */
height: auto;
margin: 0;
padding: 0;
padding-left: 75px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 5px;
}
#news
{
height: auto;
width: auto;
padding-left: 75px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 5px;
}
#sidebar
{
background-image: url(imagestest/postit.png);
background-repeat: no-repeat;
width: 242;
height: 235;
position: absolute;
left: 100px;
top: 90px;
padding: 15px 0px 0 0px;
text-align: left;
}
ul#sidelinks
{
list-style-type: none;
}
ul#sidelinks a
{
text-decoration: none;
color: #000;
}
ul#sidelinks a:link img
{
border-style: none;
}
ul#sidelinks a:visited img
{
border-style: none;
}
#footer
{
margin:0;
}
/* sponsors section */
#images
{
width: 599px;
height: 600px;
}
div.thumbnail
{
width: 100px;
float: left;
margin: 10px 0px 0px 0px;
padding: ;
}
div.thumbnail img
{
border-style: none;
border: 1px solid #656464;
}
/* League Table data */
table.helpT
{
text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 500px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px;
}
td.helpHed
{
border-bottom: 2px solid #6699CC;
border-left: 1px solid #6699CC;
background-color: #BEC8D1;
text-align: left;
text-indent: 5px;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040;
}
td.helpBod
{
border-bottom: 1px solid #9CF;
border-top: 0px;
border-left: 1px solid #9CF;
border-right: 0px;
text-align: left;
text-indent: 10px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
color: #404040;
background-color: #fafafa;
}
table.sofT
{
text-align: left;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 500px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px;
}
/* extra divs */
#extradiv1
{
}
#extradiv2
{
}
#extradiv3
{
}
#extradiv4
{
}
#extradiv5
{
}