HTML and CSS Reference
In-Depth Information
a high negative arbritary value so that the text is positioned off screen, -10000px
is used in this case. Finally, the logo's background is set to the logo.
The h1 element is also floated to the left of the taskbar so that the search form
can occupy the remainder of the space available.
header#taskbar {
...
h1.branding {
margin: 0px;
float: left;
width: 73px;
height: 32px;
text-indent: -10000px;
overflow: hidden;
background: url('../img/momemo.png') no-repeat top left;
}
}
The next thing to do is to setup the clear-search link. You use the same image
replacement technique as before to replace the text within the clear-search link.
The button is floated to the right this time and hidden so that it isn't visible
immedietly.
header#taskbar {
...
h1.branding {
...
}
.clear-search {
float: right;
width: 35px;
height: 35px;
display: none;
overflow: hidden;
text-indent: -10000px;
background: url('../img/clear.png') 50% 50% no-repeat;
}
}
The final thing to add to the _layout.scss file is the searchactive override. When
you add the css class .searchactive to the header#taskbar element, it will show
the clearsearch button and provide enough space for it by adding a right margin
to the add-movie form. This prevents the .searchactive buttom from dropping
down onto a new line.
