Header automatisch anpassen lassen (HTML,CSS)?

Wie schon oben erwähnt will ich das sich der Header automatischt anpasst danke im voraus

lg lukas

p.s ich tue nacher noch das script hinzufügen muss aber meine Pizza abholen HAHA

21.05.2020, 18:59

Ich weiß es übrigens jetzt unzwar habe ich width: 100%; gemeint stand nur auf dem Schlauch passiert doch jemand Mal hahaha 😅

threadi

19.05.2020, 20:07

Auf Basis welcher Aktion soll er sich anpassen? und in welcher Form? Geht es ums Layout, Inhalt ... ? Etwas mehr Infos bitte.

Lukasistein

Fragesteller

19.05.2020, 20:14

Er soll sich an die bidlschrim größe anpassen also nur an width an height geht es ja nicht und die elemente sind nicht wichtig in header sind nur ein Hambruger menü

2 Antworten

NackterGerd

20.05.2020, 08:47

Ich vermute deine Frage meint Responsable Design.

(Leider ist die Frage unklar)

Zum einen würde ich GRID verwenden, da du dadurch einfach bestimmen kannst - WAS bei welcher Breite WO angezeigt wird.

https://www.w3schools.com/css/css_rwd_grid.asp

Natürlich sollte man die Navi auch bei z.b. 800px Display Breite umschalten zwischen normaler und Hamburger Menü

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Internet, HTML

19.05.2020, 20:16

Du sprichst von einer responsiven Ansicht. Die kannst Du durch Verwendung von Media-Queries erreichen. Hier einige Beispiele zum Einstieg:
https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Woher ich das weiß:Berufserfahrung

Lukasistein

Fragesteller

19.05.2020, 20:16

okay danke

Lukasistein

Fragesteller

19.05.2020, 20:50

Also das ist schon gut und auch das was ich gesucht habe aber ich blick einfach nicht durch

threadi

19.05.2020, 21:49

@Lukasistein

Dann schau dir einige weitere Beispiele an. Das ist genau der Weg den heutzutage alle Webseiten gehen (sollten).

Lukasistein

Fragesteller

19.05.2020, 22:11

@threadi

Okay danke sehr

Hallo,

jede website die ich im Internet sehe passt sich ohne probleme an die Bildschirm größe automatisch an. Meine Seite tut das nicht ( bin neu in css und co). Gibt es eine Möglichkeit, dass sich mit css/html die Seite an jede Bildschirmgröße anpasst ? oder braucht man ein skript (JS oder PHP)? Irgendwie müssen es die anderen Websites ja schaffen ^^ Google hab ich übrigends rauf und runter durchsucht alle lösungen dort haben mir nicht geholfen.

Der HTML code lässt sich leider nicht einfügen.

LG Mares

...zur Frage

Probleme mit header-Weiterleitung unter PHP, aber nur bei Strato?

Hey zusammen,

neulich habe ich auf meinem Strato-Webspace etwas ausprobiert. Header sollen ja am Anfang des Dokuments ausgegeben und mit die(); oder exit(); beendet werden, schon ein echo kann die Weiterleitung via header("Location #"); sabotieren.

So weit, so gut - kennt man ja als Fortgeschrittener.

Allerdings kann ich auf meinem zweiten Webspace, dem selbstgehostetem, header an jeder beliebigen Stelle im Script setzen und dennoch funktionieren sie. Wie kann das sein??

In beiden Fällen ist PHP 5.9 installiert.

Funktioniert nur auf dem 2. Webspace:

<?php   
echo "Nur ein Beispiel... störendes echo";  
header("Location: data.php");  
?>

Wieso funktioniert dieser Code auf einmal, aber PHP bei Strato wehrt sich dagegen. Gibt's ne PHP-Einstellung, die das erlaubt?

...zur Frage

Wordpress Header: Text bezüglich angezeigter Seite entfernen?

Ich habe für meine Website einen Header erstellt. Aber unter diesem Header steht immer die angezeigte Seite (Startseite).

Wie mache ich das weg?

Ich würde mich über eine Antwort freuen. :D

(Theme: OceanWP)

...zur Frage

Suchfunktion in Header (Jimdo)?

Hallo it-freunde.

Ich bin gerade dabei für einen Bekannten eine Webseite zu bauen.

Ich habe mir aus der Vorlagenliste von jimdo eine ausgesucht und angefangen.

Jetzt möchte ich eine Suchfunktion einbauen und weiß aber nicht wie das geht.

Link

Ich würde die Suchfunktion gerne dort einfügen, wo jetzt der Text "Für das Neue Zeitalter" steht.

Was wer wie das geht? Geht das überhaupt?

Danke im voraus

Ps.: ich habe kein Video gefunden, in dem erklärt wird, wie ich die suchleiste in den header bekomme.

...zur Frage

HTML/CSS Website größe automatisch anpassen / skalieren?

Hallo!

Und zwar wollte ich mal fragen wie das geht, dass wenn man beispielsweise die Website verkleinert, das dann der Text und die Website nicht verschwindet, sondern das alles darin sich automatisch anpasst und mit der Fenster größe dann halt Skaliert.

So wie auf dieser Seite: https://www.massiveart.com/de/blog/website-layout-100-viewport-so-wird-s-gemacht

...zur Frage

Wieso funktioniert das reCAPTCHA auf meiner Webseite nicht mehr, wegen des Headers?

Hi, ich habe eine eigene Webseite und habe ein Kontaktformular mit einem reCAPTCHA dort erstellt. Gleichzeitig habe ich aber auch um die Sicherheit der Webseite vor möglichen Angriffen durch sogenannte HTTP-Header gesichert. Der Sinn der Header ist ja, nicht eigenen Code zu blockieren, vereinfacht ausgedrückt... Dennoch will ich das reCAPTCHA von Google auf meiner Kontaktseite haben, weiß aber nicht, wie ich den Header ändern muss, damit dieser wieder funktioniert. Ich bin mir auch sicher, dass es an diesem Header, welchen ich gleich aufzeigen werde, liegt, da als ich diesen entfernt habe, das reCAPTCHA wieder funktioniert hat. Könnt ihr mir bitte sagen wie ich den Header ändern muss, damit es wieder funktioniert?

Der Header, wie ich ihn auf meiner Webseite einsetze (ich habe die Header in der .htaccess - Datei gespeichert, falls das eine relevante Information ist):

Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://*.googleapis.com; font-src 'self' https://fonts.googleapis.com/css?family=Roboto|Work+Sans:400,600; img-src 'self'; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com"

Ich hoffe ihr könnt mir weiterhelfen!!! :D

...zur Frage

Wie reagieren wenn der Mann bezahlt?

Hallo Leute,

ich habe heute Abend mein erstes Date und brauche eure Hilfe.😅

Also er wird mich bei mir zu Hause abholen und wir werden dann Pizza bestellen und in seinem Auto essen. Wir haben garnicht darüber gesprochen wer bezahlt… wie soll ich reagieren, wenn die Pizza kommt. Soll ich ihm anbieten zu bezahlen, oder wie soll ich reagieren wenn er bezahlt, ohne dass es unhöflich rüberkommt. Das Pizza bestellen war seine Idee, aber ich weiß überhaupt nicht wie man da reagiert hahahaha.

und was soll ich sonst noch beim ersten Date beachten?

vielen vielen Dank ahhgh ich bin so aufgeregt haha

...zur Frage

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zur Frage

Ladescreen zur Website hinzufügen?

Hi!

Also im Internet habe ich viele Css Templates für eine Ladeanmiation gefunden.

ABER was ich nicht finde ist ein script dazu.

Also ich hätte gerne, dass der Browser zuerst die Website voll lädt ( Bilder, etc ), währenddessen die CSS Ladeanimation angezeigt wird und erst wenn alles fertig ist die Webseite dargestellt wird.

Mein Free Host ist nämlich langsam und das schaut nicht gut aus wenn das Hauptbild der Webseite zuerst nur zu Hälfte angezeigt wird und dann langsam reinlädt.

Danke für eure Tipps

...zur Frage

CSS Bildgröße automatisch an div-Box anpassen

Ich bin grad bei dem Layout für meinen Onlineshop (Info-Projekt also kein echter Shop^^). Das Layout sieht bisher so aus, dass ich 2 Div-Boxen zentriert habe mittels Margin-left/right="auto". Die obere Spalte ist box ist der Header, die untere für den Inhalt. In die obere Box soll jetzt ein Schriftzug als Logo rein. Gibt es irgendeine Möglichkeit, dass das Bild automatisch an die Größe der div-Box angepasst wird? Als Größenangabe habe ich beim Header nur "width:850px" und "height: 20%". Wenn ich diese Angaben dann aber an das Bild schreibe (also dass ich in der CSS-Datei für das Bild "width="850px" etc. schreibe), funktioniert es nicht. Gibt es irgendeinen automatischen Befehl oder kann man das irgendwie ausrechnen? Danke ;)

PS: Die Auflösung des Bild ist 1500x909, falls das irgendetwas ändern würde ;)

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Python Script über Browser starten Raspberry Pi?

Hallo,

Ich habe folgendes Problem:

Ich hoste mit meinem Raspberry einen Webserver im lokalen Netzwerk, gebe also im Browser die IP ein und komme auf die Startseite die in /var/www/html/startseite.html hinterlegt ist. Soweit so gut.

Ich habe jetzt noch ein Python Script "camera.py", dass bei Ausführung ein Foto macht und speichert (wo ist im Prinzip egal)

Ich möchte dieses Script im Browser aufrufen, bzw. im Browser ein PHP Script aufrufen, dass Python Script startet.

Also z.B. 10.1.10.100/machefoto.php

Und mein Pi macht ein Foto.

Ich habe einige Wege im Internet gefunden, aber keiner davon funktioniert bei mir. Es entsteht zwar kein Fehler, ein Bild aber genauso wenig.

Wie muss mein PHP Script aussehen und wo muss es sein?

Wo muss mein Python Script sein?

Welche Berechtigungen (und wie) muss ich hinzufügen?

Wie bereits erwähnt alles auf einem Raspberry Pi 3B+ der im lokalen Netzwerk ist. Raspbian OS (Linux)

Danke für Antworten im Voraus

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

Wie kann ich den Zoom auf das Header-Bild meiner Website in der "style.css" anpassen (Beispielbild in Frage drin)?

Hallo!

Ich würde gerne den Zoom auf das Headerbild verkleinern. Leider wird das Bild bei mir extrem vergrößert dargestellt und ich weiß nicht, wie ich das ändern kann. Welche Parameter muss ich in der style.css Datei verändern bzw. hinzufügen, damit ich den Zoom auf das Bild verkleinern kann?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen