Header mit Logo und Menue

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

mundl

Neues Mitglied
15 August 2017
14
0
1
69
Hallo Freunde bitte um Hilfe, möchte mir eine HP basteln wo der Header wie im Bild ist.
Habe eine HP gefunden wie ich es mir vorstelle, das ganze auch Handytauglich.
zeichnung.jpgzeichnung.jpg
 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
508
67
28
Dann zeige uns doch bitte die Versuche, die du bisher unternommen hast, dann können wir sehen, wo es hakt und dir gezielt helfen.
 

mundl

Neues Mitglied
15 August 2017
14
0
1
69
kann ich nicht mehr, habe die html gelöscht da ich nicht ansatzweise zurecht komme, leider, leider.
Bräuchte nur denn Header mit Menü und das Logo in der mitte und das alles auch responsive.
 

basti1012

Senior HTML'ler
26 November 2017
1.385
143
63
39
Minden
sebastian1012.bplaced.net
Wie wäre es wenn du dir bei Codepen ein Menü suchst was schon mal fertig ist , so wie du es haben willst ungefähr.
Da gibt es auch responsive und so weiter.

Das Bild dann da einzubauen sollte dann nicht mehr das problem sein.
Aber bis zum Bild kannst du ja schon mal was zusammen suchen und bearbeiten wie du es brauchst.
Dann helfen wir dir auch gerne weiter
 

mundl

Neues Mitglied
15 August 2017
14
0
1
69
So meine lieben Freunde, habe jetzt versucht mit den Programm "Artisteer" eine HP zusammen zu basteln.
Das Menue habe ich von einer Beschreibung in youtube zusammen gestellt und in der HP eingefügt.
So weit alles gut auch mit responsive bis auf ein Problem, wenn ich dies im Browser zusammenrücke verschwindet bei einer Breite von ca. 1098px bis 1190 der Hintergrund vom Menue.
Das nächste Problem, ich will das große Schlossbild nur auf der index.html die weiteren Seiten ohne das Bild. Ist als "slider-inner" eingefügt.
Die Seiten index und wegbeschreibung sind aktiv, im menue "Kontakt > Anreise > Karte u. kurze Wegbeschreibung".
Ich wäre Euch sehr, sehr dankbar wenn ihr mir helfen könntet das Problem zu lösen.
LG. mundl
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.385
143
63
39
Minden
sebastian1012.bplaced.net
Ich glaube da sind mehrere Probleme drinne.
Zb das hier überschneidet sich
Code:
@media only screen and (min-width: 240px) and (max-width: 1180px) {
.slicknav_menu{display: block;}
.inner_main_menu{display: none;}
}
@media only screen and (min-width: 1000px) and (max-width: 1150px) {
.slicknav_menu{display: block;}
.inner_main_menu{display: none;}
}
Das zu ändern behebt den Fehler aber noch nicht..
Da muss noch mehr Mist sein.

Zb in der responsive.css
ist hier ein Kommer zu viel
.responsive img,{
und das in Reihe in 10.
Weiß gar nicht genau ob der Rest Code dann noch gelesen wird ? ( Js macht dann meißtens schon dicht ).

hier auch
style.css
footer, article, nav, .sheet,
Reihe 232

Um das Bild nur auf einer bestimmten Seite anzuzeigen mußt du auf der Seite eine Extra Css einbinden, oder auf der Seite deinen Slider eine Klasse oder Id geben wo die Css mit oder ohne Bild greifen tut.

EDIT:
Danach wäre eine Lösung
style_menue.css
reihe 119
height:145px;
zuzugeben

Code:
 .main_menu {
     width: 100%;
     position: fixed;
     height:145px;
     background-image: url('images/header.png');
}
Ob das schon reicht.
Cache Löschen nicht vergessen wenn sich danach nix tun sollte
 
Zuletzt bearbeitet:

mundl

Neues Mitglied
15 August 2017
14
0
1
69
Hallo basti1012,
du bist spitze, das Problem mit dem verschwinden des Menue Hintergrund bei einer bestimmten pixelbreite ist dank dir behoben.
Das mit dem Bild, habe für diese Dateien bzw. Seiten eine extra css gemacht und den Slider rausgenommen, aber die Überschrift rückt einfach nicht runter, bin mit meinen Latein am Ende.
LG und recht herzlichen Dank, mundl
 

basti1012

Senior HTML'ler
26 November 2017
1.385
143
63
39
Minden
sebastian1012.bplaced.net
Das liegt daran das dein Fixed Menü dadrüber liegt.
Wenn man die Seite von Anfang an mit Flexbox und co gemacht hätte ,wäre das problem jetzt nicht so.
Auf der schnelle fällt mir nur nee Fusch Lösung ein
Code:
.post {
    padding: 5px;
    padding-top: 145px;
}
Nee weitere möglichkeit ( eigentlich kein Fusch )
Code:
.main_menu {
    width: 100%;
    position: relative;
    height: 145px;
    background-image: url(images/header.png);
}
da von fixed auf relative zu wechseln.

Das problem ist da nur das beim runterscrollen dein Header so ein 10px sprung runter und hoch macht.
Ich weiß noch nicht wodran das liegt tut.
Wenn der Sprung nicht wäre dann ist die Lösung besser.
 

mundl

Neues Mitglied
15 August 2017
14
0
1
69
Hallo basti1012,
herzlichen Dank für deine Mühe, aber mein guter Freund für den ich diese HP basteln soll nervt mich, es sollen nach dem Menü verschiedene Bilder in verschiedene Größen (höhen) eingebaut werden, das ist mit diesen Muster schwierig oder überhaupt nicht möglich.
Habe jetzt einmal ganz einfach auf die schnelle ein Gerüst gemacht und siehe da, da ist alles möglich.
Siehe den Link im Post 8. Das Schloss > Schlossgeschichte; Kontakt > Anreise > Karte Wegbeschreibung; und Kontakt > Presse > Presseberichte habe ich testhalber verlinkt!
Jetzt hätte ich nur eine Frage, wäre es möglich das du mir mit Flexbox so ein Gerüst mit meinen Menü machst?
Wenn ich mal das Grundgerüst habe, könnte ich mich leichter einarbeiten in Flexbox, da ich mit dem überhaupt noch nichts gemacht habe.
LG mundl
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.385
143
63
39
Minden
sebastian1012.bplaced.net
Meinst du nur das Menü , bzw dein header ?.
Ab Post 7 ca habe ich mit einen mal kurz über PN geredet weil ixh mir nicht ganz sicher Wahr wie man das Bild in der Mitte da an besten reinbaut.

Er meinte das er das ungefähr auch so gemacht hätte.

Das ist schon 2 Wochen fertig, doch vor den posten wollten wir auch erstmal sehen wie deine Einstellung zum selber machen ist.

Kuck mal ob du damit was anfangen kannst
 

mundl

Neues Mitglied
15 August 2017
14
0
1
69
Hallo basti1012,
wenn ich ehrlich bin ist das schon ein Brocken denn ich habe noch nie was mit flexbox und etc. gemacht.
Was sagst du zum jetzigen Stand auf Post 8 den Link habe ich aktualisiert, funzt ganz gut, man müsste jetzt nur die Einteilung im html und css Code genauer und richtig machen aber das ist es was diese Nervensäge von Freund sich vorstellt und es funzt alles auch responsive.
 

basti1012

Senior HTML'ler
26 November 2017
1.385
143
63
39
Minden
sebastian1012.bplaced.net
Dafür das ohne Flexbox ist scheint es ja soweit gut laufen.
Die Nervensäge von Freund soll überlegen was er vor hat.
Selbst wenn deine Code jetzt so zu laufen scheint, gehe ich mal davon aus das auf vielen Endgeräten und Browsern probleme kommen.

Du hast ja jetzt erst 2 Seiten fertig und nach den Links in der Navigation kommen da wohl noch welche zu .

Du nutzt ja auch kein WP oder sonst was und solltest dir da auch Php ankucken.
Dann baust du dir zb 4 Datein zurecht wie head ,header , nav und footer die du dann nur noch einbinden mußt.
Damit sieht jede Seite gleich aus und du brauchst dir nur noch den Inhalt von main zu ändern.

Falls du mal einen Link in der Navigation ändern mußt ,brauchst du nur noch die nav Datei ändern und es ist dann auf jeder Seite geändert.

Die Php Leute können dir dann dabei helfen sowas wie ein Tamplate zu bauen ,weil da gibt es noch andere wege .

Habe mal auf der schnelle was zurecht kopiert aus deiner Datei und meiner und etwas Flexbox reingebaut.
Habe im Footer etwas spielerei reingemacht damit du sehen kannst wie man das ungefähr mit @mediaqueries macht damit alles lesbar ist auf Handy und Deskop.

Auch für Flexbox gibt es hier 2-3 Leute die das sehr gut können und dir dabei helfen .
Doch du mußt es auch lernen wollen.
Wenn man von Post #1 bis jetzt sieht hast du schon eine laufene Seite ( auch Validator meckert nicht)
zusammen gebaut.

Hier mal ein schnelles Beispiel wo man aber auch noch verbesserungen dran machen kann