ComputerBase Menü
Aktuelles

[Homepage] Drop Bar

R

-=Renegade=-

Lt. Junior Grade
Registriert
Nov. 2006
Beiträge
430
[Homepage] Verändern der Bildgröße

Hi!

Also ich hab wieder ein neues Problem:
Bei meiner Homepage würd ich gern ein Logo einbauen, welches 992 Pixel breit ist. Um Horizontales Scrolling zu verhindern, würd ich gern die Größe des Bildes dynamisch ändern. Da 100% aber nicht möglich ist, da Browserfenster mit Breiten von 1200 Pixel keine Seltenheit mehr sind und das Bild sonst gedehnt werden würde, hab ich mir folgende Lösung überlegt:
Code: 
<script language='javascript'>
if (window.innerWidth >= 992) {
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="82%" name="Logo" border="0"></a>')
} else {
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="100%" name="Logo" border="0"></a>')
}
</script>
Das Problem hierbei allerdings ist, dass sich die Größe beim verändern des Browserfensters nicht mitverändert, man müsste die Seite dazu aktualisieren. Deshalb meine Frage: Gibt es einen EventHandler, mit dem man auf das Verändern der Browserfenstergröße Einfluss nehmen kann?

Oder gibt es gar die Möglichkeit, die Größe eines Fenster per Variable (mit Formel) zu regeln. Denn bis jetzt hab ich das nich geschafft :(


so far
thx & mfg

Alte Frage schrieb:
Hi!


Ich würde gerne bei meiner Homepage eine Drop Bar (nenntman das so?) integrieren. Also wenn ich drafuklicke, dass weitere Untermenüs heruntergeklappt werden. (Ich weiß jetzt nicht genau wie das bei euch mit Werbung ist, also werd ich erstmal nicht auf eine andere bekannte Computerseite verlinken, die sowas hat und erstmal Regeln lesen ;))

Hoffe das sich jeder auskennt, ansonsten bei Google einfach mal Drop Bar Menü eingeben.

Womit ich dann auch schon bei meinem eigentlichen Problem wäre, denn diese Drop Bars hab ich bis jetzt nur als Flashlösungen gefunden. Gibt es sowas auch für HTML / JavaScript / ... und wenn ja, hätte da wer nen ungefähren Code für mich?


so far
thx & mfg
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Aw: [css]

Ja, hab ich ...
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=utf-8" />
<title>Drop Down</title>

[COLOR="RoyalBlue"]<style type="text/css">
/*<![CDATA[*/
  body, p a {
    font: normal 100.01% Helvetica, tahoma, sans-serif;
    color: black; background-color: #ffffff;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {
    margin-bottom: -0.4em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;
  }
  * html ul#Navigation li ul {
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: ff0000; background-color: #eeeeee;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell { 
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {
    background-color: ff0000;
  }

/*]]>*/
</style>[/COLOR]
</head>
<body>
<div id="Rahmen">
<ul id="Navigation">
<li><a href="#Beispiel">Menues</a>
<ul>
<li><a href=
"http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern">Drop
Down Menue</a></li>

<li><a href="http://rheinbreitbach.net/js-menue/">JavaScript
Menue</a></li>
</ul>
</li>
<li><a href="#Beispiel">Forumbase</a>
<ul>
<li><a href="https://www.computerbase.de/forum/">CB-Forum</a></li>
<li><a href="https://www.computerbase.de/forum/threads/homepage-drop-bar.246426/">Artikel</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
 
<select name="cb_test" size="1">
<option>ComputerBase Forum</option>
<option>Computerbase Homepage</option>
<option>Google</option>
</select>
 
davidbaumann schrieb:
Hmm nennt sich doch eher Dropdown Menü, oder?
Falls du suchen willst.

David
Zum Vergrößern anklicken....

Das gesuchte nennt sich höchstens Drop Bar Menü.

Frostbeule2k schrieb:
<select name="cb_test" size="1">
<option>ComputerBase Forum</option>
<option>Computerbase Homepage</option>
<option>Google</option>
</select>
Zum Vergrößern anklicken....

Das wäre das Beispiel eines Drop Down Menüs, sowas hab ich allerdings nicht gesucht.

@CharlesCalthrop: Danke, genau sowas hab ich gesucht. Werd mir den Sourcecode mal genauer durchsehen, aber vom Prinzip her sieht das schon mal klasse aus.

Für alle, die nicht viel coden wollen, hab ich mir Deluxe Menü ergoogelt, einfach zu bedienen und den Trial Version Flag kann man bei einer Non Profit Homepage sogar kostenlos wegmachen lassen. Zudem ist das ganze Script basiert, also kein Flash usw.

Habs selbst ausprobiert und man kann mit wenig Zeitaufwand was ziemlich tolles hinzaubern (Veränderungen werden direkt auf eine Vorschau übertragen und angezeigt)

Das wars erstmal, danke nochmal ;)

so far
mfg
 
Hi!

Also ich hab wieder ein neues Problem:
Bei meiner Homepage würd ich gern ein Logo einbauen, welches 992 Pixel breit ist. Um Horizontales Scrolling zu verhindern, würd ich gern die Größe des Bildes dynamisch ändern. Da 100% aber nicht möglich ist, da Browserfenster mit Breiten von 1200 Pixel keine Seltenheit mehr sind und das Bild sonst gedehnt werden würde, hab ich mir folgende Lösung überlegt:
Code: 
<script language='javascript'>
if (window.innerWidth >= 992) {
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="82%" name="Logo" border="0"></a>')
} else {
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="100%" name="Logo" border="0"></a>')
}
</script>
Das Problem hierbei allerdings ist, dass sich die Größe beim verändern des Browserfensters nicht mitverändert, man müsste die Seite dazu aktualisieren. Deshalb meine Frage: Gibt es einen EventHandler, mit dem man auf das Verändern der Browserfenstergröße Einfluss nehmen kann?

Oder gibt es gar die Möglichkeit, die Größe eines Fenster per Variable (mit Formel) zu regeln. Denn bis jetzt hab ich das nich geschafft :(


so far
thx & mfg
 
Es gibt den resize-Event bzw. den onresize-Eventhandler für das window-Objekt, wobei es beim IE6 einige Bugs gibt.

greetings, Keita
 
Also ich hab das ganze jetzt über folgende Funktion geschafft:
functions.js:
Code: 
function curwidth () {
  if (window.innerWidth) {
    return window.innerWidth;
  } else if (document.body && document.body.offsetWidth) {
    return document.body.offsetWidth;
  } else {
    return 0;
  }
}

function curheight () {
  if (window.innerHeight) {
    return window.innerHeight;
  } else if (document.body && document.body.offsetHeight) {
    return document.body.offsetHeight;
  } else {
    return 0;
  }
}

function updwindow () {
  if (xwidth != curwidth() || xheight != curheight())
    location.href = location.href;
}

if (!window.xwidth && window.innerWidth) {
  window.onresize = updwindow;
  xwidth = curwidth();
  xheight = curheight();
}
Hauptseite: (functions.js wird im Header geladen)
Code: 
  if (window.innerWidth >= 992) {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="992" name="Logo" border="0"></a>');
  } else if (window.innerWidth <= 50) {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="50" name="Logo" border="0"></a>');
    history.go(0)
  } else {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="' + xwidth + '" name="Logo" border="0"></a>');
  }
Quelle

Allerdings hab ich jetzt noch ein kleines Problem dabei: Die Seite aktualisiert sich unter Firefox 2 ständig. Das ist vor allem dann nervig, wenn die Lesezeichen Liste aktiviert ist und man die Seite kleiner als die Lesezeichen macht, denn dann taucht der Resize Pfeil kaum bis gar nicht mehr auf (es geht auch ohne, aber es könne Leute abschrecken)
Zudem lädt eben die Seite wie gesagt nie fertig, d.h. in der Statusleiste arbeitet immer eine blaue Leiste, auch das sieht eher unschön aus.

Mein Ansatz wäre folgender gewesen:
Code: 
<script type="text/javascript">
if (curwidth != window.innerwidth) {
  if (window.innerWidth >= 992) {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="992" name="Logo" border="0"></a>');
  } else if (window.innerWidth <= 50) {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="50" name="Logo" border="0"></a>');
    history.go(0)
  } else {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="' + xwidth + '" name="Logo" border="0"></a>');
  }
}
</script>

Allerdings bringt das keine Veränderung. Gibt es hier vllt. eine Möglichkeit?

Und noch eine Frage hätte ich gleich:
Wie kann man bei den Lesezeichen ein anderes Symbol wie das weiße Blatt Papier unter Firefox oder eben das IE Symbol unter IE bringen?
Vom Quelltext anderer Seiten hätte ich im Header:
Code: 
<link rel="shortcut icon" href="/favicon.ico">
Allerdings funktioniert das bei mir nicht und ich bin mir auch nicht 100% sicher, ob es so funktionieren sollte. Zudem teste ich die Seite offline, keine Ahnung ob das eine Auswirkung hat.

Das wars erstmal,
so far
thx & mfg
 
Jetzt wo ich es lese, fällt mir auch wieder ein, daß gecko-basierte Browser ebenfalls lustige Dinge beim/mit dem onresize-Eventhandler veranstalten können... Bei diesen Browsern kann der event mit etwas Pech (den man im Surf-Alltag mit FF in diesem Zusammenhang relativ häufig haben kann...) permanent gefeuert werden, d.h. es kann passieren, daß FF in einer resize-Schleife hängt und auf langsameren Rechnern schlicht nicht mehr reagiert :(
Bei den Gecko-Browsern könnte du das Problem alternativ mit CSS lösen, da diese Browser sowohl min-width als auch max-width bei allen Elementen verstehen, d.h. du könntest eine relative Standardbreite für das Bild und zusätzlich mit min-width und max-width die Ober- und Untergrenzen festlegen:

Code: 
[...]
<style type="text/css">
#myLogo {
width: 100%;
min-width: 50px;
max-width: 992px;
}
</style>
[...]
<img id="myLogo" src="img/rss_logo_l.png" width="992" name="Logo" border="0" />
[...]

Verweise mit absolutem Pfad funktionieren bei Offline-Tests i.d.R. nicht, da der Browser diese 1:1 auf das Dateisystem mappt, d.h. eine Pfadangabe wie /favicon.ico bezieht sich auf unixoiden System auf die Datei /favicon.ico, bei Windows entsprechend auf c:\favicon.ico. Wenn es offline ebenfalls funktionieren soll, müßtest du mit relativen Pfadangaben arbeiten, was allerdings bei der erstellung der (statischen) Seiten natürlich einiges an Handarbeit bedeutet, alternativ wäre die Installation eines httpd sicherlich nicht verkehrt, ein Apache ist in wenigen Minuten installiert und funktioniert auch unter Windows hervorragend.

greetings, Keita
 
So, um nochmal auf die DropBar von CharlesCalthrop zurückzukommen:

Ich hab das ganze jetzt für meine Bedürfnisse abgestimmt, herausgekommen ist dabei folgendes:

(Anmerkung: Ich hab das ganze in eine externe Funktion gepackt, damit ich bei Änderungen nicht wieder alle Seiten umändern muss)

dropbar.css
Code: 
.dropbarbox {
    background-image:url(../img/table_back.png);
    padding:12px; 
    margin:0px;    
    width:50px;
  }

.dropbar {
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    display: none;
  }

  ul#Navigation li:hover ul {
    display: block;
  }

  ul#Navigation li ul li {
    float: none;
    display: block;
  }

  ul#Navigation a, ul#Navigation span {
    font:  normal tahoma, sans-serif;
    display: block;
    width: 6.4em;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    color: #ff0000; background-image:url(../img/table_back.png);
  }

  ul#Navigation a:hover, ul#Navigation span {
    color: #0099FF; background-color: gray;
  }
}

dropbar.js
Code: 
function dropbar() {
  document.write('<p class="dropbarbox"></p>')
  document.write('<p class="dropbar">')
  document.write('<ul id="Navigation">')
  document.write('<li><a href="index.html">Home</a></li>')
  document.write('<li><a href="#News">News</a>')
  document.write('<ul>')
  document.write('<li><a href="news/findnews.php">Find</a></li>')
  document.write('<li><a href="news/newscategory.php">Category</a></li>')
  document.write('<li><a href="news/archiv.php">Archiv</a></li>')
  document.write('</ul></li>')
  document.write('<li><a href="#docs">Documents</a>')
  document.write('<ul>')
  document.write('<li><a href="docs/informations.html">Information Sheets</a></li>')
  document.write('<li><a href="docs/scripts.html">Scripts</a></li>')
  document.write('</ul></li>')
  document.write('<li><a href="#downloads">Downloads</a>')
  document.write('<ul>')
  document.write('<li><a href="downloads/software.html">Software</a></li>')
  document.write('</ul></li>')
  document.write('<li><a href="#com">Community</a>')
  document.write('<ul>')
  document.write('<li><a href="community/forum.php">Forum</a></li>')
  document.write('<li><a href="community/chat.php">IRC-Chat</a></li>')
  document.write('</ul></li>')
  document.write('<li><a href="#about">About</a>')
  document.write('<ul>')
  document.write('<li><a href="about/features.html">Features</a></li>')
  document.write('<li><a href="about/team.html">Team</a></li>')
  document.write('<li><a href="about/links.html">Links</a></li>')
  document.write('</ul></li>')
  document.write('</ul></p>')
  document.write('<p class="dropbarbox"></p>')
}

Das ganze sieht auch sehr schön aus, allerdings hab ich 2 Probleme dabei:
Vor und nach der Menüleiste sollte noch etwas Freiraum bleiben, und zwar in Form der .dropbarbox. Obwohl ich jetzt auch den Hauptteil in ein <p class> gepackt habe, schaffe ich es nicht, vorne und hinten etwas anzustückeln. Zudem wäre es schon mal hilfreich, das ganze Menü zu zentrieren, auch das hab ich leider nicht geschafft :(

Das zweite Problem besteht darin, dass ich gerne nach der Hauptmenüleiste einen kleinen Abstand hätte, allerdings dann nicht zwischen den einzelnen Unterpunkten. Bisher ist mir das nur gelugen, in dem dann für alle ein Abstand da war (margin-top:0.5em hat auch bei den Unterpunkten einen Abstand gemacht)


so, hoffe es kann mir wer helfen, bin mit meinem Latein leider am Ende :(

so far
thx & mfg

Edit: Keiner ne Ahnung? :(
 
Zuletzt bearbeitet:
Das ganze sieht auch sehr schön aus, allerdings hab ich 2 Probleme dabei:
Vor und nach der Menüleiste sollte noch etwas Freiraum bleiben, und zwar in Form der .dropbarbox. Obwohl ich jetzt auch den Hauptteil in ein <p class> gepackt habe, schaffe ich es nicht, vorne und hinten etwas anzustückeln. Zudem wäre es schon mal hilfreich, das ganze Menü zu zentrieren, auch das hab ich leider nicht geschafft :(

Du hast einen Fehler... Paragraph-Elemente dürfen keine weiteren Blocklevel-Elemente enthalten, <p class='dropbar'> muß daher durch <div class='dropbar'> ersetzt werden.
Wenn du vor und hinter dem Menu Abstände haben möchtest, solltest du ihn mittels padding oder margin für die Klasse dropbar realisieren. Da diese Abstände zudem mit einem Hintegrundbild versehen sein sollen, bietet sich in diesem Fall padding an:

Code: 
.dropbar {
    background-image:url(../img/table_back.png);
    padding:12px 0px; 
}

ul#Navigation {
    background-color: white; /* Hintergrundbild überpinseln */
    ... 
}

Auf leere P-Elemente sollte man tunlichst verzichten, sie werden je nach Browser schlicht gar nicht gerendert.


Wenn untergeordnete Listen-Elemente keine Abstände haben sollen, reicht es aus ihnen explizit einen Wert von 0px zuzuweisen:

Code: 
ul#Navigation ul li  {
  margin-top: 0px;
}

Auf diese Weise werden alle Listen-Elemente von allen untergeordneten Listen ohne oberen Abstand gerendert.


Übrigens hast du einen eklatanten Fehler im CSS, du kannst nicht Selektoren verschachteln:

Code: 
.dropbar {
  ul#Navigation {
    ...
  }
  ...
}

geht nicht (auch wenn scheinbar manche Browser sich was daraus zaubern), kaskadierende Elemente werden durch "kontextuelle Selektoren" angesprochen:

Code: 
.dropbar ul#Navigation {
  ...
}

Da eine ID aber sowieso eineindeutig sein muß, kann man in diesem Fall auf .dropbar verzichten.

greetings, Keita
 
Hm, kleine Zwischenfrage:

Kann man CSS Werten auch JavaScript Variablenwerte übergeben? Also: padding:jsvar;

Und wo muss die Variable dann definiert sein? Ich habs im Header des Hauptdokuments probiert, allerdings ohne Erfolg :(

Dein Script funktioniert zwar vom Prinzip her, also ich hab es geschafft, hinter das Objekt eine Hintergrundgrafik zu legen und kann jetzt links und rechts abstand halten, allerdings ist das Objekt immer durchgehend, also auch hinter dem Menü. Das Problem dabei sind die PNG Grafiken, die ja halbtransparent sind, und bei einer Überlagerund anders aussehen. Naja, aber ich arbeite daran, vllt schaff ichs ja ;)

Edit: Also soweit hätt ichs geschafft, dass nur der Platz rechts bis zum Ende des Browsers gefüllt wird. Um das ganze jetzt allerdings zu zentrieren, bräuchte ich eben die Möglichkeit, die Breite mit JavaScript zu steuern. Denn die Breite des Browsers ist ja unterschiedlich, und mit window.innerWidth könnte man das ja halbwegs auslesen.

Und noch eine Frage hat sich eben ergeben: Direkt unter dem Menü befindet sich ein kleines Bild, ganz links am Rand. Wenn ich nun den Browser verkleinere, stapeln sich die Menüpunkte in einer neuen Leiste, allerdings bleibt das Bild dann nicht auch unter der zweiten Leiste, sonder setzt sich, sofern Platz, an das Ende dieser Leiste. Ich hab es schon mit eigenen <div> und <p> tags probiert, deren Klasse ein margin-top enthielt, allerdings hat das nichts gebracht :(


so far
mfg
 
Zuletzt bearbeitet:
Derzeit kann wohl nur der IE innerhalb von CSS-Anweisungen auch JavaScript verwursten, was schlimm genug ist :D Du hast aber jederzeit per Script Zugriff auf alle Elemente der Seite, das gilt auch für die style-Eigenschaft:

Code: 
<script type="text/javascipt">
//<![CDATA[

  document.getElementById('Navigation').style.padding = '100px';

//]]>
</script>

Auf diese Weise weist du dem Element mit der ID 'Navigation' einen Padding-Wert von 100px zu.

Für dein zweites Problem fehlt mir gerade irgendwie die Fantasie, hast du vielleicht mal ein Beispiel online verfügbar?

greetings, Keita
 
Hm, also document.GetElementById() funktioniert in meinem Fall nicht, da ich mit Class darauf zugreife (das CSS File .dropbarbox {, der Zugriff erfolgt durch <div class="dropbarbox"></div>)
Mit document.GetElementById() kann ich aber nur auf id=dropbarbox zugreifen, was wiederum ebenfalls nicht funktioniert, eventuell müsste ich dazu das CSS File umschreiben?

Zum anderen Problem:

Also es geht um diesen Pfeilartigen Button, hier drei Bilder, das Problem erklärt sich eigentlich von selbts :)




Es entsteht eben, wenn man die Browserweite verkleinert, die Dropbar (oder Teile davon) sich dadurch nach unten setzt, den Button jedoch nicht mitnimmt.


so far
thx & mfg
 
Für das erste Problem müßtest du dem UL-Element, welches mittels JavaScript beeinflußt werden soll, eine ID zuweisen. Alternativ kannst du auch alle UL-Elemente eines Elternelements (im schlimmsten Fall von document) mittels getElementsByTagName() ermitteln, über diese NodeList iterieren und gucken, ob dem UL die Klasse dropbarbox zugewiesen ist:

Code: 
var lists = document.getElementsByTagName('ul');
for (var i = 0, j = lists.length; i < j; ++i) {
  if (lists[i].className.indexOf('dropbarbox') >= 0) {
    lists[i].style.width = neueBreite;
  }
}


Das zweite Problem:
Wenn die LI-Elemente mittels float nebeneinander platziert werden und das floating nicht beendet wird, sind auch alle folgenden Elemente vom float betroffen, in diesem Fall das auf die Navigation folgende Bild.
Es gibt zwei Möglichkeiten, um Floats zu beenden: die klassische Variante mit clear und die elegante mit overflow:

Code: 
<ul>
  <li style='float: left'>Home</li>
  <li style='float: left'>News</li>
  <li style='float: left'>Documents</li>
</ul>
<img style='clear: both' />

oder

<ul style='overflow: hidden'>
  <li style='float: left'>Home</li>
  <li style='float: left'>News</li>
  <li style='float: left'>Documents</li>
</ul>
<img />

Letztere Variante hat den Vorteil, daß das Floating lokal begrenzt wird, es ist also egal, was danach folgt, wohingegen bei der ersteren das Floating von einem nachfolgenden Element aufgehoben werden muß.
Beispiel 2 funktioniert aber nicht (100%ig) im IE, da er diesbzgl einen Bug hat: das Element, welches das Floating mittels overflow: hidden beenden soll, muß eine Breiten- oder Höhenangabe enthalten, damit der IE den overflow richtig anwendet:

Code: 
<ul style='overflow: hidden; width: 100%'>
  <li style='float: left'>Home</li>
  <li style='float: left'>News</li>
  <li style='float: left'>Documents</li>
</ul>
<img />

greetings, Keita
 
Hm, also das zweite Problem hat sich damit erledigt, danke :)

Beim ersten Problem allerdings bin ich nach wie vor:
Ich hab dem ganzen jetzt gleich eine ID im ul Tag zugeordnet, also:

Code: 
ul#dropbarbox {
    background-image:url(../img/table_back.png);
    padding-top:13px; padding-right:30px; padding-bottom:13px; padding-left:30px;
    margin-left:806px
}

Die entscheidende Zeile wird in der Funktion dropbar() aufgerufen:
Code: 
function dropbar() {
...
  document.write('<ul id="dropbarbox"></ul>')
...
}

Wenn ich nun die Zeile
Code: 
document.getElementById('dropbarbox').style.margin-left = '700px';
irgendwo hinsetzte (also vorher oder nachher, kann er alles, was auf diese Zeile folgt und Java Script ist, nicht mehr darstellen. Steht sie in der Funktion, aber vor der Zeile, dann kann er die ganze Funktion nicht mehr darstellen.

Nimmt man das -left weg, damit nur mehr margin dasteht, akzeptiert er das ganze zwar, ändert aber nichts daran. Selbes gilt für marginleft, das passt ihm zwar, er ändert aber nichts daran (Browser: Firefox)

so far
mfg
 
Der dash (Minuszeichen) ist in nahezu allen Programmiersprachen der arithmetische Operator für die Subtraktion, ergo kann margin-left gar nicht klappen, genauer gesagt versucht die Engine aus der Zeile
Code: 
document.getElementById('dropbarbox').style.margin - left = '700px';

zu machen und das dürfte nur äußerst selten von Erfolg gekrönt sein ;)
Korrekt wäre
Code: 
document.getElementById('dropbarbox').style.marginLeft = '700px';

Desweiteren funktioniert der Zugriff auf das DOM nur dann, wenn die Seite fertig gerendert ist, da erst dann der DOM-Baum komplett aufgebaut ist, vorher gibt es das Element mit der ID dropbarbox noch gar nicht. Du darfst also den Code erst dann ausführen, wenn bspw. der load-Event des Fenters gefeuert wird:

Code: 
window.onload = function () {
  document.getElementById('dropbarbox').style.marginLeft = '700px';
}

oder

Code: 
<body onload="document.getElementById('dropbarbox').style.marginLeft = '700px'">

greetings, Keita
 
So, als erstes möcht ich mich mal bei dir bedanken, Keita.
Immerhin hast du mir jetzt schon mehr als einmal geholfen und betreust meinen Thread ja fast schon wie ein Lehrer die Aufgaben des Schülers (und das ist ganz und gar nicht negativ gemeint, im Gegenteil ;))

Das Standarddesign der Seite ist großteils jetzt auch schon fertig, nur allgemein hab ich noch 2 kleinere Probleme:

Code: 
function bookmarksite() {
  var url = String(window.location);
  window.sidebar.addPanel('Welcome to Red Star Studios', url, "")
}

Damit kann ich das Bookmark in Firefox zwar abspeichern, allerdings wird es mit der Eigenschaft 'Load this bookmark in the Sidebar' eingefügt, was es dann auch macht, d.h., wenn man das Bookmark anklickt, öffnet sich die Seite in der Lesezeichenleiste anstatt im normalen Browserfenster. Kann man das Laden dieser Funktion irgendwie verhindern oder abstellen?


Und mein zweites Problem:

Ich würde gerne, für alle Seiten innerhalb der Domain, die nicht existieren (Also Fehlermeldung 404) eine eigene Fehlermeldungsseite programmieren. Aber wie kann die anstatt der Standardfehlermeldung aufgerufen werden?

Ich hab bisher Beispiele als Errorpage.php gefunden, die Endung php lässt mich jedoch darauf schließen, dass ich den wichtigen Teil des Sourcecodes nicht einsehen kann.


Das wärs dann auch wieder

so far
thx & mfg
 
Nunja, window.sidebar.addPanel() macht ja genau das, was der Name suggeriert, nämlich ein Panel zur Sidebar hinzufügen :D Ich wüßte im Moment keinen Weg, um in Gecko-Browsern aus einer beliebigen Seite heraus ein Bookmark anzulegen, man müßte wohl XPCOM bemühen, was natürlich nicht aus einer Webseite heraus geht. Schreib doch einfach einen Hinweis hin, daß sich die Seite mit CTRL+d bookmarken läßt ;)

Fehlerseiten kann man bei Apache in einer .htaccess über die ErrorDocument-Direktive selbst bestimmen, sofern für das Verzeichnis die Option AllowOverride FileInfo gesetzt ist:
Code: 
ErrorDocument 404 nixgefunden.html
ErrorDocument 403 fingerweg.html

greetings, Keita
 
Wo kann ich diese Allow Override File Info genau setzten?

Hab inzwischen bei SELFhtml ein wenig unter errordocumnet nachgeschaut, die Methode mit dem weiterverlinken funktioniert bei mir nicht, aber wenn ich die Seite hard code (also den Code der Homepage direkt dahinter setzte, funktioniert es einwandfrei.

.htaccess Datei und die error404.html sind natürlich im selben Verzeichnis, die Ausgabe ist jedoch immer nur error404.html


so far
thx & mfg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

R
HTML Anfängerprobleme beim Homepage bauen.
Antworten
12
Aufrufe
1.688
Rockcrusher
R
N
JS redirect zur homepage
Antworten
19
Aufrufe
1.359
neqzzz
N
R
Bilder die sich auf Homepage durchschalten
Antworten
7
Aufrufe
1.657
r00tk1d
R
Delgado
ftp Zugang auf Homepage derzeit nicht möglich?
Antworten
1
Aufrufe
1.029
Delgado
Delgado
M
Suche Homepage Baukasten Anbieter wo Affiliate Marketing möglich ist
Antworten
8
Aufrufe
1.283
lazsniper
L
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 170 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz