/* ====================================================================== */ /* BLACKBOARD */ /* */ /* */ /* ====================================================================== */ /* STATUS */ /* */ /* webdesign = 2008 by Martin Hövel */ /* projectname = DGhK - RMH */ /* modulename = Style of the Template */ /* version = 1.02 */ /* filename = style.css */ /* created = 2008-02-13 */ /* last change = 2008-02-27 */ /* last check = 2008-02-27 */ /* */ /* */ /* */ /* */ /* */ /* ====================================================================== */ /* REQUIREMENTS */ /* */ /* index.php */ /* */ /* */ /* */ /* */ /* ====================================================================== */ /* www.martin-hoevel.de mail@martin-hoevel.de */ /* ====================================================================== */ /* ____________________________________ | | ^ | HEADER | | 150px | 955px | | |____________________________________| v | main-menu | ^ 40px |____________________________________| V |30px | 235px | 660px |30px | ^ | | | | | | |blank| left- | content- |blank| | | | page | page | | | variable height | | | | | | | | | | | | | | | | | | |_____|__________|_____________|_____| v | FOOTER | ^ 17px |____________________________________| V */ html { height: 100%; padding: 0 0 1px 0; /* with this option, there will always be a vertical scrollingbar. */ } body { background: #d7e5ff; /* background-color of the outer page*/ margin: 0px; padding: 0px; font: normal 0.8em tahoma, verdana, sans-serif; /* font style & size */ line-height: 1.5em; /* the distance between two lines is normally 1.2em*/ color: black; /* text-color */ text-align:center; /* Workaround for IE 5.5 */ } /* ================== LINKS ===================== */ a { color: #415678; /* the color of all links on the page. Including the sub-menu. Excluding the main-menu. */ text-decoration: none /* style of the link */ } a:hover { color: #6f87b2; /* the color of the link in the text when the mouse is over the link.*/ text-decoration: none /* style of the link when the mouse is over */ } /* =========== BORDER AROUND HEADER 2nd MENU, CONTENT AND FOOTER PAGE ===================== */ .page { /* in this page there is the header, the left hand side menu, the content-page and the footer.*/ text-align:left; border-top: #ccc 0px solid; /* color and line-thickness of the outer border */ border-right: #ccc 2px solid; /* color and line-thickness of the outer border */ border-bottom: #ccc 0px solid; /* color and line-thickness of the outer border */ border-left: #ccc 2px solid; /* color and line-thickness of the outer border */ background: white; /* background-color of the inner page */ padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top:-10px; /* The header seemed to be too height with its 150px. This is a fast way to make it shorter: shift it up out of the screen. If you want to shift it up or down, check the position of the heading "h1" in the header */ margin-right:auto; margin-left:auto; width: 955px; /* if you ever want to change the total width of the page, here is one place to do so. There are many more!!! */ position: relative; } /* ================ HEADER ===================== */ #header { padding: 0px; margin: 0px; width: 955px; /* width of the header-image */ height: 150px; /* height of the header-image */ background-image: url('bilder/kopf.jpg'); /* header image */ background-repeat: no-repeat; position: static; } #header h1 { /* the first heading on the page: in the header */ padding-top: 25px; /* distance of the heading from the top edge of the page */ padding-left: 100px; padding-right: 0px; padding-bottom: 0px; margin: 0px; line-height: 1.2em; /* 1.2em is the normal default-value for the distance between two lines */ font-weight: bold; /* font style */ font-size: 2em; /* font size */ letter-spacing: 0px; /* letter-spacing of the heading */ text-align: center; /* text-alignment */ color: black; /* text-color */ text-decoration: none; } /* ================ FOOTER ===================== */ #footer { /* this is the footer with the copyright */ background-image: url(bilder/footer-bg.png); /* background-image of the footer */ background-repeat:no-repeat; position: relative; margin-left: auto; margin-right: auto; width:955px; /* width of the footer */ height:17px; /* height of the footer - if you want to change that, you also have to change the background-image of the footer! */ } #footer p { /* the part where the text comes on top of the footer */ margin:0px; padding:0px; padding-top:2px; margin-right:40px; font-weight: bold; /* font-weight of the text in the footer */ font-size: 10px; /* font-size of the text in the footer */ text-align: right; /* alignment of the text in the footer */ line-height: 1.2em; /* 1.2em is the normal default-value for the distance between two lines */ color: white; /* the text-color of the text in the footer */ } #footer a { /* if you ever have a link in the footer here you can change everything for it! */ color: white; } #footer a:hover { /* you can tell here how the link in the footer should look like if the mouse is over it */ color: white; } /* ================ THE MAIN MENU ===================== */ #main_menu{ background-image: url('bilder/menu-bg.png'); background-repeat: no-repeat; /* menu-image (the black row) */ line-height: 1.2em; /* 1.2em is the normal default-value for the distance between two lines */ } ul.main_menu_buttons{ width:935px; /* width of the menu: 10px+935px+10px=955px. 10px is the border*/ height:40px; /* height of the menu-image */ line-height: 40px; /* height of the menu-image */ list-style:none; text-align:center; margin-left: 10px; /* left distance of the first separator. This is the left border */ margin-right: 10px; /* right distance of the last separator. This is the left border - the menu should not reach to the right end!!! */ margin-top: 0px; margin-bottom: 0px; padding: 0px 0px 0px 0px; } ul.main_menu_buttons li{ display: block; float: left; height:28px; /* 12px padding + 28px = 40px total height*/ text-align:center; } ul.main_menu_buttons li a{ text-align:center; color:white; /* font-color of the menu */ font-weight: bold; /* font-style of the menu */ padding-top:12px; padding-left: 20px; /* determines the size of the buttons to the left */ padding-right:20px; /* determines the size of the buttons to the right (should be equal to the size of the buttons to the left) */ padding-bottom:12px; text-decoration: none; } ul.main_menu_buttons li a:hover{ text-decoration: none; text-align:center; color: white; /* the text-color of the button if a mouse is over it */ background-image: url('bilder/menu-aktiv.png'); /* background-image of a highlighted button */ background-repeat: repeat-x; margin-top:0px; /* Workaround for IE 6 and IE 5.5. */ } ul.main_menu_buttons li.menu-current a{ text-decoration: none; text-align:center; color: white; /* the text-color of the button */ background-image: url('bilder/menu-aktiv.png'); /* background-image of a active button */ background-repeat: repeat-x; margin-top:0px; /* Workaround for IE 6 and IE 5.5. */ } ul.main_menu_buttons li.menu-parent a{ text-decoration: none; text-align:center; color: white; /* the text-color of the button */ background-image: url('bilder/menu-aktiv.png'); /* background-image of a button if a sub-menu is active*/ background-repeat: repeat-x; margin-top:0px; /* Workaround for IE 6 and IE 5.5. */ } ul.main_menu_buttons li.seperator{ text-decoration: none; padding:12px 2px 0px 0px; background-image: url('bilder/menu-trennstrich.png'); /* image of the seperator between the buttons */ background-repeat: no-repeat; height: 40px; /* again the height of the menu. This entry is just for the IE 5.5 */ } /* ================ LEFT-PAGE ===================== */ #left_page { /* the left page: left menu, search-field and DGhK-Logo*/ background:white; /* background color of the left page */ padding: 0px; padding-left:30px; /* distance of the left-page to the left border */ padding-right:0px; padding-bottom:0px; padding-top:0px; padding-top: 20px; /* distance of the left-page to the main-menu */ margin-top: 20px; /* again the distance of the left-page to the main-menu to avoid problems with different browsers. Some add margin and padding some use only one of them */ margin-left: 0px; margin-right: 0px; float: left; width: 233px; /* width of the left-page : 955px-30px-660px-30px = 235px. It is always good to have some spare pixels. Let's make it 233px.*/ display: block; } /* ================ THE SUB-MENU (on the left-page) ===================== */ .sub_menu { /* the vertical "sub-menu" shows the submenus of the "main-menu" which is located horizontally. */ margin:0px; padding:0px; } .sub_menu a { /* the color of the entries is determined by the normal link color. look at "a{ ... }". */ font-weight: bold; /* font-weight of the entries in the left menu */ line-height: 2em; /* vertical distance between the entries in the left menu */ } .sub_menu ul{ list-style:none; text-align:left; margin:0px; padding:0px; } .sub_menu ul li{ padding:0px; margin:0px; } .sub_menu p{ padding:0px; margin:0px; } .sub_menu p.menu-0 {margin-left:0px;} /* indent of the name of the current main-menu listed in the sub-menu (the first row)*/ .sub_menu p.menu-1 {margin-left:10px;} /* indent of the 1st sub-menu */ .sub_menu p.menu-2 {margin-left:20px;} /* indent of the 2nd sub-menu */ .sub_menu p.menu-3 {margin-left:30px;} /* indent of the 3rd sub-menu */ .sub_menu p.menu-4 {margin-left:40px;} /* indent of the 4th sub-menu */ .sub_menu p.menu-5 {margin-left:50px;} /* indent of the 5th sub-menu */ .sub_menu p.menu-6 {margin-left:60px;} /* indent of the 6th sub-menu */ .sub_menu p.menu-7 {margin-left:70px;} /* indent of the 7th sub-menu */ .sub_menu p.menu-8 {margin-left:80px;} /* indent of the 8th sub-menu */ .sub_menu div.horizontal_line{ /* the left menu got a line inbetween the entries */ margin:0px; padding:0px; width: 85%; /* the width of the line. */ height:1px; /* Workaround for IE 5.5 */ overflow:hidden; /* Workaround for IE 6 */ border-bottom:1px solid #ccc; /* thickness style and color of this line */ } /* ================ THE SEARCH-FIELD (on the left-page) ===================== */ .search { margin-top: 20px } .search h2 { display: none } .dummy_space /* this dummy-space is just to make sure the DGhK-Logo is not on top of anything else.*/ { height:200px; margin: 0px; padding: 0px; } /* ================ THE DGhK-LOGO (on the left-page) ===================== */ .dghk_logo { /* DGhK-Logo */ background-image: url('bilder/dghk-logo.png'); /* the DGhK-Logo-image */ background-repeat: no-repeat; position:absolute; bottom:40px; /* distance of the DGhK-Logo from the footer */ height:100px; /* height of the DGhK-Logo-image */ width:100px; /* width of the DGhK-Logo-image */ } /* ================ CONTENT-PAGE ===================== */ #content_page { background: white; /* background-color of the content-page*/ padding: 0px; margin-top: 10px; /* distance of content-page to the main-menu */ margin-left: 265px; /* indent of the content-page: 30px+235px = 265px */ margin-bottom: 25px; width: 660px; /* width of the content-page: 955px-30px-235px-30px = 660px*/ display: block; } /* ================ THE BREADCRUMBS (On the content-page) ===================== */ #content_page span.breadcrumbs { /* the breadcrumbs ("main-menu >> submenu >> subsubmenu") */ line-height: 1.2em; /* 1.2em is the normal default-value for the distance between two lines */ margin:0px; padding:0px; text-align:left; } /* ================== LISTS ===================== */ #content_page ul{ margin:0; padding-left:20px; list-style-type:none; } #content_page ul li{ margin:0; list-style-type:none; background:url(bilder/list_style_image.png) 0px 5px no-repeat; /* the "»"-Symbol in front of the list is saved in list_style_image.png */ padding-left:20px; } /* ================ HEADINGS ===================== */ /* Heading 1*/ #content_page h1 { /* "Heading 1" */ padding: 0px; margin: 0px; font-weight: bold; /* font style */ font-size: 1.8em; /* font size */ letter-spacing: 0px; /* letter-spacing of the heading */ text-align: left; /* text-alignment */ color: #444; /* text-color */ text-decoration: none; } /* The first heading on each content-page. It reads the page-name */ #content_page h1.pagetitle { margin-top: 20px; /* the distance from the top of the content-page (to be precise: from the breadcrumbs) to the first heading*/ } /* Heading 2*/ #content_page h2 { /* "Heading 2" */ padding: 0px; margin: 0px; font-weight: bold; /* font style */ font-size: 1.6em; /* font size */ letter-spacing: 0px; /* letter-spacing of the heading */ text-align: left; /* text-alignment */ color: #444; /* text-color */ text-decoration: none; } /* Heading 3*/ #content_page h3 { /* "Heading 3" */ padding: 0px; margin: 0px; font-weight: bold; /* font style */ font-size: 1.4em; /* font size */ letter-spacing: 0px; /* letter-spacing of the heading */ text-align: left; /* text-alignment */ color: #444; /* text-color */ text-decoration: none; } /* Heading 4*/ #content_page h4 { /* "Heading 4" */ padding: 0px; margin: 0px; font-weight: bold; /* font style */ font-size: 1.3em; /* font size */ letter-spacing: 0px; /* letter-spacing of the heading */ text-align: left; /* text-alignment */ color: #444; /* text-color */ text-decoration: none; } /* Heading 5*/ #content_page h5 { /* "Heading 5" */ padding: 0px; margin: 0px; font-weight: bold; /* font style */ font-size: 1.2em; /* font size */ letter-spacing: 0px; /* letter-spacing of the heading */ text-align: left; /* text-alignment */ color: #444; /* text-color */ text-decoration: none; } /* Heading 6*/ #content_page h6 { /* "Heading 6" */ padding: 0px; margin: 0px; font-weight: bold; /* font style */ font-size: 1.1em; /* font size */ letter-spacing: 0px; /* letter-spacing of the heading */ text-align: left; /* text-alignment */ color: #444; /* text-color */ text-decoration: none; } #content_page table{ /* The default settings of a table */ border-width: 1px; border-spacing: 2px; border-style: outset; border-color: #ccc; border-collapse: collapse; } #content_page table th { /* options of the table-head */ border-width: 1px; padding: 1px; border-style: solid; border-color: #ccc;; } #content_page table td { /* options of the table-data */ border-width: 1px; padding: 1px; border-style: solid; border-color: #ccc; } .clear { clear: both; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px } *:focus { outline: none;} /* Workaround for Firefox to prevent Focus-Box*/ *:focus { -moz-outline: none }