projekte
/
oho
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

'README.md' ändern

This commit is contained in:
bmen 2019-04-15 00:29:44 +00:00
parent eeee7eb867
commit 7ede35499e
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -13,6 +13,27 @@ The Javascript Framework Jquery is used for this website. The javascript functio
## Overview CSS classes homepage ## Overview CSS classes homepage
![Overview CSS classes homepage](https://git.bmen.eu/Projekte/oho/raw/master/doc/overview_css_classes_home.png) ![Overview CSS classes homepage](https://git.bmen.eu/Projekte/oho/raw/master/doc/overview_css_classes_home.png)
## z-index
```
.header {
z-index:1003;
}
.search-results-item:hover {
z-index:1002;
}
.row::before {
z-index:1001;
}
.row::after {
z-index:1001;
}
.searchbar {
z-index:1000;
}
.search-results-item {
z-index:999;
}
```
## Row - Background and red lines (CSS line: 51-87) ## Row - Background and red lines (CSS line: 51-87)
The rows who separating the content horizontally must be 100% wide. This means that the width restriction of the content must be made within the row. So the background color gradiation is in full width and the red lines are on the left and right side of the browser. The rows who separating the content horizontally must be 100% wide. This means that the width restriction of the content must be made within the row. So the background color gradiation is in full width and the red lines are on the left and right side of the browser.
@ -23,4 +44,5 @@ The red lines are purely CSS and no additionaly HTML elements have to be created
``` ```
## Search results grid ## Search results grid
![](https://git.bmen.eu/Projekte/oho/raw/master/doc/search-results-grid.png) ![](https://git.bmen.eu/Projekte/oho/raw/master/doc/search-results-grid.png)
Because of the hover effect, the search result item (.search-results-item) must be absolutely positioned. Therefore, it is important that there is a grid element (.col-1-4) above the search result item which is relatively positioned. And it needs even a minimum height, because the absolutely positioned search result item falls from the HTML flow. Because of the hover effect, the search result item (.search-results-item) must be absolutely positioned. Therefore, it is important that there is a grid element (.col-1-4) above the search result item which is relatively positioned. And it needs even a minimum height, because the absolutely positioned search result item falls from the HTML flow.