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 4 of 4

Thread: CSS help gaps

  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question CSS help gaps

    hello everyone,

    i have 3 problems with my css code

    1. i dont know how to make a gap at the top of my first img the "technolane logo" one, i want about a 6% gap at the top so it doesnt hit the top of the browser window.

    2. i have a small gap between the bottom of the embeded content the "flash banner" and the "space for text".

    3. i want to add text to my css layout in 2 colums like the original html site
    - http://technolane.sitesled.com <-- this is not the CSS layout it is an old HTML layout that i am converting to CSS.

    this is my CSS code so far:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
            <head>
              <title>technolane - local computer help - technolane it services 
              - technolane web services - website design - computer repair 
              in essex - website design in essex</title>
              
              <style type="text/css">
              
    /* Created For and By Technolane IT and Web Services (www.technolane.co.uk)
    //* You may not use or recreate any of the content on this site.
    //* © Technolane 2007 All Rights Reserved James Lane and Robert Lane.
    //***********************************************/
              
    /*ToC
              1. Defaults
              2. Structure
              3. Links and Navigation
              4. Fonts
              5. Images 
              6. Forms
                    
    Notes
            
    */
            
            
            
    /* ------------ 1. Defaults ------------ */
            
    * {
              margin: 0;
              padding: 0;
              }
                     
    body {
              background-color:#c0c0c0
              }
             
               
    /* ------------ 2. Structure ------------ */
    
        /* Technolane Logo */
        img {
              display: block;
              margin-left: auto;
                 margin-right: auto; 
              margin-top:4%
              }
    
        /* Navigation Bar */        
        img {
              display: block;
              margin-left: auto;
                 margin-right: auto; 
              margin-top:0%
              }    
                   
        /* Flash Banner */         
        #flash {
            display:block;
            margin-left:auto;
            margin-right:auto;
            width:800px;    
            background:url(technolanebanner.swf); 
            
            }
            
        /* Space For Text */
        #space {
            display:block;
            margin-left:auto;
            margin-right:auto;
            margin-top:0%;
            width:800px;    
            background-color:#FFFFFF;
            height:auto;
            }
            
        /*Bottom Navigation Space */
        #bottomnavigation {
            display:block;
            margin-left:auto;
            margin-right:auto;
            margin-top:0%;
            width:800px;    
            background-color:#c0c0c0;
            height:auto;
            text-align:center;
            }
            
                /*Bottom Navigation Space */
        #copr {
            display:block;
            margin-left:auto;
            margin-right:auto;
            margin-top:0%;
            width:800px;    
            background-color:#c0c0c0;
            height:auto;
            text-align:center;
            }
            
    /* ------------ 3. Links And Navigation ------------ */
    
    a.bottomnav:link {
        text-decoration: none;
        color: #464646;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:12px;
        font-style:normal;
        text-align:center;
    }
    a.bottomnav:visited {
        text-decoration: none;
        color: #464646;
    }
    a.bottomnav:hover {
        text-decoration: none;
        color: #464646;
    }
    a.bottomnav:active {
        text-decoration: none;
        color: #464646;
    }
    body {
        background-color: #c0c0c0;
    }
        
    /* ------------ 3. Fonts ------------ */
    
    .copyright
        {
        font-family:Arial, Helvetica, sans-serif;
        font-size:10px;
        font-style:normal;
        color:#464646;
        text-align:center;
        text-decoration:none;
        }
        
            </style>
            </head>
            <body>
        <!--Technolane Logo Image -->
               <img class="normal" src="header.gif" width="800" height="66" alt="technolane it services banner" />
       <!--Navigation Bar Image -->
               <img class="normal" src="homebuto_02.jpg" width="800" height="34" alt="navigation bar" />
       <!--Flash Banner SWF -->
               <div id="flash"><embed src="technolanebanner.swf" wmode="transparent" width="800" height="180" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" title="flash banner"></embed>
       <!--White Text Space -->
            <div id="space"><br /></div>
            
       <!--Bottom Navigation Links -->
            <div id="bottomnavigation"><br />
            <a href="index.html" class="bottomnav">Home&nbsp;|&nbsp;</a><a href="servicearea.html" class="bottomnav">Service Area&nbsp;|</a><a href="rates.html" class="bottomnav">&nbsp;Rates&nbsp;|</a><a href="contactus.html" class="bottomnav">&nbsp;Contact Us&nbsp;|</a><a href="links.html" class="bottomnav">&nbsp;Links</a></div>
       <!--Copyright Message -->
               <div id="copr"><span class="copyright"><br />Created By Technolane Web Designs 2007 Copr &copy;. All Rights Reserved.</span></div>
              
            </div>
                </div>    
            </body>
    
          </html>
    thanking you in advance

    James
    Last edited by CSSisthebest; 07-15-2007 at 11:07 PM.

  • #2
    New Coder
    Join Date
    Apr 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts
    First of all a live preview would be helpful, and second your description is very confusing. It is much more manageable and you are more likely to get responses if you just ask for help with one problem at a time.

    If I understand you correctly you could use the padding-top property and set it to a number of pixels, defining the height of padding with a percentage will not produce a desirable result.

    As for number two, is there a problem? You want the gap to go away perhaps?

    As for number three a table with two columns and one row should do the trick.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts
    yeah i do want the gap to go away, i will sort out a live preview, and
    i dont know what code to use to do the colums in css as i have only just started using it would you be able to help ? thanks

    i will also use the padding-top cheers

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question Live Preview Of the CSS Site So Far

    this is the live preview of the css version of the site: http://technolanecss.sitesled.com/

    and this is the old html site :
    http://technolane.sitesled.com/

    the issues and problems i am having are as follows:

    1. i need to get rid of the small gap between the bottom of my flash content and the top of my white div tag box.

    2. is it possible to lay text on top of the navigation bar image for my links, if it is how would i do this ?

    3. i want to recreate the layout of the text on the white div tag box, like the original html how would i do this someone mentioned columns but i don't have a clue how to do this at all ?

    thanking you in advance

    James


  •  

    Posting Permissions

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