kostenloser Webspace werbefrei: lima-city


fensterbreite auslesen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    t-li2

    Kostenloser Webspace von t-li2, auf Homepage erstellen warten

    t-li2 hat kostenlosen Webspace.

    hallo erstmal.

    ich habe eine internetseite http://t-li.lima-city.de/vorschau, deren navigation ich um javascript elemente erweitern möchte: wenn ich mit der maus über einen menüpunkt fahre soll sich ein untermenü ausklappen (etwa http://t-li.lima-city.de/vorschau/menu.php). den quelltag/code">code dafür habe ich so weit fertig, jedoch beim versuch das ganze einzubetten, traten fehler auf.

    1) wenn ich das menü in tabellenform einfüge, funktioniert es überhaupt nicht.
    2) wenn ich das menü mit div-containern einbaue, bekomme ich bei den einzelnen menüpunkten positionierungsprobleme.

    so weit, so schlecht: ich habe mir überlegt, dass ich das menü von links um 50% der browserbreite entferne, dann wieder um 3 mal 120 pixel annähre, und dann je menüpunkt wieder um 120 pixel entferne (die breite eines menüpunktes beträgt 120 pixel, es sind 6 menupunkte).

    meines wissens nach kann man in html etc jedoch nicht prozentangaben und pixelangaben kombinieren. deswegen wollte ich wissen, ob man mittels js eine möglichkeit hat, dieses problem zu lösen? Also zb fensterbreite auslesen, halbieren um die 50% zu erreichen und dann weiter wie oben beschrieben??


    falls weitere fragen zu den gegebenheiten anfallen, bitte stellen: ich wollte bloß nicht alles gleich hier rein schreiben.

    freue mich riesig, wenn mir jemand helfen kann!!!

    mfg t-li

    Beitrag zuletzt geändert: 5.7.2010 19:14:41 von t-li2
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. eine ähnliche frage hatte auch schon jemand im Selfhtml-Forum

    http://forum.de.selfhtml.org/archiv/2002/1/t3315/

    generell gilt: mit window.innerWidth bzw window.innerHeight bekommst du die Breite und Höhe des für die Webseite zur Verfügung stehenden Platzes. Für den IE muss man (wie so oft) wieder eine extra Abfrage einbauen.

    mfg
  4. Das mit deinen Menüpunketen á 120 px ist nicht schlecht, aber warum zentrierst du dein menü nicht einfach (bzw. einen Container, dessen Inhalt du darin dann ja beliebig verschieben kannst)?


    PS: Warscheinlich hattest du das noch vor, aber deine Links sollten evtl. noch mit dem CSS-code "cursor:pointer" ausgezeichnet werden, da sonst nicht sofort klar ist, dass es hierbei nicht um einfache Schrift handelt ;)
  5. Autor dieses Themas

    t-li2

    Kostenloser Webspace von t-li2, auf Homepage erstellen warten

    t-li2 hat kostenlosen Webspace.

    @kamel: das mit dem zentrieren hat irgendwie nicht so ganz geklappt...

    den css cursor hab ich auch, bzw. sollte ich eigentlich gehabt haben. auf meinem xammp ist es korrekt, kann sein dass ich beim hochladen was vergessen hab ;-))

    @syberspace: danke schon mal; noch ne frage: muss ich das dann quasi so machen?

    obj = getElementById(id)

    obj.style.left = window.innerWidth-480+i*120

    ??

    (also vom prinzip her)

    beziehungsweise gibt es style left überhaupt??

    Beitrag zuletzt geändert: 6.7.2010 14:53:54 von t-li2
  6. Warum so umständlich ?, außerdem, wie kommt man auf die Folgeseiten wenn JS deaktiviert ist ???, dass Tabellenkonstrukt bläht den Quelltext auch reichlich auf.
    Warum nicht eine Kombination aus CSS und JS, so kannst du für den Fall das JS bei einigen deaktiviert ist eine Navigationsseite anlegen das auch diese Leute weiterkommen.

    Schau mal hier: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm , die Hauptnavigation funktioniert auch mit abgeschalteten JS und du kannst dies per CSS in jedem Punkt an deine Seite anpassen

    Mfg

    Beitrag zuletzt geändert: 6.7.2010 17:33:03 von pro45
  7. Autor dieses Themas

    t-li2

    Kostenloser Webspace von t-li2, auf Homepage erstellen warten

    t-li2 hat kostenlosen Webspace.

    danke sehr. ich habe das ausprobiert, ist nicht schlecht, aber da sind zwei fragen:

    wie kann ich dabei die breite jedes listenelements auf 120px setzen? ich hab's bis jetzt noch bicht rausgefunden...

    wie erkenne ich, ob js aktiviert ist? (es mag komisch klingen, aber ich hab noch nie ein html- oder javascript tutorial durchgemacht und das css tutorial auch nur 'am rande')


    mfg
  8. Von nix wird nix, ein wenig mit der Materie beschäftigen solltest du dich schon !
    Die Listenelemente sind in der CSS Datei definiert, dort kannst du alles anpassen, am einfachsten wäre in deinem Fall für jede Schaltfläche eine Grafik zu erstellen und diese anstelle des Textes zu setzten, in der CSS steht eine Klasse namens .tab li , diese ist mit "display: inline;" ausgezeichnet, wenn du diese auf "display: inline-block;" setzt kannst du Breite und Höhe für die Listenelemente angeben, mit "display: inline;" richtet sich die Größe nach der Länge des Textes + die Angabe für Padding left und right.

    Zum Thema JS aktiv oder nicht kann ich dir nur sagen das du das so wie du dir das vorstellst nicht erkennen kannst, du kannst lediglich auf deiner Seite ein "noscript tag" setzten der dem Besucher informiert das er kein JS aktiviert hat und dies doch biiteschön tun soll, z.B: <noscript> Unsere Website benötigt Javascript, dies ist bei Ihnen leider deaktiviert . . . bla bla . . . </noscript>, ob die User das letztendlich machen ist ne andere Frage.
    Besser ist halt in diesem Fall eine Dummyseite einzurichten auf der alle Links die mit JS erscheinen würden anzubieten.

    Thema lernen, guckst hier:
    HTML: http://www.htmlbasis.de/inhalt.htm, hier gibts auch etwas JS
    CSS: http://www.css4you.de

    mfg
  9. Autor dieses Themas

    t-li2

    Kostenloser Webspace von t-li2, auf Homepage erstellen warten

    t-li2 hat kostenlosen Webspace.

    also das mit dem noscript hab ich im verlauf des tages auch selber rausgefunden, hab jetzt einen hinweis, einen link zu einer erklärung, eben jene erklärung und ein alternativmenü erstellt. trotzdme danke.

    was die standfestigkeit in der materie betrifft: das ich nie ein entsprechendes tutorial gemacht hab, muss ja nicht heissen, dass ich kein bisschen in der materie stehe...

    was inline-block betrifft: wie setze ich da die pixelangabe?
    beziehungsweise: bei meinem früheren Versuch hatte ich die breite in der datei index.php direkt festgelegt, undzwar mit der variable $tdwidth, die den wert
    $tdwidth= 100/$pages; $tdwidth.= '%';
    hatte (Gesamtbreite der tabelle war 720 pixel, $pages = 6, daher 1 Seite = 120 px);
    gibt es hierbei auch eine möglichkeit, das im quelltext direkt zu setzen?(meines wissens nach kann man php nicht in css-dateien einbinden )

    für's auge: http://t-li.lima-city.de/vorschau2/

    mfg

    Beitrag zuletzt geändert: 7.7.2010 21:23:46 von t-li2
  10. Sieht doch schon recht gut aus !

    was die standfestigkeit in der materie betrifft: das ich nie ein entsprechendes tutorial gemacht hab, muss ja nicht heissen, dass ich kein bisschen in der materie stehe...

    Nun, das du nicht ganz aus der Welt bist hast du jetzt ja gezeigt ;-)

    Die CSS solltest du wie folgt ändern:

    .chromestyle ul{
    border: 0;
    width: 100%;
    /*background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    background-color: #BF8E2E;
    padding: 4px 0;
    margin: 0;
    text-align:center; /*set value to "left", "center", or "right"*/ /*----------so kannst du das <center></center> weglassen---------*/
    }

    /* feste Breite der Navigation */
    .chromestyle ul li {
    background-color: #BF8E2E;
    display: inline-block;
    width: 120px;
    }
    /* fügt Hover-Effekt für die ganze Zeile hinzu */
    .chromestyle ul li:hover {
    background-color: #F2DD60;
    display: inline-block;
    width: 120px;
    }

    CSS Anweisungen kannst du auch per "style="" " direkt an der Stelle einfügen wo es erforderlich ist, so auch in einer PHP, z.B: style ="$tdwidth; $tdheight;", sollte an anderer Stelle natürlich definiert sein.
    PHP in einer .css auszuführen funktioniert nicht.

    Was mir noch aufgefallen ist, ist das alle Links bei dir per onclick also mit JS funktionieren:
    <a onclick="gotoELink('index.php?page=1&intro=0');" rel="dropmenu1" attr="#" >Home</a>

    ...warum nicht mit href atrtribut ?
    <a href="index.php?page=1&intro=0" rel="dropmenu1">Home</a>

    so klappts auch ohne JS und Suchmaschienen finden diese Seite auch !

    Noch ein Tipp, in PHP sollte & maskiert werden, richtig ist => &amp;

    Viel Spass noch beim Basteln
    mfg


  11. Autor dieses Themas

    t-li2

    Kostenloser Webspace von t-li2, auf Homepage erstellen warten

    t-li2 hat kostenlosen Webspace.

    das mit dem &: meinst du bei
    AGB & Co.
    ??

    (der erste absatz wurde wegen dummheit gelöscht ;-// )

    was <a href="... betrifft, die wollte ich eigentlich nicht, weil ich es aus irgendeinem grund doof fand... (fällt mir i-wann nochmal ein).
    dann hab ich das mit onclick gesehen, fand ich gut, hab ich gemacht. wieso können suchmaschinen das nicht verfolgen??

    die .css datei ändern mach ich nachher, erstmal muss ich was essen ;-))

    mfg, t-li

    Beitrag zuletzt geändert: 9.7.2010 15:46:45 von t-li2
  12. i******g

    Hallo

    ich bekomme keine Werte mit screen.availwidth und screen.availheight ?!

    <script type="text/javascript" language="javascript">
       var sx = screen.availwidth;  
       var sy = screen.availheight; 
       document.write('breite:<b>'+sx+'</b> hoehe:<b>'+sy+'</b>  ');
      </script>



    Ausgabe: (FF 3.6)

    breite:undefined hoehe:undefined

    ?!???
  13. Groß- und Kleinschreibung beachten :-)

    http://www.w3schools.com/jsref/prop_screen_availwidth.asp
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!