Beiträge von koslowski

  • Bilder neben Div

    Hi,

    durch float kannst du Elemente nebeneinanderstellen.

    Du solltest allerdings darauf achten dein Dokument valide zu halten ( Doctype z.B.!!), sonst gerät das Layouten zum Glücksspiel. ;)

    koslowski

  • Layout-Problem

    Hi,

    wenn ich das richtig sehe, willst du ein normales Dreispaltenlayout mit header und footer, wobei der footer immer unten kleben soll, oder?

    Falls das zutrifft ist die beste Technik dazu sicher Foot Sticker Alt

    width:100%; für body und html ist mit Sicherheit überflüssig.
    z-index wirkt sich nur bei positionierten Elementen (außer position:static; !) aus. Es sollte mit äußerster Vorsicht angewandt werden!
    i.d.R. kann man die Stapelreihenfolge (z-Achse) durch Vergabe von z.B. position:relative; an das richtige Element hinreichend beeinflußen.

    Wichtig ist an dem Beispiel dass der footer eine Höhe bekommt, (der im Quelltext außerhalb von #nonfooter steht) und ein negatives margin-top, das der Höhe des footers entspricht.
    Außerdem muss für den content bei langen Inhalten evtl. ein entsprechendes padding-bottom definiert werden, damit der untere Teil der Inhalte nicht hinter dem footer verschwindet. ;)

    Für gleichlange Spalten wurde ja schon "Faux Columns" angesprochen.

    koslowski

  • Zeilenumbruch verhindern

    Moin,

    eine <hx> ist ein Blockelement und macht immer einen Absatz.
    Wenn das Bild im Quelltext nach der <hx> notiert ist landet es zwangsläufig in der nächsten Zeile, egal wieviel Platz da ist.

    Man hat sich unausgesprochen darauf geeinigt, daß Unterstreichungen Links vorbehalten sind und sie sollten sonst nicht angewandt werden, weil es den User verwirrt.
    Unterstreichungen werden außerdem über text-decoration per CSS definiert.

    Wenn das Bild wie du es beschrieben hast hinter den Text kommen soll, sollte es unbedingt per background eingebunden werden.

    Es in diesem Falle per <img>-Tag einzubinden verkompliziert die Sache unverhältnismäßig und ist deshalb Unfug. ;)

    koslowski

  • Interaktive Buttons erstellen?

    Moin,

    Zitat von Fitzi

    j
    und zu koslowski
    ich will das das menü so wie die taskleiste bei vista auschaut
    und ich denke mit einem einfachen javascript würd das sicher auch hinhauen, oder?

    aha, du hast dir das Tut mal kurz angeschaut und festgestellt, das es etwas mehr als copy/paste-Kenntnisse erfordert das anzuwenden.

    Dann kann ich dir leider nicht helfen.
    Am besten du beauftragst einen Profi dir das gegen Geld zu machen (Wirtschaft ankurbeln, weißt scho'! :razz: ).

  • Interaktive Buttons erstellen?

    Moin,

    Zitat von Fitzi


    4 zustände, also 1 gedrückter, 1 ungedrückter, 1 ungedrückter aber gehoverter und 1 gedrückter und gehoverter ;)

    ich kriege das aber nicht hin das wenn man den gedrückten button hovert der gedrückte und gehoverte button zu sehen ist und wenn man den ungedrückten hovert der ungedrückte gehoverte button zu sehen ist ;)

    [Häh?]gedrückt, gehovert, ungedrückt gehovert..., jetzt hast du mich verwirrt! :lol: [/Häh?]

    normal reichen zwei Zustände in einer Grafik um den Normal/Hoverzustand und den"fixiert" gehoverten für die aktuelle Seite darzustellen.
    aktiv ist ja nur der Moment des Anklickens.
    Entweder versteh ich dich nicht oder du hast das Beispiel nicht verstanden. :)
    Hast du es denn mal nachgebaut und a weng probiert?

    koslowski

  • Umbruch soll verhindert werden

    Hi,

    Zitat von Billbos

    So besser?

    nö!

    Jojo sieht das vollkommen richtig, deine XHTML-Struktur ist eine absolute Katastrophe. So wird das nix!
    Zuerst brauchst du einen alles umschließenden div (wrapper), dann ein div für die topnavi, eins für den header, eins für die linke Seite, eins für die rechte Seite und eins für den footer.

    Die linke und die rechte Seite floaten und im footer wird gecleart.

    Das sollte deine grobe Struktur sein.

    Bei deiner jetzigen Struktur werden div's geöffnet und willkürlich irgendwann wieder geschlossen, nur leider völlig falsch.

    Definiere erst mal die grobe Struktur und fülle diese dann mit den Elementen.

    koslowski

  • aufgeteilte seite, ohne Frames

    Trotzdem, die Nachteile bei Frames überwiegen eindeutig.
    Professionelle Agenturen und Webdesigner setzen Frametechnik nicht mehr ein.
    Der bessere Weg ist modernes Webdesign mit XHTML/CSS und PHP. Damit lassen sich die Vorteile der alten Frametechnik mitnehmen, ohne die Nachteile in Kauf nehmen zu müssen. ;)

  • aufgeteilte seite, ohne Frames

    Zitat von Friedel

    Frames sind übriegns nicht verboten. Es gibt sie um genau das zu machen, was du vorhast. Dass sie seit einigen Jahren out sind, ist zum Teil eine Modeerscheinung.

    sorry, aber das ist Unfug. :roll:

    Das hat mit Modeerscheinung garnix zu tun.
    Die Vorteile liegen , wenn überhaupt nur beim HP-Ersteller, für den User hat es nur Nachteile.

  • Mouseover-effekt

    Hi,

    bei meinem Tut für ein grafisches Menü hab ich noch etwas vergessen :oops: :

    Bitte den letzten Textabsatz vor dem letzten Codeabsatz wie folgt ergänzen:

    Zitat

    Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern in der hover-position stehen
    und springt nicht zurück auf die "Normal-Position".
    Dem wird durch die nachfolgende Änderung des Cond. Comm. abgeholfen.

    Den letzten Codeabsatz bitte innerhalb von "style" wie folgt ergänzen:

    Code
    * html ul a:hover {
      text-indent:0;
      }

    Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte. Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor auf das betroffene Menü angewendet wird.

    Das entspr. Tut in der Tutorialabteilung habe ich angepaßt.

    koslowski

  • background-image für Layer

    Hi,

    was soll FF denn anzeigen wenn dein header keine Ausmasse hat.
    Gib ihm ne Breite und ne Höhe, wo die Grafik reinpaßt dann siehst du auch was.

    position:absolute ist überflüssig. Laß deine Elemente im Fluß.

    Informiere dich mal über die HTML-Tags die bei XHTML erlaubt sind und code entsprechend.

  • Tutorial für Überschrift durch Bild ersetzen und trotzdem Text im Markup

    Hi,

    Tutorial zur Image-Replacement-Technik nach Gilder/Levin:

    Ein header inklusive Hauptüberschrift einfach nur in den Quelltext schreiben und per CSS ein bißchen farblich und größenmäßig gestalten ist nicht schlecht, aber auch ziemlich langweilig.
    Ein schönes Foto/Grafik mit einer gut gestylten Schrift als header, macht da doch viel mehr her.
    Das Problem ist nur, das Suchmaschinen mit Bildern nix anfangen können und unsere Hauptüberschrift sollte natürlich auch vom "Sumabot" indexiert werden können.

    Mit Gilder/Levin bekommen wir beides hin:
    einen schönen header haben und den Überschriftentext als "Futter" für die "Sumabots" im Quelltext.

    Erstellt euch zunächst mit einem Grafikprogramm eurer Wahl eine schöne Header-grafik/foto mit den Ausmassen 800x150px.
    Den nachfolgenden Code einfach in einen HTML-Editor kopieren und als htm/html-Datei im gleichen Ordner wie die erstellte Grafik abspeichern.

    Im Browser aufrufen und den Anweisungen auf dem Bildschirm folgen.

    koslowski

  • Tutorial zu einem grafischen Menü

    Hi,

    Erstellung eines einfachen, horizontalen, grafischen Menüs:

    Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
    Normalzustand ist oben in der Grafik, der Hoverzustand darunter.


    Doctype ist "strict" um immer im Standardmodus zu sein.
    Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.

    Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
    Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin

    XHTML:

    Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:

    <a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
    overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
    Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):

    Code
    a,
 strong  {
      position:relative;
      overflow:hidden;
      display:block;
      width:100%;
      height:40px;
}

    Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:

    Der untere Teil der Grafik wird durch das "hovern" per background-position ins Bild geschoben:

    Code
    #navi01 a:hover span,
#navi01 a:focus span,
#navi02 a:hover span,
#navi02 a:focus span,
#navi03 a:hover span,
#navi03 a:focus span  {
    background-position:0 -40px;
}

    Mmh..., und damit ist auch der IE einverstanden??
    Nicht ganz:
    Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss.
    Das wird ihm per CC wieder beigebracht.
    Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern in der hover-position stehen
    und springt nicht zurück auf die "Normal-Position".
    Der dafür definierte Hack mit text-indent ist einfach und zuverlässig.

    Code
    <!--[if lte IE 7]>
  <style type="text/css">
   ul a span  {
    cursor:hand;
}
  * html ul a:hover {
      text-indent:0;
      }
  </style>
<![endif]-->

    Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte. Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor auf das betroffene Menü angewendet wird.

    Hoffe es ist verständlich beschrieben.

    koslowski

  • Mouseover-effekt

    Hallo driver,

    Zitat von driver

    @ koslowski
    guter beitrag. kannst da evtl auch einen dafür im skript-archiv erstellen ?
    denk des kann ma öfter mal brauchen...

    danke. :oops:

    Du meinst die Sparte in der Programmier/Entwicklungsabteilung??
    Kann ich machen. :)

    Ach ja, ich hab auch noch ein Tut zu Gilder/Levin erstellt, weil man das mit der "Überschrift durch Bild ersetzen und trotzdem Überschriftentext im Markup" ja auch öfter braucht.

    Wäre sowas auch fürs Scriptarchiv interessant?

    koslowski

  • Mouseover-effekt

    Hi,

    wir erstellen ein einfaches grafisches Menü.

    Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
    Normalzustand ist oben in der Grafik, der Hoverzustand darunter.


    Doctype ist "strict" um immer im Standardmodus zu sein.
    Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.

    Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
    Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin

    XHTML:

    Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:

    <a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
    overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
    Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):

    Code
    a,
 strong  {
      position:relative;
      overflow:hidden;
      display:block;
      width:100%;
      height:40px;
}

    Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:

    Der gehoverte Zustand wird definiert:

    Code
    #navi01 a:hover span,
#navi01 a:focus span,
#navi02 a:hover span,
#navi02 a:focus span,
#navi03 a:hover span,
#navi03 a:focus span  {
    background-position:0 -40px;
}

    Es wäre ja ein Wunder, wenn der IE sich damit zufriedengeben würde.
    Er hat aber plötzlich vergessen, beim überfahren des Links aus dem Pfeil eine Hand zu machen.
    Das wird ihm per CC wieder beigebracht:

    Code
    <!--[if lte IE 7]>
  <style type="text/css">
   ul a span  {
    cursor:pointer;
}
  </style>
<![endif]-->

    Hoffe es ist verständlich beschrieben. :)

    koslowski

  • Mouseover-effekt

    Hi driver,

    Zitat von driver

    musst mal ganz durchlesen *G*
    die tabelle wird unten durch divs ersetzt. is immerhin n fortschritt.
    wobei des ganze dann natürlich zu ner divsuppe verkommen könnte...

    hab ich, ich hatte kein Problem.
    Aber auf jemand der sich noch nicht so auskennt, könnte das verwirrend wirken.
    Ne divsuppe ist auch nicht nötig bei grafischen Menüs.