Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Seite 3 von 4 ErsteErste 1234 LetzteLetzte
Ergebnis 21 bis 30 von 38
Like Tree3Likes

Thema: Flexible Header-Grafik?

  1. #21
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    Der <head>... </head> ist nicht der <header>. In den <head> Bereich gehören keine HTML Elemente.
    Suche im <body> ... </body> nach dem Tag
    <header class="site-header" id="site-header" role="banner">

    und füge das Bild direkt dahinter ein.

  2. #22
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    ... 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;
    }
    Geändert von Sailor56 (29.08.2017 um 15:17 Uhr) Grund: Typo beseitigt

  3. #23
    PostRank: 0
    Registriert seit
    26.07.2017
    Beiträge
    18
    Danke Das klappt soweit, jedoch geht das Hintergrundbild noch nicht bis zum Seitenrand.
    Kann das evtl. am Theme liegen?

  4. #24
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    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.

  5. #25
    PostRank: 0
    Registriert seit
    26.07.2017
    Beiträge
    18
    Habe die Seite im Moment noch auf einem Testserver laufen, daher leider kein Link
    margin: 0px; hat leider nicht den gewünschten Effekt gebracht.
    Header.jpg

  6. #26
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    Dann könnte noch ein Padding beim <body> oder <html> diesen Effekt verursachen... also neuer Test
    html, body {
    padding: 0px;
    }

  7. #27
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    Sollte das auch nicht helfen, dann gibt es noch weiter 'Störquellen'.
    Dein Header steckt noch in 2 weiteren Elternelementen drin:

    HTML-Code:
     <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?

  8. #28
    PostRank: 0
    Registriert seit
    26.07.2017
    Beiträge
    18
    Das #max-width und #overflow-container war es. So sah der Code aus:

    HTML-Code:
    .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:

    HTML-Code:
    .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. Header.jpg
    Vielen vielen Dank für die Hilfe

  9. #29
    PostRank: 0
    Registriert seit
    26.07.2017
    Beiträge
    18
    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:
    HTML-Code:
    <!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:
    Code:
    #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: header1.jpg
    Wenn ich das weiter anpasse, ist das Video länger als der Header: header2.jpg
    Hat jemand evtl. einen Tipp für mich?

    Gruß Rafael

  10. #30
    PostRank: 0
    Registriert seit
    26.07.2017
    Beiträge
    18
    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/60w6gpa8wv...eader.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/2bdbbuvy1z...LogIn.png?dl=0
    Da sieht das auf einmal so schmal aus.

    header.php:
    HTML-Code:
    <!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:
    Code:
    .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

Seite 3 von 4 ErsteErste 1234 LetzteLetzte

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •