Hallo liebes Forum,
ich zaubere hier schon eine weile an einer Homepage. Diese befindet sich in den letzten Zügen, jedoch komme ich an einem wichtigen Punkt nicht weiter.
Auf der Webseite gibt es ein Logo welches 60 pixel hoch ist. Dieses befindet sich im Header, welches auch 60 Pixel hoch sein soll, so das dieses Logo formatfüllend in diesem Header sitzt. Das Theme (Bauahus) gibt jedoch standartmässig vor das dieser Header wohl um das Logo ein gewissen Abstand macht. Bedeutet das dieser immer etwas größer wie das Logo ist.
Ich selber habe jetzt schon hinbekommen das das Logo linksbündig ist (leider nicht beim verkleinern des Browserfensters) und das der Header maximal 60 pixel hoch sein soll.
Dannach musste ich das Menü, sowie das Logo um 40 pixel nach oben verschieben damit diese wieder richtig sitzen. "alles Top", hab ich mir gedacht "so woll ich das haben!"!
Nun habe ich aber das Probmel das alle anderen Seiten, in dem das Theme ein Bild direkt unter dem Header packt, dort ein ca. 40 Pixel großen weißem Balken erstellt.
Nun weis ich nicht mehr weiter. (= Könntet ihr mir dazu einen Tip geben? Ich sitze hier schon seit stunden dran, nachdem ich die Seite mehrmals zerschossen habe, bin ich jetzt ratlos.
Hier ist die Webseite: http://www.wp-winkler-partner.com
Und hier der Text aus der style.ccc im Teil "Header":
[TABLE="class: outer_border, width: 1000"]
[tr][td][5. Header ]
*/
header {position: relative; width: 100%;min-height: 60px; max-height: 60px; padding-left: 0px; padding-right: 30px; z-index: 999;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing: border-box;}
header:before {position: absolute;left: 0;bottom: -4px; width: 100%;height: 4px;z-index: 9; background: url(images/shadow.png) repeat-x 0 0; content: "";opacity: 0.65}
.page-template-templ-home-php header {position: absolute;left: 0;top: 0;}
.page-template-templ-home-php header.header2:before {display: none;}
/* Logo1 */
.home.blog .header2,
.header1 {background: #7e7e7e;}
.home.blog .header2 .logo,
.header1 .logo {color: #ffffff; font-size:12px; bottom: 20px}
.home.blog .header2 .logo .mainLogo,
.header1 .logo .mainLogo {opacity: 1;}
.home.blog .header2 .logo .logoDark, .home.blog .header2 .logo .logoLight,
.header1 .logo .logoDark, .header1 .logo .logoLight {display: none!important;}
/* Logo2 */
.header2 .logo {margin-top: 34px;}
.header2 .logo .mainLogo {display: none!important;}
.background--dark .header2 .logo {color: #fff;}
.background--dark .header2 .logo .logoLight {opacity: 1;}
.background--white .header2 .logo {color: #0b0b0b;}
.background--white .header2 .logo .logoDark {opacity: 1;}
.home.blog .header2 .logo,
.logo, .logo:visited {display: block;position: relative; float: left;height: 20px;line-height: 20px;margin-top: 20px;margin-bottom: 20px; font-size: 20px;font-family: 'Montserrat', 'Open Sans', sans-serif;text-transform: uppercase;
text-decoration: none;-webkit-transition: color 0.3s ease;-moz-transition: color 0.3s ease;-o-transition: color 0.3s ease;transition: color 0.3s ease;}
.home.blog .header2 .logo img,
.logo img {position: absolute;left: 0;top: 0;opacity: 0;-webkit-transition: opacity 0.3s ease;-moz-transition: opacity 0.3s ease;-o-transition: opacity 0.3s ease;transition: opacity 0.3s ease;}
.home.blog .header2 .logo span,
.logo span {float: right;display: block;margin-left: 10px;}
/* Menu */
.home.blog .header2 .mainmenu,
.mainmenu {float: right;margin: 23px 0 0 0;}
.home.blog .header2 .mainmenu li,
.mainmenu li {display: block;position: relative; float: left;margin-left: 44px; margin-top: -20px; bottom: 0px}
.home.blog .header2 .mainmenu li:first-child,
.mainmenu li:first-child {margin-left: 0;}
.home.blog .header2 .mainmenu li a,
.mainmenu li a {display: block;height: 17px; line-height: 16px; border-bottom: 2px solid rgba(0,0,0,0); font-size: 13px;font-family: 'Montserrat', 'Open Sans', sans-serif;text-transform: uppercase; text-decoration: none;white-
space: nowrap;word-wrap: normal;
-webkit-transition: border-color 0.3s ease;-moz-transition: border-color 0.3s ease;-o-transition: border-color 0.3s ease;transition: border-color 0.3s ease;}
/* Menu1 */
.home.blog .header2 .mainmenu li,
.header1 .mainmenu li {padding-bottom: 18px;}
.home.blog .header2 .mainmenu li a,
.header1 .mainmenu li a {color: #ffffff;}
.home.blog .header2 .mainmenu li.current-menu-item a, .home.blog .header2 .mainmenu li:hover a, .home.blog .header2 .mainmenu li a:hover,
.header1 .mainmenu li.current-menu-item a, .header1 .mainmenu li:hover a, .header1 .mainmenu li a:hover {border-bottom-color: #ffffff;}
.home.blog .header2 .mainmenu li ul,
.header1 .mainmenu li ul {display: none; position: absolute;left: -21px;top: 37px;min-width: 200px; padding: 10px 0; border: 1px solid #e7e7e6; background-color: #fff;z-index: 999;}
.home.blog .header2 .mainmenu li:hover > ul,
.header1 .mainmenu li:hover > ul {display: block;}
.home.blog .header2 .mainmenu > li:last-child ul,
.header1 .mainmenu > li:last-child ul {left: auto;right: -21px;}
.home.blog .header2 .mainmenu > li:last-child ul ul,
.header1 .mainmenu > li:last-child ul ul {right: 100%;}
.home.blog .header2 .mainmenu li ul li,
.header1 .mainmenu li ul li {display: block;float: none; margin: 0;padding: 0;}
.home.blog .header2 .mainmenu li ul li a, .home.blog .header2 .mainmenu li ul li a:visited,
.header1 .mainmenu li ul li a, .header1 .mainmenu li ul li a:visited {display: block;padding: 0 20px;height: 29px; line-height: 29px; border: 0; color: #797979;font-size: 13px;font-family: 'Montserrat', 'Open Sans', sans-
serif;text-transform: none; white-space: nowrap;word-wrap: normal;
-webkit-transition: color 0.3s ease;-moz-transition: color 0.3s ease;-o-transition: color 0.3s ease;transition: color 0.3s ease;}
.home.blog .header2 .mainmenu li ul li:hover > a, .home.blog .header2 .mainmenu li ul li a:hover,
.header1 .mainmenu li ul li:hover > a, .header1 .mainmenu li ul li a:hover {color: #0b0b0b;}
.home.blog .header2 .mainmenu li ul li ul,
.header1 .mainmenu li ul li ul {display: none; left: 100%;top: 0;}
/* Menu2 */
.header2 .mainmenu {margin: 37px 0 0 0;}
.header2 .mainmenu li {padding-bottom: 18px;}
.header2 .mainmenu li a {-webkit-transition: color 0.3s ease, border-color 0.3s ease;-moz-transition: color 0.3s ease, border-color 0.3s ease;-o-transition: color 0.3s ease, border-color 0.3s ease;transition: color 0.3s ease,
border-color 0.3s ease;}
.background--dark .header2 .mainmenu li a {color: #fff;}
.background--dark .header2 .mainmenu li.current-menu-item a, .background--dark .header2 .mainmenu li a:hover {border-bottom-color: #fff;}
.background--white .header2 .mainmenu li a {color: #0b0b0b;}
.background--white .header2 .mainmenu li.current-menu-item a, .background--white .header2 .mainmenu li a:hover {border-bottom-color: #0b0b0b;}
.header2 .mainmenu li ul {display: none; position: absolute;left: -21px;top: 37px;min-width: 200px; padding: 10px 0; border: 1px solid #e7e7e6; background-color: #fff;z-index: 2;}
.header2 .mainmenu li:hover > ul {display: block;}
.header2 .mainmenu > li:last-child ul {left: auto;right: -21px;}
.header2 .mainmenu > li:last-child ul ul {right: 100%;}
.header2 .mainmenu li ul li {display: block;float: none; margin: 0;padding: 0;}
.header2 .mainmenu li ul li a, .header2 .mainmenu li ul li a:visited {display: block;padding: 0 20px;height: 29px; line-height: 29px; border: 0; color: #797979!important;font-size: 13px;font-family: 'Montserrat', 'Open Sans',
sans-serif;text-transform: none; white-space: nowrap;word-wrap: normal;
-webkit-transition: color 0.3s ease;-moz-transition: color 0.3s ease;-o-transition: color 0.3s ease;transition: color 0.3s ease;}
.header2 .mainmenu li ul li:hover > a, .header2 .mainmenu li ul li a:hover {color: #0b0b0b!important;}
.header2 .mainmenu li ul li ul {display: none; left: 100%;top: 0;}
.mobileMenu {display: none;}
.showMobileMenu {display: none;}
.home.blog .header2 .languageSelect,
.languageSelect {position: relative; float: right;margin: 23px 0 0 42px;}
.languageSelect span {display: block;position: relative; padding: 0 20px 0 26px;height: 16px; line-height: 16px;color: #0b0b0b;font-size: 12px;font-family: 'Montserrat', 'Open Sans', sans-serif;cursor: pointer;text-transform:
uppercase; -webkit-transition: color 0.3s ease;-moz-transition: color 0.3s ease;-o-transition: color 0.3s ease;transition: color 0.3s ease;}
.languageIcon {display: block;position: absolute;left: 0;top: 0; width: 16px;height: 16px; background: url(images/sprite.svg) no-repeat -80px -160px;}
.dropDownIcon {display: block;position: absolute;right: 0;top: 5px;width: 10px;height: 6px;background: url(images/sprite.svg) no-repeat -96px -160px;}
.languageSelect ul {display: none; position: absolute;left: 17px;top: 20px;width: calc(100% - 26px + 9px);padding: 3px 0; border: 1px solid #0b0b0b;background: #fff;}
.languageSelect ul li {display: block;}
.languageSelect ul li a, .languageSelect ul li a:visited {display: block;line-height: 20px;padding: 0 9px; color: #0b0b0b;font-size: 12px;font-family: 'Montserrat', 'Open Sans', sans-serif;text-decoration: none;text-transform:
uppercase; -webkit-transition: background 0.3s ease, color 0.3s ease;-moz-transition: background 0.3s ease, color 0.3s ease;-o-transition: background 0.3s ease, color 0.3s ease;transition: background 0.3s ease, color 0.3s ease;}
.languageSelect ul li a:hover {background: #0b0b0b;color: #fff;}
.header2 .languageSelect {margin-top: 37px;}
.background--dark .header2 .languageSelect span {color: #fff;}
.background--dark .header2 .languageIcon {background-position: -80px -180px;}
.background--dark .header2 .dropDownIcon {background-position: -96px -180px;}
[/TABLE]
Ich währe über Hilfe echt dankbar. Lieben Gruß, Sebastian