Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Why is my border cutting off?

    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.
    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;
    }
    Code:
    <!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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?
    Last edited by _Aerospace_Eng_; 04-10-2011 at 03:58 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes the overflow should work. Post your latest code please.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Yes the overflow should work. Post your latest code please.
    index.htm
    Code:
    <!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
    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;
        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
    Code:
    @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.
    Last edited by shadowsai; 04-16-2011 at 09:11 PM.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You seem to be missing some CSS.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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
    Code:
    @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
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    @import url(layout.css);
    @import url(html.css);
    @import url(nav.css);

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for layout.css
    Code:
    @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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much!
    However, how would I make it so that the border cuts off where the footer begins?

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove the float on your footer and see if that works.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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?
    Last edited by shadowsai; 04-30-2011 at 09:16 PM.

  • #14
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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
    Last edited by amitsh; 04-30-2011 at 10:22 PM.

  • #15
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by amitsh View Post
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •