|
Anzeige
|
html elemte bei bestimmter größe fixiert positionieren
Gast
#3659408
Ich habe zwar einen Lösungsvorschlag, dieser ist aber nicht sehr schön. Ich hatte vor die aktuelle Position zu ermitteln und per javascript ab einen bestimmten Wert die Klassen von bestimmten betroffenen Elementen ändern. Wird es aber immer funktionieren ist die Frage? Gibt es mit Css keine elegenteren Methoden dazu? Zum Beispiel soll es dieser Effekt sein: http://www.gmx.at/ emi schrieb: > Gibt es mit Css keine elegenteren Methoden dazu? Nein, nicht wenn du das dynamisch haben willst. emi schrieb: > Zum Beispiel soll es dieser Effekt sein JS aus->Effekt weg, die machen das dort auch über JS.
Gast
#3659599
Läubi .. schrieb: > JS aus->Effekt weg, die machen das dort auch über JS. Aber dann wäre überhaupt nicht möglich es zu machen. Wer hat heutzutage schon Javascript im Browser deaktiviert? was willst du genau machen ? meinst du die werbung die auf der rechten seite ab ~1024px breite erscheint ? stichwort dazu wäre "CSS3 Media Query"
Gast
#3659690
Andi ... schrieb: > was willst du genau machen ? meinst du die werbung die auf der rechten > seite ab ~1024px breite erscheint ? stichwort dazu wäre "CSS3 Media > Query" Nein, auf meiner Seite ist keine Werbung. Jedoch sind der Homebutton und diverses immer rechts oben am Rand positioniert. Wenn also das Fenster kleiner wird, so wandern auch der homebutton usw mit. Jedoch kollabieren diese sachen irgendwann mit anderen Menüsachen. Das will ich verhindern emi schrieb: > Nein, auf meiner Seite ist keine Werbung. Jedoch sind der Homebutton und > diverses immer rechts oben am Rand positioniert. Wenn also das Fenster > kleiner wird, so wandern auch der homebutton usw mit. Jedoch kollabieren > diese sachen irgendwann mit anderen Menüsachen. > Das will ich verhindern kannst du mal nen vernünftiges beispiel geben ? gmx.at gehört nich dazu... das ganze hört sich so an als hättest du eine variable containerbreite und irgendwann ist der inhalt größer als der container. du musst dir dazu zuerst überlegen was in dem fall passieren soll. am einfachsten setzt du "min-width" auf einen wert bei dem noch alles "gut " aussieht...in dem fall muss der user halt scrollen oder das menu teilt sich auf mehrere zeilen auf emi schrieb: > Jedoch kollabieren > diese sachen irgendwann mit anderen Menüsachen. > Das will ich verhindern Die Beschreibung ist führ eine Lösung noch etwas wage, ohne die genaue geometrische Struktur der Seite zu kennen wird das schwierig. Aber was immer nützlich ist um Kollisionen von Elementen zu verhindern ist mit css3 min-width und max-width, bzw min-height und max-height, und overflow festzulegen. Bei inline-elementen geht dass mit display:inline-block. Bei einer Positionierung mit position:absolute; Ist es nur noch mit js oder css3 mediaquery zu erreichen. Oft kann man solche absoluten positionen durch float:left; und float:right; ersetzen. Wenn die css-option float den Textfluss durcheinanderbringt kann man diese in ein div mit display:inline-block verpacken.
Gast
#3660202
Ich will eigentlich nichts weiter als verhindern, dass das rote div in das gelbe div "hineingeht". Also ab einer bestimmten width soll alles so stehen bleiben wie es gerade steht. Nur wie soll ich das anstellen? Ich habe mich mit min-width und max-width herumgespielt, das führt aber zu keinem vernünftigen Ergebnis.
Angehängte Dateien:
Gast
#3660228
Irgendwie schein das Problem die richtige Skalierung zu sein, wenn Du absolute Werte nimmst? Je nach Bildschirm- und Schriftgröße sind absolute Angaben nur in EINERM Fall der Betrachtung optimal. Auf dem Handy oder auf dem 24" stimmt dann nichts. Schau mal da. http://de.selfhtml.org/
Gast
#3660246
oszi40 schrieb: > http://de.selfhtml.org/ Danke, aber das kenne ich schon. Lade dir einmal die Datein runter die ich hochgeladen habe. Ach ja das style sheet muss in einen extra Ordner style hinein, sonst gehts nicht. Falls du es nicht runterladen möchtest, werde ich versuchen das Problem hier darzustellen. Ich habe 2 Objekte (DIVs). Eines ganz links und das andere ganz rechts, in etwa so: Seitenende| ------------- ------------- | | div1 | | div2 | | | | | | | ------------- ------------- | das div2 ist nahe am Seitenende. Mache ich jetzt die Seite kleiner (sprich width wird kleiner), so wandert das div 2 mit weil es absolut von rechts eine bestimmte weite hat. Jedoch geht das so weit dass es möglich ist dass sich div2 mit div1 überlagert. Sprich so: Seitenende| ------------- ------------- | | div1 | | div2 | | | | | | | ------------- ------------- | Die zweite Zeichnung stellt den Grenzwert dar. Was passiert nun bei mir? Bei mir überlappen die sich wenn ich die seite noch weiter verkleinere. Bei anderen Webseiten bleiben sie stehen und es entsteht eine scrollbar unten. Und ich will dass sie auch ab einer bestimmtesn Größe stehen bleiben wie bei gmx damit sich nichts mehr überlappt. Die Frage ist wie mache ich das am besten? wenn ich den letzten beitrag richtig verstanden habe, dann kannst du dein problem mit einer einfachen mediaquery lösen. unterhalb einer von dir festgesetzten grenze bekommt div2 kein float: right (?, ist i.a. besser als position: absolute) mehr sondern wird links ausgerichtet, evtl. wird auch das scrollverhalten des body-tags angepasst.
Gast
#3660268
Daniel F. schrieb: > wenn ich den letzten beitrag richtig verstanden habe, dann kannst du > dein problem mit einer einfachen mediaquery lösen. > > unterhalb einer von dir festgesetzten grenze bekommt div2 kein float: > right (?, ist i.a. besser als position: absolute) mehr sondern wird > links ausgerichtet, evtl. wird auch das scrollverhalten des body-tags > angepasst. ehrlich gesagt halte ich nichts von jqerry. Ich würde gerne wissen wie ich es in reinem javascript angehen würde. Am besten ein Tutorial oder so. Danke! emi schrieb: > Daniel F. schrieb: >> dein problem mit einer einfachen mediaquery lösen. > ehrlich gesagt halte ich nichts von jqerry. Ich würde gerne wissen wie > ich es in reinem javascript angehen würde. Am besten ein Tutorial oder > so. > > Danke! 1. Mediaquery sind ein teil von css3 und haben mit jquery nichts zu tun. 2. Wenn du float stat position:absolute für die positionierung verwendest kann das Problem nichtmehr auftreten, aber die elemente mit float müssen dann aber in einem div mit display:inline-block liegen. 3. Wenn es nur um eine scrollbar ab einer bestimmten minimalbreite geht, sollte ein
genügen. Falls das alles komplizierter sein sollte als es scheint und js nötig wird, google nach addEventListener, onload, onresize, offsetWidth und element.style. Die MDN ist immer gut. Aber bedenke: css ist einfacher als alles in js berechnen und manuell anpassen. Bezüglich jquery stimme ich dir zu.
Gast
#3663671
naja, bevor ich das rad mehrfach neu erfinde oder zig zeilen code schreibe die sonst mit einer zeile (oder so) nehme ich lieber jquery... oder unterstützte css3-elemente Antwort schreibenBitte melde dich an, um einen Beitrag zu schreiben. |
Anzeige
|
