Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ladna Meke
Ladna Meke
5,752 Points

Button, Margin and Padding not working correctly

his is my first ever HTML project and I'm trying to clone the Google Nigeria homepage. I'm about 90% completed, but I have issues that I've tried fixing, to no avail.

First, the 'app logo' and "Sign in" on the navigation is further up than the other items. I tries using margin-top on those nth items, but it affects entire nav items.

Second, is the biggest issue yet. When I set a border-radius of 2px to the search buttons, it somehow creates a box-shadow, even though I haven't set any box-shadow at all.

Thirdly, I set opacity on the search button text, but it affects the search button itself. How can I explicitly set opacity of the text without involving the background?

Also, when I set an hovered condition on the text field, it changed the text input width and height, I had to manually look for a way to return it to normal.

Lastly, I tried adding the 'microphone.png' (the Google voice search button), as a background-image, but it doesn't work. Also, how can I create a mouseover text when the microphone is hovered on?

Here's the html:

<body>
    <header>
        <nav>
            <ul class="first">
                <li><a href="#">+You</a></li>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Images</a></li>
                <li><a href="#"><img src="img/app.png" id="menu"/></a></li> 
                <li><a href="#">Sign in</a></li>
            </ul>
        </nav>
    </header>

    <div class="wrapper">
        <img src="img/logo.jpg" alt="Google">
        <br></br>

        <input type="text" id="icon"/></input>

        <div class="search-button">
            <input type="submit" value="Google Search"></input>
            <input type="submit" value="I'm Feeling Lucky"></input>
        </div>



        <ul class="language">
            <li>Google.com.ng offered in:</li>
            <li><a href="#">Harshen Hausa</a></li>
            <li><a href="#">Asụsụ Igbo</li>
            <li><a href="#">Èdè Yorùbá</li>
            <li><a href="#">Pidgin</li>
        </ul>   
    </div>


    <div class="footer">
        <ul id="left-footer">
                <li><a href="#">Advertising</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">About</a></li>
        </ul>

        <ul id="right-footer">
            <li><a href="#">Privacy & Terms</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Use Google.com</a></li>
        </ul>
    </div>
</body>

and here's the CSS:

/******************************
GENERAL
******************************/
body {
    font-family: arial, sans-serif;
    text-align: center;
    width: 100%;

}
/******************************
HEADER
******************************/

/**Navigation*****/


nav ul {
    float: right;
    margin-top: -12px;
}

.first li a {
    text-decoration: none;
    color: #000;
    font-size: .8em;
    margin-right: 15px;
    margin-top: 13px;
    padding: 1px;
    float: left;    
}

.first li a:hover {
    text-decoration: underline;
}


.first li:nth-child(4) a {
    opacity: .1;
    padding-top: 10px;
    opacity: .5;
}

.first li:nth-child(4n) a:hover {
    opacity: 1;
}

.first li:last-child a {
    color: #fff;
    background: #4285f4;
    padding:9px 14px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 0px;
    margin-right: 10px;
    border-radius: 3px;
}

.first li:last-child a:hover {
    cursor: default;
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.3);
}

/******************************
SECTION
******************************/
.wrapper {
    position: relative;
    top:120px;
    max-width: 100%;
    /*margin: 0 auto;*/
    padding: 0 5%;
    clear: right;
    text-align: center;
}


div img {
    max-width: 100%;
    position: relative;
    top: 5px;
}

input[type="text"] {
    width: 550px;
    height: 23px;
    margin: -10px 0 15px 0;
    opacity: .6;
}

input[type="text"]:hover {
    opacity: 1;

}

input[type="text"]:focus {
    border: 1px solid #4285f4;
    outline: none;
    height: 25px;
    width: 553px;
}

input[type="submit"] {
    margin-bottom: 10px;
    padding: 3px;
    color: #666;
    margin-right: 3px;
    margin-left: 3px;
    font-weight: bold;
    font-size: 0.7em;
    height: 28px;
    font-weight: 750;
    opacity: .8;
}

input[type="submit"]:hover {

    opacity: 1;

}

input[type="submit"]:focus {
    border: 1px solid #4285f4;
}

li {
    display: inline-block;
    text-decoration: none;
}

.language {
    font-size: .8em;
    text-decoration: none;
    color: #000; 
    margin-top: 37px;
}

.language a {
    text-decoration: none;
    margin: 0 3px 0 3px; 
}

.footer {
    position: fixed; 
    clear: both; 
    width: 100%; 
    height: 28px; 
    bottom: 0; 
    padding: 13px 0 0 0; 
    text-align: center;
    color: #335500;
    background: #f2f2f2;
    border-top: 1px solid #e4e4e4;

}

#left-footer {
    float: left;
}

#left-footer a {
    text-decoration: none;
    display: inline-block;  
    margin-right: 15px;
    color: #666;
    font-size: .8em;
}

#right-footer {
    float: right;
}

#right-footer  a {
    text-decoration: none;
    display: inline-block;      
    color: #666;
    font-size: .8em;
    margin-left: 1px;
    margin-right: 25px;
}

#icon {
    background:#FFFFFF url(img/microphone.png) no-repeat 4px 4px;
    padding:4px 4px 4px 22px;
    height:18px;
}
Christian Lawrence
Christian Lawrence
3,941 Points

I don't feel comfortable helping you with this on account of it being a possible PHISHING project.

Please create your own project, perhaps about yourself or a hobby.

:)

James Barnett
James Barnett
39,199 Points

Re-creating the Google Homepage is a popular assignment for learning CSS basic. Re-creating a pre-designed site is a great exercise to focus on HTML and CSS without needing to worry about design.

I don't feel comfortable helping you with this on account of it being a possible PHISHING project.

A simple solution is to just leave out the login button.

1 Answer

Christian Lawrence
Christian Lawrence
3,941 Points

In regards to the microphone icon and the padding.

Your ID #icon is targeting an input, these are particularly annoying to style. Set the height of the icon to be say 40px. Also on your background, try setting % rather than px.

#icon {
    background:#FFFFFF url(img/microphone.png) no-repeat 98% 50%;
    padding:4px 4px 4px 4px;
    height: 40px;
}
#icon:hover{
background:#FFFFFF url(img/microphone_blue_text.png) no-repeat 98% 50%;
}

A cheats method would be to switch the background img out when on hover. Otherwise I'd look for some JS solution

Ladna Meke
Ladna Meke
5,752 Points

Thanks Christian.......

and thanks, James, for making Christian talk

Christian Lawrence
Christian Lawrence
3,941 Points

If there are any other bits let me know, but I think your main issue is just inputs being a pain to style.

:)

Ladna Meke
Ladna Meke
5,752 Points

Thanks Christian, I already submitted the project.

However, I have another project I need help on. Here's the link to the question on Treehouse. Thanks

https://teamtreehouse.com/forum/help-with-media-query