Beiträge von Sundream

Sundream

Also du hast mich schon richtig verstanden, nur bei mir hatte es irgendwie nicht funktioniert...

Habe es jetzt trotzdem nochmal getestet und jetzt funktioniert es... keine Ahnung warum..

Jetzt habe ich aber ein neues Problem. Die Navigation scrollt nur so lange zu dem Punkt wo sie hin soll, solange die Navigation geöffnet ist. Das heißt sie fängt an zu scrollen und bricht dann ab, weil sich die Navigation schließt. Dadurch funktioniert sie dann natürlich nicht mehr richtig.

Ist das ein normales Verhalten oder muss irgendwo ein Fehler sein? Oder gibt es etwas womit man das umgehen kann?

In deinem Code funktionierts (hab der Navigation kurz mal id-Ziele gegeben), aber meine html/body haben noch die css-Eigenschaft: scroll-behavior: smooth;

Sundream

Hallo Basti,

danke für die Antwort. Wenn ich das so einbaue klappt sich das Menü leider garnicht mehr auf....

Sowohl wenn ich das Javascript dadurch ersetze als auch wenn ich es zusätzlich hinzufüge...

Sundream

Hallo ihr,

ich habe für eine responsive Navigation folgenden Code verwendet:

https://codepen.io/bradfrost/pen/sHvaz

Den Code habe ich für eine Onepage verwendet. Das heißt meine Navigationspunkte sind Anker auf der Website. Wenn ich jetzt darauf Klicke bleibt die mobile Navigation offen und stört. Wäre super, wenn sie sich wenn ich eins der li Elemente anklicke wieder schließt. Ich weiß nur leider nicht was ich beim Js ändern muss, damit das so funktioniert.

Kann mir bitte jemand weiterhelfen?

Danke!

Liebe Grüße

Sun

Sundream

Zitat von Bandit
Das hat aber doch nichts mit JavaScript zu tun.

Das hier ist entscheidend:
Code
.carousel-cell {
  width: 50%; /* half-width */
  line-height: 160px;
  margin-right: 10px;
}

Hallo Bandit,

du hattest Recht. Man kann die Änderungen einfach da vornehmen. Problem: Wenn man es nur mit dem Firefox-Inspektor probiert setzt er es irgendwie nicht richtig um. Deshalb dachte ich man muss ins Javascript eingreifen.

Wenn man aber den Code ändert und speichert setzt er das einwandfrei um.

Danke!

Sundream

Hallo ihr,

hab das Javascriptforum übersehen und meinen Beitrag leider im falschen Forum gepostet:

Slideshow Abstände ändern - Javascript

Könnt ihr mir eventuell weiterhelfen?

Danke!

Liebe Grüße

Sun

Sundream

Ich glaube es steht hier drin:

Code

function(e, i) {
    "function" == typeof define && define.amd ? define("flickity/js/cell", ["get-size/get-size"], function(t) {
        return i(e, t)
    }) : "object" == typeof module && module.exports ? module.exports = i(e, require("get-size")) : (e.Flickity = e.Flickity || {}, e.Flickity.Cell = i(e, e.getSize))
}(window, function(t, e) {
    function i(t, e) {
        this.element = t, this.parent = e, this.create()
    }
    var n = i.prototype;
    return n.create = function() {
        this.element.style.position = "absolute", this.element.setAttribute("aria-hidden", "true"), this.x = 0, this.shift = 0
    }, n.destroy = function() {
        this.unselect(), this.element.style.position = "";
        var t = this.parent.originSide;
        this.element.style[t] = ""
    }, n.getSize = function() {
        this.size = e(this.element)
    }, n.setPosition = function(t) {
        this.x = t, this.updateTarget(), this.renderPosition(t)
    }, n.updateTarget = n.setDefaultTarget = function() {
        var t = "left" == this.parent.originSide ? "marginLeft" : "marginRight";
        this.target = this.x + this.size[t] + this.size.width * this.parent.cellAlign
    }, n.renderPosition = function(t) {
        var e = this.parent.originSide;
        this.element.style[e] = this.parent.getPositionValue(t)
    }, n.select = function() {
        this.element.classList.add("is-selected"), this.element.removeAttribute("aria-hidden")
    }, n.unselect = function() {
        this.element.classList.remove("is-selected"), this.element.setAttribute("aria-hidden", "true")
    }, n.wrapShift = function(t) {
        this.shift = t, this.renderPosition(this.x + this.parent.slideableWidth * t)
    }, n.remove = function() {
        this.element.parentNode.removeChild(this.element)
    }, i
}),
function(t, e) {
    "function" == typeof define && define.amd ? define("flickity/js/slide", e) : "object" == typeof module && module.exports ? module.exports = e() : (t.Flickity = t.Flickity || {}, t.Flickity.Slide = e())
}(window, function() {
    "use strict";

    function t(t) {
        this.parent = t, this.isOriginLeft = "left" == t.originSide, this.cells = [], this.outerWidth = 0, this.height = 0
    }
    var e = t.prototype;
    return e.addCell = function(t) {
        if (this.cells.push(t), this.outerWidth += t.size.outerWidth, this.height = Math.max(t.size.outerHeight, this.height), 1 == this.cells.length) {
            this.x = t.x;
            var e = this.isOriginLeft ? "marginLeft" : "marginRight";
            this.firstMargin = t.size[e]
        }
    }, e.updateTarget = function() {
        var t = this.isOriginLeft ? "marginRight" : "marginLeft",
            e = this.getLastCell(),
            i = e ? e.size[t] : 0,
            n = this.outerWidth - (this.firstMargin + i);
        this.target = this.x + this.firstMargin + n * this.parent.cellAlign
    }, e.getLastCell = function() {
        return this.cells[this.cells.length - 1]
    }, e.select = function() {
        this.cells.forEach(function(t) {
            t.select()
        })
    }, e.unselect = function() {
        this.cells.forEach(function(t) {
            t.unselect()
        })
    }, e.getCellElements = function() {
        return this.cells.map(function(t) {
            return t.element
        })
    }

Alles anzeigen

aber ich versteh den Code leider nicht...

Sundream

Die Seite ist noch nicht online, aber das ist hier: https://jsfiddle.net/ConnorsFan/vm9nn5e0/5/ auch so.

Code

Im schwarzen Feld oben links steht das HTML:

<div class="carousel" data-flickity='{ "wrapAround": true }'>
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
</div>

Alles anzeigen

Im Feld unten bei der Vorschau ist der Code (wenn man ihn mit dem Inspektor untersucht) dann verändert.

Links unter Ressources findet man die JS und CSS Dateien...

https://ajax.googleapis.com/aj…query/2.1.1/jquery.min.js

https://unpkg.com/flickity@2.2.1/dist/flickity.min.css

https://unpkg.com/flickity@2.2.1/dist/flickity.pkgd.min.js

Sundream

Hallo,

danke für die Antwort.

Am einfachsten wäre es (meiner Meinung nach) den Wert "left" für das Dokument zu ändern.

Code

Element {
    position: absolute;
    left: -50.96%;
}

Im HTML hat aber carousel-cell keinen style="" Zusatz, weswegen ich davon ausgehe, dass das Javascript das bestimmt. Vorallem auch, weil der Wert immer wieder anders ist (Je nach Bildschirmgröße).

Meine Frage ist also. Wo steht, welchen Wert left für .carousel-cell bekommt?

Mein HTML sieht so aus:

Code

<div class="carousel" data-flickity='{ "wrapAround": true }'>
  <div class="carousel-cell"><img src="Bilder/Testimonial1.png" class="Slideshow-img-Testimonial"></div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
</div>

Wenn ich es mit dem Webinspektor von Mozilla anschaue so:

Code

<div class="carousel flickity-enabled is-draggable" data-flickity="{ &quot;wrapAround&quot;: true }" tabindex="0">
  <div class="flickity-viewport" style="height: 160px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(25%);"><div class="carousel-cell is-selected" style="position: absolute; left: 0%;">
          <img src="Bilder/Testimonial1.png" class="Slideshow-img-Testimonial">
         </div>
<div class="carousel-cell" style="position: absolute; left: 50.52%;" aria-hidden="true">2</div>
<div class="carousel-cell" style="position: absolute; left: -50.52%;" aria-hidden="true">3</div>
</div></div><button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button><ol class="flickity-page-dots"><li class="dot is-selected" aria-label="Page dot 1" aria-current="step"></li><li class="dot" aria-label="Page dot 2"></li><li class="dot" aria-label="Page dot 3"></li></ol></div>

Eigentlich will ich wissen, wo das ganze CSS Zeug plötzlich her kommt und wie ich das beeinflussen kann.

Sundream

Hallo ihr,

ich habe ein Problem mit einer Änderung an einem Javascriptcode. Da ich JS eigentlich überhaupt nicht kann, bin ich etwas ratlos.

Ich habe eine Slideshow nach dem Prinzip auf folgender Website erstellt:

https://jsfiddle.net/ConnorsFan/vm9nn5e0/5/

Der JS Code ist folgender: https://unpkg.com/flickity@2.2.1/dist/flickity.pkgd.min.js

Meine Frage ist nun: Wie kann ich die Abstände zwischen den im Beispiel roten und grünen Elementen ändern? Ich finde das einfach nicht...UND wie kann ich die Höhe des Elements ändern?

Vielen Dank!

LG

Sun

Sundream

Habe die Lösung in einem anderen Forum gefunden:

Die Reihenfolge hat nicht gepasst. Der JS Code wurde vor dem HTML geladen. <script>-Tag ans Ende vor dem </body>, Problem gelöst

Sundream

Ich vermute mal der Hund ist hier begraben:

Code

<script type="text/javascript">
    
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  


  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
} 


</script>

Alles anzeigen

Ich versteh nur leider zu wenig von JavaScript...

HTML sieht so aus:

Code

<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">

    <img src="Bilder/leichtbauhalle-haltec-basic-01.jpg" style="width:100%">
    <img src="Bilder/Testimonial1.png" class="Slideshow-img-Testimonial">

    <div class="Zitate fade" style="height:350px;width: 450px;"><p>Mit HALTEC war schnell die passende Lösung für meine Lageranforderungen gefunden. Die zügige Montage und Lieferung war klasse. Jederzeit wieder. </p>
        <img src="Bilder/Anfuehrungszeichen.png" class="quote">
        </div>
  
  </div>

  <div class="mySlides fade">
    
    <img src="Bilder/leichtbauhalle-haltec-basic-02.jpg" style="width:100%">

  </div>

  <div class="mySlides fade">
   
    <img src="Bilder/leichtbauhalle-haltec-basic-03.jpg" style="width:100%">
 
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

Alles anzeigen

CSS:

Code

/* Slideshow container */
.slideshow-container {
  max-width: 1434px;
  position: relative;
  margin: auto;
  text-align: start;
  margin-top:2em;
  margin-bottom: 5em;
  display:block;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color:black;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

   
.mySlides div.Zitate {background-color: white;
    position: absolute;
    margin-top: -33em;
    margin-left: 12em;
    -webkit-box-shadow: inset 0px -1px 26px -5px rgba(0,0,0,0.77);
-moz-box-shadow: inset 0px -1px 26px -5px rgba(0,0,0,0.77);
box-shadow: inset 0px -1px 26px -5px rgba(0,0,0,0.77);
    }

.mySlides div.Zitate p {padding:80px;padding-top:120px;
    padding-right:47px;padding-left:120px;color:#0096dc;font-size: 17px;font-family: KievitOT Light,sans-serif;}

.mySlides img.Slideshow-img-Testimonial {
    display: none;
    position: absolute;
    z-index: 400;
    display: block;
    margin-top: -27.7em;
}

.mySlides img.quote {position: absolute;display: block;padding-left: 350px;
margin-top: -21em;}

Alles anzeigen

Sundream

Hallo ihr,

ich habe (wie der Titel schon sagt) ein Problem mit meiner Slideshow.

Ich habe mich nach dem Code auf dieser Website gerichtet: https://www.w3schools.com/howto/howto_js_slideshow.asp

Wenn ich alles einbaue funktioniert die Slideshow zwar, aber erst, wenn ich das erste Mal auf einen der Pfeile geklickt habe.

Vor dem ersten Anklicken:

Nach dem ersten Anklicken (Hab das Bild bisschen unkenntlich gemacht, aber im Prinzip sieht man, dass es eigentlich funktioniert):

Ich möchte gerne, dass alles standardmäßig so angezeigt wird wie auf Bild zwei...

Kann mir jemand helfen?

Danke schonmal. Code ist wie gesagt im Link oben.

LG

Sundream

Hallo ihr,

ich habe ein Problem, das ich so noch nie gesehen habe. Auf meiner Website bertas-garten.de gibt es ganz unten ein Icon für Facebook und Instagram. Im Mozilla Firefox wird beides nicht mehr angezeigt. Wenn ich die Elemente mit dem Inspektor anschaue, finde ich folgenden Code im css:

HTML

.ad_728x90, .ad_960, .ad_body, .ad_bottom, .ad_description, .ad_head_rectangle, .ad_img, .ad_item, .ad_leaderboard, .ad_middle, .ad_outer, .ad_promo, .ad_text, .ad_title, .ad_trick_header, .ad_trick_left, .ad_wrap, .adarea, .adbanner, .adbar, .adcolumn, .adcont, .addiv, .adframe, .adfree, .adheader, .adholder, .adinfo, .adkit, .admain, .admiddle, .adright, .adrow1, .adrow2, .ads-1, .ads-2, .ads-3, .ads-300-250, .ads-area, .ads-bg, .ads-col, .ads-header, .ads-holder, .ads-inline, .ads-item, .ads-section, .ads-title, .adsBlock, .ads_catDiv, .ads_top, .ads_wrapper, .adsbottombox, .adscontainer, .adshome, .adside, .adsizewrapper, .adslot_blurred, .adtable, .adv-box, .adv-list, .adv300, .advBox, .adv_300, .adv_txt, .advert-box, .advert-horizontal, .advert-wrapper, .advertColumn, .advertLink, .advertText, .advert_container, .advert_list, .advertisement-block, .advertisement__leaderboard, .advertising_block, .article-advert, .b-advert, .banner-ads, .banner300, .bannerAd, .block-ad, .block-ec_ads, .block-simpleads, .blog-ads, .bottom-ads, .bottom-left-ad, .bottomAds, .bottom_ad_block, .box-ads, .box-radvert, .box_ads, .box_adv, .boxad, .btn-ad, .category-ad, .change_AdContainer, .container_ad, .container_row_ad, .cp-adsInited, .custom-ad, .ddb, .dfp-ad-unit, .displayAd, .download_ad, .easyazon-block, .ec-ads-remove-if-empty, .featured-ad, .featuredAdBox, .flash-advertisement, .footer-ads, .footer_ad, .footerad, .gallery-ad, .google-sponsored, .googleAdSense, .greyAd, .grid-item-ad, .hasads, .headerAd, .header_ad_center, .header_advert, .headerad, .headerads, .homeAd, .homead, .homepage-ad, .homepage_ads, .imgad, .inner_ad, .innerad, .insert-post-ads, .item-ads, .js-sticky-ad, .leaderboard-ads, .leftad, .list-ads, .listad, .logo-ad, .marketing-ad, .mid_ad, .middle_AD, .module-ad, .nativead, .newsAd, .node-ad, .oasad, .overlay-ads, .page-ad, .page_ad, .plainAd, .playerAd, .player_ad, .player_hover_ad, .post-sponsored, .post_ad, .premiumAdOverlay, .premiumAdOverlayClose, .promoAd, .publicidade, .pushdown-ad, .rail-ad, .rbRectAd, .rectangle_ad, .refreshAds, .region-top-ad-position, .reklam, .reportAdLink, .resultad, .review-ad, .right_ad, .right_ads_column, .rightad, .rightadv, .searchAds, .searchad, .searchads, .section-sponsor, .showAd, .showads, .side-bar-ad-position1, .sideAd, .singleAd, .skinAd, .sky_ad, .skyscraperAd, .slide-ad, .smallAd, .small_ad, .smallads, .sponsor-box, .sponsorBlock, .sponsorBottom, .sponsoredLinks, .sponsorlink, .story-ad, .tc_ad_unit, .td-ad, .textads, .top-ad-content, .top-ad-wrapper, .topAds, .top_ad, .top_ad_div, .top_ad_wrap, .top_ads, .topads, .tower-ad, .type_ads_default, .vertical-ads, .view_ad, .wideAd, .withAds, .wnad, .wp_bannerize, a[href*='.revimedia.com/'], a[href*='.trust.zone'], a[href*='/adrotate-out.php?'], a[href^='http://ads.betfair.com/redirect.aspx?'], a[href^='http://ads2.williamhill.com/redirect.aspx?'], a[href^='http://adserving.unibet.com/'], a[href^='http://adultfriendfinder.com/p/register.cgi?pid='], a[href^='http://affiliate.coral.co.uk/processing/'], a[href^='http://marketgid.com'], a[href^='http://mgid.com/'], a[href^='http://online.ladbrokes.com/promoRedirect?'], a[href^='http://us.marketgid.com'], a[href^='http://www.adskeeper.co.uk/'], a[href^='http://www.fbooksluts.com/'], a[href^='http://www.fleshlight.com/'], a[href^='http://www.liutilities.com/'], a[href^='http://www.socialsex.com/'], a[href^='http://www.yourfuckbook.com/?'], a[href^='https://servedbyadbutler.com/'], a[href^='https://www.financeads.net/tc.php?'], div[data-native_ad], div[itemtype='http://schema.org/WPAdBlock'], iframe[src^='http://ad.yieldmanager.com/'], #AD_Top, #ad-right, #adboard, #ads1, #adsensewide, #advertise, #bottomAd, #leaderboardad, #sidebar_ad, #sponsorText, #sponsoredwellcontainerbottom, .ad-grid, .ad468, .adsWidget, .advert_area, .advertising_banner, .content_tagsAdTech, .forumAd, .pub_300x250m, .pub_728x90, .text-ad-links, .text-ads, .textAd, .text_ad, #videoads, .btnSocial, #SocialIcons, #___plus_0, #___plusone_0, #advancedsocialwidget, #button_facebook, #button_twitter, #digg-widget, #digg_module, #digg_upcoming_content, #facebook-icon, #facebook_btn, #facebook_button, #facebook_like_button_holder, #fbContainer, #fb_header, #layout-social, #likebtn, #menu-social, #menu_social, #module_digg, #share-bar, #share-box, #share-button, #share-links, #share-menu, #share-reddit, #shareBar, #shareMenu, #share_button, #share_container, #share_feed, #share_link, #share_links, #sharebar, #sharebox, #sharebuttons, #sharer, #sharevideo, #social-buttons, #social-container, #social-footer, #social-header, #social-media, #social-networks, #social-sidebar, #social-wrapper, #socialContainer, #socialWrapper, #social_bar, #social_container, #social_footer, #social_media, #socialbar, #socialmedia, #socials, #subscribe-options, #top_share, #tweets, #twitter_button, #vk-popup, #vk_faces_div, #vk_group_layer, #vk_groupsVK, #vk_groups_ls, #vk_groups_new, #vk_invite_wrapper, #vk_recommended, #vk_right, #xing-share, .-facebook, .-twitter, .FollowButton, .SocialButton, .addthis:not(body), .addthis_32x32_style, .addthis_default_style, .addthis_toolbox, .addthisbuttons, .advanced-social-widget, .arqam-widget-counter, .article-share, .article-social, .article-social-btn, .article-social-buttons, .article-social-container, .article_share, .authorSocial, .b-social, .b-socials, .b-topic__socials, .block-social, .block-socialmedia, .bottom-social, .btn--facebook, .btn-facebook, .btn-fb, .btn-google-plus, .btn-gplus, .btn-instagram, .btn-linkedin, .btn-reddit, .btn-share, .btn-social, .btn-social-icon, .btn-twitter, .btnFacebook, .btnTwitter, .btn_facebook, .btn_fb, .btn_google, .button--facebook, .button-fb, .button-pinterest, .button-share, .button-social, .clk-pinit, .comment_share, .content-share, .content-share-wrap, .contentshare, .custom-sharing-link, .custom-social, .detail-share-item, .digg-button, .diggBox, .digg_button, .entry-share, .fa-facebook-square, .fa-share, .fa-share-alt, .facebook-btn, .facebook-button, .facebook-container, .facebook-icon, .facebook-link, .facebook-share, .facebook-widget, .facebook.icon, .facebookBtn, .facebookLikeBox, .facebook_account, .facebook_button, .facebookbutton, .fb-box, .fb-btn, .fb-button, .fb-content, .fb-dialog, .fb-icon, .fb-like, .fb-likebox, .fb-link, .fb-page, .fb-quote, .fb-recommendations, .fb-recommendations-bar, .fb-share-box, .fb-xfbml-parse-ignore, .fbBox, .fbBtn, .fbContainer, .fb_box, .fb_btn, .fb_button_large, .fb_edge_widget_with_comment, .fb_like_container, .fb_share, .fblike, .fix-share, .follow-bar, .follow-block, .follow-btn, .follow-button, .follow-label, .follow-text, .follow-widget, .followBox, .follow_box, .follow_btn, .follow_twitter, .footer-social, .footer__social, .g-plus, .g-plusone, .gallery-social, .google-btn, .google-plus, .google_plus, .googleplus, .gplus-icon, .group_share, .ico-facebook, .icon-facebook, .icon-facebook2, .icon-fb, .icon-flickr, .icon-github, .icon-google, .icon-google-plus, .icon-google-plus-sign, .icon-googleplus, .icon-gplus, .icon-instagram, .icon-linkedin, .icon-share, .icon-social-facebook, .icon-social-linkedin, .icon-soundcloud, .icon-twitter, .icon-twitter-bird, .icon-vimeo, .icon-youtube, .icon_gplus, .image-share, .img-share, .instagram-follow, .itemSocialSharing, .j-social-actions, .j-social-button, .js-follow-user, .js-share, .like-box, .likeButton, .like_button, .linkedin.icon, .list-share, .m-article__share-buttons, .menu-social, .meta-share, .mod-facebook, .nav-social, .navbar-social, .openshare, .page-share, .page-social, .photo-share, .pin-it-button, .pinButton, .pinit-btn, .pinit-btn-container, .pinit-button, .pinit-overlay, .pinit_btn, .pinterest-button, .pinterest-share-button, .pinterest1, .pinterestComponentShare, .plusone, .post-fb, .post-fb-like, .post-share-container, .post-share-panel, .post-sharing, .post-social, .postShare, .post_share, .reddit_button, .retweet, .search-social, .section-social, .share-bar, .share-block, .share-body, .share-bottom, .share-box, .share-btn, .share-button, .share-buttons, .share-container, .share-facebook, .share-fb, .share-group, .share-head, .share-header, .share-heading, .share-icon, .share-item, .share-label, .share-left, .share-link, .share-link-container, .share-links, .share-list, .share-menu, .share-options, .share-page, .share-panel, .share-popup, .share-section, .share-text, .share-title, .share-twitter, .share-video, .share-widget, .share-with-friends, .share-wrap, .share-wrapper, .share-zone, .shareBox, .shareButton, .shareContainer, .shareContent, .shareCount, .shareLeft, .shareLink, .shareLinks, .sharePage, .sharePanel, .shareText, .shareTools, .shareToolsItem, .share__list, .share_bar, .share_bottom, .share_container, .share_content, .share_panel, .share_tools, .share_wrapper, .sharebox, .sharebutton, .sharebuttons, .sharecontainer, .sharelink, .sharethis-wrapper, .sharetools, .sharing-box, .sharing-buttons, .sharingbox, .sharrre, .show-share, .show_social, .social-16, .social-article, .social-bar, .social-bar-container, .social-block, .social-bottom, .social-box, .social-btn, .social-btns, .social-button, .social-buttons, .social-circle, .social-column, .social-container, .social-count, .social-counter, .social-facebook, .social-feed, .social-footer, .social-google, .social-gplus, .social-header, .social-holder, .social-icon, .social-icons, .social-image, .social-inline, .social-label, .social-link, .social-links, .social-list, .social-media, .social-media-buttons, .social-media-list, .social-newsletter, .social-panel, .social-popup, .social-post, .social-section, .social-share, .social-share-count, .social-sharing, .social-sidebar, .social-stick, .social-tab, .social-tools, .social-top, .social-twitter, .social-wrap, .social-wrapper, .socialBlock, .socialBox, .socialBtns, .socialButton, .socialButtons, .socialIcon, .socialList, .socialMedia, .socialRight, .social__facebook, .social__twitter, .social_bar, .social_block, .social_buttons, .social_container, .social_facebook, .social_links_top, .social_row, .social_share, .social_tabs, .social_toolbar, .social_twitter, .social_wrapper, .socialbar, .socialbox, .socialboxp, .socialbutton, .socialbuttons, .socialmedia, .socials, .socials_wrapper, .socialshare, .sprite-facebook, .sprite-twitter, .ssk-facebook, .std-social, .sticky-share, .stumble-button, .subscribe-button, .subscribe-container, .subscribe-text, .subscribe-widget, .tw-btn, .tw-icon, .tw-share, .twBox, .twBtn, .tweet-btn, .tweet-btn-container, .tweet-button, .tweetbox, .tweets, .twitter-button, .twitter-feed, .twitter-follow-button, .twitter-hashtag, .twitter-icon, .twitter-image, .twitter-link, .twitter-share, .twitter-share-button, .twitter-timeline, .twitter.icon, .twitterShare, .twitterWrapper, .twtr-widget, .ui-share-component, .vertical-social, .vjs-share, .vk-btn, .wrapper-share, .x-facebook, .ya-share2, .youtube-icon, .youtube-link, .youtube_subscribe_module, [alt='retweet'], [href='http://www.addthis.com/bookmark.php'], [href^='http://reddit.com/submit'], [title='Digg This Post'], [title='submit to redit'], a[href*='facebook.com/sharer/sharer.php?'], a[href='//www.reddit.com/submit'], a[href='https://twitter.com/share'], a[href^='http://del.icio.us/post?url='], a[href^='http://facebook.com/sharer.php?'], a[href^='http://pinterest.com/pin/create/button/'], a[href^='http://plus.google.com/share'], a[href^='http://reddit.com/submit'], a[href^='http://technorati.com/faves?add='], a[href^='http://twitter.com/?status='], a[href^='http://twitter.com/home/?'], a[href^='http://twitter.com/home?'], a[href^='http://twitter.com/intent/tweet'], a[href^='http://twitter.com/share?'], a[href^='http://vkontakte.ru/share.php?'], a[href^='http://www.digg.com/submit?'], a[href^='http://www.facebook.com/share.php'], a[href^='http://www.facebook.com/sharer.php'], a[href^='http://www.facebook.com/sharer/sharer.php'], a[href^='http://www.pinterest.com/pin/create/button/?'], a[href^='http://www.reddit.com/submit'], a[href^='http://www.stumbleupon.com/submit?'], a[href^='http://www.tumblr.com/share/'], a[href^='https://api.whatsapp.com/send?'], a[href^='https://facebook.com/sharer.php?'], a[href^='https://pinterest.com/pin/create/'], a[href^='https://plus.google.com/share'], a[href^='https://twitter.com/home/?status='], a[href^='https://twitter.com/intent/follow?'], a[href^='https://twitter.com/intent/tweet/'], a[href^='https://twitter.com/intent/tweet?'], a[href^='https://vk.com/share.php?'], a[href^='https://www.facebook.com/dialog/feed?'], a[href^='https://www.facebook.com/sharer/sharer.php'], a[href^='https://www.google.com/bookmarks/mark?'], a[href^='https://www.linkedin.com/cws/share?'], a[href^='https://www.reddit.com/submit?'], a[title='Facebook'], a[title='Google Plus'], a[title='Google+'], a[title='LinkedIn'], a[title='Pin it!'], a[title='Pinterest'], a[title='Tumblr'], a[title='Twitter'], a[title='Youtube'], a[title='facebook'], a[title='ВКонтакте'], button[title='Share'], div[id^='digg-widget-'], img[alt='Facebook'], img[alt='Google+'], img[alt='Instagram'], img[alt='LinkedIn'], img[alt='Linkedin'], img[alt='Pinterest'], img[alt='Reddit'], img[alt='Twitter'], img[alt='Vine'], img[alt='Youtube'], img[alt='facebook'], img[alt='twitter'], img[title='Facebook'], img[title='LinkedIn'], img[title='Twitter'], img[title='YouTube'] {
    display: none !important;
}

WTF ? Das hab ich noch nie gesehen... Ich habs auch nicht eingebaut.. Das versteckt aber mein Social Media Element (display none !important;)
Ich kanns nicht entfernen, weil es in meinem Code nicht vorhanden ist... Ich weiß überhaupt nicht was es ist?
Was mache ich denn jetzt ?

Vielen Dank schonmal

Liebe Grüße

Sundream

Sundream

Hallo,

ja das habe ich schon versucht..leider ist der Support stellenweise nicht wirklich hilfreich...

Sundream

Habe es getestet...funktioniert leider nicht...

- - - Aktualisiert - - -

Jetzt wird es nichtmal mehr bei gmx angezeigt..

- - - Aktualisiert - - -

Zumindest am PC nicht.. am Handy schon

Sundream

Naja das Element background-image funktioniert für Outlook nicht... Wie würdest du das denn einbinden wenn es ein Hintergrundbild sein soll?

Sundream

Hallo,

danke für die Antwort, aber leider hilft mir das glaube ich nicht weiter, da ich ein background-image brauche, nicht ein normales....

Danke !

- - - Aktualisiert - - -

Das Bild soll hinter dem kompletten Text liege, den ich habe.

Sundream

Nein, ich verwende ein "Programm" das Mailingwork heißt, in das reines HTML mit CSS eingegeben wird.

- - - Aktualisiert - - -

Allgemein ist das der Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Weihnachts-Newsletter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
</head>


<body background="https://login.mailingwork.de/public/a_4558_TV84t/file/data/37_Hintergrund4.jpg" valign="middle" align="center" style=" padding: 0; padding: 0px;  width:652px; height:auto;display:block;margin: auto; background-size:652px;" >
 <style type="text/css">
     body {


background-image: url('https://login.mailingwork.de/public/a_4558_TV84t/file/data/37_Hintergrund4.jpg');


background-repeat: no-repeat;


background-color: white;




margin: auto;


padding: 0;
background-position:center;




}


 </style>




[INDEX name='index_1' container='container_1']
  [TOP]<div >[/TOP]
  [BETWEEN]<br>[/BETWEEN]
  [BOTTOM]</div>[/BOTTOM]
[/INDEX]


[CONTAINER name='container_1']
      [ELEMENT name='element_1' default='true']
            [INDEXITEM]<a href="[INDEXITEMANCHOR /]">[INDEXITEMNAME /]</a>[/INDEXITEM]
                <div class="background" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:18px;font-weight:300;">
              [ELEMENTTOOLS]<div>[ANCHOR /][UPDATE /] [COPY /] [REMOVE /]</div>
          [/ELEMENTTOOLS]




<table   align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:18px;font-weight:300; ">


      [BLOCK name='block_11' edit='true'] 
                      <tr>
                           <td  width="100%" align="center" valign="middle" style="font-family: Verdana,Helvetica,sans-serif; font-size: 12px; color: #999999;">   
                        <span><br><br></span>
                                  [INPUT name='Feld_8' type='text' default='' index='false' /]
                                 Wenn diese Mail nicht richtig dargestellt wird, dann klicken Sie bitte <a  style="color: #999999; text-decoration: underline;" href="[CONTAINER name='Link zur Onlinedarstellung'][ELEMENT name='Link zur Onlinedarstellung' edit='false'][INDEXITEM]<a href=“[VIEWONLINE /]“ target=“_blank“>Hier zur Onlineansicht</a>[/ELEMENT][CONTAINERTOOLS][CREATE][SORT][/CONTAINERTOOLS][/CONTAINER]" title="Online ansehen">hier</a>.</td>
                      </tr>
                     [/BLOCK]

  </table>


<table border="0" cellpadding="0" cellspacing="0" width="652px" style="font-size:14px;margin-top:27%;font-weight:300; margin-left:42px;">                    

    [BLOCK name='block_6' edit='true'] 
 <tr>
 <td style="font-family:'Arial';  font-size: 30px; width:100%; font-weight:200; ">


   ÜBERALL BUNTE LICHTER<br>
       UND ES SCHNEIT,<br>
     <span style="font-weight:600;">ES IST WIEDER WEIHNACHTSZEIT</span> 
 </td>
</tr>


<tr >
 <td style=" font-family:'Arial';">
      <br><br><span>[INPUT name='anredetitel' label='Begrüßungszeile' type='char' required='true' default='[formelleAnrede /]']</span><br>
         <br><span style="font-weight:600;">LOREM IPSUM</td>
</tr>


<tr >
 <td style="font-family:'Arial';font-weight:600;">
      <br>LOREM IPSUM
 </td>
</tr>


<tr>
 <td style="font-family:'Arial'; ">
  LOREM IPSUM
 </td>
</tr>


<tr >
 <td style="font-family:'Arial';font-weight:600;">
      <br>LOREM IPSUM
 </td>
</tr>


<tr>
 <td style="font-family:'Arial';">
     LOREM IPSUM
 </td>
</tr>


<tr >
 <td style="font-family:'Arial';font-weight:600;">
      <br>LOREM IPSUM
</tr>


<tr>
 <td style=" font-family:'Arial';">
        LOREM IPSUM
 </td>
</tr>


<tr >
 <td style="font-family:'Arial';font-weight:600;">
      <br>LOREM IPSUM
 </td>
</tr>


<tr>
 <td style="font-family:'Arial';">
       LOREM IPSUM
 </td>
</tr>






<tr>
 <td style="font-family:'Arial';">
      <br>
      <br>
        Mit festlichen Grüßen <br>
[INPUT name='Absender' label='Absendername' type='char' required='true' default='[Absender /]'] <br>
<span style="font-size:12px;">LOREM IPSUM</span></td>




</tr>




 </table>




<table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:18px;margin-top:-11%;font-weight:300;margin-left:450px;margin-bottom: 350px">
    <tr >
 <td style=" font-size: 12px;font-weight:300;margin-top: -18%; font-family:'Arial';">
        Telefon:<br>
 [INPUT name='Telefon-Absender' label='Telefon-Absender' type='char' required='true' default='[Telefon-Absender /]'] <br><br>


        E-Mail:<br>
 [INPUT name='EMail-Absender' label='EMail-Absender' type='char' required='true' default='[EMail-Absender /]']
 </td>


</tr>   
    [/BLOCK]


</table>




    [BLOCK name='block_10' edit='true'] 
                  <table style=" margin-bottom:35px;margin-left:4px;margin-top:28em;">
                  <tr>
                           <td width="100%" align="left" valign="middle" style="font-family: Verdana,Helvetica,sans-serif; font-size: 12px; color: #999999;text-align:center;  ">      
                                 <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                  Sie erhalten diese E-Mail, weil wir uns bei unseren Kunden für das erfolgreiche Jahr bedanken möchten und auf diesem Wege gleichzeitig Weihnachtgrüße versenden möchten. <br/>
               Sollten Sie Email dieser Art nicht mehr erhalten wollen, können Sie sich <a style="color:#999999;" href="[OPTOUT id='1' /]">hier</a> bequem austragen.
                           </td>
                    </tr>

                   </table>
                 [/BLOCK]




      [/ELEMENT]


    

    [TOP][/TOP]
  [BETWEEN][/BETWEEN]
  [BOTTOM][/BOTTOM]
  [CONTAINERTOOLS]<div>[CREATE /] [SORT /]</div>[/CONTAINERTOOLS]
[/CONTAINER]
</div>
</body>
</html>

Alles anzeigen

- - - Aktualisiert - - -

Den Teil ignoriert Outlook auch gekonnt....

HTML

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:18px;margin-top:-11%;font-weight:300;margin-left:450px;margin-bottom: 350px">
    <tr >
 <td style=" font-size: 12px;font-weight:300;margin-top: -18%; font-family:'Arial';">
        Telefon:<br>
 [INPUT name='Telefon-Absender' label='Telefon-Absender' type='char' required='true' default='[Telefon-Absender /]'] <br><br>


        E-Mail:<br>
 [INPUT name='EMail-Absender' label='EMail-Absender' type='char' required='true' default='[EMail-Absender /]']
 </td>


</tr>   
    [/BLOCK]


</table>

Alles anzeigen

Sundream

Hallo ihr Lieben,

ich möchte einen HTML-Newsletter versenden und suche gerade nach einer Lösung das Backgroundimage auch im Outlook und auch ansonsten überall richtig anzeigen zu lassen..
Ich habe den Newsletter jetzt mit Tabellen aufgebaut...

Gibt es irgendeine Universallösung?

Vielen Dank schonmal!

Liebe Grüße

Sundream

Sundream

Okay, danke, als Betreff ist ja das was man bei Betreff eingegeben hat, da is das so schon besser
Echt vielen vielen Dank für die ganze Mühe, die du dir gemacht hast

Beiträge von Sundream

Toggle Navigation onclick schließen

Toggle Navigation onclick schließen

Toggle Navigation onclick schließen

Slideshow Abstände ändern - Javascript

Slideshow Abstände ändern - Javascript

Slideshow Abstände ändern - Javascript

Slideshow Abstände ändern - Javascript

Slideshow Abstände ändern - Javascript

Slideshow Abstände ändern - Javascript

Problem mit Slideshow

Problem mit Slideshow

Problem mit Slideshow

Virus auf Website in Code eingebaut? Hilfe? :o

HTML Newsletter Backgroundimage....

HTML Newsletter Backgroundimage....

HTML Newsletter Backgroundimage....

HTML Newsletter Backgroundimage....

HTML Newsletter Backgroundimage....

HTML Newsletter Backgroundimage....

Kontaktformular leitet nicht weiter- dringend