Header Programmierung Webseite

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Snowboarder1994

Neues Mitglied
28 Juli 2019
28
0
1
25
Hallo,

wollte einen Header programmieren bei www.Domainagentur.de, aber irgendwas stimmt hier mit den DIVs nicht möchte das genau mittig auf der Webseite positionieren.

Wollte das so machen wie auf dem Screen: http://domainagentur.de/test/Unbenannt.png
Wer kann mir da bitte weiterhelfen? Muss das HeaderLogo und Headerbild auch in einen DIV?

Wer kann mir da bitte helfen dies umzusetzen?

HTML:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Domainagentur Markus Kein</title>
    
    <link rel="stylesheet" href="/css/stylesheet.css">
  </head>
 
  <body>
 
    <div id="header">
        
            <img id="logo" src="/images/logo.png">
            <br>
            <img id="headerbild" src="https://cdn.pixabay.com/photo/2015/06/24/15/45/ipad-820272_960_720.jpg">
        
    
    
    </div>

Danke Gruß Markus
 

basti1012

Senior HTML'ler
26 November 2017
1.070
113
63
38
Minden
sebastian1012.bplaced.net
Ist das alles was in den header soll ?
Im Bild ist ja noch nee Navigation.
Es gibt viele möglichkeiten das zu zentrieren ( flex, Grid margin:0 auto;)

An besten wäre ja alles mit Flexbox zu machen.
Ist das alles was du bis jetzt hast oder wie sieht es aus ?
 

basti1012

Senior HTML'ler
26 November 2017
1.070
113
63
38
Minden
sebastian1012.bplaced.net

basti1012

Senior HTML'ler
26 November 2017
1.070
113
63
38
Minden
sebastian1012.bplaced.net
das ist ja noch nicht viel.
Du solltest dir berauch schon vorher in klaren sein was alles passieren soll.
Also ich meine. Wenn ich dein ding da jetzt nachbaue sieht es so aus.
https://codepen.io/basti1012/pen/MNJaea?editors=1100
Aber wie geht es weiter ? Du siehst im gross siehtes gut aus.Schiebst du es zusammen dann kommt der kuddel muddel. Das kann man alles beseitigen, doch solltest du dann wissen wie es aussehen soll?
Wie hier im Forum wird bei kleineren Bildschirmen die navigation in ein Burger Menü getauscht und dadurch komt kein durch einander mehr.
Dann dein Logo ? Muß das ein Bild sein oder kann es normale Schrift sein ?
Dein großes Bild hast du eine feste größe gegeben.Das macht es für kleine Bildschirme und für responsive schon schwer. Da sollte man sich auch gedanken machen was du da willst.

Du siehst da kommt noch etwas auf dich zu und wenn du dir das voher schon alles überlegt hast macht es dir das leichter und du mußt nicht immer wieder alles neu schreiben weil du wieder was vergessen hattest es einzubauen.

Du kannst bei der Seite codepen auch mal suchen gehen da gibt es auch viele Beipspiele die dir helfen können
 

Snowboarder1994

Neues Mitglied
28 Juli 2019
28
0
1
25
Einwandfrei Danke

Mich wunderts wie es bei der Seite z.B. von Adomino.de so gut klappt ohne responsive Design das es auf dem Handy auch gut angezeigt wird.

Glaube wäre einfacher zu programmieren wenn ich es auch so mache wie der bei Adomino.de also nicht responsive wo dann z.b. beim handy wie du bereits gesagt hast das BurgerMenü auftaucht, weil das glaub schon viel ist zum programmieren.

Ist zwar BenutzerUnfreundlicher wenn ich es statisch mache aber wenn es klappt wäre es eine einfachere Lösung das so wie auf dem Screenshot ist umzusetzen oder?

also würde dann per include arbeiten header und footer in der impressum.php datei includen

das logobild wird glaub nicht soleicht mit dieser Linie zwischen drin als Textform umsetzbar sein.
 

basti1012

Senior HTML'ler
26 November 2017
1.070
113
63
38
Minden
sebastian1012.bplaced.net
Was Adomino.de da macht ist für Handy nutzer der letze Müll.
Eine Webseite sollte man so bauen das jeder User die ohne probleme nutzen kann.
Handy, Tablett und co haben alle andere Auflösungen und so, und alle wollen die Seite nutzen können.
Deswegen solltest du dir auch @mediaqueries anschauen , und auch da überlegen ob der Handynutzer überhaupt alles brauch.
Viele Seiten lassen beim Handy Format einge sachen weg die nicht unbedigt gebraucht werden ( Logos, shoutbox, kommentar ,Bilder ).

Footer , navigation und co kannst du mit include() machen , das wäre sogar sinnvoll.
Das Logo in Textform zu bauen sollte meiner meinung nach kein problem sein.
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
Mich wunderts wie es bei der Seite z.B. von Adomino.de so gut klappt ohne responsive Design das es auf dem Handy auch gut angezeigt wird.
Ist das dein Ernst? An dieser Seite ist Zeit und die Entwicklung in Sachen HTML/CSS spurlos vorbei gezogen - an der solltest du dich möglichst nicht orientieren. So hat man vielleicht vor 10 Jahren (plus) gecodet, als es noch keine Handys und Tablets gab - außerdem sind da 100+ Fehler im Code.
Für deinen Fall kann ich dir nur empfehlen, mach es so, wie @basti1012 vorschlägt... stelle das Design auf Flexbox und mache den Code erst mal komplett (zumindest für den Header / Desktop Anzeige) fertig - also mit Navigation und allem, was du da sonst noch haben willst/musst.
Dann baust du in die Seite deine Navigation für mobile Endgeräte ein.
Zwischen den beiden Navigationsoptionen kannst du dann mit einer MediaQuery im CSS umschalten.
Das Ganze könnte dann zB so aussehen:
https://jsfiddle.net/9zf0m1vc/
... im 'fiddle' passt allerdings der Breakpoint (umschalten von Desktop auf Mobil) nicht. Wenn der Code normal im Browser läuft, sollte das aber passen.
 
  • Like
Reactions: Snowboarder1994

Snowboarder1994

Neues Mitglied
28 Juli 2019
28
0
1
25
Perfekt Danke, wie mach ich das bei einem Content also z.b. Impressum wenn ich nebendran noch so Button hab das die nebendran bleiben und nicht in der mobile Ansicht nach unten also unterhalb des textes verschoben werden?
 

Snowboarder1994

Neues Mitglied
28 Juli 2019
28
0
1
25
Meinte folgendes:
Unter dem Bild kommt bei mir z.B. sowas:

(BILD)
darunter
links menü button und rechts text z.b.
aber dann verschiebt sich der text unter den menü buttons wenn man die webseite in mobile ansicht aufruft oder?


@Sailor kannst mir bitte nochmal das gleiche Design mit festen PX-Angaben programmieren falls möglich? Was würdest denn dafür wollen?
 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
Ich verstehe die Frage nicht!
Wie sieht dein aktueller Code (HTML / CSS) aus?
Was hast du versucht, um das umzusetzen, was du erreichen willst?
Was funktioniert dann nicht?
Und was soll dabei überhaupt das Ergebnis sein... wie soll das fertig aussehen?
... wie kommst du darauf, dass feste PX Angaben dir weiterhelfen?
 

Snowboarder1994

Neues Mitglied
28 Juli 2019
28
0
1
25
5195

so in etwa hab ich mir das vorgestellt.
also im content bereich ist links neben dem text bei herzlich willkommen noch so menübutton
domainankauf domainverkauf domainberatung.
problem ist wenn ich responsive mache ist das nicht mehr neben dem text sondern überhalb weil das ja nicht mehr drauf geht.
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
Ohne den zugehörigen Code kann dir keiner helfen... und diese Problemstellung hat auch nichts mehr mit der ursprünglichen Frage aus deinem Eingangspost zu tun - du solltest vielleicht überlegen, ob du nicht lieber einen neuen Post aufmachst... denn das hat mit 'Header Programmierung Webseite' nichts mehr zu tun.
 

Snowboarder1994

Neues Mitglied
28 Juli 2019
28
0
1
25
Hab ja leider nur den Code der ganz oben im ersten Beitrag ist.
Den Code den du mir gesendet hast sieht schon super aus, aber responsive bzw. mobile Ansicht machte mir bei dem Content dann probleme, das ist das Problem, deshalb wäre mir PX Angaben lieber, also das gleiche in PX Angaben.
Da muss ich leider dann mit den nachteilen leben das es auf handy kompliziert ist zu bedienen.

das auf dem screenshot ist nur mit paint zusammengestellt
 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
Also jetzt nochmal... dein Problem mit der mobilen Ansicht im Content Bereich hat nichts mit dem mobilen Menü aus meinem Code zu tun... das sind zwei komplett verschiedene Baustellen.
In deinem Code aus dem Eingangspost ist gar kein Content drin - was sollen wir da jetzt machen?
 

Snowboarder1994

Neues Mitglied
28 Juli 2019
28
0
1
25
Glaub ich erkläre es zu kompliziert... also:

wenn ich deinen Code verwende muss ich meinen content auch responsive/mobile ansicht programmieren das problem ist aber die button wie auf dem screen zu sehen sind unter dem großen bild linke seite bleiben nicht mehr an dem ort neben dem text sondern verschiebt sich auch weil kein platz.

deshalb meinte ich ob ich mit PX angaben statt % mache also den kompletten Header. (nachteil ist darin wie du oben bereits erwähnt hast nicht mehr auf allen bildschirmauflösungen in ordnung)
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
Wir reden da etwas aneinander vorbei - fürchte ich :(!
Der von mir gepostete Code beeinflusst nur den Header bzw das/die darin eingebettete Menü... das hat keinen Einfluss auf irgendwas, was du danach in deinen Code schreibst (zB dein Content). Ob du das. also deine weiteren Inhalte, responsive haben willst oder nicht, musst du dann selbst entscheiden... auch das hätte dann keinen Einfluss auf den Header und die Menüs.. die bleiben so, wie sie sind.
Du schreibst immer, es würde sich da etwas verschieben (Buttons? ... Text?), woher weißt du das, wenn du keinen Code dafür hast? Nun mach doch wenigstens mal einen Versuch, deine Vorstellungen in einen Code zu realisieren... anstatt nur um den Brei herum zu reden und zu mutmaßen.
Wenn du den Code hast, dann finden wir auch eine Lösung.
 
Werbung: