www.webdeveloper.com
Results 1 to 6 of 6

Thread: Problems with spacing and background color

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Problems with spacing and background color

    I had built my first website and decided to make it adaptive. Unfortunately many things have gone T#ts up!
    The problems that i have are;

    1. I don't know how to add color to an entire page (1000px wide). I have been adding it as a background to text boxes.

    2. The page background color stops at the foot of the first text box. How do I get it to go to the bottom of the page? I have tried adding or deleting </div>'s. The background color is

    3. I have moved the style="" coding to a css file but for some reason the spacing between the last 5 text boxes has disappeared. What do I need to do to put the spaces back in?

    I have pasted a snippet of the bare html code below;

    <div id="main-box">
    <h3> </h3>
    <Div id="texted-1" >
    <p> </p>
    <a href="#up">Back to the top</a>
    </div>
    </div>
    <div id="book_2">
    <div id="book_3-head">
    <h3></h3>
    <Div id="texted-2">
    <p></p>
    <p></p>
    </div>
    </div>
    </div> <!-- If i remove this div the background flows down the entire page but all the text box bottoms touch each other -->
    <div id="book_3">
    <div id="book_3-head">
    <h3></h3>
    <Div id="texted-3">
    <p></p>
    <p></p>
    </div>
    </div>
    </div>

    The css code for the page color is below.

    #hard {padding-top: 30px;
    padding-bottom: 30px;
    background-color: #fffff0; <!--- I assumed this would apply to the whole page -->

    I have pasted a copy of the css code below for the second text box (1 is oK and all the rest of the divisions have the same code)

    #book_2 {
    background-color:#FFFFFF;
    width: 100%;
    padding-top: 20px; <!-- trying this to place the padding between each text box --->
    position: relative; left: 15%;
    position: relative; top: 30px;
    width: 70%;
    border-color: #D5D6FF;
    border-style: outset;
    border-width: 4px;
    text-align: left;
    font: arial,san-serif;
    color: black;
    }
    #texted-2 {
    padding-left: 10px;
    padding-right: 10px;
    font-family: arial;
    font-size: 1.00em;
    color: black;
    }

    You can see the page and the full html code here

    You can see the full css code here

    Can someone tell me what i need to do to get the page color to display for the whole page and how to put the gaps between the text boxes?

    Finally. I don't know if you can do this; My intention is to use this css file for all my pages/urls. They have the same format except this page has 8 text boxes where as the others have between 1 and 4. The divisions have the same title on every page. This means that some divisions would not be found in all the pages.

    In the old days when fortran and COBOL were around if you used one file and divisions weren't used the program would have crashed. Does the same apply with css?

  2. #2
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    Quote Originally Posted by tony webb View Post
    I had built my first website and decided to make it adaptive. Unfortunately many things have gone T#ts up!
    The problems that i have are;

    1. I don't know how to add color to an entire page (1000px wide). I have been adding it as a background to text boxes.
    One of your major problems is that you have at least 17 errors in your HTML markup. Once all errors in markup are cleaned up, you usually get what you are looking for. Fix the bad HTML, and then see if you get what you are expecting.

    2. The page background color stops at the foot of the first text box. How do I get it to go to the bottom of the page? I have tried adding or deleting </div>'s. The background color is
    These editions you have been doing have probably complicated the markup, introducing errors, which you have not cleaned up by trying to validate the document.

    3. I have moved the style="" coding to a css file but for some reason the spacing between the last 5 text boxes has disappeared. What do I need to do to put the spaces back in?
    Styling (using CSS) can be done in three ways:

    1. (External) stylesheets, which are files with a name like *.css and containing only valid CSS.
    2. The <style> element contained in the <head> element, where you can gather basically what you can also put into external stylesheets. In general, you want form #1 when you want to apply a uniform style as a web site across all your documents. Stylings in the <head> element should be moved to *.css files when you realize they are necessary for uniformity of the web site theme or style.
    3. Style attributes inside individual elements, styling only that element. It is a good idea to move form #3 to form #2 when the style attribute gets too long or better when you want to make changes quickly at the head of the document, rather than search for the elements in the body to make changes.

    Keep in mind that style properties can override other style properties when they contradict each other. This is what the C is CSS: "cascading" . Learn the rules of cascading.

    </div> <!-- If i remove this div the background flows down the entire page but all the text box bottoms touch each other -->
    And you will probably end up with invalid HTML.

    Important rule! NEVER waste your time trying to style a document (that is, code the CSS) unless you have validated HTML. The most problems with HTML and CSS are solved by validating the HTML first. After you are satisfied with the CSS, validate that too.
    Last edited by mavigozler; 09-28-2012 at 03:24 PM.

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    I have just reread what you have said. The code for the css and html did pass validation when they were both in one file. I just thought it would be easier to create separate files for creating a responsive design.

    After reading your reply I revalidated the code and corrected the errors using w3 schools. They use html5 and css3. I don't know where to validate code with older versions.

    I will put the css code back in the head of the html document. It worked without any problems when I had the page set up that way.

    Thanks for your help and advice.
    Last edited by tony webb; 09-29-2012 at 04:46 AM.

  4. #4
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    [---posted double ---see next message---]
    Last edited by mavigozler; 09-29-2012 at 07:36 AM.

  5. #5
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    For the ultimate in validation, go here: W3C Markup Validation Service

    It is the final authority.

    These are the keepers of what was previously called the HTML "recommendation."

    They were too modest to use the word "standard" although I think they do now. The W3C that standardizes HTML is made up of individuals (like Tim Berners-Lee, who adapted the "hyper text" concept to create the web page form of it in the early 1990s) and the major (corporate) heavyweights who in particular create the HTTP clients--more commonly known as web browsers--- that are used universally (Mozilla, Microsoft, Apple, and so on).

    Make sure your DOCTYPE is set to the HTML 4.01 Strict or 5 doctype, and then you should keep fixing ALL errors until you see green and no red. HTML 5 continues to give one warning which you can ignore.

    BE SCRUPULOUS even in getting rid of warnings. Using the validator makes your page better and it teaches you better HTML at the same time. As you get better with HTML, your validations will be far more rapid. When you see 71 errors, also understand that errors propagate errors: when you fix the first error, you may eliminate the next 35 errors. It works that way.

    Go to the CSS validator and check that too.

    When everything is validated, and you still are not getting the look you want, then posting here will probably get you much more luck.

  6. #6
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Thanks for your reply. I just logged in to post again on this issue.

    It is w3c that I use. The html and css are validated, they offer a validation certificate to place on your site. I have resolved the text box problem and got them to space out as I wanted them. I'm not sure if it is the correct way though. What I have done is set out below;

    I have added extra divisions to the html for the padding. These are; <div id="a-back" style="padding-top: 20px">

    I used this code for the css file;

    *** for the spacing and background between the text boxes. It doesn't seem to be working.

    #b-back {background-color: #fffff0;
    width: 100%;
    padding-top: 20px;
    }

    **** for the text box positioning, border and text positioning

    #book-2 { padding-top: 20px;
    background-color:#FFFFFF;
    position: relative; left: 15%;
    position: relative; top: 30px;
    width: 70%;
    padding: 10px;
    border-color: #D5D6FF;
    border-style: outset;
    border-width: 4px;
    text-align: left;
    font-family: arial,san-serif;
    font-size: 1.00em;
    color: black;
    }

    *********** The texted-2 division below. Wouldn't work if I included it in the above division.

    #texted-2 {padding-left: 10px;
    padding-right: 10px;
    font-family: arial;
    font-size: 1.00em;
    color: black;
    }

    Is there an easier way to achieve what I want to achieve with the text boxes? You can see the layout here

    You can see all the css code here

    I am currently having problems with the footer menu. It's in css. I'll work on it for a few hours to see if I can sort it out.
    Last edited by tony webb; 09-29-2012 at 08:31 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles