...

View Full Version : Why is my border cutting off?



shadowsai
04-10-2011, 04:06 AM
Well, I've started a site that I never really finished, with a new design that I think is much more clean. However, my borders keep on cutting off at a certain position, and then continuing after a bit. Any ideas?

Here's the code.

@charset "utf-8";
/* CSS Document */

/* Page Content stuff. Makes the site "liquid" */
#content {
height: 100%;
min-height: 100%;

text-align: left;
}

#content,
#width {
/* Max-Width Hack for IE, because that's the way it rolls */
width: expression(document.body.clientWidth > 1000 ? "1000px" : "73%");
margin: 0 auto;
max-width: 1000px;
}

#content[id],
#width[id] {
/* height: auto;*/
width: 88%;
margin: 0 auto;
margin-top:-95px;
padding: 3.5em 1% 20px 1%;

border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}

/* Ends content */

/* Header Begins */
#bar {
height: 120px;
overflow: auto;
width: 100%;
clear: both;
position: relative;
top: 0px; /* Positions the bar at the top of browser screen */
background: #3d474e url(../images/logo.png) no-repeat;
}

#header {
height: 91px;
position: relative;
}

#header #title {
left: 160px;
position: absolute;
top: -100px;
z-index: 3;

padding: 5px;
text-align: right;
}

#header h1 {
margin: 0;
padding: 0;

color: #FFF;
font: 700 4em "Trebuchet MS", serif;
letter-spacing: -2px;
text-transform: lowercase;
}

#header h2 {
position: absolute;
top: 60px;
right: 235px;

margin: 0;
padding: 0;

font: 700 1em "Trebuchet MS", serif;
text-transform: lowercase;
color: #e6edf2;
}


/* Header Ends */

/* Page Content Begins */
#page {
position:relative;
float: left;
width: 100%;
clear: both;

padding-bottom: 4em;
}

#text {
float:left;
position: relative;
margin-top: -100px;
width: 58%
}

.titles {
padding: 3px 0 5px 0px;
font-size: 18px;
letter-spacing: 3px;
font-weight: bold;
margin-bottom: 10px;
color: #3d474e;
/* border-left: 8px solid #657f96;*/
}

/* Page Content Ends */

/* Page Footers */
#footer {
float: left;
width: 100%;
clear: both;

margin-top: 3.9em;
background: #525252 url(../images/footer.jpg) repeat-x top left;
}

/* Sets the width of the footer content */
#footer #width {
position: relative;
z-index: 3;
font-size: 0.85em;
padding-top: 100px;
}

/* End Page Footers */


/* Start allignment rules */
.FloatLeft {
float: left;
}

.FloatRight {
float: right;
}

.onLeft {
text-align: left;
}

.onRight {
text-align: right;
}

/* End Allignment rules */

/* Start Colors */
.grey {
color: #666;
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="author" content="Kabok Music School" />
<meta name="keywords" content=
"kabok music school, violin teacher vancouver, British Columbia, musical education, new westminster, music lessons," />
<meta name="description" content="Excellence in music for all ages." />
<link rel="stylesheet" type="text/css" href="css/import.css" />

<title>Kabok Music School</title><!-- Title displayed in each tab in your browser -->
<!-- <link rel="SHORTCUT ICON" href="http://www.kabokmusicschool.com/images/favicon.ico" />-->
</head>
<!-- The above stuff isn't displayed on the website, it's just for search engines and other "housekeeping" -->

<body>
<!--Black Header-->

<div id="bar"></div>
<!-- Header: Contains top bar (title, slogan, and header images) -->

<div id="header">
<div id="title">
<h1>Kabok Music School</h1>

<h2>Excellence in music for all ages</h2>
</div><!-- End of Title -->
</div>

<ul id="nav"><!--Navigation Bar on Right -->
<li><a href="index.htm">Home</a></li>

<li>
<a href="about.htm">About</a>

<ul>
<li><a href="school.htm">School</a></li>

<li><a href="vision.htm">Vision</a></li>
</ul>
</li>

<li>
<a href="school.htm">School</a>

<ul>
<li><a href="faculty.htm">Faculty</a></li>

<li><a href="ensemble.htm">Ensembles</a></li>
</ul>
</li>

<li>
<a href="calendar.htm">Calendar</a>

<ul>
<li><a href="recital.htm">Recitals</a></li>

<li><a href="orchdate.htm">Orchestra</a></li>

<li><a href="exam.htm">Examinations</a></li>
</ul>
</li>

<li><a href="contact.htm">Contact</a></li>
</ul><!-- End of Header -->

<div id="content"><!-- Content: Holds everything except footer of site. -->
<!-- Page information begins here -->

<div id="page">
<div id="text">
<div class="titles">
<a href="index.htm">Welcome</a>
</div>

<p>Welcome to Kabok Music School. Located at 818 20<sup>th</sup> Street, Kabok
Music School offers our music students the opportunity and guidence to develop a
lifelong appreciation to music. Our highly qualified teachers are proficient in
Suzuki and traditional teaching methods, ensuring excellence in musical education
for all students.</p>

<p>We at Kabok Music School provide preperation for RCM Examinations, music
festivals, competitions and College or University auditions, at which our
students have excelled.</p><a href="about.htm"><i>Read more</i></a>

<hr />

<div class="titles">
<a href="events.htm">News</a>
</div>

<p>On March 13<sup>th</sup>, 2011, the Kabok String Orchestra will be performing
at Queens Avenue United Church, as part of their Strings and Cream Tea benefit
concert. Queens United Church is located on 529 Queens Avenue, New Westminster.</p>
<a href="events.htm"><i>Read more</i></a>

<hr />

<div class="titles">
Reminders
</div>

<u>Monthly Recital</u>
<p>On Saturday April 30<sup>th</sup>, there will be a monthly recital at Kabok Music
School. Please sign up by writing your name and pieces you wish to perform on the
paper located on the bulletin board. The first recital begins at 6:30pm, the second
begins at 7:30pm. All are welcome to attend.</p>

<u>Exam Registration</u>
<p>The deadlines for the 2011 Summer RCM Examinations are fast approaching. If you
would like to register for an examination, please visit the
<a href="http://www.rcmexaminations.org">RCM Examinations</a> website to register the
appropriate musical exam. Please register by June 1, 2011 to be eligible. The best of
luck to all those participating.</p>

<u>Vancouver Kiwanis Music Festival 2011</u>
<p>All competitors, if you have registered to compete in the Kiwanis Music Festival,
be sure to check the festival schedule for your performance dates. In order to check,
please visit the <a href="http://www.schedules.vkmfestivals.org/">Kiwanis Festival
Schedule</a> page (a link has been provided). Then do the following:
<ol>
<li>Enter your Registration ID in the Student ID box, and click apply.
<li>Type each Registration ID seperately, to access all schedules.
<li>Print <b>each</b> schedule and keep it with you when attending each class.
</ol>
Detailed instructions are found on the Vancouver Kiwanis Festival website.</p>
</div><!-- Closes Text div -->
</div> <!-- Closes Page div-->
</div><!-- Closes Content div -->
<!-- End of Website Content --><!-- Footer Begins -->

<div id="footer">
<div id="width">
<span class="FloatLeft">maintained by
<a href="author.htm" title="Meet the author">rshadowsai</a> last updated 11-04-09
<span class="grey">|</span>
</span>

<span class="FloatRight">
<a href="index.htm">Home</a>
<span class="grey">|</span>
<a href="about.html">About Us</a>
<span class="grey">|</span>
<a href="register.htm" title="Registration at our school">Registration</a>
<span class="grey">|</span>
<a href="faculty.html" title="The Kabok Music School Faculty">Faculty</a>
<span class="grey">|</span>
<a href="mailto:info@kabokmusicschool.com?subject=kabokmusicschool.com"
title="Kabok Music School">Contact Us</a>
</span>
</div>
</div><!-- End of Footer -->
</body>
</html>

The css file is being imported by another, so that might be different. However, where it says "Exam registration", the border cuts off, and restarts after "detailed instructions..."

Thanks for the help. I really appreciate it. I'm doing this on Ubuntu Linux, testing from latest version of Chrome.

_Aerospace_Eng_
04-10-2011, 04:14 AM
I'm guessing you have some floats that needed the be cleared. There are a few ways to do this. To do it without extra markup the easiest way is to add overflow:auto; to the #content CSS. Your navigation doesn't look too pretty either. Are you trying to support IE6?

shadowsai
04-10-2011, 05:45 AM
I'm guessing you have some floats that needed the be cleared. There are a few ways to do this. To do it without extra markup the easiest way is to add overflow:auto; to the #content CSS. Your navigation doesn't look too pretty either. Are you trying to support IE6?

Thanks for the response. However, when I do that, scrollbars appear, and the height isn't enough. I know that I can use overflow:hidden, but that way, my titles don't show. Should I add a cleaning element or something? Would that help?

My navigation is done that way so I can display another set of "sub-navigation" when I mouseover the main categories. I can post it if necessary. I just didn't think it would relate to the problem.

_Aerospace_Eng_
04-10-2011, 05:52 AM
Yeah a clearing element might be best however after looking again at your code why do you even float #text? There is no element that needs to go there yet. Also sorry about saying to put overflow:auto; on #content, I meant #page however if you don't float #text, your border will show up because #page won't have any floating elements. Same with #page. I'm not really sure why you are floating elements when they don't need to be floated.

shadowsai
04-16-2011, 02:37 AM
I'm floating it because there'll be elements on the right, I just haven't made the pictures yet. Even if I remove float:left, it doesn't fix the problem of the border cutting off (near the bottom of the page). Adding overflow:auto doesn't seem to work either.

What I was trying to do was to get it to cut off at the footer, which worked when I had no content. Once I added some text, it started messing up.

_Aerospace_Eng_
04-16-2011, 03:59 AM
Yes the overflow should work. Post your latest code please.

shadowsai
04-16-2011, 09:41 PM
Yes the overflow should work. Post your latest code please.

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="author" content="Kabok Music School" />
<meta name="keywords" content=
"kabok music school, violin teacher vancouver, British Columbia, musical education, new westminster, music lessons," />
<meta name="description" content="Excellence in music for all ages." />
<link rel="stylesheet" type="text/css" href="css/import.css" />

<title>Kabok Music School</title><!-- Title displayed in each tab in your browser -->
<!-- <link rel="SHORTCUT ICON" href="http://www.kabokmusicschool.com/images/favicon.ico" />-->
</head>
<!-- The above stuff isn't displayed on the website, it's just for search engines and other "housekeeping" -->

<body>
<!--Black Header-->

<div id="bar"></div>
<!-- Header: Contains top bar (title, slogan, and header images) -->

<div id="header">
<div id="title">
<h1>Kabok Music School</h1>

<h2>Excellence in music for all ages</h2>
</div><!-- End of Title -->
</div>

<ul id="nav"><!--Navigation Bar on Right -->
<li><a href="index.htm">Home</a></li>

<li>
<a href="about.htm">About</a>

<ul>
<li><a href="school.htm">School</a></li>

<li><a href="vision.htm">Vision</a></li>
</ul>
</li>

<li>
<a href="school.htm">School</a>

<ul>
<li><a href="faculty.htm">Faculty</a></li>

<li><a href="ensemble.htm">Ensembles</a></li>
</ul>
</li>

<li>
<a href="calendar.htm">Calendar</a>

<ul>
<li><a href="recital.htm">Recitals</a></li>

<li><a href="orchdate.htm">Orchestra</a></li>

<li><a href="exam.htm">Examinations</a></li>
</ul>
</li>

<li><a href="contact.htm">Contact</a></li>
</ul><!-- End of Header -->

<div id="content"><!-- Content: Holds everything except footer of site. -->
<!-- Page information begins here -->

<div id="page">
<div id="text">
<div class="titles">
<a href="index.htm">Welcome</a>
</div>

<p>Welcome to Kabok Music School. Located at 818 20<sup>th</sup> Street, Kabok
Music School offers our music students the opportunity and guidence to develop a
lifelong appreciation to music. Our highly qualified teachers are proficient in
Suzuki and traditional teaching methods, ensuring excellence in musical education
for all students.</p>

<p>We at Kabok Music School provide preperation for RCM Examinations, music
festivals, competitions and College or University auditions, at which our
students have excelled.</p><a href="about.htm"><i>Read more</i></a>

<hr />

<div class="titles">
<a href="events.htm">News</a>
</div>

<p>On March 13<sup>th</sup>, 2011, the Kabok String Orchestra will be performing
at Queens Avenue United Church, as part of their Strings and Cream Tea benefit
concert. Queens United Church is located on 529 Queens Avenue, New Westminster.</p>
<a href="events.htm"><i>Read more</i></a>

<hr />

<div class="titles">
Reminders
</div>

<u>Monthly Recital</u>
<p>On Saturday April 30<sup>th</sup>, there will be a monthly recital at Kabok Music
School. Please sign up by writing your name and pieces you wish to perform on the
paper located on the bulletin board. The first recital begins at 6:30pm, the second
begins at 7:30pm. All are welcome to attend.</p>

<u>Exam Registration</u>
<p>The deadlines for the 2011 Summer RCM Examinations are fast approaching. If you
would like to register for an examination, please visit the
<a href="http://www.rcmexaminations.org">RCM Examinations</a> website to register the
appropriate musical exam. Please register by June 1, 2011 to be eligible. The best of
luck to all those participating.</p>

<u>Vancouver Kiwanis Music Festival 2011</u>
<p>All competitors, if you have registered to compete in the Kiwanis Music Festival,
be sure to check the festival schedule for your performance dates. In order to check,
please visit the <a href="http://www.schedules.vkmfestivals.org/">Kiwanis Festival
Schedule</a> page (a link has been provided). Then do the following:
<ol>
<li>Enter your Registration ID in the Student ID box, and click apply.
<li>Type each Registration ID seperately, to access all schedules.
<li>Print <b>each</b> schedule and keep it with you when attending each class.
</ol>
Detailed instructions are found on the Vancouver Kiwanis Festival website.</p>
</div><!-- Closes Text div -->
</div> <!-- Closes Page div-->
</div><!-- Closes Content div -->
<!-- End of Website Content --><!-- Footer Begins -->

<div id="footer">
<div id="width">
<span class="FloatLeft">maintained by
<a href="author.htm" title="Meet the author">rshadowsai</a> last updated 11-04-09
<span class="grey">|</span>
</span>

<span class="FloatRight">
<a href="index.htm">Home</a>
<span class="grey">|</span>
<a href="about.html">About Us</a>
<span class="grey">|</span>
<a href="register.htm" title="Registration at our school">Registration</a>
<span class="grey">|</span>
<a href="faculty.html" title="The Kabok Music School Faculty">Faculty</a>
<span class="grey">|</span>
<a href="mailto:info@kabokmusicschool.com?subject=kabokmusicschool.com"
title="Kabok Music School">Contact Us</a>
</span>
</div>
</div><!-- End of Footer -->
</body>
</html>

layout.css

@charset "utf-8";
/* CSS Document */

/* Page Content stuff. Makes the site "liquid" */
#content {
height: 100%;
min-height: 100%;

text-align: left;
}

#content,
#width {
/* Max-Width Hack for IE, because that's the way it rolls */
width: expression(document.body.clientWidth > 1000 ? "1000px" : "73%");
margin: 0 auto;
max-width: 1000px;
}

#content[id],
#width[id] {
/* height: auto;*/
width: 88%;
margin: 0 auto;
margin-top:-95px;
padding: 3.5em 1% 20px 1%;

border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}

/* Ends content */

/* Header Begins */
#bar {
height: 120px;
overflow: auto;
width: 100%;
clear: both;
position: relative;
top: 0px; /* Positions the bar at the top of browser screen */
background: #3d474e url(../images/logo.png) no-repeat;
}

#header {
height: 91px;
position: relative;
}

#header #title {
left: 160px;
position: absolute;
top: -100px;
z-index: 3;

padding: 5px;
text-align: right;
}

#header h1 {
margin: 0;
padding: 0;

color: #FFF;
font: 700 4em "Trebuchet MS", serif;
letter-spacing: -2px;
text-transform: lowercase;
}

#header h2 {
position: absolute;
top: 60px;
right: 235px;

margin: 0;
padding: 0;

font: 700 1em "Trebuchet MS", serif;
text-transform: lowercase;
color: #e6edf2;
}


/* Header Ends */

/* Page Content Begins */
#page {
position:relative;
float: left;
width: 100%;
clear: both;
overflow:auto;
padding-bottom: 4em;
}

#text {
position: relative;
margin-top: -100px;
width: 58%
}

.titles {
padding: 3px 0 5px 0px;
font-size: 18px;
letter-spacing: 3px;
font-weight: bold;
margin-bottom: 10px;
color: #3d474e;
/* border-left: 8px solid #657f96;*/
}

/* Page Content Ends */

/* Page Footers */
#footer {
float: left;
width: 100%;
clear: both;

margin-top: 3.9em;
background: #525252 url(../images/footer.jpg) repeat-x top left;
}

/* Sets the width of the footer content */
#footer #width {
position: relative;
z-index: 3;
font-size: 0.85em;
padding-top: 100px;
}

/* End Page Footers */


/* Start allignment rules */
.FloatLeft {
float: left;
}

.FloatRight {
float: right;
}

.onLeft {
text-align: left;
}

.onRight {
text-align: right;
}

/* End Allignment rules */

/* Start Colors */
.grey {
color: #666;
}

html.css

@charset "utf-8";
/* CSS Document */

html {
height: 100%;
}

body {
height: 100%;

margin: 0;
padding: 0;
text-align: center;

font: 400 0.8em Verdana, Arial, sans-serif;
line-height: 170%;

background: #f7f8fc url(../images/bg/header.jpg) repeat-x top left;
color: #000;
}

a {
color: #000;
margin: 0;
}

u {
padding: 0;
}

hr {
margin: 20px 0;
}

i {
color: #5c81a7;
}

I noticed that adding overflow:auto will cause me to reposition the elements on top. But it doesn't seem to fix the problem still, that the border cuts off near the bottom of the page, and not at the beginning of the footer. I'm testing this in Chrome dev, if it makes a difference.

_Aerospace_Eng_
04-17-2011, 03:41 AM
You seem to be missing some CSS.

shadowsai
04-19-2011, 01:02 AM
You seem to be missing some CSS.

Well, there's nav.css and import.css. I just didn't think you'd need them. Anyways, I guess I'll post it here:

nav.css

@charset "utf-8";
/* CSS Document */

#nav {
width: 100%;
position: relative;
top: -123px;
}

ul {
font-family: Lucida Grande, Geneva, Arial, Verdana, sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
list-style: none;
}

ul li {
display: block;
position: relative;
float: right;
}

li ul {display: none;}

ul li a {
display: block;
text-decoration: none;
color: #eee;
padding: 5px 15px 5px 15px;
background: #3d474e;
margin-left: 1px;
white-space: nowrap;
}

ul li a:hover { background: #95A9B1; }

li:hover ul {
display: block;
position: absolute;
}

li:hover li {
float: none;
font-size: 13px;
}

li:hover a { background: #000; }

li:hover li a:hover { background: #95A9B1; }

import.css

@charset "utf-8";
/* CSS Document */

@import url(layout.css);
@import url(html.css);
@import url(nav.css);

_Aerospace_Eng_
04-19-2011, 02:08 AM
Try this for layout.css

@charset "utf-8";
/* CSS Document */

/* Page Content stuff. Makes the site "liquid" */
#content {
min-height: 100%;

text-align: left;
overflow:hidden;
}

#content,
#width {
/* Max-Width Hack for IE, because that's the way it rolls */
width: expression(document.body.clientWidth > 1000 ? "1000px" : "73%");
margin: 0 auto;
max-width: 1000px;
}

#content[id],
#width[id] {
/* height: auto;*/
width: 88%;
margin: 0 auto;
margin-top:-95px;
padding: 3.5em 1% 20px 1%;

border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}

/* Ends content */

/* Header Begins */
#bar {
height: 120px;
overflow: auto;
width: 100%;
clear: both;
position: relative;
top: 0px; /* Positions the bar at the top of browser screen */
background: #3d474e url(../images/logo.png) no-repeat;
}

#header {
height: 91px;
position: relative;
}

#header #title {
left: 160px;
position: absolute;
top: -100px;
z-index: 3;

padding: 5px;
text-align: right;
}

#header h1 {
margin: 0;
padding: 0;

color: #FFF;
font: 700 4em "Trebuchet MS", serif;
letter-spacing: -2px;
text-transform: lowercase;
}

#header h2 {
position: absolute;
top: 60px;
right: 235px;

margin: 0;
padding: 0;

font: 700 1em "Trebuchet MS", serif;
text-transform: lowercase;
color: #e6edf2;
}


/* Header Ends */

/* Page Content Begins */
#page {
position:relative;
float: left;
width: 100%;
padding-bottom: 4em;
}

#text {
position: relative;
margin-top: -100px;
width: 58%
}

.titles {
padding: 3px 0 5px 0px;
font-size: 18px;
letter-spacing: 3px;
font-weight: bold;
margin-bottom: 10px;
color: #3d474e;
/* border-left: 8px solid #657f96;*/
}

/* Page Content Ends */

/* Page Footers */
#footer {
float: left;
width: 100%;
clear: both;

margin-top: 3.9em;
background: #525252 url(../images/footer.jpg) repeat-x top left;
}

/* Sets the width of the footer content */
#footer #width {
position: relative;
z-index: 3;
font-size: 0.85em;
padding-top: 100px;
}

/* End Page Footers */


/* Start allignment rules */
.FloatLeft {
float: left;
}

.FloatRight {
float: right;
}

.onLeft {
text-align: left;
}

.onRight {
text-align: right;
}

/* End Allignment rules */

/* Start Colors */
.grey {
color: #666;
}
I added overflow:hidden; to #content like I said to do, if you wan't content to flow out of #content then you will need to use a clearing element. I got rid of the clear:both as well on #page. Your border shows up just fine with the CSS above for layout.css

shadowsai
04-22-2011, 07:34 AM
Thank you so much!
However, how would I make it so that the border cuts off where the footer begins?

_Aerospace_Eng_
04-22-2011, 04:09 PM
Remove the float on your footer and see if that works.

shadowsai
04-30-2011, 09:21 PM
Remove the float on your footer and see if that works.

Nope, that won't work since the image "footer.jpg" is on top of the footer color. It's an 8x17px image (stripes).

Edit: By the way, if I need to ask a question about getting one of those web 2.0 "ribbons" working, would I need to start a new topic? Or would that even work, considering my site is liquid?

amitsh
04-30-2011, 11:14 PM
why u r using <div id="bar"></div> tag to add image in backgroung u can add det in body..

or if not a problem can u link all images ur using in ur layout in background so i can c how u want to make them look like and change code here and there for u... ur layout image wud be much help too...

and if u c ur layout ur text from top, below header is cutting too...

regards

shadowsai
05-01-2011, 05:09 AM
why u r using <div id="bar"></div> tag to add image in backgroung u can add det in body..

or if not a problem can u link all images ur using in ur layout in background so i can c how u want to make them look like and change code here and there for u... ur layout image wud be much help too...

and if u c ur layout ur text from top, below header is cutting too...

regards


It's not actually a background image, it's just a logo on the left side. I know Aerospace's code isn't perfect, I just have to change the margin for #text (which I've done).

I'll upload my images somewhere, I just haven't uploaded the images to a domain yet. It'll probably be on Mediafire, so you can go download and link them yourself. I'll post them in a bit.

amitsh
05-01-2011, 12:07 PM
there is no need to add extra div to add logo in ur design... u can use h1, which is ur website title, with span tag and add background image there and give some padding there or stuff like that...

i just also figured out if u change #content
padding: 3.5em 1% 20px;

to

padding: 3.5em 1% 0;

those sides line remove from footer, but still some pixel is overflowing there...

just upload ur images only det way it can be seen wat u want & y u r not getting det...

happy coding

regards

shadowsai
05-07-2011, 09:33 PM
there is no need to add extra div to add logo in ur design... u can use h1, which is ur website title, with span tag and add background image there and give some padding there or stuff like that...

i just also figured out if u change #content
padding: 3.5em 1% 20px;

to

padding: 3.5em 1% 0;

those sides line remove from footer, but still some pixel is overflowing there...

just upload ur images only det way it can be seen wat u want & y u r not getting det...

happy coding

regards

I'm not sure I understand what you mean by using h1. Anyways, I just got around uploading my images, see if this helps at all. Here's the link:

http://www.mediafire.com/file/5b19i0d18g6dnza/images.zip

As well, you'll probably notice that I have a welcome image "ribbon" i'm trying to implement. Will I be able to do this with a liquid site? Or is there a better way to do this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum