Problem mit scrollbarem <div>-Inhalt von christian, 16.02.2009 15:03

Problem mit scrollbarem <div>-Inhalt

christian 16.02.2009 10:38

html

Hallo,
ich habe ein Problem mit links in einem <div>-Tag
folgenden Code verwende ich um einen Bereich zu definieren der nur den vertikalen Skrollbalken anzeigt:

  
<div style="position:absolute;top:55px;left:195px;width:705px; height:303px; overflow:hidden;">  
<div style="width:705px; height:320px; overflow:scroll;">  
...  
<a href="..." class="h_grau" title="E-Mail">...</a>  
...  
</div>  
</div>

Das mit dem Scrollen funktioniert auch bis auf folgendes:
die Links bleiben an ihrer Bildschirmposition haften (nur im IE)

Woran liegt das?

Danke Euch für jede Hilfe,
Christian

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem mit scrollbarem <div>-Inhalt

suit Homepage des Autors 16.02.2009 13:48

html

– Informationen zu den Bewertungsregeln

ich habe ein Problem mit links in einem <div>-Tag

Element

Woran liegt das?

Nicht an dem von dir geposteten Code.

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem mit scrollbarem <div>-Inhalt

christian 16.02.2009 15:03

html

– Informationen zu den Bewertungsregeln

»» ich habe ein Problem mit links in einem <div>-Tag Element

»» Woran liegt das? Nicht an dem von dir geposteten Code.

ich denke mal das ziehlt auf nicht genügend information. hier also der komplette code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="foehrseasons.ico">
<meta name="lang" content="DE">
<meta name="language" content="DE">
<meta name="keywords" content="xxx">
<meta name="description" content="">
<meta name="robots" content="FOLLOW,INDEX"><meta name="googlebot" content="noodp">
<meta name="msnbot" content="noodp"><meta name="Slurp" content="noydir">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>xxx</title>
<link href="data/screen.css" rel="stylesheet" type="text/css">
<link href="data/wyk.css" rel="stylesheet" type="text/css">

</head>
<body >

<div style="height:45px;"></div>
<div id="container">

<div style='height:107px;'><img src='data/head1.jpg' alt='garbage collector'></div>
<div id="menu">
<a href="?haus=w&amp;m=m2" class="menu ">Rundgang</a><a href="?haus=w&amp;m=m3&amp;s=s1" class="menu ">Grundrisse</a><a href="?haus=w&amp;m=m1" class="menu ">Auf einen Blick</a><a href="?haus=w&amp;m=m4&amp;sel=zuf" class="menu ">Galerie</a><a href="?haus=w&amp;m=m5" class="menu ">Lage</a><a href="?haus=w&amp;m=m6" class="menu ">&Uuml;ber F&ouml;hr</a><a href="?haus=w&amp;m=m7" class="menu ">&Uuml;ber Wyk</a><a href="?haus=w&amp;m=m8" class="menu ">Preise</a><a href="?haus=w&amp;m=m9" class="menu ">Kontakt</a>
</div>
<div id="content">
<div style="position:absolute;top:55px;width:155px;">
<img src="images/vignette0.jpg" alt="">
<div class="seitentitel">
<h4 class="farbsignal">Seitentitel</h4>
</div>
</div>

<div style="position:absolute;top:55px;left:195px;width:705px; height:323px; overflow:hidden;">
<div style="width:705px; height:340px; overflow:scroll;">
<h4 class="d_grau">V.i.S.P.:</h4>
<p>
xxx<br>
xxx<br>
xxx<br>
<a href="mailto:xxx@xxx.de" class="h_grau" title="E-Mail">xxx@xxx.de</a>
</p><br>
<h4 class="d_grau">Konzept, Text und Gestaltung:</h4>
<p>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
<a href="www.xxx.de" target="_blank" class="h_grau" title="xxx">www.xxx.de</a>
</p><br>
<p style="margin-right:23px;">
<strong>Haftungsausschluss:</strong><br>
Die bereitgestellten Informationen auf dieser Website wurden sorgf&auml;ltig gepr&uuml;ft und werden regelm&auml;ßig aktualisiert. Jedoch kann keine Haftung oder Garantie daf&uuml;r &uuml;bernommen werden, dass alle Angaben zu jeder Zeit vollst&auml;ndig, richtig und in letzter Aktualit&auml;t dargestellt sind. Dies gilt insbesondere f&uuml;r alle Verbindungen (&auml;Links“) zu anderen Websites, auf die direkt oder indirekt verwiesen wird. Hinsichtlich der Links erkl&auml;ren wir ausdr&uuml;cklich, dass wir keinerlei Einfluss auf die Gestaltung und die Inhalte der verlinkten Seiten haben und wir uns diese Inhalte nicht zu Eigen machen. Diese Erkl&auml;rung gilt f&uuml;r alle auf dieser Website angezeigten Links.
</p>
<p style="margin-right:23px;">
<strong>Urheber- und Kennzeichenrecht</strong><br>
Wir sind bestrebt, in allen Publikationen die Urheberrechte der verwendeten Grafiken, Tondokumente, Videosequenzen und Texte zu beachten, von uns selbst erstellte Grafiken, Tondokumente, Videosequenzen und Texte zu nutzen oder auf lizenzfreie Grafiken, Tondokumente, Videosequenzen und Texte zur&uuml;ckzugreifen. Alle innerhalb des Internetangebotes genannten und ggf. durch Dritte gesch&uuml;tzten Marken- und Warenzeichen unterliegen uneingeschr&auml;nkt den Bestimmungen des jeweils g&uuml;ltigen Kennzeichenrechts und den Besitzrechten der jeweiligen eingetragenen Eigent&uuml;mer. Allein aufgrund der bloßen Nennung ist nicht der Schluss zu ziehen, dass Markenzeichen nicht durch Rechte Dritter gesch&uuml;tzt sind! Das Copyright f&uuml;r veröffentlichte, von uns selbst erstellte Objekte bleibt allein bei uns. Eine Vervielf&auml;ltigung oder Verwendung solcher Grafiken, Tondokumente, Videosequenzen und Texte in anderen elektronischen oder gedruckten Publikationen ist nur nach schriftlicher Genehmigung gestattet.
</p>
<p style="margin-right:23px;">
<strong>Datenschutz</strong><br>
Sofern innerhalb des Internetangebotes die Möglichkeit zur Eingabe persönlicher oder gesch&auml;ftlicher Daten (E-Mail-Adressen, Namen, Anschriften) besteht, erfolgt die Preisgabe dieser Daten seitens des Nutzers auf ausdr&uuml;cklich freiwilliger Basis. Alle Daten werden von uns vertraulich behandelt und nicht an Dritte weitergegeben.
</p><br><br>
</div>
</div>
</div>

<div id="footer" style = "position:absolute;top:500px;width:900px;">
<table cellpadding="0" cellspacing="0" style="width:100%;margin-left:35px;margin-right:15px;margin-top:5px;">
<tr><td style="text-align:left; vertical-align:top;">
<a href='/www/index.php?haus=n' title='Auf nach Nieblum' style='color:#6C7A85;'>Lernen Sie auch unser xxx kennen</a></td><td style="text-align:right; vertical-align:top;">
<a href="?haus=w&amp;m=imp" title="Impressum" style='color:#6C7A85;left:-40px'>Impressum</a>
</td></tr></table>
</div>

</div>

<script type="text/javascript">
startBall();
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7246423-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

die beiden eingebundenen css dateien:


#container
{
	position:absolute;
	top:7%;
	height:550px;
	background-image:url(../data/layout_w.gif);
	background-repeat:no-repeat;
	padding: 0px 0px 0px 0px;
}

.farbsignal
{
	color:#A8201B;
}
	
a.pfeilR:hover
{
	color:#A8201B;
	background-image:url(pfeil_rw.gif);
	}
	
a.pfeilL:hover
{
	color:#A8201B;
	background-image:url(pfeil_lw.gif);
	}
	
.active
{
	border-bottom:2px solid #A8201B;
}

a.menu:hover
{
	border-bottom:2px solid #EF8884;
	color:#000;
}

.border:hover
{
	cursor:pointer;
	border:3px solid #f00;
}

.ro:hover
{
	border-right-style:none;
}

.ka
{
	margin:0px;
	padding:0px;
}

#aeb ul li {
	list-style-image:url(punkt_w.gif);
	list-style-position:outside;
	margin-left:0px;
	padding-left:0px;
	}
	
#sidemenu ul.dropper li.sub a:hover {
	color:#A8201B;
	}


/* CSS Document */
body
{
	width: 900px;
	margin: 10px auto;
	/*background-color: #ffffff;*/
	background-attachment: scroll;
	font-size: 100.01%;
	font-family: Arial, Helvetica, sans-serif;
	color:#8899A7;
	font-size:10pt;
	line-height:13pt;
}

.seitentitel {
	position:absolute;
	top:117px;
	left:0px;
	}

#footer{
	background-image:url(../data/linien_u.gif);
	background-repeat:no-repeat;
	margin:40px 0px 0px 0px;
	position:absolute;
	top:470px;
	left:0px;
	width:900px;
}

input.korr {
	color:#f00;
	}

.nfo{
	font-size:8pt;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#f00;
}

.imp{
	position:relative;
	left:49px;
	line-height:23px;;
	font-size:9pt;
	text-decoration:none;
	color: #6C7A85;
}

#content{
position:relative;
top:0px;
left:-15px;
padding: 15px 15px 15px 15px;
}

img{
	margin:0px 0px 15px 0px;
}

.d_grau{
	color:#6C7A85;
}

.h_grau{
	color:#8899A7;
}

h1,h2,h3,h4,p,a {
	margin:0pt 0pt 5pt 0pt;
	padding:0px;
}

h1{
	margin-top:9pt;
	font-size:18pt;
	line-height:18pt;
	font-weight:bold;
}

h2{
	margin-top:9pt;
	font-size:14pt;
	line-height:16pt;
	font-weight:bold;
}

h3{
	margin-top:14pt;
	position:relative;
	left:1px;
	font-size:10pt;
	line-height:13pt;
	font-weight:bold;
}

h4{
	margin-top:-4pt;
	font-size:10pt;
	line-height:16pt;
}

p{
	font-size:10pt;
	line-height:13pt;
}

a{
	margin:0px;
	position:relative;
	left:1px;
	font-size:10pt;
	text-decoration:none;
	color:#000000;
}

a:hover{
	text-decoration:underline;
}

a:visited{
	color:#000000;
}

#menu{
	position:relative;
	left:49px;
}

a.menu{
	/*border:1px solid red;*/
	padding:2px 3px 4px 3px;
	margin:0px 2px 0px 1px;
	font-size:10pt;
	text-decoration:none;
	color: #6C7A85;
}

.fett{	
	line-height:13pt;
	font-weight:bold;
}

a.aktiv{
	background-image:url(../data/pfeil_1.gif);
	padding:2px 3px 0px 0px;
	margin:0px 2px 0px 1px;
	font-size:10pt;
	line-height:13pt;
	text-decoration:none;
}

table{
	border-width:0px;
	border-style:dashed;
	margin:0px;
	padding:0px;
}

td{
	vertical-align:top;
}

img{
	border:0px none #fff;
}

a.pfeilR:link, a.pfeilR:visited{
	padding-left:32px;
	padding-bottom:2px;
	background-image:url(pfeil_r0.gif);
	background-repeat:no-repeat;
	background-position:bottom left;
	text-decoration:none;
	color:#8899A7;
	}
	
a.pfeilL:link, a.pfeilL:visited{
	padding-left:32px;
	padding-bottom:2px;
	background-image:url(pfeil_l0.gif);
	background-repeat:no-repeat;
	background-position:bottom left;
	text-decoration:none;
	color:#8899A7;
	}

select {
	font-size:8pt;
	}
	
.auswahl{
	position:absolute;
	top:190px;
	}
	
#sidemenu ul.dropper {
	background-color:#fff;
	background-image:url(dropper.gif);
	background-repeat:repeat-x;
	width:131px;
	font-size:8pt;
	margin:0px;
	padding:0px 3px 0px 3px;
	border:1px solid #8899A7;
	}
	
#sidemenu ul.dropper:hover {
	cursor:default;
	}
	
#sidemenu ul.dropper li {
	position:relative;
	left:0px;
	list-style:none;
	font-size:8pt;
	margin:3px 0px 2px 0px;
	padding:0px 0px 0px 0px;
	line-height:8pt;
	}
	
#sidemenu ul.dropper li.sub {
	margin:3px 0px 2px 0px;
	display:none;
	}
	
#sidemenu ul.dropper:hover li.sub {
	display:block;
	}	
	
#sidemenu ul.dropper li.sub a:link {
	font-size:8pt;
	text-decoration:none;
	color:#8899a7;
	}
	
#sidemenu ul.dropper li.sub a:visited {
	font-size:8pt;
	text-decoration:none;
	color:#8899a7;
	}
	
form {
	font-size:10pt;
	}
textarea {	
	border:1px solid #8899A7;
	color:#8899A7;
	}
	
input {
	border:1px none #8899A7;
	border-bottom-style:solid;
	color:#8899A7;
	}

hoffe jemand kann mir erklären warum die links beim scrollen nicht mitscrollen...

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem mit scrollbarem <div>-Inhalt
ChrisB 16.02.2009 15:13

html
– Informationen zu den Bewertungsregeln
Hi,

hier also der komplette code:

die beiden eingebundenen css dateien:

Keine Lust auf Copy&Paste, sorry.

hoffe jemand kann mir erklären warum die links beim scrollen nicht mitscrollen...

Online-Beispiel bitte.

MfG ChrisB

--
„This is the author's opinion, not necessarily that of Starbucks.“
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Problem mit scrollbarem <div>-Inhalt
  
  Christian 16.02.2009 15:56
  
  html
  – Informationen zu den Bewertungsregeln
  na, ich denke jemand der sich mit html und css auskennt wird wohl wissen was die ursache dafür sein kann das ein bestimmter tag nicht mitscrollt und zwar nur im IE.
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Problem mit scrollbarem <div>-Inhalt
    
    suit Homepage des Autors 16.02.2009 16:37
    
    html
    
    – Informationen zu den Bewertungsregeln
    na, ich denke jemand der sich mit html und css auskennt wird wohl wissen was die ursache dafür sein kann das ein bestimmter tag nicht mitscrollt und zwar nur im IE.
    
    Natürlich - aber jemand der _kostenlos_ hilft, erwartet zumindest, dass du die Tipps für Fragende gelesen hast und selbst ein Mindestmaß an mitarbeit mitbringst - deinen Code hier reinzuspeiben ist jedenfalls nicht hilfreich.
    
    Reduziere deinen Code auf ein wesentliches und stelle dies möglichst online zur Verfügung.
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

christian: Problem mit scrollbarem <div>-Inhalt

Problem mit scrollbarem <div>-Inhalt

Problem mit scrollbarem <div>-Inhalt

Problem mit scrollbarem <div>-Inhalt

Problem mit scrollbarem <div>-Inhalt

Problem mit scrollbarem <div>-Inhalt

Problem mit scrollbarem <div>-Inhalt

Problem mit scrollbarem <div>-Inhalt