Beiträge von Sailor

Ob und wie das mit 'Dreamweaver' funktioniert, weiß ich nicht - aber in einer selbst gemachten Seite würde es so funktionieren

https://www.mediaevent.de/xhtml/area-map.html

vielleicht hilft dir das ja weiter.

Sempervivum ... heee.... du bist richtig gut ;)! Das funktioniert. Hätte ich wohl auch selbst drauf kommen können... aber manchmal sieht man den Wald vor lauter Bäume nicht.

Danke!

Vor langer Zeit habe ich mal gelernt, dass Zeilenumbrüche und mehrfache Leerzeichen im Quelltext vom Browser ignoriert und nicht dargestellt werden. Das hat sich wohl mit HTML 5 geändert(?).

Jetzt, wenn ich im Quelltext einen Zeilenumbruch einfüge (wegen der besseren Lesbarkeit), wird im Browser ein 'Textknoten, der nur Leerraum enthält' eingefügt. Das wäre ja nicht so schlimm, aber dieser Textknoten ist 4x17px groß. man könnte zwar bei Bedarf die so entstehende 'Lücke' durch ein negatives Margin schließen... aber gibt es da nicht irgendein cleveres Stückchen CSS Code, das dem Browser sagt, er soll diesen Unsinn mit den Textknoten erst gar nicht machen?

Immer alle Elemente, die man durchgehend dargestellt haben möchte in eine Codezeile schreiben, ist auch keine wirkliche Lösung.

Das gleiche Verhalten tritt auch bei andern Elementen - zB bei aufeinander folgenden Bildern auf.

Hier auf dem Bild ist der Effekt gut zu erkennen

html-seminar.de/woltlab/attachment/2062/

Zum spielen auch der zugehörige Quellcode im Fiddle...

https://jsfiddle.net/nvc71Ljg/

Hat jemand eine Idee - Lösung - Vorschlag?

Ohne deinen Code (HTML und CSS) zu sehen, ist das schlecht zu beantworten - aber wenn ich es richtig verstehe, dann willst du das Bild bei jeder Auflösung zentriert und nur bis zu einer maximalen, festgelegten Größe angezeigt haben.

Dann teste mal so ein Setup...

/*das CSS*/
figure {
   max-width: 500px;  /*oder irgendein Wert, den du haben willst*/
   margin: 0 auto; /*zentriert die Anzeige*/
   }
img {
   width: 100%; /*sorgt dafür, dass das Bild sich an 'figure' anpasst*/
   }


/*das HTML*/
<figure>
         <img src="dein_pfad/dein_bild.jpg" alt="ein Bild">
</figure>

Was verstehst du unter 'flex Layout'?

Nun ja... beinahe ;)!

Du nutzt 'onscroll' um deine deine Funktion aufzurufen - dann wird auch nur der Teil ausgeführt, der sich innerhalb der Funktion ( im Bereich der {} ) befindet.

Versuche mal, deinen gesamten Script-Code innerhalb der window.onscroll = function () {...} unterzubringen.

Dann hast du if(w > 768 && h > 1024 >) als Abfrage. da ist die letzte spitze Klammer zuviel - und ist es das, was du willst WENN die Breite größer 768px UND die Höhe größer 1024px??

Um ein kleines, mobiles Display zu erkennen, würde da nicht if( w < 768 && h < 800 ) (Werte natürlich nach deinen Vorstellungen) eher zum Ziel führen?

Die Methode, die Style Attribute zuweist, ist vielleicht auch etwas unglücklich - und warum setzt du in der else Anweisung nur die Position zurück?

Einfach vor Ausführung der eigentlichen Funktion die Größe des Browser abfragen...

https://www.w3schools.com/jsref/prop_win_outerheight.asp

und dann mit dem Ergebnis eine 'if-Abfrage' durchführen...

https://www.w3schools.com/js/js_if_else.asp

Zunächst mal sehe ich, dass du sehr viele Elemente mit overflow: hidden; formatiert hast... dann hast du auch die Funktion scrollen ausgeschaltet. Hinzu kommt, dass du mit festen Größen (in Pixeln) bei der Größenfestlegung deines Logo's arbeitest.

Das ist nicht responsive - auch wenn du da mit mehreren Mediaqueries versuchst, das anzupassen. Auf der Startseite ist das Bild zB zu groß (in der Höhe) und schiebt damit den Container mit den Social-Media Buttons nach unten über den Bildschirmrand hinaus---- und dann führtoverflow: hidden; dazu, dass du nicht nicht nach unten scrollen kannst.

Um das zu beurteilen, brauchen wir einen Link zur Seite.

Könnte sein, dass es ganz einfach an der Defaulteinstellung vom CSS liegt - da werden Bilder mit 'verical-align: baseline;' formatiert. Baseline ist aber eben nicht unten, sondern erzeugt einen wenige Pixel großen Abstand nach unten.

Versuche es mal mit vertical-align: top; ... oder vertical-align: bottom;

Die Browser-Konsole zeigt mir Fehler in den Dateien 'compiled.js' und '2kaumw.js' an. Und wenn ich das richtig sehe, sind diese beiden Dateien mit irgendeinem Komprimierungstool bearbeitet worden.

Versuche mal die Dateien ohne diese Komprimierung einzubinden - oft kommen solche Fehler durch fehlerhafte Komprimierung zustande.

In beinahe allen Foren sind Crosspostings nicht erlaubt (siehe dazu die Forenregeln, denen du ja mit deiner Anmeldung zugestimmt hast).

Aber Crossposting hin und her - das bringt dich nicht weiter! Gib uns den kompletten Code (besser noch einen Link zur Seite) und dein Problem wird gelöst werden... Rätselraten mag hier keiner.

<div> <img src="https:///s/files/1/0262/3445/4119/files/FRAU-01.png?802" align="left" height="42" width="42"> <p style="margin-left: 47px; height: 0; padding: 10px;"> <font size="2"> Products are tested and approved by Susan </font></b> </p ></</div><br>

Das ist ein seltsames, veraltetes und fehlerhaftes Stück Code... vielleicht, wenn du es korrekt schreibst, ist dein Problem behoben.

<div> 
   <img src="https:///s/files/1/0262/3445/4119/files/FRAU-01.png?802" style="height: 42px; width: 42px; border: 0;" align="left" alt=""> 
   <p style="margin-left: 47px; height: 0; padding: 10px; font-size: 1.2em;">
      Products are tested and approved by Susan
   </p>
</div>
<br>

Natürlich gibt es so was - erkläre nur ganz genau was du vor hast, dann wirst du hier bestimmt ein paar Antworten und Tipps zur Lösung bekommen.

Was verstehst du unter 'Boxen'?

Was ist 'Bilder usw.'?

Was ist 'so ein ähnliches Popup-Fenster'?

Das musst du schon näher kund tun und am besten auch schon einen Code-Entwurf von dem haben, was du versucht hast, beifügen.

Nicht fragen.... ausprobieren ;)!

Oh nein... jetzt zum mitschreiben

Im CSS...

.topnav{
        background-color:lightslategrey;
        overflow: hidden;
        margin: 0 auto;
        width: 90%;
        max-width: 1080px; /*die Breite des Bildes?*/
    }
.Headerbild{      /*Die Klasse muss natürlich auch dem div gegeben werden */
        margin: 0 auto;
        width: 90%;
        max-width: 1080px; /*die Breite des Bildes?*/
    }
.Headerbild img {
    width: 100%;
    }

im HTML...

<div class="Headerbild"><img src="images/Headerbild.png" alt="ein Bild"></div>

Na ja... fast...!

Das hast du im Code!

<div style="padding-left:16px"></div>
<div>
<img src="images/Headerbild.png" alt="Bild">    
</div>

Wo ist da die Klasse .Headerbild, die du im CSS für das Div mit dem Bild definiert hast? Außerdem .. das .div .Headerbild geht gar nicht! Eine Klasse .div gibt es nicht!!!

Also 1. das leere Div löschen... 2. dem Div mit mit dem Bild die Klasse Headerbild geben... 3. dem Bild eine Klasse geben und die mit width: 100%; im CSS formatieren.

Poste den Code, den du produziert hast.. das ist nicht das, was ich dir geraten habe... da hast du was nicht richtig übernommen.

Genau... und dem Div noch eine Klasse geben, damit es vom CSS angesprochen werden kann.

Dem img-Tag auch noch eine Klasse zuweisen, dann das willst du ja auch formatieren.

Warum zeichnest du dein Dokument mit dem HTML 5 Doctype aus und nutzt dann in der Folge XHTML Elemente?

Besser / empfehlenswerter wäre utf-8 als Charset - und dann gleich HTML 5 konform einbinden mit <meta charset="utf-8"> .

Dir fehlt im <head> das <meta name=viewport content="width=device-width, initial-scale=1">, womit Anzeigefehler bei mobilen Endgeräten vermieden werden.

Absolute Größenangaben in Pixel sind kaum responsive - das solltest du anders lösen (zB mit % oder vw)

Dein Bild möchtest du in das leere <div> einfügen?

Dann mach dieses <div> genau so groß, wie dein .topnav und das dann nach Möglichkeit responsive. So vielleicht...

 .topnav{
        background-color:lightslategrey;
        overflow: hidden;
        margin: 0 auto;
        width: 90%;
        max-width: 1080px; /*die Breite des Bildes?*/
    }
.dein_div_mit_Bild{      /*Die Klasse muss natürlich auch dem div gegeben werden */
        margin: 0 auto;
        width: 90%;
        max-width: 1080px; /*die Breite des Bildes?*/
    }

Dann kannst du das Bild mit <img....> in das Div einfügen und mit width: 100%; formatieren.

Wenn du das Bild unter die Navigation haben möchtest, dann mal nach "css background image" googlen.

Ansonsten, wenn du mehr Hilfe zu dem Thema brauchst, dann musst du uns schon einen Link zu der Seite geben - oder wenigstens den Code (HTML und CSS) hier posten.