*{ margin: 0; padding: 0; box-sizing: border-box; /*neu: kein Unterschied!?*/ } body { font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; color: #5F5F5F; /*Schriftfarbe*/ height: 100%; /*neu*/ /*margin: 20px 10px auto auto; funktioniert nicht*/ margin: 10px auto; /*Seite zentriert, 10 px für oben-unten*/ max-width: 80em; /*max. Breite der gesamten Seite festlegen. Breitenangaben in relativen em passen sich flexibel an Schriftgröße an*/ padding: 0; background: #666666; /* Hintergrundfarbe dunkelgrau außen*/ } /*oberer Rand 10 px*/ .abstand { clear: both; margin: 0; padding: 0; line-height: 15px; } /* Abstand (FACHKOLLOQUIEN,...) */ .absatz { margin-top: 13px; } /* Abstand FACHTHEMEN */ .mehr_absatz { margin-top: 15px; } #wrapper { /*wrapper (= "weißes Feld") legt Breite 90% fest, wie wird Höhe "weißes Feld" festgelegt?*/ background-color: #FFFFFF; margin: 0 auto; /* 0 für oben-unten, auto für links-rechts*/ width: 95%; /* Breite gesamte weiße Seite ggü. Hintergrund*/ overflow: hidden; /* NEU: kein waagerechter Scrollbalken bei Footer*/ padding: 10px; /* vorher 20px // weißer Rand als Abgrenzung zu grauem Rand, ab 11px weiße Linie unten*/ } /* oben*/ header { background-color: #FFFFFF; /*funktioniert nicht*/ margin: 130px 0px 0px 0px; /*130 px Abstand zu oberem Rand*/ } /* DAfStb-Logo (im ARTICLE-Container) gesamte Breite */ div#top { margin: -116px 0px 0px -5px; padding: 5px; float: left; width: auto; /* feste Größe */ } /* !!!!!!!!!!!!!!!!!!!!! INTRO!!!!!!!!!!!!!!!!!!!!!*/ /* MOBILE Geräte ab 2-Spaltigkeit: "Deut‍scher Aus‍schuss für Stahl‍be‍ton" Link zu Startseite */ article a#intro_link { text-decoration: none; } /* INTRO DAfStb-LOGO (FUNKTIONIERT NICHT unter ASIDE-Container) gesamte Breite */ div#top_intro { float: right; margin: 150px 30px 0px 0px; } /*................ */ /* !!!!!!!!!!!!!!!!!!!!! INTRO: "Deut‍scher Aus‍schuss für Stahl‍be‍ton" (Schriften, Positionierung)*/ div.intro_dafstb { /*background-color: red; */ font-size: 1.15em; position: absolute; padding-bottom: 105px; bottom: 0; /* NEU: fester Abstand zu unterem Seitenrand */ } div.intro_dafstb h1 { /*background-color: red; */ letter-spacing: 1.5px; /*0.9px; */ } /*................ */ /*INTRO: ADRESSE positionieren: */ .intro_adresse { padding-left: 140px; /*150! */ margin:1em auto; display: table; } /*unterer Abstand zu Logo */ .logo { margin: 0; padding: 0; line-height: 1px; } /* ***************************************/ /* alle 3 Spalten:*/ main { display: block; /*sonst fehler in darstellung IE*/ /* hyphens: automatische Silbentrennung in Hauptspalte, unbedingt auf jeweiliger Seite eingefügen!!! */ -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* ***************************************/ /* Menu-Buttons auf jeweiliger Seite im aktiven Zustand: */ .start #menu-start, .verein #menu-verein, .leitbild #menu-leitbild, .rechtsform #menu-rechtsform, .leitbild #menu-leitbild, .mitgliedschaft #menu-mitgliedschaft, .mitglieder #menu-mitglieder, .chronik #menu-chronik, .nachhaltigkeit #menu-nachhaltigkeit, .relevantes #menu-relevantes, .aktuelles #menu-aktuelles, .presse #menu-presse, .ausschuesse #menu-ausschuesse, .forschung #menu-forschung, .antraege #menu-antraege, .schriften #menu-schriften, .richtlinien #menu-richtlinien, .berichtigungen_auslegungen #menu-berichtigungen_auslegungen, .schriftenreihe #menu-schriftenreihe, .stellungnahmen #menu-stellungnahmen, .anwendungshilfen #menu-anwendungshilfen, /* Hilfsmittel zu Normen im Betonbau */ .jahrbuecher #menu-jahrbuecher, .veranstaltungen #menu-veranstaltungen, .jahrestagungen #menu-jahrestagungen, .fachkolloquien #menu-fachkolloquien, .fachthemen #menu-fachthemen, .aci-dafstb #menu-aci-dafstb, .ausbildungsbeirat #menu-ausbildungsbeirat, /*.sachkundige #menu-sachkundige,*/ .links #menu-links, .kontakt #menu-kontakt, .impressum #impressum_footer, .impressum #impressum_nav, .impressum #impressum { color: #00A500; /* grün*/ } /* UNTERSCHNEIDEN (= weniger gesperrt) bei "Hilfsmittel zu Normen im Betonbau" (zusätzlich, wenn nicht aktiv -> id="unterschneiden") [doch weggelassen: .antraege #menu-antraege, "Antrags- und Bewilligungsprozedere"] : */ .anwendungshilfen #menu-anwendungshilfen { letter-spacing: 0.1px; /*vorher: .5px; */ } /* ANDERE MENÜPUNKTE Schriftgröße UNTERSCHNEIDEN (= weniger gesperrt) der Untermenüpunkte (anwendungshilfen.html "Hilfsmittel zu Normen im Betonbau") */ nav a#unterschneiden { /*color: red; */ letter-spacing: 0.1px; /*vorher: .5px; */ } /* ***************************************/ /* box (parallele Anordnung Logo/Login im Header) bei Desktop-Breite nicht angezeigt */ .box1, .box2, .box3 { display: none; } /*Checkbox mit id="hamburger" verschwindet aus Seite, ist nicht sichtbar, kann aber angeklickt werden */ #hamburger{ position:absolute; /* neu aus Beispiel: kein Unterschied */ left:-2000px; /* neu aus Beispiel: kein Unterschied */ display:none; /* neu aus Beispiel: kein Unterschied */ } /* ***************************************/ /*Bescheibung gesamte NAVIGATION (für 3-,2-spaltige Screens, ) id="menu" Ansprechen mit nav#menu, oder #menu oder nav*/ nav#menu { /*background-color: #FF0000; TEST*/ position:relative; /*aus Beispielmenu kein Unterschied!*/ width: 23%; /* vorher 26%*/ max-width:230px; /* (vorher 230px;) An breitesten Menüpunkt anpassen, damit Hauptmenüpunkte sich nicht nebeneinander stellen, wenn ausreichend Platz.*/ float: left; /*wichtig für Positionierung "START" auf Höhe Überschriften, + damit ARTICLE (Text) nicht nach unten rutscht */ margin: -12px 0px 0px 40px; /* Abstände oben, links (Start bei Überschrift)*/ padding-bottom: 0px; /*vorher 20px !?, Abstand nach unten */ } /* class="submenu" = gesamte menu-Punkte, Beschreibung für (UL) LISTE allgemein (kann z. B. Hintergrund bestimmen), nur einmal definiert! */ nav ul.submenu { margin: 0px 0px 0px 0px; /* Menü Ausrichtung */ } /* Beschreibung für alle LISTEnelemente allgemein (kann z. B. Hintergrund bestimmen), nur einmal definiert! */ nav li { position: relative; /*NEU*/ list-style: none; margin: 0px 0px 0px 7px; /*Abstände links*/ } /* Positionierung grauer/grüner Pfeil an Menüpunkt */ img.horizontal_grau{ margin: 2px 10px 0px 0px; float: left; } img.horizontal_gruen{ margin: 6px 6px 0px 0px; float: left; } /* grauer/grüner Pfeil für Sub-Sub-Menü (Mitgliedschaft) -> weiter nach links geschoben, wg. Umbruch (Pfeil schiebt sich nach untenr)*/ img.horizontal_gruen_sub{ margin: 6px 6px 0px -10px; float: left; } img.horizontal_grau_sub{ margin: 2px 10px 0px -10px; float: left; } /* Darstellung ALLER Menüpunkte: ABSTÄNDE */ nav ul a:link, nav ul a:visited{ background-color: transparent; display: block; font-size: 1.16em; font-weight: bold; color: #808080; /* grau*/ letter-spacing: .5px; padding: 16px 3px 3px 8px; /* ABSTÄNDE oben in Zusammenspiel mit line-height */ margin: 0; text-decoration: none; font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; line-height: 18px; /* vorher 25px */ } /* Darstellung der Menüpunkte bei Rollover / Click/ Auswahl mit TAB-Key: */ nav ul a:hover, nav ul a:active, nav ul a:focus { color: #00A500; /* grün*/ } /* ********************** */ /* Untermenüpunkte */ nav ul.sub-menus{ /*background: red; */ float:left; /* Untermenüpunkte springen nicht */ height: auto; overflow: hidden; margin-bottom: 18px; /* ABSTAND Untermenüpunkte unten zu Hauptmenü */ padding-right: 35px; /* NEU: ABSTAND rechts zu Text, damit Untermenüpunkte nicht nach rechts springen; VORHER 19px */ position: relative; z-index: 1; /* NÖTIG, weil Untermenü sonst nicht über Hauptmenü liegt -> nicht mehr anklickbar */ } /* ********************** */ /* AUSSCHALTEN: Menüpunkt IMPRESSUM unter LOGIN (ADRESSE), nur für Smartphones (max-width: 570px)*/ a#impressum:link, a:visited, a#impressum_nav { display: none; } /* ********************** */ /*2. Untermenü ("MITGLIEDER"):*/ nav ul.sub-sub{ float:left; /* Untermenüpunkte springen nicht mehr */ height: auto; overflow: hidden; margin-bottom: 4px; /* oder 6px; ABSTAND 2.Untermenüpunkte unten zu 1. Untermenü */ margin-left: 0px; width: 100%; /*damit sich "Chronik" nicht daneben positioniert */ background: transparent; position: relative; z-index: 2; /* NÖTIG, weil Untermenü sonst nicht über Hauptmenü liegt -> nicht mehr anklickbar */ } /* Untermenüpunkt CHRONIK auf Seite MITGLIEDSCHAFT: mehr Abstand für DESKTOP Bildschirmgroesse*/ #chronik_abstand{ /*background: red; */ margin-top: 30px; /* NEUE Position, ABSTAND*/ } nav ul.sub-menus li { display: block; width: 100%; margin: 0px 0px 0px 10px; /*10px;, Ausrichtung links = Hauptmenüpunkte*/ } nav ul.sub-menus a { /*float:left; */ display:block; /* aus Beispielmenu */ font-size: 1.04em; font-weight: normal; color: #808080; /* grau*/ letter-spacing: .7px; padding: 3px 0px 4px 0px; /* Abstand oben in Zusammenspiel mit line-height */ line-height: 17px; /*Zeilenabstände kürzer als bei Hauptmenü */ } nav ul.sub-menus a:hover, nav ul.sub-menus a:focus{ color: #00A500; /* grün*/ } /*****************Link zu LinkedIn****************/ nav a#LinkedIn { /*margin: 0px;*/ display:inline; padding: 0px; font-size: 1.0em; /* */ /*letter-spacing: .2px; */ font-weight: bold; text-decoration: underline; background-color: transparent; color: #0A66C2; /*LinkedIn-blau, spricht an */ } nav a#LinkedIn:hover{ color: black; /*LinkedIn-back, spricht an */ /*a.button:visited */ } /*LinkedIn: Positionierung Logo */ nav img#LinkedIn { display:inline; float:none; width:35px; margin-left: -1px; margin-top: -6px; /*Abstand von Menü 25px*/ margin-bottom: -10px; /* */ margin-right: 0px; /* */ /*padding-bottom: -30px; padding-top: 0; 0px Abstand*/ } /**********************************/ /* absolute Festlegung der Höhe/Abstand rechte Spalte passt sich nicht der Textlänge (größere Texte) an.... liegt NICHT NEBEN sondern ÜBER/UNTER article (= Mittelspalte), (-> passt sich der Länge von article nicht an) - ASIDE in html hinter article = keine Äncderung!!*/ aside { min-height: 93vh; /*vorher 90vh(Höhe an Gerät angepasst) Festlegung der Höhe rechte Spalte; viewport height statt 100% um scrollen zu vermeiden */ /* Fehler bei I-Pad Pro 12.9 inch Safari: Höhe bezieht sich nur auf HintergrundFARBE, Betonhintergrund noch dazu darunter platziert... */ overflow-x: hidden; overflow-y: hidden; width: 27%; /* flexible Spaltenbreite */ /*max-height: 100vh; keine Änderung */ float: right; background: url(images/betonstruktur_orig.jpg) bottom right repeat-x fixed; /* bottom: ab Höhe Gerät (93%): min-height: 93vh;*/ /* background-size: 33% 67%; HG-Farbe und Bild haben flexible Höhen: BETONSTRUKTUR wird gestaucht*/ background-size: auto 550px; /* flexible Breite; feste Höhe Betonstruktur (550 px) ab Bottom */ background-color: #F7F7F7; /* hellgrau*/ margin: -140px -10px 19px 0px; /*HG-Farbe an den rechten und oberen Rand rücken; unten verschiebt sich "weißes Feld", nicht Betonstruktur??!*/ } /* INTRO breitere rechte Spalte : (auch Änderungen bei "article.intro p#adresse" ) */ aside.intro { width: 40%; /* breitere rechte Spalte */ } /* IMPRESSUM/DATENSCHUTZ - FESTE Höhe festgelegen (LANG), nicht Höhe des Gerät als Maß benutzten*/ aside.text_ultraultralang{ height: 3450px; /*(vorher 90vh=90%) FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* LINKS */ aside.text_ultralang{ height: 3225px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* Jahrbücher */ aside.text_sehr-lang_plus{ height: 2850px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* LINKS */ aside.text_sehr-lang_plus_{ height: 2750px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* FACHKOLLOQUIEN - FESTE Höhe festgelegen, nicht Höhe des Gerät als Maß benutzten*/ aside.text_sehr-lang{ height: 2325px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* FACHKOLLOQUIEN - FESTE Höhe festgelegen, nicht Höhe des Gerät als Maß benutzten*/ aside.text_lang_2250{ height: 2250px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* VERANSTALTUNGEN - FESTE Höhe festgelegen, nicht Höhe des Gerät als Maß benutzten*/ aside.text_lang_2150{ height: 2150px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* ANWENDUNGSHILFEN - FESTE Höhe festgelegen, nicht Höhe des Gerät als Maß benutzten*/ aside.text_lang-lang-lang{ height: 2050px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* KONTAKT */ aside.text_lang__{ height: 1700px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* RICHTLINIEN / SACHKUNDIGE PLANER , nicht Höhe des Gerät als Maß benutzten*/ aside.text_lang-lang{ height: 1810px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* KONTAKT aside.text_lang_1700{ height: 1700px; */ /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* MITGLIEDER - */ aside.text_lang_{ height: 1450px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* LEITBILD - FESTE Höhe festgelegen (LANG), nicht Höhe des Gerät als Maß benutzten*/ aside.text_lang{ height: 1300px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /*JAHRESTAGUNGEN NACHHALTIGKEIT */ aside.text_mittel-lang{ height: 1210px; /* FESTE HÖHE rechte Spalte um scrollen zu vermeiden */ } /*SCHRIFTEN*/ aside.text_mittel-l-lang{ height: 1140px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /*ANTRAGS-,...*/ aside.text_mittel-1_5-lang{ height: 1110px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /*...*/ aside.text_mittel-2-lang{ height: 1070px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /**/ aside.text_mittel-m-lang{ height: 1040px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* // Jahrestagungen, "Rechtsform, Satzung und Organe" */ aside.text_mittel{ height: 1000px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* // "aci-dafstb" */ aside.text_mittel_{ height: 910px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* MITGLIEDSCHAFT: FESTE Höhe festgelegen (MITTEL)/ WENIGER MARGIN-BOTTOM, nicht Höhe des Gerät als Maß benutzten*/ aside.text_wenig{ height: 880px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* !!!seit "LINKEDIN im Menü" für wenig Text verwenden!!! BERICHTIGUNGEN/AUSSCHÜSSE STELLUNGNAHMEN: FESTE Höhe festgelegen (MITTEL)/ WENIGER MARGIN-BOTTOM, nicht Höhe des Gerät als Maß benutzten*/ aside.text__wenig{ height: 870px; /* FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* SCHRIFTENREIHE, RELEVANTES, BERICHTIGUNGEN: FESTE Höhe festgelegen (MITTEL)/ WENIGER MARGIN-BOTTOM, nicht Höhe des Gerät als Maß benutzten*/ aside.text_sehr_wenig{ height: 790px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /* SCHRIFTEN: FESTE Höhe festgelegen (MITTEL)/ WENIGER MARGIN-BOTTOM, nicht Höhe des Gerät als Maß benutzten*/ aside.text_sehr_sehr_wenig{ height: 740px; /*FESTE HÖHE rechte Spalte; viewport height (Höhe an Gerät angepasst) statt 100% um scrollen zu vermeiden */ } /*für Zentrieren von LOGIN/ "DAfStb interner Bereich" / ADRESSE bei Desktop nötig! */ .horizontal-mitte { margin:1em auto; display: table; } /*Ausrichtung*/ .vertikal-mitte { vertical-align: middle; } /*Wie unten ausrichten??*/ /*Login mobile ausschalten */ p.login_mobile { display: none; } /*Login mobilphone ausschalten */ p.login_mobilphone{ display: none; } /*Login NAVIGATION mobilphone ausschalten */ p.login_mobile_nav { display: none; } /*Login // DAfStb interner Bereich (siehe auch a-link unten) */ p.login { text-align: right; margin: 22px 0px 0px 0px; /* feste Höhenangabe, Abstand oben */ font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; font-weight: normal; /*spricht an*/ } /*"DAfStb interner Bereich": Schriftgröße + Spationierung */ .dafstb_intern { font-size: 0.9em; letter-spacing: .2px; } /* spricht an*/ p.login a { color: #808080; } /* Angaben für Link Login*/ p.login a:link { color: #808080; /* grau spricht nicht an*/ font-size: 1.2em; /* 1.2em;*/ letter-spacing: .2px; font-weight: normal; text-decoration: none; background-color: transparent; } /*SPRICHT AN! keine Änderung bei a:visited:*/ p.login a:hover, a:visited { color: #00A500; background-color: transparent; } /*Mobile-Adresse unter Text ausgeblendet*/ article p#adresse_mobile { display: none; } /* INTRO !!!!!!!!!!!!!!!!!! */ /*INTRO Login mobilphone ausschalten */ p.login_mobilphone_intro{ display: none; } /*"DAfStb interner Bereich": Schriftgröße + Spationierung */ .dafstb_intern { font-size: 0.9em; letter-spacing: .2px; } /* spricht an*/ p.login a { color: #808080; } /* Angaben für Link Login*/ p.login a:link { color: #808080; /* grau spricht nicht an*/ font-size: 1.2em; /* */ letter-spacing: .2px; font-weight: normal; text-decoration: none; background-color: transparent; } /*SPRICHT AN! keine Änderung bei a:visited:*/ p.login a:hover, a:visited { color: #00A500; background-color: transparent; } /* !!!!!!!!!!!!!!!!!!!!!!!INTRO LOGIN in rechter Spalte */ aside.intro p.login_intro { /* background-color: red; spricht an*/ text-align: right; margin: 2px 0px 0px 0px; /* feste Höhenangabe, Abstand oben */ font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; font-weight: normal; /*spricht an*/ } p.login_intro a { color: #808080; } /**/ p.login_intro a:hover, a:visited { color: #00A500; background-color: transparent; } /* Angaben für INTRO Login*/ p.login_intro a:link { font-size: 1.04em; /* 1.2em;*/ letter-spacing: 0.1px; /*0.2 px */ font-weight: normal; text-decoration: none; background-color: transparent; } /* INTRO - ADRESSE: SCHRIFTGRÖSSE anpassen: */ aside.intro p#adresse { font-size: 0.80em; /*NEU statt 0.95em; sonst zu groß*/ } /* Mobile-Adresse INTRO ausgeblendet */ article.intr p.adr_mob_intr { display: none; } /* !!!!!!!!!!!!!!!!!!!!!!!ENDE INTRO */ /* legt Position Adresse DESKTOP fest, zusammen mit .horizontal-mitte + .vertikal-mitte */ aside p#adresse { position: absolute; bottom: 0; /*auto, inherit haben feste Position*/ margin: 0px 0px 120px -73px; /*Angabe Abstand von unten (vorher 120px) + links: Abstand unten schiebt sich leider vom unteren Seitenende, nicht von der unteren Spaltenkante... */ font-size: 0.95em; font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; font-weight: bold; letter-spacing: 0.5px; color: #808080; line-height: 22px; /*position: relative; vertical-align: bottom; */ } /* spricht nicht an, Angaben für (Mail)adresse*/ a#mail:link, a:visited { color: #808080; /* grau*/ background-color: transparent; text-decoration: none; margin: 0; font-size: 1.0em; /* wg. Vererbung größer als p#adresse*/ font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; font-weight: bold; letter-spacing: 0.5px; } a#mail:hover { color: #00A500; /* grün*/ background-color: transparent; /* text-decoration: underline; */ } /*+++++++++++++++++++++++++++++++++++++*/ /* Inhalt mittlere Spalte*/ article { /* z-index: 0; auf unterste Ebene zu stellen funktioniert nicht*/ margin-left: 27%; /* VORHER 27%; Abstände zur linken Spalte*/ margin-right: 27%; /*Abstände zur rechten Spalte*/ margin-top: 0; padding: 0 50px 0 0px; /* 0px Abstand links zur NAV; 50 px Abstand rechts von Spalte */ font-size: 0.97em; font-weight: normal; text-align: left; /* text-align: justify; */ line-height: 22px; } /*JAHRBÜCHER: Positionierung images */ article.img-item { float:none; width:auto; margin-left: 10%; /* VORHER 0%; */ margin-right: 0%; /* Abstände zur rechten Spalte*/ padding: 0; /* 0px Abstand*/ } /*JAHRESTAGUNGEN: Positionierung images */ article.img-JT { float:none; width:auto; margin-left: 2%; /* nötig, bei 0% springt teilweise großer Abstand rein */ margin-right: 0%; /* Abstände zur rechten Spalte*/ padding: 0; /* 0px Abstand*/ } /* Bilder größer zoomen (Roll-Over): */ img.zoom { transition: transform 0.6s; -moz-transition: transform 0.6s; -webkit-transition: transform 0.6s; -o-transition: transform 0.6s; -ms-transition: transform 0.6s; } img.zoom:hover { cursor: zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-in; transform: scale(1.4, 1.4); -moz-transform: scale(1.4, 1.4); -webkit-transform: scale(1.4, 1.4); -o-transform: scale(1.4, 1.4); -ms-transform: scale(1.4, 1.4); } /* ICON rechts neben einzeilige hellgraue Überschrift positioniert*/ .headline, .headline_abstand, .headline_presse, .icon { display: inline; float: left; margin: 0px 0px 0px 0px; /*padding: 0px;*/ /* padding-bottom: 15px;*/ box-sizing: border-box; /* width: auto; feste Größe */ } /*GRAUE ÜBERSCHRIFT */ /* headline_abstand: FACHKOLLOQUIEN JAHRESTAGUNGEN VERANSTALTUNGEN, mehr Abstand Überschrift - Text bei MOBILFON (kleinste Auflösung) */ .headline, .headline_abstand { /* background-color:#999999; */ /*margin-left: 0px; */ margin-left: 0px; margin-right: 5px; line-height: 30px; /* für Umbruch schmales Mobilfon */ } /*GRAUE ÜBERSCHRIFT: PRESSEMITTEILUNGEN */ .headline_presse { /* background-color:#999999; */ margin-left: -2px; margin-right: -8px; line-height: 30px; /* für Umbruch schmales Mobilfon */ } /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN) */ article h2.lang_presse { /* background-color:#999999; */ color: #CCCCCC; font-size: 2.05em; /*NEU kleiner (vorher 2.1) */ margin: -1px 10px 0px 0px; /*margin-right: 10px vorher 0px; */ padding-bottom: 25px; letter-spacing: 0px; /*vorher 0.7 NEU*/ } .icon_presse { /*background-color:#999999; */ float: right; margin-right: 20px; margin-top: -40px; /* */ width: auto; /* feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ } /* ICON */ .icon { /* background-color:#999999; */ float: right; margin-top: -40px; /* */ width: auto; /* feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ /*hier keine Wirkung! margin-bottom: -25px; Abstand zwischen Überschrift und Text*/ } /* ICON RICHTLINIEN*/ .icon_rili { /* background-color:#999999; */ float: right; margin-top: -40px; /* */ width: auto; /* feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ } /* ICON JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN */ .icon_hoch { /*background-color:#999999; */ float: right; /* width: 30%; */ /* margin-left: 0px; nicht nötig 30px */ margin-right: 20px; margin-top: -40px; /* */ /* padding-bottom: 5px; */ width: auto; /* feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ /*hier keine Wirkung! margin-bottom: -25px; Abstand zwischen Überschrift und Text*/ } /* kleine ICONs RELEVANTES, FORSCHUNG, SCHRIFTENREIHE, STELLUNGNAHMEN, JAHRBÜCHER, FACHTHEMEN, LINKS, KONTAKT, IMPRESSUM */ .icon_klein { /*background-color:#999999; */ float: right; width: auto; /* feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ margin-right: 20px; /* bei kleineren ICONS in HTML angepasst */ margin-top: -40px; /* bei kleineren ICONS in HTML angepasst */ padding-bottom: 15px; } .icon_rechts { /* background-color:#999999; */ float: right; /* width: 30%; */ /* margin-left: 0px; nicht nötig 30px */ margin-right: -10px; /* */ margin-top: -40px; /* */ /* padding-bottom: 5px; */ width: auto; /* feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ /*hier keine Wirkung! margin-bottom: -25px; Abstand zwischen Überschrift und Text*/ } /* GRAUE ÜBERSCHRIFT 2-ZEILIG: keine Vorgaben*/ .headline_lang,.headline_lang_vari, .headline_lang_3z{ display: inline; /* wichtig, damit ICON bei Textumbrüchen auf EINER HÖHE bleibt! */ float: left;/* */ margin: 0px 0px 0px 0px; /*padding: 0px;*/ padding-bottom: 15px; /* box-sizing: border-box; */ } /*GRAUE ÜBERSCHRIFT 2-ZEILIG ("RECHTSFORM, ORGANE", SACHKUNDIGE PLANER) */ .headline_lang{ /* background-color:#999999; */ /* width: 65%; */ line-height: 30px; /* für Umbruch schmales Mobilfon */ width: 75%; margin-left: 0px; margin-right: -10px; margin-bottom: -15px; /*Abstand zwischen Überschrift und Text*/ } /*GRAUE ÜBERSCHRIFT 3-ZEILIG ("Anwendungshilfen",) */ .headline_lang_3z { /* background-color:#999999; */ /* width: 65%; */ line-height: 30px; /* für Umbruch schmales Mobilfon */ width: 78%; margin-left: 0px; margin-right: 5px; margin-bottom: -15px; /*Abstand zwischen Überschrift und Text*/ } /* zugehöriges ICON ("RECHTSFORM, ORGANE") */ .icon_lang { /* background-color:#999999; */ float: right; width: auto; /* feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ margin-top:-15px; /* -10 NEU */ padding-bottom: 4px; /* NEU */ padding-left: 0px;/* NEU */ } /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (Rechtsform, Sat‍zung und Or‍ga‍ne) */ article h2.lang { color: #CCCCCC; font-size: 2.0em; /*NEU kleiner (vorher 2.1) */ /* text-align: left; Versuch*/ margin: -1px 10px 0px 0px; /*margin-right: 10px vorher 0px; */ padding-bottom: 25px; letter-spacing: 0.7px; } /* ICON neben mehrzeiliger Überschrift ("SACHKUNDIGE PLANER")*/ .icon_multi { float: right; margin-top: -10px; /* 20 bei höheren ICONS im Html anpassen */ margin-left: 0px; /* -15 30px */ margin-right: 0px; margin-bottom: 15px; /*padding-bottom: 5px; NEU */ } /* ICON neben mehrzeiliger Überschrift ("Berichtigungen/Auslegungen")*/ .icon_multi_vari { float: right; margin-top: -20px; /* 10 bei höheren ICONS im Html anpassen */ margin-left: -30px; /* -15 30px */ margin-right: 0px; margin-bottom: 20px; /*padding-bottom: 5px; NEU */ } /*GRAUE ÜBERSCHRIFT 2-ZEILIG ("Berichtigungen/Auslegungen") */ .headline_lang_vari{ box-sizing: border-box; line-height: 30px; /* für Umbruch schmales Mobilfon */ width: 76%; /* 78% NEU: */ margin-left: 0px; margin-right: 32px; /* 25 NEU: früherer Umbruch*/ margin-bottom: -20px; /*(-15) +15 bei padding-bottom aufgehoben, Abstand zwischen Überschrift und Text*/ } /*_____________ */ /* mehrzeilige Überschrift (KLEINERE Schriftgröße) (INDEX START) */ .headline_multi { display: inline; float: left; /*padding: 0px;*/ box-sizing: border-box; max-width: 310px; /*vorher 64%*/ margin-left: 0px; margin-right: 10px; margin-bottom: -25px; /*Abstand zwischen Überschrift und Text*/ } /* INTRO: Schriften LOGIN/ ADRESSE */ aside.intro { /*background-color:#999999; */ font-size: 1.15em; letter-spacing: 0.9px; } /* ------------------ */ /* FETTE, UNTERSTRICHENE LINKS im TEXT */ article a { color: #5F5F5F; /*Schriftfarbe altern grau: 808080*/ font-weight: bold; text-decoration: underline; } article a:link { color: #5F5F5F; /* dkl.grau*/ } article a:visited{ color: #5F5F5F; /* dkl.grau*/ } article a:hover{ color: #00A500; /* grün*/ } /* ------------------ */ /* NEU - VERANSTALTUNGEN!! "b#dunkelgrau" DUNKEL_GRAU im gesamten TEXT */ article b#dunkelgrau { color: #808080; } /* LEITBILD: GRÜNE ÜBER-GROSSBUCHSTABEN im TEXT */ article b#gruen_gross { color: #00A500; font-size: 135%; } /* FACHKOLLOQUIEN: GRÜNE FETTE BUCHSTABEN im TEXT */ article b#gruen { color: #00A500; font-size: 0.95em; } /* FACHKOLLOQUIEN: KLEINE FETTE BUCHSTABEN im TEXT */ article b#klein { font-size: 0.95em; } /* JAHRESTAGUNGEN: GRÜNE KURSIVE BUCHSTABEN im TEXT */ article em#gruen { color: #00A500; font-size: 0.95em; } /* FACHKOLLOQUIEN: GRÜNE normale BUCHSTABEN im TEXT */ article span#gruen { color: #00A500; font-style: normal; } /* FACHKOLLOQUIEN: GRAUE KURSIVE normale BUCHSTABEN im TEXT */ article span#italic { color: ##5F5F5F; font-style: italic; } article p { margin: 8px 2px; } p#bildunterschrift{ font-size:87%; padding-top: 0px; font-style: italic; padding-bottom: 0px; } /* START Links: "VORWÄRTS"-Button bei INTERNEN LINKS */ a.link { background-image: url(images/grafiken/vorwaerz.gif); background-repeat: no-repeat; background-position: 0px 7px; /*0px= HORIZONTAL: 0px = VERTIKAL */ /* margin-top: 0px; */ padding-top: 3px; padding-bottom: 0px; padding-left: 10px; /*ABSTAND PFEIL */ /* margin-left: 0px; */ } /* START Links: "VORWÄRTS"-Button bei INTERNEN LINKS */ article a#vor { color: #5F5F5F; /* NICHT ANSPRECHBAR! dkl.grau*/ font-weight: normal; text-decoration: underline; margin-left: 4px; /* Abstand links von Pfeil*/ /* top right bottom NICHT ansprechbar*/ } article a#vor:hover{ color: #00A500; /* grün*/ } /* LINKS: "ZURÜCK"-Button bei ANKER */ article p.anker { /*background-color: red; */ background-image: url(images/grafiken/zurueck.gif); background-repeat: no-repeat; background-position: 0px 11px; /* margin-top: 0px; */ padding-top: 5px; padding-bottom: 0px; } /* FACHKOLLOQUIEN: "ZURÜCK"-Button bei ANKER */ article p.anker_linie { /*background-color: red; */ background-image: url(images/grafiken/zurueck.gif); background-repeat: no-repeat; background-position: 0px 11px; /* margin-top: 0px; */ padding-top: 5px; padding-bottom: 20px; border-bottom: 1px solid #7E7E7E; /* padding-left: 0px; */ } article a#zurueck { /*background-color: red; */ color: #5F5F5F; /* dkl.grau*/ font-weight: normal; text-decoration: underline; margin-left: 14px; /* top right bottom NICHT ansprechbar*/ } article a#zurueck:hover{ color: #00A500; /* grün*/ } /* MEHRZEILIGE Überschrift bei Desktop-Adresse ("Deutscher Ausschuss für Stahlbeton") in "headline_multi" eingefügt, gleich wie h3 Mobile ADRESSE */ article h1 { display: block; /*hier angezeigt*/ font-size: 1.07em; /*alternativ 1.2em;*/ /*font-weight: bold;*/ margin: 0; color: #808080; padding-bottom: 17px; font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; letter-spacing: .3px; /*schmaler*/ } /* einzeilige große Überschrift hellgrau fett, in "headline" eingefügt */ article h2 { color: #CCCCCC; font-size: 2.1em; /*margin: 0px; */ /* text-align: left; Versuch*/ margin: -1px 0px 0px 0px; padding-bottom: 25px; font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; letter-spacing: 0.7px; } /* einzeilige Überschrift LANGE WORTE bei SCHRIFTEN, SCHRIFTENREIHE, JAHRBÜCHER, STELLUNGNAHMEN, NACHHALTIGKEIT, MITGLIEDSCHAFT, MITGLIEDER, VERANSTALTUNGEN, Jah‍resta‍gun‍gen*/ article h2.mittel { letter-spacing: 0px; /* (vorher 0.7px;) weniger Abstand */ } /* einzeilige Überschrift LANGE WORTE bei RICHTLINIEN*/ article h2.mittel_rili { letter-spacing: 0px; /* (vorher 0.7px;) weniger Abstand */ } /* "Deutscher Ausschuss für Stahlbeton" bei Mobile-ADRESSE */ article h3 { display: none; } /* Überschriften fett + dunkl.grau: */ article h4 { margin: 0px; font-size: 1.07em; font-weight: bold; /*line-height: 19px; */ color: #808080; /* color: #5F5F5F; Schriftfarbe dunkl.grau */ padding-top: 10px; padding-bottom: 0px; } /* FETTE GRÜNE ZWISCHENÜBERSCHRIFT mehr Abstand: */ article h5 { margin: 0px; font-size: 0.97em; font-weight: bold; /*line-height: 19px; */ color: #00A500; padding-top: 12px; padding-bottom: 12px; } /* grüne Überschrift "ANLAGE" */ article h6 { color: #00A500; /* grün */ display: block; /*hier angezeigt*/ font-size: 0.97em; /*font-weight: bold;*/ margin: 0; padding-bottom: 5px; padding-top: 7px; letter-spacing: .6px; /*mehr gesperrt*/ } /* grüne Überschrift FACHKOLLOQUIEN (wie "ANLAGE") mit LINIE OBEN*/ article h6.linie { border-top: 1px solid #7E7E7E; /*NEU, alles andere vererbt von h6*/ margin-top: 23px; /*NEU Abstand über Linie*/ } details { /*background-color: red;*/ /*font-style: bold; keine Reaktion*/ } /* Aufklappen der Inhalte ("weiterlesen") bei FACHKOLLOQUIEN, JAHRESTAGUNGEN, AKTUELLES, PRESSEMITTEILUNGEN : legt Aussehen des Pfeils und umschlossenen Text fest... */ details summary { /*background-color: red;*/ text-decoration: underline; /* funktioniert nicht bei Chrome */ color: #5F5F5F; /*font-style: bold; keine Reaktion*/ padding-top: 8px; } /*FARBE bei geöffneter Zusammenfassung :*/ details[open] summary { color: #00A500; /*font-style: bold; keine Reaktion*/ } summary:hover { /*background-color: red;*/ color: #00A500; /*font-style: bold; keine Reaktion*/ } /* ++++++++++++++++++++ */ /* Listen mit grünen Aufzählungszeichen im Haupttext mittlere Spalte*/ ul { margin: 0 0 10px 20px; /* spricht an*/ list-style-image: url(images/grafiken/aufzaehlung.gif); /* spricht an*/ list-style-type: none; /*font-size: 80%; line-height: 19px; */ } li#abstand { margin-bottom:6px; } /* Unterlisten (eingerückt) mit grünen Aufzählungszeichen, Schriftgröße: durch 100% Vererbung aussetzten*/ ul ul { font-size: 100%; } /* Unterlisten (eingerückt) mit grünen Aufzählungszeichen, Schriftgröße: durch 100% Vererbung aussetzten*/ ol ul { font-size: 100%; } /* Angaben für Links, die NICHT FETT sind (unbesucht/besucht) in PDF-ANLAGEN / MITGLIEDER-LINKS allgemein*/ a#anlage:link{ color: #5F5F5F; /*Schriftfarbe*/ text-decoration: underline; font-size: 0.97em; font-weight: normal; } /* BESUCHTE + ROLLOVER LINKS*/ a#anlage:visited, a#anlage:hover { color: #00A500; /* grün*/ /*font-size: 12px; text-decoration: underline; */ } img { border: 0; max-width: 100%; height: auto; display: block; } /* Jahrbücher:*/ img.jb { border: 0; max-width: 100%; height: auto; display: block; box-shadow: 5px 5px 10px #CCCCCC; } .clear { clear: both; margin: 0; padding: 0; line-height: 1px; /*background-color: transparent; */ } /*nur für korrekte Darstellung Fusszeile wenn Menü länger als Text bei 3-SPALTIGER Version */ .clear_left { clear: left; /* both; geht auch */ margin: 0; padding: 0; line-height: 1px; /* geringster Abstand */ } /* für korrekten Absrand bei bei Tabelle (IMPRESSUM, DATENSCHUTZ); bleibtbei allen Versionen */ .clear_left_tabelle { clear: left; /* both; geht auch */ margin: 0; padding: 0; line-height: 1px; /* geringster Abstand */ } /*IMPRESSUM, KONTAKT, FACHKOLLOQUIEN (BILDER!) (keine Rahmen!): damit LOGIN nicht daneben gesetzt wird! */ table.pur { /*background-color: #f1f3f4; */ width: 95%; border-style: none; } /*FACHKOLLOQUIEN,: damit LOGIN nicht daneben gesetzt wird! */ table.programm { /*background-color: #f1f3f4; */ width: 95%; border-style: none; margin: 0 1em 0 0; /* Abstand gesamte Tabelle außen: RECHTS, damit nachfolgender Text nicht neben Tabelle rutscht*/ } /*IMPRESSUM, KONTAKT, FACHKOLLOQUIEN (keine Rahmen!):*/ table.pur td, tr { border-style: none; } /*border-right: none; */ /*Tabelle für FACHTHEMEN // VERANSTALTUNGEN mit grauen Flächen und Rahmen*/ table.veranstaltungen th { padding: 4px; border: thin solid #a0a0a0; background-color: #F7F7F7; /* hellgrau*/ font-weight: normal; } table.veranstaltungen td { padding: 4px; border: thin solid #a0a0a0; } table.veranstaltungen { border-collapse: collapse; /* nur einfache Rahmenlinie dargestellt*/ border-width: thin 0 0 thin; padding: 5px; margin: 0 0 1em; /* Abstand gesamte Tabelle außen: UNTEN*/ table-layout: auto; max-width: 100%; width: 95%; } table.veranstaltungen td { font-weight: normal; text-align: left; } /*nur für FACHTHEMEN linke Spalte schmaler*/ table.veranstaltungen th.schmal { width: 20%; } /*VERABSTALTUNGEN Zwichenzeile schmaler*/ table.veranstaltungen td.zwischen { height: 5px; background-color: #CCCCCC; /* #a0a0a0; mittelgrau*/ } /* Footer korrespondiert mit Wrapper (-> weiße Ränder), copyright jetzt in Footer eingefügt (-> kein verringert Abstand zu Bottom?!!! ) Footer könnte weggelassen werden, bringt keine Änderung der Seitenhöhe?? */ footer { background-color: #666666; /*dunkelgrau*/ margin: -20px -20px -11px -20px; /* Position des dkl.grauen Hintergrunds, Bottom (mind.-11) right (mind. -18px)*/ padding: 0; height: 30px; line-height: 10px; text-align: left; } footer.schmal { /* für geringste Breite*/ display: none; } /* Menüpunkt IMPRESSUM in Fusszeile*/ a#impressum_footer:link, a:visited { color:#EFEFEF; /*helles Grau für Schrift*/ float: left; background-color: transparent; text-decoration: none; font-weight: bold; padding-left: 70px; /*14% Abstand rechts */ padding-right: 30px; /*14% Abstand rechts */ margin-top: -1px; /*Höhe anpassen */ font-size: 1.0em; } a#impressum_footer:hover { color: #00A500; /* grün*/ } /* eingebettet im Footer*/ .copyright { /* background-color: #666666; dunkelgrau: funktioniert nicht -> zeigt bei Smartphone nicht grau an*/ /* padding-right: 32.5%; Abstand rechts // vorher links 1,5%*/ padding-top: 10px; font-size: 1.0em; font-weight: normal; /*text-align: right; letter-spacing: .9px; */ color:#EFEFEF; /*helles Grau für Schrift*/ } /* } KLAMMER FEHLT -> Programmierung verschachtelt!? */ /******************Besonderheiten für Bildschirmgroesse max. 950px**********************/ @media (max-width: 950px) { /* 3-SPALTIGE Version umstellen, damit Menüpunkte nicht umgebrochen werden: ADRESSE unter Haupttext (ARTICLE), LOGIN in oberer Zeile rechts, NAVIGATION an den linken Rand gerückt */ /* Inhalt mittlere Spalte*/ article { /* background-color: red; */ /* z-index: 0; auf unterste Ebene zu stellen funktioniert nicht*/ margin-left: 27%; /* Abstände zur linken Spalte*/ margin-right: 27%; /*Abstände zur rechten Spalte*/ margin-top: 0; padding: 0 20px 0 20px; /* NEU 20px Abstand links zur NAV; NEU 20 px Abstand rechts von Spalte */ font-size: 0.97em; font-weight: normal; text-align: left; /* text-align: justify; */ line-height: 22px; } } /* INTRO: Schriften "Deut‍scher Aus‍schuss für Stahl‍be‍ton" */ div.intro_dafstb { margin: 610px 0px 0px -235px; /* vorher -250 */ } /******************Besonderheiten für Bildschirmgroesse max. 860px**********************/ @media (max-width: 890px) { /* auf 2-SPALTIGE Version umstellen, damit Menüpunkte nicht umgebrochen werden: ADRESSE unter Haupttext (ARTICLE), LOGIN in oberer Zeile rechts, NAVIGATION an den linken Rand gerückt */ body { /* margin: 10px auto; Desktopseite */ /*margin: 0px auto; Seite zentriert, kein dkl.grauer Rand (unten)*/ /* max-width: 80em; max. Breite der gesamten Seite festlegen. Breitenangaben in relativen em passen sich flexibel an Schriftgröße an*/ } #wrapper { /*wrapper (= "weißes Feld") legt Breite 90% fest, wie wird Höhe "weißes Feld" festgelegt?*/ width: 95%; /* vorher 90%, sehr schmaler dkl.-grauer Rand rechts und links! (Breite gesamte weiße Seite ggü. Hintergrund)*/ padding: 10px; /* wenn auf 0px, ensteht waagerechter Scrollbalken // weißer Rand als Abgrenzung zu grauem Rand, ab 11px weiße Linie unten*/ /*padding: 0px; Desktopseite 10px // kein weißer Rand als Abgrenzung zu grauem Rand, ab 11px weiße Linie unten*/ } /* LOGO weiter oben positioniert (130 px) + (Login weiter unten)*/ header { margin: 0px 0px 0px 0px; /*Desktop: 96px (vorher 130 px Abstand)*/ display: inline; /* nebeneinander pos. */ /* display: block; untereinander pos. */ } /* 2-SPALTIG: Desktop-Logo ausblenden, gleichzeitig rechte Spalte ausblenden, stattdessen einblenden box mit LOGO/HAMBURGER siehe unten(.box1, .box2, .box3), Login/Adresse jetzt unter ARTICLE*/ div#top { display: none; } /* rechte Spalte ("Desktop"-Adresse, Login) unsichtbar: Login/Adresse jetzt unter ARTICLE*/ aside { display: none; } /* INTRO !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ /* INTRO: Desktop-Version ausschalten "Deut‍scher Aus‍schuss für Stahl‍be‍ton" FUNKTIONIERT */ div.intro_dafstb { display: none; } /* INTRO Textspalte auf gesamte Bildschirmbreite vergrößert: FUNKTIONIERT */ article.intr { margin-left: 0%; /*kein Abstand zur linken Spalte*/ margin-right: 0%; /*kein Abstand zur rechten Spalte*/ padding: 0 30px 0 30px; /* 30 px Abstand vom Rand rechts und links */ } /* INTRO DAfStb-Logo gesamte Breite FUNKTIONIERT */ div#top_intro { /* float: right; */ margin: 135px 140px 0px 0px; /* margin: 35px 100px 0px 0px; NEU Abstand oben / rechts */ } /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ /* INTRO MOBILE ADRESSE: einblenden Überschrift "Deutscher Ausschuss für Stahlbeton" */ article.intr h3 { margin-top: 100px; /*163px; Abstand nach unten auf gleiche Höhe INDEX-Datei bei 2-spaltigkeit */ } /* INTRO MOBILE ADRESSE einblenden */ article.intr p.adr_mob_intr { color: #808080; display: block; /*hier angezeigt*/ /*background-color: blue; angezeigt*/ float: left; /*NEU*/ margin: 0px 0px 0px 0px; padding-bottom: 30px; /*Abstand nach unten */ font-size: 1.0em;/* spricht nicht an*/ letter-spacing: 0.8px; /* WIE ANDERE SEITEN; 1.1 px = mehr gesperrt*/ /* position: relative; Desktop: absolute flexibel bei: fixed, absolute, // feste Position bei: relative, static, inherit*/ } /*INTRO LOGIN mobile Geräte anzeigen - SPRICHT AN!!! */ p.login_mobilphone_intro{ /*color: #808080; spricht nicht an*/ display: block; /*float: left; */ margin: 130px 0px 0px 0px; /*vorher 206px Höhe weißes Fenster*/ padding-bottom: 60px; /* text-decoration: none; spricht nicht an*/ } /*"DAfStb mobile interner Bereich": Schriftgröße + Spationierung */ .dafstb_intern_mobilphone_intro { /*color: #808080; grau spricht an, aber keine rollover-Farbe mehr mgl.*/ /*font-size: 0.9em; */ letter-spacing: .5px; font-weight: normal; /* text-decoration: none; spricht nicht an*/ } /* Login-Link (MOBILE: Seite + NAV): Schrift verkleinern */ p.login_mobilphone_intro a:link, a:visited, p.login_mobile_nav a:link, a:visited { color: #808080; /*grau spricht nicht an */ text-decoration: none; font-size: 1.09em; letter-spacing: .4px; /*margin-right: 20px; background-color: transparent; */ } p.login_mobilphone_intro a:hover, p.login_mobile_nav a:hover { color: #00A500; /*grün spricht an */ background-color: transparent; } /* INTRO ENDE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ /* "Login"/"DAfStb interner Bereich" für Mobile Bildschirme mittlerer Größe sichtbar schalten im Header (siehe auch a-link unten) */ p.login_mobile { /* background-color: red; */ /*color: #808080; grau spricht nicht an -> weil integriert in BOX3!*/ display: block; /*wird angezeigt*/ text-align: right; /*rechts ausrichten wie Desktop */ margin: 0px 20px 0px 0px; /*feste Höhenangabe, NEU: Abstand rechts 30 statt 0*/ } /*MOBILE "DAfStb interner Bereich": Schriftgröße + Spationierung */ .dafstb_intern_mobile { /* color: #808080; grau spricht an, aber keine rollover-Farbe mgl.*/ font-size: 0.9em; letter-spacing: .2px; } /* Angaben für LOGIN Link für 2-SPALTIGKEIT: */ p.login_mobile a:link, a:visited{ color: #808080; /*grau spricht nicht an */ font-size: 1.2em; letter-spacing: .2px; font-weight: normal; text-decoration: none; /*background-color: transparent; */ } p.login_mobile a:hover { color: #00A500; /*grün spricht an */ /*background-color: transparent; */ } /* "b" (bei LOGIN im html-code) muss bei Rollover auf Grün gesetzt werden, sonst funktioniert es nicht!?? */ b#Login{ /*color: #00A500; grün spricht an*/ /*background-color: transparent; */ } /* Untermenüpunkte */ nav ul.sub-menus{ /*background: red; */ padding-right: 15px; /* NEU: ABSTAND rechts zu Text, damit Untermenüpunkte nicht nach rechts springen; VORHER 20px */ } /* 2-SPALTIGKEIT: Inhalt mittlere Spalte*/ article { /*background-color: blue; */ padding: 0 70px 0 20px; /*ABSTAND rechte SPALTE NEU 70 statt 50: */ margin-left: 10 px; /* spricht nicht an!!?, Abstände zur linken Spalte*/ margin-right: 0px; /*Abstände zur rechten Spalte*/ margin-top: 0px; /* -20px -> dkl.-grauer Rahmen oben wird kleiner*/ /* padding-left: 30px; spricht nicht an!!? font-size: 10pt; font-weight: normal; text-align: left; line-height: 20px; */ } /* EINZEILIGE Überschrift hellgrau fett, in "headline" eingefügt */ article h2 { /*color: #CCCCCC; font-size: 2.1em; text-align: left; Versuch*/ margin: -12px 0px 0px 0px; /* Überschrift nach oben korrigiert, vorher -1px */ /* padding-bottom: 15px; Kein Unterschied!? vorher -25px */ } /* ICON rechts neben Überschrift positioniert*/ .headline, .icon { display: inline; float: left; margin: 0px 0px 0px 0px; padding: 5px; box-sizing: border-box; /* width: auto; feste Größe */ } /* Überschrift */ /* FACHKOLLOQUIEN JAHRESTAGUNGEN VERANSTALTUNGEN, mehr Abstand Überschrift - Text bei MOBILFON (kleinste Auflösung) */ .headline, .headline_abstand { width: 65%; margin-left: -4px; /* so jetzt linksbündig mit Text*/ margin-right: 5px; margin-top: 5px; /* neu: Überschrift schiebt sich näher an Text */ padding-bottom: 0px; /* neu: Überschrift schiebt sich näher an Text */ } /* ICON */ .icon { /* background-color:#999999; */ width: 30%; margin-left: 10px; margin-right: 0px; /* */ margin-top: -45px; /* etwas höher platziert (vorher -40)*/ padding-bottom: 27px; /* weniger unterer Abstand zu Text (vorher 35)*/ } /* ICON RICHTLINIEN*/ .icon_rili { width: 30%; margin-left: 10px; margin-right: 0px; /* */ margin-top: -35px; /* etwas niedriger platziert (vorher -40)*/ padding-bottom: 27px; /* weniger unterer Abstand zu Text (vorher 35)*/ } /* kleine ICONs RELEVANTES, FORSCHUNG, SCHRIFTENREIHE, STELLUNGNAHMEN, JAHRBÜCHER, FACHTHEMEN, LINKS, KONTAKT, IMPRESSUM */ .icon_klein { width: 30%; margin-left: 10px; margin-right: 0px; /* */ /* margin-top: -40px; etwas höher platziert (vorher -40)*/ padding-bottom: 20px; /* weniger unterer Abstand zu Text (vorher 35)*/ } /* ICON JAHRESTAGUNGEN */ .icon_hoch { /* background-color:#999999; */ width: 30%; margin-left: 10px; margin-right: 0px; /* */ margin-top: -45px; /* etwas höher platziert (vorher -40)*/ padding-bottom: 20px; /* weniger unterer Abstand zu Text (vorher 35)*/ } .icon_rechts { /* background-color:#999999; */ width: 30%; margin-left: 10px; margin-right: 0px; /* */ margin-top: -40px; /* etwas höher platziert (vorher -40)*/ padding-bottom: 27px; /* weniger unterer Abstand zu Text (vorher 35)*/ } /*GRAUE ÜBERSCHRIFT 2-ZEILIG ("RECHTSFORM, ORGANE") */ .headline_lang { /* background-color:#999999; */ /* width: 65%; */ /* line-height: 30px; für Umbruch schmales Mobilfon */ width: 75%; /*margin-left: 0px; margin-right: -10px; margin-bottom: -15px; Abstand zwischen Überschrift und Text*/ } /*GRAUE ÜBERSCHRIFT 3-ZEILIG ("Anwendungshilfen", "SACHKUNDIGE PLANER") */ .headline_lang_3z{ /* background-color:#999999; */ width: 80%; /* VORHER 78%; */ margin-right: -5px; } /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (Rechtsform, Sat‍zung und Or‍ga‍ne) */ article h2.lang { } /* zugehöriges ICON */ .icon_lang { /* background-color:#999999; */ width: 20%; /* NEU: kleiner Abstand von rechts */ /*float: right; width: auto; feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ /*margin-top:0px; NEU */ padding-bottom: 20px; /* NEU (4) */ /*padding-left: 0px; NEU */ /* vertical-align: top; KEINE WIRKUNG */ /* padding-bottom: 5px; *//*hier keine Wirkung! margin-bottom: -25px; Abstand zwischen Überschrift und Text*/ } /* mehrzeilige ÜBERSCHRIFT */ .headline_multi { /* background-color:#999999; */ max-width: 330px; /*vorher 310px */ margin-bottom: -8px; /* padding-bottom: 5px; */ } /* ICON neben mehrzeiliger Überschrift */ .icon_multi { /* background-color:#999999; */ /*float: right; muss stehen bleiben */ /*width: auto; feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ margin-left: -15px; /*vorher -15px; */ margin-right: 0px; /* vorher margin-right: 5px; ! */ /* margin-top: -20px; wie vorher */ margin-bottom: 0px; /*vorher 5px; */ /* padding-bottom: 20px; */ width: 26%; /* Breite hier flexibel, sonst Umbruch -> Icon ist nicht rechtsbündig! */ /* vorher width: auto; feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ } /* ICON neben mehrzeiliger Überschrift ("Berichtigungen/Auslegungen")*/ .icon_multi_vari { width: 30%; /* NEU: */ } /*GRAUE ÜBERSCHRIFT 2-ZEILIG ("Berichtigungen/Auslegungen") */ .headline_lang_vari{ width: 65%; /*73 78% NEU: */ } /* h3 ADRESSE nur für MOBILE GERÄTE! "Deutscher Ausschuss für Stahlbeton" für unten neu positionierte Adresse (article p#adresse_mobile) */ article h3 { display: block; /*hier angezeigt*/ font-size: 1.15em; /**/ /* float: left; */ /*font-weight: bold;*/ margin: 0; color: #808080; padding-bottom: 17px; padding-top: 13px; /*Abstand zu Text*/ font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; letter-spacing: .6px; /*mehr gesperrt*/ } /* neue Position MOBILE ADRESSE unter dem Text; (hier nicht benutzt: .horizontal-mitte + .vertikal-mitte) "Deutscher Ausschuss für Stahlbeton" Überschrift unter h3*/ article p#adresse_mobile { display: block; /*hier angezeigt*/ /* float: left; */ /* position: relative; Desktop: absolute flexibel bei: fixed, absolute, // feste Position bei: relative, static, inherit*/ margin: -10px 0px -20px 0px; /* Adresse bleibt stehen, verschiebt sich nicht mit */ padding-bottom: 40px; /*Abstand nach unten */ font-size: 1.0em; /*neu, voher 0.95 */ font-family: "Arial Narrow","Helvetica Narrow",Tahoma,Arial,Helvetica,sans-serif; font-weight: normal; letter-spacing: 0.8px; /*neu: mehr gesperrt, vorher 0.5 */ color: #808080; line-height: 22px; /*position: relative;*/ } /* Angaben für (Mail)adresse*/ a#mail:link, a:visited { font-weight: normal; /*neu, voher 0.95 */ } a#mail:hover { color: #00A500; /* grün*/ background-color: transparent; /* text-decoration: underline; */ } /* neu angezeigt: BOX für Logo plus 2 leeer Boxen (vormals Login) horizontal nebeneinander (bei Desktop ausgeblendet) Box muss in css unter anderen Elementen stehem, sonst werden andere Elemente nicht angezeigt!? */ .box1, .box2, .box3 { display: inline; float: left; /* width: 32%; */ height: 106px; /* Gesamthöhe im Kopf */ /*margin-top: 25px; */ margin-right: 2%; padding: 5px; box-sizing: border-box; /* background: #cccccc; test*/ } /* leere Box, als Platzhalter, */ .box1 { /* background-color: #CCCCCC; */ width: 20%; margin-left: 15px; margin-right: 30px; } /* MOBIL_LOGO: gleiche Position wie DESKTOP_LOGO */ .box2 { /* background-color: #CCCCCC; */ width: 30%; margin-left: 26px; /* NEU vorher 6px*/ margin-right: 5px; /* veschiebt Login !*/ margin-top: 24px; } /* nur für Login 2-SPALTIGE VERSION, (sonst leere Box als Platzhalter)*/ .box3 { /* background-color: #CCCCCC; */ /* color: #808080; spricht nciht an*/ width: 35%; margin-top: 36px; /* BLEIBT: LOGIN verschiebt sich*/ margin-right: 10px; } /*-------------------*/ /* NAVIGATION bei Wegfall rechte Spalte neu positioniert */ nav#menu{ width: 26%; /*NEU 26%; vorher: 23%; */ margin: -14px 0px 0px 10px; /* Abstände oben, RECHTS vorher 0, links (VESCHIEBT SICH MIT GESAMTEM KOPF, dkl. grauer Rand verschwindet)*/ } main { /* text-align: center; */ } /*Zentrieren von Login-"DAfStb interner Bereich" horizontal und vertikal // nicht von Adressfeld! */ .horizontal-mitte { /* margin:1em auto; display: table;*/ } /*-------------------*/ /* ab 2-SPALTIGER Version AUSSCHALTEN! (bei 3-SPALTIGER Version: für korrekte Darstellung Fusszeile wenn Menü länger als Text) */ .clear_left { display: none; } /* Wenn MENÜLEISTE höher/gleich hoch wie Text (ARTICLE) ist (VEREIN), drückt ARTICLE nicht genug, und FOOTER rutscht in die Mitte */ footer { /*z-index: 10; VERSUCH*/ float: left; min-width: 109vw; /* damit GRAUER HINTERGRUND ganze Breite einnimmt, (Viewport width (vw))*/ /*min-width: 109%; */ margin-left:-10px; padding-left: 20px; } #impressum_footer { /*z-index: 20; VERSUCH*/ color:#EFEFEF; /*helles Grau für Schrift*/ padding-left: 10px; /* anpassen: Abstand links */ } /* Menüpunkt IMPRESSUM in Fusszeile, 2-SPALTIGE Version*/ a#impressum_footer:link, a:visited { float: none; /* Abstand zu Copyright bleibt gleich! */ padding-left: 16px; /* Abstand links */ } } /*****************2-SPALTIGE VERSION Anpassung für Bildschirmgroesse max. 700px dkl.-graue Ränder rechts/links verschwinden, Navigation weiter nach links gerückt***********************/ @media (max-width: 700px) { body { margin: 0px auto; /*Seite zentriert, kleinerer dkl.grauer Rand (oben/unten)*/ /* margin: 10px auto; Desktopseite */ /*margin: 0px auto; Seite zentriert, kein dkl.grauer Rand (unten)*/ /* max-width: 80em; max. Breite der gesamten Seite festlegen. Breitenangaben in relativen em passen sich flexibel an Schriftgröße an*/ } #wrapper { /*wrapper (= "weißes Feld") legt Breite 90% fest, wie wird Höhe "weißes Feld" festgelegt?*/ width: 100%; /* kein dkl-grauer Rand! (Breite gesamte weiße Seite ggü. Hintergrund), vorher 95%*/ height: 90%; padding-bottom: 10px; /* damit FUSSZEILE nicht abgeschnitten wird, vorher 10px // (weißer Rand als Abgrenzung zu grauem Rand, ab 12px weiße Linie unten)*/ /* Scrollbalken verhindern: vertikal + horizontal: */ overflow-x:hidden; overflow-y:hidden; } article { /*padding: 0 50px 0 20px; BLEIBT!!! */ /*margin-left: 10 px; Abstände zur linken Seite*/ /* margin-right: 0px; Abstände zur rechten Seite*/ /* margin-top: -5px; dkl.-grauer oberer Rand wird sehr schmal/ verachwindet*/ } /* Navigation */ nav#menu{ /*background-color: #CCCCCC; */ /*background-color: transparent; VERSUCH, damit IMPRESSUM (bei Start/Chronik) nicht überdeckt ist -> kein Unterschied*/ z-index: 0; /*display:block; kein Unterschied*/ margin: -14px 0px 0px 0px; /* Abstände: oben wie vorher, LINKS weiter an Rand gerückt: 0px (vorher /*margin: -14px 0px 0px 10px;)*/ width: 28%; /* NEU vorher 26%*/ } /* Menüpunkt IMPRESSUM in Fusszeile: weniger Abstand rechts Links, HAMBURGER Version*/ a#impressum_footer:link, a:visited { /* background-color: red; */ padding-left: 0px; /* Abstand links */ padding-right: 15px; /* Abstand rechts */ } /* MOBIL_LOGO: Ausrichtung links*/ .box2 { /* background-color: #CCCCCC; */ margin-left: 14px; /* NEU vorher 26px*/ /*width: 30%; margin-right: 5px; margin-top: 24px; */ } } /*****************Anpassung für Bildschirmgroesse max. 650px HAMBURGER-Menü wird angezeigt (-> Einblenden Nav), NAVIGATION anfangs ausgeblendet, LOGIN ausgeblendet / unter Text gesetzt (p.login_mobilphone); Nav springt als HAMBURGER nach oben, bei Klick: NEUE POSITION NAVIGATION (Höhe neu ausrichten, (grau hinterlegt) ***********************/ @media (max-width: 650px) { body { margin: 0px auto; /*Seite zentriert, kein dkl.grauer Rand (oben/unten)*/ /* max-width: 80em; max. Breite der gesamten Seite festlegen. Breitenangaben in relativen em passen sich flexibel an Schriftgröße an*/ } #wrapper { margin-top: -15px; /*NEU: oberer dkl.-grauer Rand bei Mobilfon verschwindet(vorher 0 px)*/ margin-left: -10px; /*NEU: vorher 0px, Scrollbalken verschwindet = linker grauer Rand verschwindet bei NAV-AUFRUF*/ width: auto; /* vorher 100%*/ } article { padding: 0 30px 0 0px; /*NEU vorher rechts 50px (JETZT 30px), vorher links 20px (JETZT 0px) !!! */ margin-left: 10 px; /*Abstände zur linken Seite*/ margin-right: 0px; /*Abstände zur rechten Seite*/ margin-top: -5px; /*dkl.-grauer oberer Rand wird sehr schmal/ verachwindet*/ } /* INTRO DAfStb-Logo gesamte Breite */ div#top_intro { /* float: right; */ margin: 35px 20px 0px 0px; /* NEU Abstand oben / rechts */ /* height: 68px; NEU Logogröße auf Ursprung width: 160px; */ } /* ICON */ .icon { margin-top: -15px; /* Abstand ICON zu oberem Rand -> schiebt Text nach unten; vorher -35, -40*/ } /* MITGLIEDSCHAFT */ .icon_rechts { /* background-color:#999999; */ margin-top: -10px; /* etwas tiefer platziert */ } /* kleine ICONs RELEVANTES, FORSCHUNG, SCHRIFTENREIHE, STELLUNGNAHMEN, JAHRBÜCHER, FACHTHEMEN, LINKS, KONTAKT, IMPRESSUM */ .icon_klein { margin-left: 10px; margin-right: 0px; margin-top: -15px; /* etwas höher platziert */ padding-bottom: 23px; /* weniger unterer Abstand zu Text */ } /* headline_abstand: FACHKOLLOQUIEN JAHRESTAGUNGEN VERANSTALTUNGEN, mehr Abstand Überschrift - Text bei MOBILFON (kleinste Auflösung) */ .headline { /* background-color:#999999; */ /* width: 65%; margin-left: 0px; margin-right: 5px; */ /* korrespondiert mit margin-top bei (icon) -> insgesamt größerer Abstand zu Logo...: */ margin-top: 30px; /* neu: Überschrift schiebt sich näher an Text, vorher 0 */ } /* ICON FACHKOLLOQUIEN JAHRESTAGUNGEN */ .icon_hoch { /* background-color:#999999; */ /*width: 30%; margin-right: 0px; */ margin-top: -30px; /* -40 Abstand ICON zu oberem Rand -> schiebt Text nach unten; vorher 37px, -35, -40*/ padding-bottom: 26px; /*vorher: 22px; */ margin-left: 10px; /* mind. sonst Lücke zu Überschrift -> Pfeil springt hoch */ padding-top: 0px; /*margin-left: 10px; */ } /* FACHKOLLOQUIEN JAHRESTAGUNGEN VERANSTALTUNGEN, bei MOBILFON mehr Abstand Überschrift - Text */ .headline_abstand { /* background-color:#999999; */ margin-right: 8px; /*5*/ margin-top: 15px; /* 10px neu: Überschrift schiebt sich näher an Text, vorher 0 */ padding-bottom: 1px; /*VORHER 0px; */ } /*GRAUE ÜBERSCHRIFT: PRESSEMITTEILUNGEN */ .headline_presse { /* background-color:#999999; */ margin-left: -2px; width: 70%; /* padding-bottom: 24px;*/ /*padding-right: 40px; */ line-height: 30px; /* für Umbruch schmales Mobilfon */ } .icon_presse { /* background-color:#999999; */ float: right; width: 26%; /* width: 30%; */ /* margin-left: 0px; nicht nötig 30px */ margin-right: 20px; margin-top: -40px; /* */ padding-bottom: 24px;/* */ /*padding-left: 0px; */ } /* MEHRZEILIGE Überschrift bei Desktop-Adresse ("Deutscher Ausschuss für Stahlbeton") in "headline_multi" eingefügt, gleich wie h3 Mobile ADRESSE */ article h1 { letter-spacing: -0.1px; /*mehr gesperrt*/ } /* MEHRZEILIGE ÜBERSCHRIFT */ .headline_multi { /* background-color:#999999; */ max-width: 310px; /* max-width: 66%; 65% max! vorher 72% */ /* margin-right: 10px; vorher 10px */ /* margin-bottom: -8px; */ padding-bottom: 20px;/* NEU */ } /* ICON neben mehrzeiliger Überschrift SACHKUNDIGE PLANER */ .icon_multi { /* background-color:#999999; */ /*float: right; muss stehen bleiben */ /*width: auto; feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ margin-left: 3px; /*vorher -7, -15px NEU: Mindestabstand zu Überschrift */ margin-right: -1px; /*vorher 0px */ /* margin-top: -20px; wie vorher */ margin-bottom: 25px;/*NEU: vorher 3px; */ /* padding-bottom: 20px; */ /*width: 35%; vorher 26%; Breite hier flexibel, sonst Umbruch -> Icon ist nicht rechtsbündig! */ width: auto; /* feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ } /* ICON neben mehrzeiliger Überschrift ("Berichtigungen/Auslegungen")*/ .icon_multi_vari { /*background-color:red; */ width: 30%; /*padding-top: 10px; */ margin-top: -15px; /* -10 */ margin-left: -30px; /* -15 30px */ margin-right: 0px; margin-bottom: 35px; /* +20 */ /*padding-bottom: 5px; NEU */ } /*GRAUE ÜBERSCHRIFT 2-ZEILIG ("Berichtigungen/Auslegungen") */ .headline_lang_vari{ /*background-color:red; */ box-sizing: border-box; line-height: 30px; /* für Umbruch schmales Mobilfon */ width: 68%; /* 78% NEU: */ margin-left: 0px; margin-right: 32px; /* 25 NEU: früherer Umbruch*/ margin-bottom: -10px; /*(-20) +15 bei padding-bottom aufgehoben, Abstand zwischen Überschrift und Text*/ } /* LOGIN rechts oben ausblenden*/ p.login_mobile { display: none; } /*LOGIN mobilphone anzeigen, unter Text */ article p.login_mobilphone{ display: block; padding-bottom: 20px; } /*LOGIN NAVIGATION mobile anzeigen, unter MENÜ */ p.login_mobile_nav { display: block; padding-left: 10px; margin-top: -31px; /*NEU!! vorher -50 */ padding-bottom: 30px; } /*"DAfStb interner Bereich" mobile: größerer Abstand zu "LOGIN" */ .dafstb_intern_mobile { padding-top: 5px; } article p.login_mobilphone a{ color: #808080; /* grau spricht an!!!! */ } /* Login-Link (MOBILE: Seite + NAV): Schrift verkleinern */ p.login_mobilphone a:link, a:visited, p.login_mobile_nav a:link, a:visited { text-decoration: none; font-size: 1.09em; letter-spacing: .4px; } p.login_mobilphone a:hover, p.login_mobile_nav a:hover { color: #00A500; /*grün spricht an */ background-color: transparent; } /*"DAfStb mobile interner Bereich": Schriftgröße + Spationierung */ .dafstb_intern_mobilphone { /*color: #808080; grau spricht an, aber keine rollover-Farbe mehr mgl.*/ font-size: 0.9em; letter-spacing: .5px; font-weight: normal; } /*im HEADER: leere linke Box */ .box1 { width: 25%; /*Abstand zu Logo */ /*margin-top: 20px; */ margin-left: 0px; /* neu: vorher 25 !*/ margin-right: 22px; /* neu: vorher 12 !*/ } /* LOGO verkleinert sich nicht */ .box2 { width: 36%; /* neu: vorher 30%!*/ margin-left: -15px; margin-top: 20px; /* neu: vorher 12 ; nicht mehr als 20, sonst springt Hamburger nach rechts!*/ margin-right: 40px; /* vorher 30px, verschiebt Login nach rechts!*/ } /* Login jetzt ausgeblendet! Box muss als Platzhalter bestehen bleiben, sonst springt Übeschrift nach oben */ .box3 { /*background-color: #FF0000; TEST*/ width: 25%; /* NEU: 23% vorher 30%*/ margin-top: 20px; /*vorher 36 */ padding-right: 0px; /*vorher 15px, weniger Abstand vom rechten Rand*/ } /*drei optische Balken HAMBURGER-Menü (bar1,2,3) werden sichtbar gestellt */ .mobmenu { display: inline-block; float: left; cursor: pointer; margin: -95px 0px 0px 30px; /* Hamburger-Menü tiefer gesetzt, auf gleicher Höhe Kopfzeile (-> ist jetzt schmaler) */ /* margin: -110px 0px 0px 30px; alt */ } /*3 einzelne Balken werden dargestellt:*/ .bar1, .bar2, .bar3 { /* z-index: 10; */ width: 30px; height: 4px; /* Dicke Balken */ background-color: #00A500; /* grün #00A500*/ /* background-color: #808080; Schriftgrau für Balken */ margin: 6.0px 0; /* vorher 6.9 */ transition: 0.4s; } /* 3 einzelne Balken werden bei Klick auf unsichtbare Checkbox animiert*/ #hamburger:checked ~ label .bar1 { transform: rotate(-45deg) translate(-7.5px, 7px); } #hamburger:checked ~ label .bar2 { opacity: 0; } #hamburger:checked ~ label .bar3 { transform: rotate(45deg) translate(-7px, -7px); } /* NAVIGATION bei Aufruf Seite ausblenden; Positionierung unten bei #hamburger:checked ~ label ~ nav{*/ /* NAVIGATION id="menu" Ansprechen mit nav#menu, oder #menu */ nav#menu { /*background-color: #FF0000; TEST, spricht nicht an*/ display: none; position: relative; float: none; /* float:left; Darf NICHT definiert werden (?!), sonst bleibt LÜCKE beim Untermenü */ /* z-index: 0; spricht nicht an*/ } /* HAUPTMENÜPUNKTE angesprochen, inkl. Untermenüpunkte */ #menu ul.submenu { /*background-color: #FF0000; TEST, spricht an*/ top: -26px; left: 60px; margin: 0px 0px 0px 0px; /* Menü Ausrichtung */ } /* NAVIGATION alle Abstände Haupt-/ Untermenü */ nav li { /*background-color: #ff0000; rot*/ width: auto; /*100% NEU spricht nicht an */ margin: 0px 0px 0px 0px; /*Abstand links auf 0, vorher 7*/ } /* Ausrichtung 1. UNTERMENÜPUNKTE: versteckt, solange nicht GEKLICKT wird */ nav ul.sub-menus{ display: none; /* versteckt, solange H.menüpkt. nicht geklickt wird: (nav#menu ul li:hover ul.sub-menus) */ } /* 1. UNTERMENÜ // NEU: NUR BEI MOBILER BILDSCHIRMBREITE; Untermenü im Verhältnis zu Hauptmenü positioniert: */ #menu ul li > ul { /* background-color: rot #ff0000; spricht nicht an */ position: absolute; /* WICHTIG!!!! HAUPTMENÜ BLEIBT auf POSITION!!!! */ display:block; /*auch display: inline; Untermenüpunkte bleiben stehen bei WIEDERaufruf */ top: 15px; /*AUSRICHTUNG UNTERMENÜ (VORHER 11px) */ left: 160px;/* Ausrichtung links an Hauptmenüpunkten */ } /* AUSRICHTUNG 2. Untermenü ( nur "MITGLIEDER"):*/ nav ul.sub-sub{ background: transparent; /* transparent*/ float: none; /* Untermenüpunkte springen nicht mehr */ width: auto; /*damit sich "Chronik" nicht daneben positioniert */ margin-top: 5px; /* NEUE Position*/ margin-left: -150px; /* NEUE Position*/ position: absolute; /* KEIN UNTERSCHIED*/ z-index: 2; /* NÖTIG, weil Untermenü sonst nicht über Hauptmenü liegt -> nicht mehr anklickbar */ } /* Untermenüpunkt CHRONIK auf Seite MITGLIEDSCHAFT: mehr Abstand für MOBILE Bildschirmgroesse max. 650px*/ #chronik_abstand{ /*background: red; */ margin-top: 20px; /* NEUE Position, ABSTAND bei MOBILE nicht automatisch angepasst*/ } /* SYNONYM zu OBEN Ausrichtung UNTERMENÜPUNKTE, bleiben stehen bei WIEDERaufruf; */ #menu ul li ul{ /*display:block; auch display: inline; Untermenüpunkte bleiben stehen bei WIEDERaufruf */ /*position:relative; NEU keine Änderung*/ /*top: -26px; left: 160px; */ /* z-index: 1; NEU keine Änderung*/ } /* spricht an!! UNTERMENÜPUNKTE verschwinden?:*/ nav ul.sub-menus li { } /* bei Klick NAVIGATION (nav) einblenden: Bedeutung: "wenn hamburger angeklickt, nav (Navigation) sichtbar, neue Angaben: Position,...", (label (= Balken für hamburger-Menü) und wird nicht angesprochen!?) */ #hamburger:checked ~ label ~ nav{ background-color: tranparent; /* WICHTIG, sonst ist FOOTER verdeckt!*/ display: block; /* WICHTIG!!! */ overflow: hidden; position: relative; /* WICHTIG!!! FOOTER bleibt unten stehen(!!!) über Text in Hauptspalte*/ min-width: 100%; /*!!! GESAMTBREITE, auch UNTERMENÜ wird verbreitert!!! (Breite abgestimmt auf breitesten Menüpunkt, aber kein Nebenanderpositionierung) */ /*Ränder oben links rechts unten: */ top: -10px; /*NEU: gesamte Navigation etwas höher gesetzt -> Abstand zu Fusszeile vergrößert sich*/ padding-top: 0px; /*VORHER: 25, schiebt Navigation auf Höhe Überschriften */ padding-left: 25px;/* NAV Abstand vom linken Rand */ padding-right: 0px; /*vorher 5px */ padding-bottom: 25px; } /* 1. Untermenüpunkte angezeigt + positioniert (WIRD ANGESPROCHEN!!) */ #hamburger:checked ~ nav ul.sub-menus { /*background-color: red; */ /* z-index: 1; WICHTIG, sonst Untermenü nicht ansprechbar */ } /* 2. Untermenüpunkte angezeigt + positioniert (WIRD ANGESPROCHEN!!) */ #hamburger:checked ~ nav ul.sub-sub{ } /* HAUPTmenüpunkte spricht nicht an*/ #hamburger:checked ~ nav ul.submenus { } /** VERSUCH- spricht nicht an! Show the submenu on hover, , focus **/ nav li:hover ul.sub-menus, nav li: ul.sub-menus, nav li:focus ul.sub-menus { } /*spricht zugehöriges UNTERMENÜ an!!! */ nav ul.sub-menus a { /*float:left; */ /* display:block; aus Beispielmenu */ font-size: 1.04em; font-weight: normal; color: #808080; /* grau*/ letter-spacing: .7px; } /* AUSRICHTUNG GRÜNE/GRAUE PFEILE:*/ img.horizontal_gruen_sub{ margin: 6px 6px 0px 0px; } img.horizontal_grau_sub{ margin: 1px 10px 0px 0px; } /* ***************** */ /* Bedeutung ~ -> "nav" (Navigation) ausblenden, wenn .mobmenu geklickt wird (mobmenu = Hamburgerbalken): */ .mobmenu ~ nav{ display:none; } /* funktioniert: ARTICLE unsichtbar bei NAV-Aufruf*/ #hamburger:checked ~ label ~ article{ display: none; } /* neuen FOOTER mobile innerhalb der NAVIGATION positionieren*/ footer.mobile { display: block; background-color: #666666; position: absolute; width: 100%; margin-left: -25px; margin-top: 25px; /*funktioniert nicht!? */ bottom: 0px; padding-bottom: 40px; /*(35 vorher) dunkelgrauer Rand unterhalb Text*/ padding-top: 0px;/*dunkelgrauer Rand oberhalb Text*/ padding-left: 0px; /* dunkelgrauer Rand links */ } /**/ footer { background-color:#666666; padding-left: 35px; /* NEU: etwas Rand an linker Seite */ } } /*****************Anpassung für Bildschirmgroesse max. 570px TEXT wird verbreitert, an linken Rand geschoben, DESKTOP-LOGO jetzt in der Mitte links ***********************/ @media (max-width: 570px) { /*LOGIN NAVIGATION mobile anzeigen, unter MENÜ */ p.login_mobile_nav { display: block; /*color: #808080; grau spricht nicht an */ /*top: 90px; funktioniert nicht auch margin, padding nicht... */ padding-left: 10px; margin-top: -50px; /*NEU!! vorher -50 */ padding-bottom: 30px; } /* neu angezeigt: BOX für Logo plus 2 leere Boxen (vormals Login) horizontal nebeneinander (bei Desktop ausgeblendet) Box muss in css unter anderen Elementen stehem, sonst werden andere Elemente nicht angezeigt!? */ .box1, .box2, .box3 { /*background-color: #CCCCCC; */ display: inline; float: left; /* width: 32%; */ height: 95px; /* Gesamthöhe im Kopf, vorher 106px */ /*margin-top: 25px; */ margin-right: 2%; padding: 5px; box-sizing: border-box; } /* leere Box, als Platzhalter, Hamburger NICHT eingefügt! */ .box1 { /*background-color: #CCCCCC; */ width: 22%; margin-left: 0px; margin-right: 0px; } /* MOBIL_LOGO: gleiche Position wie DESKTOP_LOGO; margin-right: 20px; zum Abstand halten nötig?*/ .box2 { /*background-color: #CCCCCC; */ margin-right: 0px; /**/ width: 50%; margin-left: 0px; margin-top: 20px; /* Abstand von oberem Seitenende !*/ } /* leere Box als Platzhalter, vorher Login */ .box3 { /*background-color: #CCCCCC; */ width: 23%; /* 20% NEU !*/ margin-top: 20px; /* gleichmäßig mit box2!! = Abstand zur Überschrift gesamt! vorher: 36 */ margin-right: 0px; } /*-------------------*/ /* Textspalte auf gesamte Bildschirmbreite vergrößert:*/ article { z-index: 0; /* Versuch unter HAMBURGER zu positionieren -> keine Änderung */ margin-left: 0%; /*kein Abstand zur linken Spalte*/ margin-right: 0%; /*kein Abstand zur rechten Spalte*/ /* margin-top: 30px; dkl.grauer Rand oben entsteht!!*/ /* padding-top: 30px; spricht nicht an!!*/ padding: 0 30px 0 30px; /* 30 px Abstand vom Rand rechts und links */ } /* MEHRZEILIGE ÜBERSCHRIFT: ICON rechts neben mehrzeilige Überschrift positioniert*/ .headline_multi, .icon_multi { } /* MEHRZEILIGE ÜBERSCHRIFT rechte TExtseite wir umgebrochen! -> besser als rechts 1/2 Zeilen mehr */ .headline_multi { /*background-color:#999999; */ /* max-width: 74%; max! vorher 72% */ /* margin-right: 10px; vorher 10px */ /* margin-bottom: -8px; */ margin-top: 10px; /* parallel mit icon-multi anpassen, vorher -7px */ padding-bottom: 15px; /*13 parallel mit icon-multi anpassen, vorher 7px 12 */ padding-right: 10px;/*margin-right: 15px; spricht nicht an? */ } /* ICON JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN */ .icon_hoch { /*background-color:#999999; */ margin-top: -35px; /* -30px; Abstand ICON zu oberem Rand -> schiebt Text nach unten; vorher*/ padding-bottom: 18px; /*NEU vorher: 15px; */ margin-left: 11px; /* 11px, mind. sonst Lücke zu Überschrift -> Pfeil springt hoch */ padding-top: 0px; /*margin-left: 10px; */ } /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN) */ article h2.lang_presse { /*background-color:#999999; */ margin: -5px 10px 5px 0px; /*10 margin-top: 11px margin-right: 10px vorher 0px; */ padding-bottom: 11px; } /* ICON neben mehrzeiliger Überschrift */ .icon_multi { /*background-color:#999999; */ margin-left: -15px; /*vorher 5px; */ margin-right: -8px; /*nach rechts raus schieben, wg. sehr schmaler Mobilefons!? */ margin-top: -8px; /*-8 parallel mit headline-multi anpassen vorher -21px */ margin-bottom: 9px; /* 18px NEU: */ width: 28%; /* vorher 26%; Breite hier flexibel, sonst Umbruch -> Icon ist nicht rechtsbündig! */ } /* kleine ICONs RELEVANTES, FORSCHUNG, SCHRIFTENREIHE, STELLUNGNAHMEN, JAHRBÜCHER, FACHTHEMEN, LINKS, KONTAKT, IMPRESSUM */ .icon_klein { /* background-color:red; */ padding-left: 25px; /* NEU weniger Abstand zu rechtem Rand */ } /*DESKTOP-LOGO wird nicht angezeigt */ div#top { display: none; } /*unterer Abstand Kopf zu Text damit Text nicht nach oben fließt */ .logo { margin-bottom: -10px; /* (vorher -5px)*/ } img.horizontal_gruen_sub-sub{ margin: 10px 6px 0px 0px; } img.horizontal_grau_sub-sub{ margin: 5px 10px 0px -10px; } /* Positionierung HAMBURGER, kleiner, auf Logo-Höhe gesetzt!!!!*/ .mobmenu { margin: -78px 0px 0px 30px; /* vorher -105px Hamburger-Menü auf gleicher Höhe Kopfzeile (-> ist jetzt schmaler) */ } /*3 einzelne Balken werden kleiner dargestellt:*/ .bar1, .bar2, .bar3 { z-index: 10; width: 28px; /* Breite, vorher 30 px */ height: 4px; /* Dicke Balken */ background-color: #00A500; /* grün #00A500*/ /* background-color: #808080; Schriftgrau für Balken */ margin: 4.0px 0; /* Abstände BaLken vorher //6.0px 0 (6.9) */ transition: 0.4s; } /* 3 einzelne Balken werden bei Klick auf unsichtbare Checkbox animiert*/ #hamburger:checked ~ label .bar1 { transform: rotate(-45deg) translate(-4.5px, 7px); } #hamburger:checked ~ label .bar2 { opacity: 0; } #hamburger:checked ~ label .bar3 { transform: rotate(45deg) translate(-4px, -7px); } /* Menüpunkt IMPRESSUM unter LOGIN (ADRESSE), nur für Smartphones (max-width: 570px)*/ a#impressum { color: #808080; /* Menü-grau (#5F5F5F; = Schriftfarbe dkl.grau)*/ } /* Menüpunkt IMPRESSUM unter LOGIN (ADRESSE), nur für Smartphones (max-width: 570px)*/ a#impressum:link, a:visited { display: block; color: #808080; /* Menü-grau (#5F5F5F; Schriftfarbe dkl.grau)*/ background-color: transparent; text-decoration: none; font-weight: bold; font-size: 1.17em; /* Schrift etwas kleiner*/ letter-spacing: -0.2px; line-height: 0px; padding: 25px 0px 5px 0px; /*Abstand oben/unten */ } /* Menüpunkt IMPRESSUM bei NAV HAMBURGER ÜBER LOGIN, nur für Smartphones (max-width: 570px)*/ a#impressum_nav:link, a:visited { display: block; color: #808080; /* #5F5F5F; Schriftfarbe dkl.grau*/ background-color: transparent; text-decoration: none; font-weight: bold; font-size: 1.190em; letter-spacing: -0.2px; line-height: 0px; /*margin-top: -14px; */ padding: 25px 0px 15px 9px; /* NEU 15px Abstand unten zu LinkedIn */ } a#impressum:hover, a#impressum_nav:hover{ color: #00A500; /* grün*/ } /* Menüpunkt IMPRESSUM im FOOTER ausgeschaltet*/ a#impressum_footer:link, a:visited { display: none; } /* Ränder Footer neu feslegen*/ footer { /* background-color: #666666; dunkelgrau*/ padding-left: 43px; /* NEU: linker Abstand Fußzeile */ /* letter-spacing: -0.2px; NEU: Schrift wg. Umbruch Fußzeile */ } } /*****************Anpassung für Bildschirmgroesse max. 486px Zwischenschritt: JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN ***********************/ @media (max-width: 486px) { /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN) */ article h2.lang_presse { background-color:transparent; font-size: 1.9em; /*1.9NEU kleiner (vorher 2.1) */ margin: -5px 0px -10px 0px; padding-bottom: 0px; /*margin: 0px; */ padding-right: 10px; } /* ICON JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN */ .icon_hoch { /*background-color: red; */ margin-top: -30px; /* -23 Abstand ICON zu oberem Rand -> schiebt Text nach unten; vorher 37px, -35, -40*/ margin-left: 43px; /*10px; vorher 20!*/ margin-right: -30px; /*-35 nach rechts gerückt!*/ padding-bottom: 0px; /*10 !*/ } } /*margin: 2px 10px 0px 0px; padding-bottom: 0px;*/ /*****************Anpassung für Bildschirmgroesse max. 450px normale MOBILFONBREITE, ÜBERSCHRIFTEN brechen um ***********************/ @media (max-width: 450px) { /* Überschrift hellgrau fett */ article h2 { /*background-color: red; */ color: #CCCCCC; /* #CCCCCC; */ font-size: 2.1em; /*margin: 0px; */ /* text-align: left; Versuch*/ margin: -1px 0px 5px 0px; padding-bottom: 0px; /*statt 25px */ letter-spacing: 0.7px; } /* einzeilige Überschrift LANGE WORTE bei SCHRIFTEN, SCHRIFTENREIHE, JAHRBÜCHER, STELLUNGNAHMEN, NACHHALTIGKEIT, MITGLIEDSCHAFT, MITGLIEDER, RICHTLINIEN. VERANSALTUNGEN, Jah‍resta‍gun‍gen, Kontakt Impressum*/ article h2.mittel { font-size: 2.0em; /*NEU kleiner (vorher 2.1) */ /*letter-spacing: 0px; (vorher 0.7px;) weniger Abstand */ padding-bottom: 0px; /*statt 10px / 25px */ } article h1 { letter-spacing: -.4px; /*mehr gesperrt*/ } /* ICON: VEREIN (alle Untermenüs außer Rechstform,...), NACHHALTIGKEIT, Ausschüsse, SCHRIFTEN, ... */ .icon { /*background-color:#999999; */ width: 31%; margin-top: -9px; /* VORHER: +10 Abstand ICON zu oberem Rand -> schiebt ÜBERSCHRIFT nach links, (Text nach unten;) vorher -5*/ padding-bottom: 3px; } /* ICON: RICHTLINIEN */ .icon_rili { /* background-color:#999999; */ margin-top: -9px; /* */ } /* einzeilige Überschrift LANGE WORTE bei RICHTLINIEN*/ article h2.mittel_rili { /*background-color: red; */ margin-bottom: 20px; /* NEU */ /* margin-bottom: 0px; keine Änderung */ } /* MITGLIEDSCHAFT */ .icon_rechts { /* background-color:#999999; */ margin-top: -5px; /* etwas tiefer platziert */ } /* kleine ICONs RELEVANTES, FORSCHUNG, SCHRIFTENREIHE, STELLUNGNAHMEN, JAHRBÜCHER, FACHTHEMEN, LINKS, KONTAKT, IMPRESSUM : */ .icon_klein { padding-bottom: 20px; /* 20px weniger unterer Abstand zu Text */ margin-top: -7px; /*noch höher platziert */ margin-left: 11px; /*vorher 10, mehr Druck von links auf HEADLINE = mehr Textabstand nach unten */ } /* ICON JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN */ .icon_hoch { /*background-color:#999999; */ margin-top: -23px; /* -40 Abstand ICON zu oberem Rand -> schiebt Text nach unten; vorher 37px, -35, -40*/ margin-left: 40px; /*10px; vorher 20!*/ margin-right: -30px; /* -35 nach rechts gerückt!*/ padding-bottom: 0px; /*10 22px; vorher 5, vorher 15px!*/ } /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN) */ article h2.lang_presse { background-color:transparent; font-size:1.9em; /* 1.9NEU kleiner (vorher 2.1) */ margin: 2px 10px 0px 0px; /*margin-top: 11px margin-right: 10px vorher 0px; */ padding-bottom: 0px; /*letter-spacing: 0px; vorher 0.7 NEU*/ } /* FACHKOLLOQUIEN JAHRESTAGUNGEN VERANSTALTUNGEN, mehr Abstand Überschrift - Text */ .headline_abstand { /*background-color:#999999; */ margin-bottom: -15px; /* ABSTAND zum Text verringert sich */ padding-bottom: 0px; /* 20 VORHER 10px; sonst Abstand zu klein */ margin-right: 10px; /* neu */ } /* CHRONIK + "mittel" */ .headline { /*background-color:#999999; */ margin-top: 30px; padding-bottom: 0px; /* VORHER 10px; sonst Abstand zu klein */ } /* MEHRZEILIGE ÜBERSCHRIFT rechte Textseite wird umgebrochen! -> besser als rechts 1/2 Zeilen mehr */ .headline_multi, .headline_lang { margin-top: 10px; /* parallel mit icon-multi anpassen, vorher -7px */ padding-bottom: 8px; /*13 parallel mit icon-multi anpassen, vorher 7px 12 */ padding-right: 10px;/*margin-right: 15px; spricht nicht an? */ margin-bottom: 0px; padding-bottom: 0px; /*8 parallel mit icon-multi anpassen, vorher 7px 12 */ } /* zugehöriges ICON ("RECHTSFORM, ORGANE") */ .icon_lang { margin-top: 10px; /* -10 NEU */ } /* ICON neben mehrzeiliger Überschrift SACHKUNDIGE PLANER */ .icon_multi { /*width: auto; feste Größe: ICON verkleinert sich bei schmalerem Bildschirm nicht */ margin-left: 5px; /*vorher -15px; */ margin-right: -8px; /*nach rechts raus schieben, wg. sehr schmaler Mobilefons!? */ /* padding-top: 5px; addiert sich zu bottom*/ margin-top: 10px; /*3 -8 parallel mit headline-multi anpassen vorher -21px */ margin-bottom: 25px; /* 9px NEU: */ width: 24%; /* vorher 26%; Breite hier flexibel, sonst Umbruch -> Icon ist nicht rechtsbündig! */ } /* ICON neben mehrzeiliger Überschrift ("Berichtigungen/Auslegungen")*/ .icon_multi_vari { /*background-color:#999999; */ margin-left: -15px; /*NEU -15 -20 -30 30px */ margin-right: -15px; margin-bottom: 39px; /* NEU 39 45 +35 */ } /*GRAUE ÜBERSCHRIFT 2-ZEILIG ("Berichtigungen/Auslegungen") */ .headline_lang_vari{ margin-bottom: -5px; /*(-10) +15 bei padding-bottom aufgehoben, Abstand zwischen Überschrift und Text*/ } /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (PRESSEMITTEILUNGEN) */ article h2.lang { font-size: 1.8em; /*NEU kleiner (vorher 1.9/2.1) */ letter-spacing: 0px; /*vorher 0.7 NEU*/ } /*GRAUE ÜBERSCHRIFT 3-ZEILIG ("Anwendungshilfen", "SACHKUNDIGE PLANER") */ .headline_lang_3z{ width: 79%; /* VORHER 80 (78%;) */ margin-right: -5px; margin-left: -2px; /* 2px nach links rausgerückt; */ } /*GRAUE ÜBERSCHRIFT: PRESSEMITTEILUNGEN */ .headline_presse { /*background-color:#999999; */ margin-left: -2px; width: 80%; line-height: 30px; /* für Umbruch schmales Mobilfon */ } /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN) */ article h2.lang_presse { background-color:transparent; font-size: 1.8em; /* 1.9NEU kleiner (vorher 2.1) */ margin: 11px 10px 0px 0px; /*margin-top: -1 margin-right: 10px vorher 0px; */ padding-bottom: 25px; /*letter-spacing: 0px; vorher 0.7 NEU*/ } .icon_presse { /*background-color:#999999; */ float: right; width: 21%; margin-right: -3px; /*margin-left: 5px; */ margin-top: -30px; /* */ padding-bottom: 26px;/*24 */ } footer { display: none; } footer.schmal { display: block; margin: -20px -20px -11px -20px; background-color: #666666; /* dunkelgrau*/ height: 30px; line-height: 10px; text-align: left; padding-left: 15px; /* NEU: Rand auf Minimum wg. Umbruch Fußzeile */ letter-spacing: -0.2px; /* NEU: Schrift wg. Umbruch Fußzeile */ } /* eingebettet im Footer*/ .copyright { /*background-color: red; dunkelgrau: funktioniert nicht -> zeigt bei Smartphone nicht grau an*/ padding-left: 1.5%; /*Abstand */ } } /*****************Anpassung für Bildschirmgroesse max. 400px schmale MOBILFONBREITE (MANUEL!!), ÜBERSCHRIFTEN brechen um ***********************/ @media (max-width: 400px) { /* ICON JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN */ .icon_hoch { /*background-color:red; */ margin-top: -23px; /* -40 Abstand ICON zu oberem Rand -> schiebt Text nach unten; vorher 37px, -35, -40*/ margin-left: 40px; /*10px; vorher 20!*/ margin-right: -33px; /* -30 nach rechts gerückt!*/ padding-bottom: 0px; /*10 22px; vorher 5, vorher 15px!*/ } /* bei SCHRIFTEN, SCHRIFTENREIHE, JAHRBÜCHER, STELLUNGNAHMEN, NACHHALTIGKEIT, MITGLIEDSCHAFT, MITGLIEDER, RICHTLINIEN. VERANSALTUNGEN, Jah‍resta‍gun‍gen*/ .icon { /*background-color:red; */ /*width: 31%; */ padding-bottom: 0px; margin-top: -7px; /* 5px;*/ margin-bottom:-5px; } /* kleine ICONs RELEVANTES, FORSCHUNG, SCHRIFTENREIHE, STELLUNGNAHMEN, JAHRBÜCHER, FACHTHEMEN, LINKS, KONTAKT, IMPRESSUM : */ .icon_klein { padding-bottom: 20px; /* 20px weniger unterer Abstand zu Text */ margin-top: -20px; /*noch höher platziert */ margin-left: 11px; /*vorher 10, mehr Druck von links auf HEADLINE = mehr Textabstand nach unten */ } /* CHRONIK */ .headline { /*background-color:#999999; */ margin-top: 15px; /*margin-bottom: 0px; */ padding-bottom: 0px; /* VORHER 10px; sonst Abstand zu klein */ } .headline_multi { margin-bottom: -20px; } /* einzeilige Überschrift LANGE WORTE bei SCHRIFTEN, SCHRIFTENREIHE, JAHRBÜCHER, STELLUNGNAHMEN, NACHHALTIGKEIT, MITGLIEDSCHAFT, MITGLIEDER, RICHTLINIEN. VERANSALTUNGEN, Jah‍resta‍gun‍gen, KONTAKT, IMPERSSUM*/ article h2.mittel { /*background-color: red; */ font-size: 2.0em; /*NEU kleiner (vorher 2.1) */ /*letter-spacing: 0px; (vorher 0.7px;) weniger Abstand */ margin-top: 0px; /*statt 10px / 25px */ } /* einzeilige Überschrift LANGE WORTE bei RICHTLINIEN*/ article h2.mittel_rili { /*background-color: red; */ margin-top: 0px; margin-bottom: -10px; /* NEU */ } /* 1. UNTERMENÜ // NEU: NUR BEI MOBILER BILDSCHIRMBREITE; Untermenü im Verhältnis zu Hauptmenü positioniert: */ #menu ul li > ul { left: 140px;/* NEU: Ausrichtung links näher an Hauptmenüpunkte, damit Pfeil Platz hat; vorher: 160px; */ } } /*****************Anpassung für Bildschirmgroesse max. 320px schmale MOBILFONBREITE, ÜBERSCHRIFTEN brechen um ***********************/ @media (max-width: 330px) { /* 1. UNTERMENÜ // NEU: NUR BEI MOBILER BILDSCHIRMBREITE; Untermenü im Verhältnis zu Hauptmenü positioniert: */ #menu ul li > ul { left: 140px;/* NEU: Ausrichtung links näher an Hauptmenüpunkte, damit Pfeil Platz hat; vorher: 160px; */ } /* CHRONIK */ .headline { /*background-color:#999999; */ font-size: 1em; /*NEU kleiner (vorher 1.9) */ margin-top: 10px; padding-bottom: 0px; /* VORHER 10px; sonst Abstand zu klein */ } /*GRAUE ÜBERSCHRIFT 2-ZEILIG ("Berichtigungen/Auslegungen") */ .headline_lang_vari{ margin-bottom: -65px; /*(-10) Abstand zwischen Überschrift und Text*/ } /* FACHKOLLOQUIEN JAHRESTAGUNGEN VERANSTALTUNGEN, mehr Abstand Überschrift - Text */ .headline_abstand { /*background-color:#999999; */ margin-bottom: -20px; /* vorher: -15 ABSTAND zum Text */ /*padding-bottom: 10px; 20 VORHER 10px; sonst Abstand zu klein */ margin-right: 28px; /*10px; neu */ } /* Überschriften + icon: VEREIN, MITGLIEDSCHAFT, MITGLIEDER, NACHHALTIGKEIT, SCHRIFTEN; nur Überschriften "mittel": FORSCHUNG, SCHRIFTENREIHE,STELLUNGNAHMEN,JAHRBÜCHER,FACHTHEMEN, LINKS, KONTAKT, IMPRESSUM,*/ article h2.mittel { /*background-color: red; */ font-size: 1.8em; /*NEU kleiner (vorher 1.9) */ margin-top: -10px; /*statt 10px / 25px */ margin-bottom: 10px; } /* ICONs + h2 "mittel": VEREIN, LEITBILD, MITGLIEDSCHAFT, MITGLIEDER, NACHHALIGKEIT,SCHRIFTEN (nur ICONS: AUSSCHÜSSE, CHRONIK): */ .icon { /* background-color:blue; */ width: 31%; /* NEU */ margin-left: 0px; /* margin-right: -5px; */ padding-bottom: 30px; /* 20px;*/ margin-top: -20px; /* 0px;*/ margin-bottom:-5px; } /* kleine ICONs RELEVANTES, FORSCHUNG, SCHRIFTENREIHE, STELLUNGNAHMEN, JAHRBÜCHER, FACHTHEMEN, LINKS, KONTAKT, IMPRESSUM : */ .icon_klein { background-color:transparent; width: 31%; padding-bottom: 15px; /* VORHER 20px weniger unterer Abstand zu Text */ margin-top: -20px; /*noch höher platziert */ margin-left: 0px; /*vorher 11px, Druck von links auf HEADLINE = mehr Textabstand nach unten */ } /* ICON JAHRESTAGUNGEN FACHKOLLOQUIEN VERANSTALTUNGEN */ .icon_hoch { /*background-color:red; */ margin-top: -26px; /* -26 Abstand ICON zu oberem Rand -> schiebt Text nach unten*/ margin-left: 20px; /* vorher 40!*/ margin-right: -33px; /* -30 nach rechts gerückt!*/ padding-bottom: 0px; /*10 22px; vorher 5, vorher 15px!*/ } /* zugehörige Schriftgröße UNTERSCHNEIDEN der ÜBERSCHRIFT (VERANSTALTUNGEN, JAHRESTAGUNGENFACHKOLLOQUIEN) */ article h2.lang_presse { /*background-color:red; */ margin: -20px -15px -20px 0px; /*margin-top:11 margin-right: 10px vorher 0px; */ } /* MEHRZEILIGE ÜBERSCHRIFT nur STARTSEITE */ .headline_multi{ /*background-color:red; */ /* margin-top: 10px; parallel mit icon-multi anpassen, vorher -7px */ margin-bottom: -20px; padding-bottom: 0px; /*8 parallel mit icon-multi anpassen, vorher 7px 12 */ /* padding-right: 10px; margin-right: 15px; spricht nicht an? */ } }