Download 1.12.2

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

Seiten: 1

#1 29. Oktober 2012 15:15

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

[GELÖST] Layout mit spalten, eine fixern und Vertikal Zentrieren

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 CMS/ms aus
Ort: Berlin
Registriert: 24. Januar 2012
Beiträge: 52

Re: [GELÖST] Layout mit spalten, eine fixern und Vertikal Zentrieren

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: 632

Re: [GELÖST] Layout mit spalten, eine fixern und Vertikal Zentrieren

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.231
Webseite

Re: [GELÖST] Layout mit spalten, eine fixern und Vertikal Zentrieren

Hallo,

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

mfg
Jan

 Hier klicken, um den Code zum Kopieren zu markieren
[== 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>

Kubuntu 22.04 - Win 11 pro / Kubuntu 20.04  - win10 pro

Offline

#5 02. November 2012 14:17

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

Re: [GELÖST] Layout mit spalten, eine fixern und Vertikal Zentrieren

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

 Hier klicken, um den Code zum Kopieren zu markieren
$(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

 Hier klicken, um den Code zum Kopieren zu markieren
.fixed {position: fixed; top:0;}

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

Offline

Seiten: 1


Fußzeile des Forums

Powered by FluxBB