Header automatisch anpassen

P

Panda9296

Bekanntes Mitglied
Hi und zwar versuche ich mich gerade in css und versuche den header der Browsergröße anzupassen...
normal müsste das mit margin automatisch gehen. Jedoch funktioniert es bei mir nicht so wie die Theorie das sagt^^:
CSS: 
html{
    height: 100%;
    font-weight: 100%;
}

body{
    margin-top:auto ;
    margin-left:auto;
    margin-right: 0% ;
}
h1{
    width:1920px;
    height: 150px;
    margin:auto;
}
Der Header ist zwar bündig, jedoch passt er sich nicht der Webseite an

HTML: 
<!DOCTYPE html>
<html lang= "de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Homepage</title>
        <link rel= "stylesheet" href="style.css">
    </head>
        <body>
            <h1 id="header"><img src="Logo1024.png"/> </h1>  
        </body>

</html>
 
Zuletzt bearbeitet:
MoxxiManagarm

MoxxiManagarm

Top Contributor
CSS: 
h1{
    width:1920px;

h1 ist nur ein Tag, was für Typography gedacht ist. h1 ist eine Überschrift. Es ist nicht emfehlenswert dem Tag Container-Eigenschaften zu geben. Besser wäre du wrappst deine Überschrift.

Insgesamt empfehle ich dir aber: Mach nicht alles "selbst". Webseiten müssen heutzutage so viel können, damit meine ich vor allem Responsive sein. Du könntest die die bootstrap.min.css in deine HTML laden, dann hast du ein großes Set an vorgefertigten Klassen und eine gute Documentation an deiner Seite. https://getbootstrap.com/docs/4.5/getting-started/introduction/
 
P

Panda9296

Bekanntes Mitglied
MoxxiManagarm hat gesagt.:
CSS: 
h1{
    width:1920px;

h1 ist nur ein Tag, was für Typography gedacht ist. h1 ist eine Überschrift. Es ist nicht emfehlenswert dem Tag Container-Eigenschaften zu geben. Besser wäre du wrappst deine Überschrift.

Insgesamt empfehle ich dir aber: Mach nicht alles "selbst". Webseiten müssen heutzutage so viel können, damit meine ich vor allem Responsive sein. Du könntest die die bootstrap.min.css in deine HTML laden, dann hast du ein großes Set an vorgefertigten Klassen und eine gute Documentation an deiner Seite. https://getbootstrap.com/docs/4.5/getting-started/introduction/
Zum Vergrößern anklicken....
also leider wollte ich schon so viel wie möglich einmal machen, da ich für mein Praktikum in der Umschulung mit Javascript arbeite. Habe jetzt ein paar Grundlagen gelernt und es heißt man soll unbedingt an einem kleinen eigenen Projekt üben. Da wir das in der Schule nochmal 7 Wochen haben und ich nur vorgegriffen habe, möchte ich das css und html mal durchmachen, da ich gemerkt habe, wenn javascript im Browser angewandt wird, sollte man das fließend können. Da mein Betrieb meinte das ich Angular, Javascriptbasics und E26 aufgreifen sollte. Habe ich echt bissl bangel weil ich das gu können möchte, um halt auch übernommen zu werden^^. Ich habe das schon gemerkt mit der h1 und habe versucht es umzusetzen und denke so ist es korrekt. Ich habe auch Fortschritte gemacht. Nur jetzt geht das bild nicht durch. Jetzt ist meine Frage: Mein Headerbild hat ein Format mit 1920,150(px). Das sollte doch so eigentlich automatisch an die breite angepasst werden? Da es sich von der Höhe und den Abstand auch angepasst hat

Code: 
<!DOCTYPE html>
<html lang= "de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Homepage</title>
        <link rel= "stylesheet" href="style.css">
       
    </head>
        <body>
            <div id="header">
                <img src="Logo1024.png"/>
            </div>  
        </body>
</html>



CSS: 
body{

font-family: "Titillium Web","sans-serif";

background-color:#1874CD;

margin:auto;

}

#header{

    width:1920px;

    height: 150px;

    margin:auto;

    border-bottom:10px solid red;

}
 
P

Panda9296

Bekanntes Mitglied
MoxxiManagarm hat gesagt.:
Du meinst vermutlich ES6.


Mach doch gleich Angular, du brauchst auch in Angular html, js bzw. ts und css.



Bitte nimm eine class mit class-Selektor in der css
Zum Vergrößern anklicken....
Okay ^^ ich dachte ich muss erst das html lernen, dann css und dann kann ich weiter mit angular machen, wenn ich einigermaßen Javascript kann... So wird es zumindest überall geprädigt :D. Ich nehme an, dass Angular einfacher ist, weil du es so vorschlägst?.
 
MoxxiManagarm

MoxxiManagarm

Top Contributor
Es macht html und css nicht einfacher, eher dynamischer. Je nachdem ob du AngularJS (aka Angular 1) oder Angular 2+ (Typescript) verwendest macht es Javascript, nunja, anders. Typescript ist ein superset von Javascript, welches zu Javascript compiliert wird. Typescript unterstützt, wie der Name vermuten lässt, Typing. Typescript besitzt Klassenstrukturen wie du sie auch aus Java z.B. kennst.

Natürlich kannst du minimale Webseiten einfach so zusammenschrauben, aber spätestens bei wachsenden Anforderungen wird dir das schnell über den Kopf wachsen. Das sind so Sachen wie:
- komplett Responsive Design
- Routing
- dynamischer Content und wiederkehrende Elemente
- Schnittstellen
- ...

Und glaube mir, diese Sachen machen Spaß, nur eben mit geeigneten Mitteln. bootstrap erleichtert die das Responsive Design, Angular den Rest, spezialisierte Anforderungen lassen sich meist durch geeignete Libraries durchführen. Eines meiner liebsten Beispiele ist hier OAuth. Ich sehe zu viele Leute die daran scheitern das selbst zu implementieren mit all seinen Fasetten. Dabei gibt es z.B. eine Lib von Manfred Steyer (ein bekannter Mann im Angular Umfeld), welches dir all diese Punkte bezüglich OAuth abnimmt. Und Zeit ist Geld, man muss diese Dinge nicht immer neu erfinden.
 
M.L.

M.L.

Top Contributor
Angular einfacher
Zum Vergrößern anklicken....
Die Entscheidung für Angular(JS) ist auch fundamentaler Natur idS das die Webpräsenz dann komplett von der Pike auf mit Angular programmiert werden darf. Andere Frameworks wie z.B. React.js lassen sich bei bestehenden Webseiten später auch nachträglich hinzufügen.
 
P

Panda9296

Bekanntes Mitglied
Also der Betrieb hat wiegesagt JavaScript Grundlagen
ES6 und angular aufgegeben.
Das Praktikum beginnt Mitte März.
Ich habe jetzt für 9 Wochen Java mit Vorbereitung auf die Oracle Zertifikate und anschließend bis Dezember JavaScript. Bis dahin hoffe ich, dass ich das soll soweit erfüllt habe und den udemy masterkurs für JavaScript soweit durch habe um danach mit typeskript und angular 2 anzufangen. Es wurde betont mindestens angular 2 zu lernen oder es zu lassen und bis praktikumsbegin zu warten^^
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
I Menü, Header, Content ausgliedern aus einer HTML Seite HTML / CSS 2
ruutaiokwu Medien (z.B. Audio-MP3 oder Video-MP4) im Browser automatisch abspielen? HTML / CSS 2
S ImageSlider anpassen... Hilfe!!! HTML / CSS 4

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben