Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Der <head>... </head> ist nicht der <header>. In den <head> Bereich gehören keine HTML Elemente.
Suche im <body> ... </body> nach dem Tag
[COLOR=#000080]<header class=[COLOR=#0000FF]"site-header"[/COLOR] id=[COLOR=#0000FF]"site-header"[/COLOR] role=[COLOR=#0000FF]"banner"[/COLOR]>
[/COLOR][COLOR=#000000]und füge das Bild direkt dahinter ein[/COLOR][COLOR=#000080].
[/COLOR]
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
... ich seh es gerade. Bei dir liegt der Fall doch etwas anders. Du hast Inhalt in deinem Header und dein Bild ist mehr so eine Art 'Füllfunk' dem es nichts ausmacht, wenn es nicht immer ganz zu sehen ist.
Dann solltest du über die Lösung nachdenken, das Bild nicht direkt einzufügen, sondern als Hintergrund zum Header einzurichten.
#site-header {
background-image: url("dein_bild.jpg");
background-size: cover;
background-repeat: no-repeat;
}
Danke ;) Das klappt soweit, jedoch geht das Hintergrundbild noch nicht bis zum Seitenrand.
Kann das evtl. am Theme liegen?
Das kann ich ohne Link zur Seite nicht erkennen.
Aber vielleicht hat dein #site-header noch ein Margin rechts/ links.
Füge doch mal testhalber die CSS Anweisung 'margin: 0px;' hinzu.
Habe die Seite im Moment noch auf einem Testserver laufen, daher leider kein Link :(
margin: 0px; hat leider nicht den gewünschten Effekt gebracht.
Dann könnte noch ein Padding beim <body> oder <html> diesen Effekt verursachen... also neuer Test
html, body {
padding: 0px;
}
Sollte das auch nicht helfen, dann gibt es noch weiter 'Störquellen'.
Dein Header steckt noch in 2 weiteren Elternelementen drin:
<div id="overflow-container" class="overflow-container">
<div id="max-width" class="max-width">
<?php do_action( 'before_header' ); ?>
<header class="site-header" id="site-header" role="banner">untersuche doch mal diese beiden Div's ... #max-width und #overflow-container... , ob sich dort irgendwelche margin und padding verstecken?
Das #max-width und #overflow-container war es. So sah der Code aus:
.max-width {
max-width: 1400px;
margin: 0 auto;
}
.overflow-container {
position: relative;
overflow: hidden;
height: auto;
min-height: 100%;
padding: 0 4.167%;
}Nachdem ich das angepasst habe:
.max-width {
max-width: 100%;
margin: 0 auto;
}
.overflow-container {
position: fixed;
overflow: hidden;
height: auto;
min-height: 100%;
padding: 0 0%;
}Jetzt sieht es so aus, wie ich es haben wollte.
Vielen vielen Dank für die Hilfe ;)
Moin,
ich folgende Problematik:
Anstatt ein Bild in dem Header zu verwenden, soll jetzt ein Video im Hintergrund des Headers laufen.
Ich habe es so wie in dem nachfolgendem Code ausprobiert:
header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body id="<?php print get_stylesheet(); ?>" <?php body_class(); ?>>
<?php do_action( 'body_top' ); ?>
<a class="skip-content" href="#main"><?php _e( 'Skip to content', 'chosen' ); ?></a>
<div id="overflow-container" class="overflow-container">
<div id="max-width" class="max-width">
<?php do_action( 'before_header' ); ?>
<header class="site-header" id="site-header" role="banner">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="wp-content/uploads/cloud/cloud.webm" type="video/webm">
<source src="wp-content/uploads/cloud/cloud.mp4" type="video/mp4">
<source src="wp-content/uploads/cloud/cloud.ogv" type="video/ogg ogv">
</video>
<div id="video_pattern"></div>
<div id="menu-primary-container" class="menu-primary-container">
<?php get_template_part( 'menu', 'primary' ); ?>
<?php get_template_part( 'content/search-bar' ); ?>
<?php ct_chosen_social_icons_output(); ?>
</div>
<button id="toggle-navigation" class="toggle-navigation" name="toggle-navigati$
<span class="screen-reader-text"><?php _ex( 'open menu', 'verb: open t$
<?php echo ct_chosen_svg_output( 'toggle-navigation' ); ?>
</button>
<div id="title-container" class="title-container">
<?php get_template_part( 'logo' ) ?>
<?php if ( get_bloginfo( 'description' ) ) {
echo '<p class="tagline">' . esc_html( get_bloginfo( 'descript$
} ?>
</div>
</header>
<?php do_action( 'after_header' ); ?>
<section id="main" class="main" role="main">
<?php do_action( 'main_top' );
if ( function_exists( 'yoast_breadcrumb' ) ) {
yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}style.css:
#video_background {
position: absolute;
top: 0px;
right: 0px;
min-width: 100%;
min-height: 30% ;
width: auto;
height: 30%;
z-index: -1000;
overflow: hidden;
}
#video_pattern {
background-image: url(wp-content/uploads/2017/08/CloudHell.png);
position: absolute;
opacity: 0.5;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
Leider verläuft das Video nicht bis zum linken und rechten Seitenrand, wie im Bild zu sehen:
Wenn ich das weiter anpasse, ist das Video länger als der Header:
Hat jemand evtl. einen Tipp für mich? ;)
Gruß Rafael
Moin,
ich habe das Video soweit eingebunden, jedoch wird das Video beim mir im Header
bei einem 28 Zoll Monitor nicht bis zum Seitenrand dargestellt:
https://www.dropbox.com/s/60w6gpa8wvi8t34/Header.png?dl=0
Bei einem 13 und 17 Zoll Monitor läuft das ohne Probleme, muss ich das Video bearbeiten
oder kann das per Code sozusagen an den Seitenrändern angeheftet werden?
Ein weiteres Problem ist, dass beispielsweise beim Login:
https://www.dropbox.com/s/2bdbbuvy1zu8552/LogIn.png?dl=0
Da sieht das auf einmal so schmal aus.
header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body id="<?php print get_stylesheet(); ?>" <?php body_class(); ?>>
<?php do_action( 'body_top' ); ?>
<a class="skip-content" href="#main"><?php _e( 'Skip to content', 'chosen' ); ?></a>
<div id="overflow-container" class="overflow-container">
<div id="max-width" class="max-width">
<?php do_action( 'before_header' ); ?>
<header class="site-header" id="site-header" role="banner">
<div id="menu-primary-container" class="menu-primary-container">
<?php get_template_part( 'menu', 'primary' ); ?>
<?php get_template_part( 'content/search-bar' ); ?>
<?php ct_chosen_social_icons_output(); ?>
</div>
<button id="toggle-navigation" class="toggle-navigation" name="toggle-navigati$
<span class="screen-reader-text"><?php _ex( 'open menu', 'verb: open t$
<?php echo ct_chosen_svg_output( 'toggle-navigation' ); ?>
</button>
<div id="title-container" class="title-container">
<?php get_template_part( 'logo' ) ?>
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" vo$
<source src="wp-content/themes/chosen-child/images/header/cloud73.webm" type="video/w$
<source src="wp-content/themes/chosen-child/images/header/cloud73.mp4" type="video/mp$
<source src="wp-content/themes/chosen-child/images/header/cloud73.ogv" type="video/og$
</video>
<div id="video_pattern"></div>
<img src="wp-content/themes/chosen-child/images/header/750px-Hauptseite.png" usemap="#map" />
<map name="map">
<area shape="rect" coords="12,12,367,68" target="Unternehmensprozess" href="https://cloud-wiki.lin.hs-osnabrueck.de/?p=69" />
<area shape="rect" coords="382,12,737,67" target="IT-Systeme" />
<area shape="rect" coords="12,82,737,139" target="Praxisbeispiele" />
</map>
<?php if ( get_bloginfo( 'description' ) ) {
echo '<p class="tagline">' . esc_html( get_bloginfo( 'descript$
} ?>
</div>
</header>
<?php do_action( 'after_header' ); ?>
<section id="main" class="main" role="main">
<?php do_action( 'main_top' );
if ( function_exists( 'yoast_breadcrumb' ) ) {
yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}style.css:
.main {
width: 90%;
}
.site-header {
text-align: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
top: 0px;
left: 0px;
padding: 10px 0px 90px 0px;
width: 100%;
}
.overflow-container {
position: absolute;
overflow: hidden;
height: auto;
min-height: 100%;
padding: 0px;
}
.max-width {
max-width: 100%;
margin: 0 auto;
}
#video_background {
position: absolute;
top: 0px;
right: 0px;
min-width: 100%;
min-height:100% ;
width: auto;
height: 100%;
z-index: -1000;
overflow: hidden;
}
#video_pattern {
position: absolute;
opacity: 0.5;
left: 0px;
top: 0px;
width: 100%;
height: 10%;
z-index: -1;
}Vielleicht hatte jemand schon ähnliche Probleme und kann mir evtl. Tipps geben?
Danke ;)
Ohne Link zur Seite ist sowas echt schwierig. Mit Link wäre es vermutlich eine Sache von 3 Min. Ich vermute irgendwo stört eine max-width o. ä.
Einmal der Link dazu: https://cloud-wiki.lin.hs-osnabrueck.de
Du gibst dem Video nur eine Höhe von 392px und darauf skaliert es. D. h. irgendwann kann es nicht mehr breiter werden, weil nicht genug Höhe da ist.
Versuch mal folgendes:
#video_background {
height: auto;
}
.site-header {
overflow: hidden;
}
Damit gibst du dem Video soviel Höhe wie benötigt wird, damit es in der Breite skalieren kann. Und dem Header sagst du gleichzeitig, dass er das Video unten abschneiden soll ..... also mal grob formuliert.
Genau das war es, perfekt. Vielen vielen Dank ;)
Jetzt fehlt das nur noch mit dem Log-In, dass es auf die volle Seitenbreite angezeigt wird.
Wer hat dem .overflow-container denn die position:absolute verpasst und warum? Das stört.
Oh neeein, wie blöd von mir -.-
Das war der Fehler, jetzt funktioniert das auch mit dem Login.
Vielen vielen Dank für deine Hilfe. ich weiß gar nicht, wie ich das wieder gut machen kann ;)
ich weiß gar nicht, wie ich das wieder gut machen kann ;)
Ich könnte jetzt einen Kaffee vertragen. Schieb mal einen rüber :mrgreen:
Schön dass es jetzt funktioniert hat.
*Einen großen Kaffee mit Keks rüber schieb* :D
Vielen Dank nochmal ;)
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
