Beiträge von Sailor

  • Füllfarbe transparent einstellen

    Das denke ich auch... zum Einen kann ich die Codeänderung im Quellcode nicht finden... speichern? ... veröffentlichen?
    Zum Anderen entspricht der Code, den du postest, nicht dem, den ich vorgeschlagen habe!

    Zitat von rsieling


    .container-boxed-inner {
    background: rgba(255, 255, 255, 0.7);
    }


    Richtig wäre...

    HTML
    #container-boxed-inner {
  background: rgba(255, 255, 255, 0.7);
}


    siehe mein Beitrag #2.
    Der Unterschied ist, mit dem Selektor '.container-boxed-inner ' wird die Klasse container-boxed-inner (erkennbar an dem führenden '.' (Punkt)) angesprochen.
    Dem fraglichen Element ist jedoch nicht diese Klasse zugewiesen, sondern es hat die ID 'container-boxed-inner' - muss dann mit '#container-boxed-inner' angesprochen werden!
    Im CSS ist die ID am führenden '#' zu erkennen.

  • farbe von a.link: bei Firefox und chrome nicht übernommen

    Du solltest auf dieses <font color> auf jeden Fall verzichten... das ist mehr als veraltet und hat, wie du ja selbst festgestellt hast, auch unerwünschte Nebeneffekte.
    Warum das beim Firefox mit a:link nicht funktioniert kann ich so ohne weiteres nicht erklären. Mag daran liegen, dass mit dem :link (einer Pseudoklasse) nur unbesuchte Links angesprochen werden.
    Du solltest in deinem CSS lieber folgendes notieren:

    HTML
    a {
 color: #FFF;
 text-decoration: none;
 font-size: 13px;
 font-weight: 300;
}
a:hover {
 color: #000;
 background-color: #FFF;
}


    Nähere Informationen findest du auch hier...
    https://developer.mozilla.org/en-US/docs/Lea…t/Styling_links

  • CSS -> Select breite

    Zitat von MyBullet

    ...Dass das auf Mobilgeräte auch angepasst werden muss ist mir klar ....


    Dein gewähltes Layout lässt sich kaum bis gar nicht an mobile Geräte anpassen :( - Tabellen sind nicht ohne Grund als Designoption aussortiert worden.
    Aber es gibt (bessere) Alternativen, die sich auch leicht erlernen und anwenden lassen - siehe CSS - Flexbox (https://www.w3schools.com/css/css3_flexbox.asp) oder CSS - Grid (https://www.w3schools.com/css/css_grid.asp)

  • CSS -> Select breite

    ... ja... der Umbau wäre eine gute Maßnahme! Die Seite wird sonst von potentiellen 'Besuchern'/Kunden einfach weggeklickt, wenn sie auf ihrem Display nutzerunfreundlich (nicht responsiv) angezeigt wird. Da die Nutzung des INetzes zunehmend mit mobilen Endgeräten erfolgt, ist der Umstand eines Um- bzw Neubaus eine Zukunftsinvestition. Mit deinem selbst erarbeitetem Wissen kannst du heute nur noch einen Teil der 'Kundschaft' erreichen.

  • CSS -> Select breite

    Setze bitte an erster Stelle in deinem CSS...

    HTML
    * {
    box-sizing: border-box;
}


    Ansonsten liegen die Probleme deiner Seite am verwendeten Tabellen Layout und an den fixen Größenangaben - ok.. es sind auch einige Syntaxfehler im Code, aber darauf hat dich @Bandit ja schon hingewiesen ... siehe Validatorergebnis.
    Ein Responsive Design, dass auch für einem Tablets und Smartphones geeignet ist, ist mit dem derzeitigen Layout kaum zu realiseren.

  • Verzerrte Bilddarstellung

    Zitat von tachu

    ... Wird die html Datei in einem html Editor geöffnet, ...


    Wie ist das zu verstehen? Die Vorschau in einem HTML Editor sollte kein Maßstab für irgendwas sein...
    Wenn du einen Vergleich willst, dann solltest du deinen 'Teste' in unterschiedlichen Browsern durchführen ... und da sollten alle Ergebnisse (nahezu) identisch sein, wie du es im Code (HTML / CSS) vorgegeben hast! In deinem Fall das Bild 206px breit und 29px hoch.

  • nav unter header

    Da bist du mit deinem Layout auf dem falschen weg - wenn du die Navigation in einem anderen div haben willst - zB die Navigation im Container 'ImageBox', dann solltest du den Code dafür auch in den Container hineinschreiben.


    Dazu dann noch etwas CSS um die Elemente so zu formatieren, dass es deinen Wünschen entspricht... zB

    HTML
    .navbar ul {
   list-style: none;
}
.navbar li {
    display: inline-block;
}


    Den Rest solltest du dann wohl selber hinbekommen.

  • nav unter header

    So ganz erschließt sich die Idee, die hinter deinem Layout steckt, mir nicht :).
    Du hast 'position: fixed;' für deine <section> und schiebst sie dann mit 'left: 50%;' und 'transform: translate(-50%,-50%);' hin und her?? Lass doch den Browser sein Ding machen und verzichte auf diese 'Zwangsmaßnahmen', die dich ja anscheinend auch jetzt an anderer Stelle mehr behindern als nutzen.
    Teste das, was ich empfohlen habe... Logo und NAV im Code über die <section>


    und notiere für <section> folgendes im CSS

    HTML
    section {
    height: 160px;
    width: 100%;
    background: #151515;
    box-shadow: 0 25px 30px rgba(0,0,0,.5);
    display: flex;
}


    Und von da aus kannst du dann an deinem Design weiter feilen.

  • nav unter header

    Warum schreibst du dann den Code für die Navigation nicht einfach dahin, wo er hin soll?
    Der Browser arbeitet den Code sequentiell ab und stellt die Elemente in der Reihenfolge dar, wie sie im Code stehen - es sei denn, du legst im CSS was anders fest.

  • Hover-Effekt funktioniert nicht

    Dann probiere mal diesen gesamten Block .bar_shadow (plus eine Zeile davor und dahinter) zu löschen und neu manuell einzufügen.

    - - - Aktualisiert - - -

    ... und dann machst du aus den Formaten für .bar_shadow und .pro_shadow nur einen Block (aus 2 mach 1), denn die beiden Formate sollten gleich sein.
    Und für Beide mach den opacity Wert größer als 0 (zB 0.5)

  • Hover-Effekt funktioniert nicht

    Da stimmt was nicht... beim kopieren des Eintrages von .bar_shadow erscheint bei mir im Editor ?.bar_shadow. Hast du da irgendwelche Steuerzeichen eingebaut?
    Auf jeden Fall wird anscheinend (zumindest bei mir) diese Klasse .bar_shadow nicht richtig, bzw gar nicht formatiert.