Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Logo ändert sich bei Hover auf ul Element“

Hallo,

wieso ändert sich bei mir das Logo im Chrome wenn ich auf den Links drüberfahre mit der Maus? (Hälfte vom Logo verschwindet auf ABEr wenn ich wieder mit dem Cursor über den Link Home drüberfahre sieht man das Logo wieder komplett.

Finde irgendwie den Fehler nicht.
Im Firefox funktioniert es. Im Safari funktioniert es überhaupt nicht so wie bei Chrome und Firefox
Laut W3C Validator ist auch kein HTML Fehler enthalten.

Kann wer bitte mir helfen.


Link zur Seite:
 

Myhar

Hat es drauf

Warum wird das Logo über eine Hintergrundgrafik (noch dazu mit -999999px textversatz etc. ) eingebunden anstelle eines Bildes?
 

Jormungand

VonAllemEtwas

Bei mir wird das Logo richtig angezeigt. Auch beim hovern wird nix verdeckt.
Die Navi ist aber bestimmt noch nicht fertig. Wenn man das Browserfenster kleiner macht, passieren schlimme Dinge! ;)
 

Myhar

Hat es drauf

Man könnte dir helfen wenn du uns auch sagen würdest, wo du dieses Akkordion auf der von dir angegebenen Beispielseite eingebaut ist. Dort finde ich es nämlich nirgends.
 

Jamye

Noch nicht viel geschrieben

Gehört zwar nicht direkt zum Thema, aber ich würde schleunigst ein Impressum in die Seite einbauen. Könnte sonst rechtliche Konsequenzen geben...

Ist das eigentlich gewollt, dass sich das Menü nach rechts beim hovern vergrößert?
Gleiche Frage zum Button unten. Da wird der Content der gesamten Seite unterhalb des Buttons nach oben gezogen durch eine andere Buttongröße?
Soll die Navileiste rechts überstehen?
 
Gehört zwar nicht direkt zum Thema, aber ich würde schleunigst ein Impressum in die Seite einbauen. Könnte sonst rechtliche Konsequenzen geben...

Ist das eigentlich gewollt, dass sich das Menü nach rechts beim hovern vergrößert?
Gleiche Frage zum Button unten. Da wird der Content der gesamten Seite unterhalb des Buttons nach oben gezogen durch eine andere Buttongröße?
Soll die Navileiste rechts überstehen?

Vielen Dank für dein Feedback..
ich habe ein bisschen bearbeitet.

Werde dann heute noch den aktuellen Stand uploaden.
Wie sieht es denn bei dir aus ?
Habe beim Firefox und Chrome getestet funktioniert alles bis auf die Navigation wenn ich die Seite verkleinere verkleinert sich nicht alles mit ...

Kann ich vielleicht dich darum bitten mir ein Screenshot zu machen wie es bei dir aussieht?

Bzgl Impressum: Werde es einbauen habe es total vergessen. Danke für den Tipp.
 

Jamye

Noch nicht viel geschrieben

Gerne doch!
Der erste Screenshot zeigt die Seite mit meinem 1920 x 1080 px Bildschirm.

Der einzige Fehler der hier entsteht, ist das beim Hovern des "Rabatt-Code" Buttons der Rest unterhalb des Buttons nach oben gezogen wird, da der Button beim Hovern kleiner wird.


Hier hab ich den Viewport mal von der Breite ca. auf die meines Laptops gezogen...
Dort entstehen dann Fehler...Solltest du über Mediaquerys und Prozentangaben einfach beheben können.



Die Menüpunkte verschieben sich beim Hovern von einem leicht.
Unten in der Menüleiste das Gleiche.
Der Button macht Probleme.
Die Box rechts läuft aus dem Content raus.
 

patrick_l

Hat es drauf

Bevor du dir Gedanken zum Logo und dem Akkordion (das ich nicht sehe) machst, solltest du erst einmal dein Markup gründlich überarbeiten. Unter anderem Validieren und die Fehler ausbessern. Nach dem Doctype fehlt beispielsweise das öffnende HTML-Tag. Für die Groß- und Kleinschreibung gibt es in CSS nicht umsonst die Eigenschaft text-transform upper- und lowercase. Also nutze sie auch. Davon ab sollte jegliche Formatierung in CSS notiert werden.

Da deine Website mittig als "Block" zentriert ist, sprich keine Viewport-füllenden Bereiche dabei sind, einmal einen umschließenden Container für deine Inhalte definierten, den du dann mittels margin 0 auto zentrierst. Für den Container muss auch nicht extra eine neue (eigene) Division angelegt werden. Funktioniert auch wunderbar mit dem Body-Tag. Zumal es dir auch die Umsetzung für andere Devices etwas erleichtert. Gib dem ganzen eine maximale Breite!

Die gemischte Social und Sprachnavigation würde ich voneinander trennen. Dessen Icons über CSS als CSS-Sprite einbinden. Stichworte wären wohl schlankes Markup und unnötige HTTP-Requests (ein)sparen. Zu deinem Layout, dieses würde auch nochmal überdenken. Wozu einen doppelt gemoppelte Navigation? Wenn die Navigation immer erreichbar sein soll, die Hauptnavigation beim scrollen "on top" fixieren.

Im Footer dann lediglich zum Impressum und gegebenenfalls zu existierenden AGB verlinken. Ebenso alle anderen rechtlichen Hinweise wie Nutzungsbedingungen un der gleichen dort verlinken. Die gewählten Farben würde ich auch etwas anpassen. Hier vor allem ein Farbproof machen und schauen wie es im Bezug auf Farbenblindheit: Deuteranopie/Protanopie ausschaut.

Edit:
Ganz vergessen, aus Usability und SEO Gründen, relevante Inhalte wie Text nicht als Grafik einbinden. Ebenso sollte beim Rabatt auch bei stehen, wie viel es denn gibt. Nach meinem Wissenstand müssen solche Aktionen genau wie Preise deutlich ausgezeichnet werden. Mir da jedoch nicht hunderprozentig sicher bin. Was die Optik angeht, das Logo Vektorisieren und als SVG einbinden. Für die Social Icons vielleicht auf entsprechende Icon-Fonts (z.B. Font Awesome) zurückgreifen.

Ich habe dein Quellcode mal etwas aufgeräumt:
HTML:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World!</title>
  </head>
  <body id="container">
    <div id="topbar">
      <h1 class="brand"><span>First Lady Belezza - Schönheitssalon</span></h1>
      <ul id="contact-bar">
        <li class="spr icon-phone"><a href="tel:+4319137533">+43 191 375 33</a></li>
        <li class="spr icon-facebook"><a href="#">Facebook</a></li>
        <li class="spr icon-lang-de"><a href="#"></a>Deutsch</li>
        <li class="spr icon-lang-tur"><a href="#">Türkce</a></li>
      </ul>
    </div>
    <nav>
      <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Galerie</a></li>
        <li><a href="#">Angebote</a></li>
        <li><a href="#">Preise</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
    <header id="slider">
      <!-- Slideshow here! -->
    </header>
    <main id="primary">
      <!-- Primary content here! -->
    </main>
    <footer id="footer">
      <!-- Secondary content here! -->
    </footer>
  </body>
</html>

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:
@
patrick_l: Vielen Danke für deine tolle Beschreibung (Hilfestellung bzw Tipps).

Werde all deine Tipps mal nach der Reihe durchgehen.

Aber komme grad mit der Navigation irgendwie ned klar. Finde den Fehler nicht wieso es sich beim verkleinern des Fensters sich nach rechts verschiebt...

Die Links im Footer werden gegen AGB und IMPRESSUM ersetzt ...


Bzgl der Navigation: wenn ich es mit position:fixed fixiere passieren schlimme dinge ^^Muss ich etwas beachten wenn ich dem nav tag position:fixed vergebe?

Lg
 

Jormungand

VonAllemEtwas

Dein a hat ein padding:20px.
Wenn du deinen Browser verkleinerst, werden die li immer kleiner, bis sie an die as mit dem padding stoßen.
Lösungsvorschlag: gib dem a nur ein padding-top und padding-bottom.
Setze media-queries mit breakpoints ein. Wenn der Viewport schmaler wird, wird automatisch auch die Schrift kleiner.
 

patrick_l

Hat es drauf

Muss ich etwas beachten wenn ich dem nav tag position:fixed vergebe?
Wenn du die Navigation fix positionierst, solltest du auch Angaben machen, wo diese denn fixiert werden soll. Ebenso sollte z-index nicht fehlen, damit der restliche Content beim Scrollen darunter verschwindet. Hier mal ein Snippet für eine "on top" fixierte Navigation.
CSS:
.navbar {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}
Hier auch mal in Aktion:
- JSFiddle » Fixed Navigation


Liebe Grüße, Patrick
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.855
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben