| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
Im letzten Teil dieser Reihe hatten wir uns mit Widgets beschäftigt. Nun folgt noch die Formatierung für das Suchformular. Da wir dieses erstens quer oberhalb der beiden Seitenleisten positionieren wollen und es zusätzlich nahtlos in das Layout integrieren werden, sind einige Stiländerungen gegenüber dem Standardformular notwendig.
Hier entsteht aber ein Sonderfall: Wir wollen den Knopf für das Absenden des Suchformulars mit einer Grafik versehen. Dies geht leider nicht direkt im Stylesheet; wir müssen es später im Quellcode nachholen. Gleichzeitig fügen wir noch die Definition für die verschiedenen Arten der Suchformulare im Inhaltsbereich ein, die wir später verwenden werden.
...
/* Suchformular oberhalb der Seitenleisten, innerhalb von div.sidebars */
div#sidebars div.searchForm {
background: transparent url(images/search_left.png) no-repeat top left;
height: 25px;
padding: 0px;
margin: 51px 0px 25px 23px;
width: 350px;
}
div#sidebars input.searchInput {
background: transparent url(images/search_input.png) repeat-x top left;
border: 0px solid transparent;
width: 270px;
height: 25px;
padding: 0px;
margin: 0px;
font-size: 0.9em;
line-height: 1.2em;
color: #99CC33;
padding: 2px;
position: relative;
top: -9px;
left: 12px;
}
div#sidebars .searchButton {
cursor: pointer;
width: 42px;
height: 25px;
margin-left: 7px;
}
div.entry div.searchForm {
background: transparent url(images/search_left.png) no-repeat top left;
height: 25px;
padding: 0px;
margin: 5px 0px 0px 0px;
width: 380px;
}
div.entry input.searchInput {
background: transparent url(images/search_input.png) repeat-x top left;
border: 0px solid;
width: 270px;
height: 25px;
margin:0px;
font-size: 0.9em;
line-height: 1.2em;
color: #99CC33;
padding: 2px;
position: relative;
top: -7px;
left: 12px;
}
div.entry .searchButton {
cursor: pointer;
width: 42px;
height: 25px;
margin-left: 7px;
}
...
Zum Abschluss folgen nun die Formatierungen für den Inhalt des Blogs. Diese nehmen wir momentan nur sehr einfach vor, da wir sie bei der Programmierung weiter verfeinern werden.
...
/* Formate fuer den Loop */
div#content {
width: 530px;
float: left;
}
div#content div#theLoop {
position: relative;
margin-left: 73px;
padding: 0px 0px 0px 10px;
}
...
Den Kopfbereich in eine Datei auslagern
Jetzt definieren wir in der Datei header.php den Kopfbereich für unser Thema. Da Eclipse bei jeder neuen PHP-Datei den Befehl phpinfo() einfügt, müssen wir ihn zuerst löschen. Danach definieren wir die notwendigen Einträge. Da diese Datei als erste geladen wird und der Webserver eine HTML-Datei an den Anwender senden soll, müssen wir auch mit den entsprechenden Kopfdaten die HTML-Datei beginnen. Natürlich fügen wir aber als erstes unseren Kommentarblock ein, gefolgt von der Document Type Definition (DTD).
Ganzen Artikel lesen...
Clemens Gull
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
