CSS EXPERT REQUIRED (Help!)

by ragstworiches

Posted: 13 years ago 4 replies

WEB DESIGN

Hey Warriors,

I've been trying to figure out a couple of things which I can't see what the issue is

1). On window resize the template breaks at the footer
2). The background image appears tiled rather than as one background

Any help really appreciated.

You can see an example of what I mean below:

Help and Support

Style sheet is

body {
background-image:url(../images/bg.jpg);
background-repeat:repeat;
margin:0px;
}
h1 {
font-family:Tahoma, Verdana, Arial;
font-size:44px;
line-height:55px;
text-align:center;
letter-spacing:-1px;
margin-top:10px;
}
h2 {
font-family:Tahoma, Verdana, Arial;
font-size:21px;
line-height:30px;
text-align:center;

}
h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
line-height:25px;
margin-top:0px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:25px;
margin-top:25px;
}

#maincontainer {
width:100%;
height:auto;
overflow:hidden;
margin:0px;
background-image:url(../images/bgx.jpg);
background-repeat: repeat-x;
}
#header {
background-image:url(../images/header.jpg);
width:800px;
height:146px;
margin:0px auto 0px auto;
overflow:hidden;
}
#navcontainer {
height: 43px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
}
#navcontainer ul {
padding:0;
margin:0;
list-style:none;
}
#navcontainer ul li {
list-style:none;
display:inline;
float:left;
}
.nav1 a { background-image: url(../images/nav1.jpg); height: 43px; width: 98px; display:block; }
.nav1 a:hover { background: url(../images/nav1.jpg) 0px -43px; height: 43px; width: 98px; display:block; }

.nav2 a { background: url(../images/nav2.jpg); height: 43px; width: 98px; display:block; }
.nav2 a:hover { background: url(../images/nav2.jpg) -98px -43px; height: 43px; width: 98px; display:block; }

.nav3 a { background: url(../images/nav3.jpg); height: 43px; width: 104px; display:block; }
.nav3 a:hover { background: url(../images/nav3.jpg) 0 -43px; height: 43px; width: 104px; display:block; }

.nav4 a { background: url(../images/nav4.jpg); height: 43px; width: 94px; display:block; }
.nav4 a:hover { background: url(../images/nav4.jpg) 0 -43px; height: 43px; width: 94px; display:block; }

.nav5 a { background: url(../images/nav5.jpg); height: 43px; width: 148px; display:block; }
.nav5 a:hover { background: url(../images/nav5.jpg) 0 -43px; height: 43px; width: 148px; display:block; }

.nav6 a { background: url(../images/nav6.jpg); height: 43px; width: 124px; display:block; }
.nav6 a:hover { background: url(../images/nav6.jpg) 0 -43px; height: 43px; width: 124px; display:block; }

.nav7 a { background: url(../images/nav7.jpg); height: 43px; width: 134px; display:block; }
.nav7 a:hover { background: url(../images/nav7.jpg) 0 -43px; height: 43px; width: 134px; display:block; }

#contentbg {
background-image:url(../images/contentbg.jpg);
background-repeat:repeat-y;
width:700px;
height:auto;
overflow:hidden;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
#footer {
background-image:url(../images/footer.jpg);
width:1000px;
height:175px;
overflow:hidden;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.testimonialboxtop {
background-image: url(../images/testimonialtop.jpg);
height: 69px;
width: 676px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
}
.testimonialboxmid {
background-image: url(../images/testimonialboxmid.jpg);
height: auto;
width: 596px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 40px;
padding-left: 40px;
overflow: hidden;
background-repeat: repeat-y;
}
.testimonialboxmid p {
font-family:"Courier New", Courier, monospace;
font-size:14px;
line-height:25px;
margin-top:25px;
font-style:italic;
}
.testimonialboxmid h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
line-height:25px;
margin-top:20px;
text-align:center;
}
.testimonialboxbottom {
background-image: url(../images/testimonialboxbottom.jpg);
height: 40px;
width: 676px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
overflow: hidden;
}
.johnsonboxtop {
background-image: url(../images/johnsonboxtop.jpg);
height: 40px;
width: 676px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
}
.johnsonboxmid {
background-image: url(../images/johnsonboxmid.jpg);
height: auto;
width: 596px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 40px;
padding-left: 40px;
overflow: hidden;
background-repeat: repeat-y;
}
.johnsonboxbottom {
background-image: url(../images/johnsonboxbottom.jpg);
height: 40px;
width: 676px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
overflow: hidden;
}
#headline {
background-image: url(../images/headline.gif);
height: 328px;
width: 654px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
.videoframe {
height: 445px;
width: 662px;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
padding-top: 20px;
padding-left: 20px;
background-image: url(../images/videoframe.jpg);
}

IMG.carddisplayed {
display: block;
margin-left: 16%;
margin-right: 24%; }

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto; }

P.blocktext {
margin-left: auto;
margin-right: auto;
width: 80%;
}
P.blocktextq {
margin-left: auto;
margin-right: auto;
text-align: center;

}

ul {
}
li {
list-style:url(../images/bullet.gif);
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin-bottom:15px;
}

.footerlink {
display: block;
height: 53px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 790px;
font-family: Arial, Helvetica, sans-serif;
color: #CCC;
text-align: center;
}

.footerlink a {
text-decoration:none;
color: #CCC;
}
.footerlink a:hover {
color:#FFF;
}
.footerlink ul {
padding:0px;
margin-right:0px;
margin-left:0px;
text-align: center;
}
.footerlink ul li {
list-style:none;
display: inline;
margin-right:5px;
margin-left:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

table.tableizer-table {width:100%; margin:auto; border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 10px;}

.tableizer-table td {padding: 4px; margin: 3px; border: 1px solid #ccc;}

.tableizer-table th {background-color: #073A1E; color: #FFF; font-weight: bold;}

.pretty-table
{
padding: 0;
margin: 0;
border-collapse: collapse;
border: 1px solid #333;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000;
background: #FF5555 url("../images/widget-table-bg.jpg") top left repeat-x;
}

.pretty-table
{
padding: 0;
margin: 0;
border-collapse: collapse;
border: 1px solid #333;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000;
background: #bcd0e4 url("../images/widget-table-bg.jpg") top left repeat-x;
}

.pretty-table th, .pretty-table td
{
border: 1px dotted #666;
padding: 0.5em;
text-align: left;
color: #632a39; url("../images/widget-table-bg.jpg")
}

.pretty-table th[scope=col]
{
color: #000;
background-color: #8fadcc;
text-transform: uppercase;
font-size: 0.9em;
border-bottom: 2px solid #333;
border-right: 2px solid #333;
}

.pretty-table th+th[scope=col]
{
color: #fff;
background-color: #7d98b3;
border-right: 1px dotted #666;
}

.pretty-table th[scope=row]
{
background-color: #b8cfe5;
border-right: 2px solid #333;
}

.pretty-table tr.alt th, .pretty-table tr.alt td
{
color: #2a4763;
}

div.float {
float: left;
}

div.float p {
text-align: center;
}
.yellow {
background-color: #FFFF00;
text-align: center;
}
#contentbg table tbody tr td table tbody tr td div table {
font-family: Arial, Helvetica, sans-serif;
}
.links {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size:14px;
}
.disclaimer {
font-family: Arial, Helvetica, sans-serif;
margin-left: auto;
margin-right: auto;
width: 70%;
font-size:12px;
color: #666;
text-align: center;
}
#order {
margin: 30px;
padding: 10px;
clear: none;
float: none;
height: auto;
width: auto;
border: 5px dashed #F00;
}
.links {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
}
.HAND1 {
font-family: "Hand of Sean";
color: #F00;
font-size: 24px;
text-align: center;
}

.subhead1 {
font-size: 36px;
font-weight: bold;
color: #F00;
font-family: Tahoma, Geneva, sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;

}
.subhead2 {
font-size: 24px;
font-weight: bold;
color: #F00;
font-family: Tahoma, Geneva, sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;

}

Any help at all would be great,

Thanks, Phil

#css #expert #required

unnatural 13 years ago

For the background repeating you need to change it to "no-repeat". Or you can set it to "repeat-x" (horizontally) or "repeat-y" (vertically).

As for the footer breaking try setting the "margin-right: auto; margin-left: auto; text-align: center;" and before the footer add in <div style="clear: both;"></div>
- Thanks
- 1 reply
{{ DiscussionBoard.errors[4628238].message }}
- ragstworiches 13 years ago
  
  Hi,
  
  For the first suggestion its already set to:
  
  body {
  background-image:url(../images/bg.jpg);
  background-repeat:repeat;
  margin:0px;
  }
  
  #maincontainer {
  width:100%;
  height:auto;
  overflow:hidden;
  margin:0px;
  background-image:url(../images/bgx.jpg);
  background-repeat: repeat-x;
  }
  
  I've tried changing these to no repeat, but makes things worse. As does repeat Y. The background is as it should be apart from the horizontal repeat is not seamless, which it should be.
  
  2. I'm not sure what I'm supposed to change? What part of the stylesheet needs altering? I tried footer and maincontainer and didn't do anything?
  
  Thanks, Phil
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[4628860].message }}
  
  Above 13 years ago
  
  Put a wrapper around the div's that currently contain the width styles and set navcontainer and contentbg to display:block;
  
  Thanks
  
  {{ DiscussionBoard.errors[4630422].message }}
xtrapunch 13 years ago

Your footer background image is 1000px wide and has black bg on the edges. Reduce the size of the footer to that of the header. Also remove the edges on left and right. Change the width of the footer as well.
- Thanks
Signature

>> Web Design, Wordpress & SEO - XtraPunch.com <<
Web Design & SEO Agency | Serving World Wide from New Delhi, India
{{ DiscussionBoard.errors[4633091].message }}

CSS EXPERT REQUIRED (Help!)

Trending Topics

Any thoughts on golf's latest phenom...Scottie Scheffler??

Should i Index Author pages?

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

Some interesting stats about brand comms

best high quality crypto traffic.