Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

1

#1 29. Oktober 2012 15:15

Henk1060
Server-Pate
Registriert: 12. August 2011
Beiträge: 646

Re:

Zur Erklärung:
Habe ein Header div mit bild und navi.
dann 2 spalten Layout.

Im Haupt Content kommt der blog rein… (sehr viel text und viel zum scrollen)
in der 2. Spalte hätte ich dann ein News Letter anmelde Formular usw.
Und das hätte ich gerne das mit scrollt und zwar mittig wink

Mit position:fixed bleibt es zwar stehen, aber in der Ausgangsposition.
und das ist meinen Fall bei meinen Großen Bildschirm schon ziemlich am Rand unten.
Und das macht dann beim Scrollen keinen Sinn.
ist das möglich in der css zu lösen oder muss da ein JS Skript her?

Danke für eure Tipps

Offline

#2 29. Oktober 2012 17:07

serialpark
probiert CMSMS aus
Ort: Berlin
Registriert: 24. Januar 2012
Beiträge: 52

Re:

das wirst du nur mit javascript hinbekommen. ausser du legst die angangsposition sofort fest.. sticky scroller gibts als diverse jquery plugins, ist also kein großes thema.

Offline

#3 29. Oktober 2012 18:58

Henk1060
Server-Pate
Registriert: 12. August 2011
Beiträge: 646

Re:

Danke für den tipp das hilft mir schon weiter...

Offline

#4 29. Oktober 2012 21:12

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.039
Webseite

Re:

Hallo,

es geht sehr wohl mit CSS, sehe die  html-Datei.

mfg
Jan

[== en ==]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <title></title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">

#pagewrapper
{border:0px;
width:1000px;
margin:30px auto;
padding:0px;
}

.pos_fixed
{
position:fixed;
top:50%;
float:right;
background-color:#ddddff;
}
div#content
{margin:20px 0px 1em 200px;
border-top:1px solid gray;
border-left:1px solid gray;
border-right:1px solid gray;
border-bottom:1px solid gray;
background-color:#FFF;
}

  </style>
</head>
<body>
<div id="pagewrapper">
<div class="pos_fixed">
Diese Text bleibt stehen.<br />
Diese Text bleibt stehen.<br />
Diese Text bleibt stehen.<br />
</div>
<div id="content">
<h1>Titelline</h1>
und etwas Text<br />und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text. und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.und etwas Text<br />und etwas Text. und etwas Text.
</div>
</div>

</body>
</html>

Ubuntu 12.04 mit KDE und Kubuntu 16.04 - FOSS Fan

Offline

#5 02. November 2012 14:17

Henk1060
Server-Pate
Registriert: 12. August 2011
Beiträge: 646

Re:

Danke Jan! jedoch diese lösung hatte ich schon passt aber nicht...

Jquery ist meistens eingebunden und wenn nicht dann einbinden.
eine Js file erstellen und diesen mini code einfügen

$(document).ready(function() {   var top = $('.deine div class').offset().top;   $(window).scroll(function() {     if($(this).scrollTop() > top) {       $('.deine div class').addClass('fixed');     } else {       $('.deine div class').removeClass('fixed');     }   }); });

je nach aufbau des templates ist zu empfehlen mit div class anzusprechen und nicht mit div id

und in die css kommt noch das rein

.fixed {position: fixed; top:0;}

Denn wert top kann nach belieben geändert werden...
vielleicht kann es wer mal brauchen

Offline

1

Fußzeile des Forums

Powered by FluxBB