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.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Web page borders

    I have this page i built where the Background doesn't move but the content in the middle does, I have a frame with two frames inside. one is navigation and the other has text. How can I get rid of the borders on the left and right, so thetwo boxes look free?


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Welcome to........</title>
    
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    </head>
    <body>
    
    <div id="container" >
    
    <div id="top"></div><!-- this is required to push the #header down -->
    
    <div id="header" >
    <img src="images/Mug with foot.gif" alt="Foot holding mug" width="95" height="130" hspace="10" align="left">
    <ul id="navigation">
      <li><a id="current" href="#">Home</a></li>
     <li><a href="#">About Us</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
    </div><!--end #header -->
    
    <div id="content" >
      <p>My interest in photography started when I was about 15, when I watched 
          my older brother develop photos in a downstairs bathroom that he had 
          turned into a darkroom. Of course when I had a baby of my own the 
          interest in photography resurfaced once again. I'm sure I had the most 
          photographed baby in the world. In 2003 I joined the local camera club 
          and I became very serious about my hobby. I was the club's editor for 
          their newsletter for at least 4 years, and have earned many merits and 
          honours for my photos in our monthly photo comps. I have earned my way 
          into 'A' Grade, which is the top grade in our club. I have won various 
          photo competitions over the last five years.
      </p>
      
    <p>
        By the way, I forgot to mention that I have a physical disability. I'm 
        a thalidomide victim which means I have very short arms with three 
        fingers on each hand, so I take most of my photos (other than using a 
        tripod) while holding the camera with my feet. Not many photographers 
        can put that on their resume.
        
        
        
    </div>
    
    
    </body>
    </html>
    Attached Files Attached Files
    Last edited by Charisma; 01-29-2012 at 08:04 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Charisma,
    Those borders come from the three lines I've highlighted in red below. You can delete those lines, or comment them out, to remove the left and right borders.
    Code:
    #container {
        border-left: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;
        box-shadow: 0 0 10px #000000;
        color: #000000;
        margin: auto;
        min-height: 100%;
        padding: 0 40px;
        width: 700px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    There were a couple missing closing tags in your code. You should check out the links in my signature line about validation, they can help you a lot.

    I've highlighted in red the closing tags I added. I also added some indentation and commenting that might help keep track of where elements are starting and ending -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Welcome to........</title>
    
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    </head>
    <body>
        <div id="container" >
            <div id="top"></div><!-- this is required to push the #header down -->
            <div id="header" >
                <img src="images/Mug with foot.gif" alt="Foot holding mug" width="95" height="130" hspace="10" align="left">
                    <ul id="navigation">
                        <li><a id="current" href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
            </div><!--end #header -->
                <div id="content" >
                    <p>
                        My interest in photography started when I was about 15, when I watched 
                        my older brother develop photos in a downstairs bathroom that he had 
                        turned into a darkroom. Of course when I had a baby of my own the 
                        interest in photography resurfaced once again. I'm sure I had the most 
                        photographed baby in the world. In 2003 I joined the local camera club 
                        and I became very serious about my hobby. I was the club's editor for 
                        their newsletter for at least 4 years, and have earned many merits and 
                        honours for my photos in our monthly photo comps. I have earned my way 
                        into 'A' Grade, which is the top grade in our club. I have won various 
                        photo competitions over the last five years.
                    </p>    
                    <p>
                        By the way, I forgot to mention that I have a physical disability. I'm 
                        a thalidomide victim which means I have very short arms with three 
                        fingers on each hand, so I take most of my photos (other than using a 
                        tripod) while holding the camera with my feet. Not many photographers 
                        can put that on their resume.
                    </p>    
                <!--end content--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This was very helpful and cleaned things up. Thanks. Is there away to have the box like my header has, for my text part below it? and that will stretch as I add more text?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Charisma View Post
    This was very helpful and cleaned things up. Thanks. Is there away to have the box like my header has, for my text part below it? and that will stretch as I add more text?
    Sure, if you remove the height that element can expand to enclose however much text you put in it.
    Like this -
    Code:
    #content {
        background-color: rgba(49, 88, 126, 0.2);
        border: 1px solid #5588AA;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 4px 4px 8px #333333;
    /*height: 285px;*/
        margin: 39px auto 40px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Some padding might be nice there too -
    Code:
    #content {
        background-color: rgba(49, 88, 126, 0.2);
        border: 1px solid #5588AA;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 4px 4px 8px #333333;
        margin: 39px 0 40px;
        padding: 0 20px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    My content does't look like yours. I have two, Should I take both mine out and replace with yours?

    Code:
    #content {
        padding-bottom:40px;
     }
    #content p {
        font-size:100%;
        color: #000 ;
        text-shadow:  1px 1px 1px;
     }

  • #8
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I tryed it. perfect. Thanks.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Charisma View Post
    My content does't look like yours. I have two, Should I take both mine out and replace with yours?

    Code:
    #content {
        padding-bottom:40px;
     }
    #content p {
        font-size:100%;
        color: #000 ;
        text-shadow:  1px 1px 1px;
     }
    In that bit you've quoted above, the first one puts 40px padding on the bottom of #content.
    The second one is styling the paragraph tags inside of #content, it doesn't do anything to #content itself.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I copied yours and it's perfect. Thanks.


  •  

    Posting Permissions

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