From 63a4b43973aa081aaf5b8f32e2f8e5dd703cf9ac Mon Sep 17 00:00:00 2001 From: bmen Date: Mon, 15 Apr 2019 00:17:31 +0000 Subject: [PATCH 1/4] =?UTF-8?q?'README.md'=20=C3=A4ndern?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 09bba54..ba2c629 100644 --- a/README.md +++ b/README.md @@ -22,3 +22,5 @@ The red lines are purely CSS and no additionaly HTML elements have to be created .row::after {...} ``` ## Search results grid +![](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 that is relatively positioned. And it needs even a minimum height, because the absolutely positioned search result item falls from the HTML flow. From a097a39ccf029c6773b91a367332b6ac05442354 Mon Sep 17 00:00:00 2001 From: bmen Date: Mon, 15 Apr 2019 00:18:30 +0000 Subject: [PATCH 2/4] =?UTF-8?q?'README.md'=20=C3=A4ndern?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ba2c629..f06812f 100644 --- a/README.md +++ b/README.md @@ -23,4 +23,4 @@ The red lines are purely CSS and no additionaly HTML elements have to be created ``` ## Search results grid ![](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 that 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. From eeee7eb86771b887d7f8c8c29c38382e0c45ba0b Mon Sep 17 00:00:00 2001 From: bmen Date: Mon, 15 Apr 2019 00:22:44 +0000 Subject: [PATCH 3/4] =?UTF-8?q?'README.md'=20=C3=A4ndern?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f06812f..c069807 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ https://oho.zeitpunkt-agentur.org The styling of the page is in the CSS file: **[style.css](https://git.bmen.eu/Projekte/oho/src/master/style.css)**. In general, only the classes of elements of the media wiki have to be found out and transferred to the CSS. Some implementations are a bit more tricky and are described in more detail in this Readme. ### Images -The images in the folder [/img](https://git.bmen.eu/Projekte/oho/src/master/img). There are sample images as well as individual icons, banner / footer backgrounds and logo files. +All images are in the folder [/img](https://git.bmen.eu/Projekte/oho/src/master/img). There are sample images as well as individual icons, banner / footer backgrounds and logo files. ### Javascript The Javascript Framework Jquery is used for this website. The javascript functions are saved in separate files in the [/js](https://git.bmen.eu/Projekte/oho/src/master/js) folder and named according to their task. From 7ede35499ec8fd9b04b3710d14ca6dc1526d9764 Mon Sep 17 00:00:00 2001 From: bmen Date: Mon, 15 Apr 2019 00:29:44 +0000 Subject: [PATCH 4/4] =?UTF-8?q?'README.md'=20=C3=A4ndern?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index c069807..9e534cc 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,27 @@ The Javascript Framework Jquery is used for this website. The javascript functio ## Overview CSS classes homepage ![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) 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 ![](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.