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

Header mit Logo und Menue

M

mundl

Neues Mitglied
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:
Dann kuck doch mal in der Konsole rein und kuck dir den Code an wie die das gemacht haben.
Hast du das schon mal versucht , oder andere versuche gestartet ?
 
Dann zeige uns doch bitte die Versuche, die du bisher unternommen hast, dann können wir sehen, wo es hakt und dir gezielt helfen.
 
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.
 
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
 
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:
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:
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
 
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.
 
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:
Meinst du nur das Menü , bzw. dein Header ?.
Ab Post 7 ca. habe ich mit einem mal kurz über PN geredet, weil ich mir nicht ganz sicher wahr wie man das Bild in der Mitte da an besten reinbaut.

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

Header mit Logo und Menue

Header mit Logo und Menue 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. <img class="vorschau" src="image/header-mit-logo.jpg"> html
basti1012.bplaced.net basti1012.bplaced.net


Das ist schon 2 Wochen fertig, doch vor dem Posten wollten wir auch erstmal sehen wie deine Einstellung zum Selbermachen ist.

Guck mal, ob du damit was anfangen kannst
 
Zuletzt bearbeitet:
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.
 
Dafür das ohne Flexbox ist, scheint es ja soweit gut laufen.
Die Nervensäge von Freund soll überlegen, was er vorhat.
Selbst wenn dein Code jetzt so zu laufen scheint, gehe ich mal davon aus, dass 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 z. B. 4 Dateien zurecht wie Head, Header , nav und, Footer, die du dann nur noch einbinden musst.
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 musst ,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 Template 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 Desktop.

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

Hier mal ein schnelles Beispiel wo man aber auch noch Verbesserungen dran machen kann
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben