fensterbreite auslesen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
blocken
code
container
cursor
dank
datei
display
frage
http
index
jemand
materie
pixel
setzen
stelle
tag
text
url
wissen
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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 ;) -
@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 -
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 -
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 -
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 -
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
hatte (Gesamtbreite der tabelle war 720 pixel, $pages = 6, daher 1 Seite = 120 px);$tdwidth= 100/$pages; $tdwidth.= '%';
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 -
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 => &
Viel Spass noch beim Basteln
mfg
-
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 -
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
?!???
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
