1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Laboratory Website Template

Discussion in 'Free Website Templates' started by Mimoun, Jan 18, 2013.

  1. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Harness the power of science with this clean-cut website template—it would look great used for a medical or health site.

    [​IMG]

    Download - View


    Web design sub pages:

    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]


    This website template will work with all modern web browsers.


    What is included:
    • HTML files source code
    • CSS file source code
    • Images: compressed versions
    • The design source, in this case, the PSD files
    • Sliced PSD file (Photoshop source design)
    Third party Stock Photos licensed from Veer:

    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]



    Third party fonts used:
    Font details coming soon.......

    Credits:
    Credit details coming soon......

    Design version 6
    Code version 3

    Download - View
     
  2. Karwanna

    Karwanna New Member

    I really like this template. One big problem I was hoping to get some help on though. When I change the logo image on pages (About, Services & Contact) the website automatically reverts those page links to the home page instead of the corresponding page (about, services & contact. It appears to be a huge glitch. Please help.
     
  3. Ruthe

    Ruthe Community Manager

    Hi Karwanna,

    I'm no HTML expert here, but I'm gonna try my best. Have you tried editing the source codes for the pages where the links change? You can easily cause the "About", "Services" and "Contact" links by editing the code so the link matches the page it's supposed to link to:

    HTML:
                <li class="selected">
                    <a href="index.html">home</a>
                </li>
                <li>
                    <a href="about.html">about</a>
                </li>
                <li>
                    <a href="services.html">services</a>
                </li>
                <li>
                    <a href="location.html">our locations</a>
                </li>
                <li>
                    <a href="contact.html">contact</a>
                </li>
                <li>
                    <a href="blog.html">blog</a>
                </li>
    Did I get your question right? If this doesn't answer, let me know. It'll be good if you can paste the source code of the problematic pages so at least we can look for the issue.
     
  4. Karwanna

    Karwanna New Member

    Thanks. I checked that and found that it wasn't the issue. Apparently the header image logo code <div id="header">
    <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a> has a glitch that makes those pages link incorrectly once I change the image source. What i ended up doing was taking the <a href="index.html" class="logo"></a> code off and just leaving the new logo image centered. It works. However, now I'm having a hard time widening the sidebar so that I can fit more text on each line. Other than that, everything is great.
     
  5. Ruthe

    Ruthe Community Manager

    Hi Karwanna,

    I'm kind of lost as to what is the problem now. ):

    Could you
    1. screenshot the pages which you're having problems with and
    2. quote the code of the pages you're having problems with?
    This way it will be easier to troubleshoot! :)

    If you would like to widen the sidebar, you'll need to edit the style.css sheet.

    I'm assuming you're having problems with the "about" page's sidebar, but this can be easily applicable to the other sub-pages of this template as well.

    First, find the body id.

    Code:
    #body {
        background: url(../images/bg-content.jpg) repeat;
        margin: 0 auto;
        min-height: 1100px;
        overflow: hidden;
        padding: 20px 0;
        width: [COLOR=#ff0000]960px[/COLOR];
    }
    Then, find the sidebar:

    Code:
    #body .sidebar {
        background: #94acb3;
        float: left;
        margin: 0 10px 0 20px;
        padding: 0 0 10px;
        width: [COLOR=#ff0000]210px[/COLOR];
    }
    Finally, look for the content:

    Code:
    #body .content {
        float: left;
        margin: 0 10px 0 20px;
        padding: 0;
        width: [COLOR=#ff0000]678px[/COLOR];
    }
    Now, what am I gonna do with all these snippets of code? Easy-peasy. Edit the body width to accommodate the amount that you would like to increase the sidebar width. For example, if I want to increase the sidebar width by 90px to 300px, I simply +90 to the body width. In essence, sidebar width + content width ≤ body width. So for us, it's gonna be
    • sidebar width: 300px
    • contend width: 678 - 90 = 588px
    • body width: remains 960px
    You get the idea.
     
  6. Mariam Alhammadi

    Mariam Alhammadi New Member

    how can I add to the menu bar without making it to the new line?
    [​IMG]
     
  7. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Sounds like you are new to coding.
    The first thing you should look at is the code in the index.html where you added "Challenges"
    Notice the "Div Section" <div id="header"> This tells you where to look in the style.css file

    index.html

    <body>
    <div id="header">
    <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
    <ul>
    <li class="selected">
    <a href="index.html">home</a>
    </li>
    <li>
    <a href="about.html">about</a>
    </li>
    <li>
    <a href="Challenges.html">Challenges</a>
    </li>
    <li>
    <a href="services.html">services</a>
    </li>
    <li>
    <a href="location.html">our locations</a>
    </li>
    <li>
    <a href="contact.html">contact</a>
    </li>
    <li>
    <a href="blog.html">blog</a>
    </li>
    </ul>
    </div>

    Looking inside the style.css you find all the sections marked
    #header
    Now look for
    #header ul li
    It looks like this
    #header ul li {
    float: left;
    list-style: none;
    margin: 0 0 0 116px;
    ;
    padding: 0;
    }

    Notice the line -> margin: 0 0 0 116px;
    This means there is 116px (space) between the categories ie., Home <- 116px -> About
    By adding an extra category you push the others to the right by the number of letters in the word CHALLENGES plus the 116px spacing.
    Try reducing it down to 82px and see if that helps.

     
  8. Nguyen Thi Hoa Tram

    Nguyen Thi Hoa Tram New Member

    I very like it. But I don't find html code to use for blogspot. :cry:
     
  9. sahartech

    sahartech New Member

    [​IMG]
     
    Last edited by a moderator: Nov 19, 2015