Minor bugs and made side images fixed on viewport

This commit is contained in:
Christian Wolf 2017-11-09 11:37:05 +01:00
parent f9555a2dc3
commit 6adc768c6a
3 changed files with 44 additions and 20 deletions

View File

@ -52,11 +52,7 @@ Structure of page
flex-flow: row;
width: 100%;
min-height: 100vh;
}
#left_side, #right_side
{
flex: 1 0 auto;
justify-content: space-around;
}
#page
@ -128,7 +124,7 @@ body
#topmenu > .nav {
padding: 0px;
margin: 0px;
min-height: 40px;
height: 40px;
}
#topmenu .nav > li > a {
@ -152,16 +148,33 @@ body
padding: 10px;
}
#left_side, #right_side
#page-div
{
padding-top: 35px;
margin-top: 40px;
}
#page {
padding-top: 35px;
width: 1000px;
}
#left_side-image, #right_side-image
{
position: fixed;
height: 100vh;
width: calc( (100% - 980px) / 2 );
z-index: -10;
}
#left_side-image
{
left: 0px;
}
#right_side-image
{
right: 0px;
}
#left_menu {
margin: 15px 0px 15px 5px;
}
@ -211,15 +224,20 @@ Additional content
}
#topmenu .nav > li > a,
#topmenu .nav > li:hover > a {
#topmenu .nav > li:hover > a,
#topmenu .nav > li:focus > a
{
background-color: inherit;
}
#topmenu > .nav > li > .nav-child > li:hover > a:hover {
#topmenu > .nav > li > .nav-child > li:hover > a:hover,
#topmenu > .nav > li > .nav-child > li:focus > a:hover,
#topmenu > .nav > li > .nav-child > li:hover > a:focus
{
text-decoration: none;
}
#left_side, #right_side
#left_side-image, #right_side-image
{
background-repeat: no-repeat;
background-size: cover;

View File

@ -15,7 +15,7 @@ body {
#page {
/*box-shadow: 30vw 0px 5vw -10vw green inset;*/
flex: 1 1 auto;
flex: 1 0 auto;
display: flex;
flex-direction: column;
width: 100%;
@ -82,7 +82,7 @@ body {
*/
#content {
flex: 1 1 auto;
flex: 1 0 auto;
}
#left_menu {

View File

@ -88,7 +88,9 @@ ul.menu li.current > a
}
ul.nav > li > a:hover,
ul.nav-child > li > a:hover
ul.nav > li > a:focus,
ul.nav-child > li > a:hover,
ul.nav-child > li > a:focus
{
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>;
@ -99,7 +101,9 @@ ul.nav-child > li > a:hover
color: <?php echo $params{'fgcolor1'}; ?>;
}
#topmenu > .nav > li:hover {
#topmenu > .nav > li:hover,
#topmenu > .nav > li:focus
{
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>;
}
@ -109,12 +113,14 @@ ul.nav-child > li > a:hover
color: <?php echo $params{'fgcolor3'}; ?>;
}
#topmenu > .nav > li > .nav-child > li:hover > a {
#topmenu > .nav > li > .nav-child > li:hover > a,
#topmenu > .nav > li > .nav-child > li:focus > a
{
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>;
}
#left_side
#left_side-image
{
background-image: <?php echo $leftImageValue; ?>;
}
@ -151,7 +157,7 @@ table.alternating tr:nth-child(even) {
</div> <!-- #topmenu-div -->
<div id='page-div'>
<div id='left_side'></div>
<div id='left_side-image'></div>
<div id='page'>
<div id='header'>
@ -186,7 +192,7 @@ table.alternating tr:nth-child(even) {
</div> <!-- #footer -->
</div> <!-- #page -->
<div id='right_side'></div>
<div id='right_side-image'></div>
</div> <!-- #page-div -->
</body>