✔ ''Scrollproblem"

Status
Nicht offen für weitere Antworten.
Dann wirst du die vorherige "Spalte" .termevent mit einer fixen Breite ausstatten müssen, ansonsten wird das nichts mit der vertikalen Flucht für die "Info"-Spalte.
 
Guten Morgen,
Die Infoboxen sind jetzt untereinander. Ich bekomme die klassen termevent,info und preis im wahrsten Sinne des Wortes nicht auf die Reihe
Hier der geänderte Code
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="content"> <img class="header" src="http://www.tutorials.de/forum/images/header.gif" alt="header"/> <img class="left" src="http://www.tutorials.de/forum/images/left.gif" alt="left" /> <img class="footer" src="http://www.tutorials.de/forum/images/footer.gif" alt="footer" /> <img class="right" src="http://www.tutorials.de/forum/images/right.gif" alt="right" /> <img class="tanteju" src="http://www.tutorials.de/forum/images/tanteju.jpg" alt="tanteju" />
  <div><a href="rueckblick06.html"><img src="http://www.tutorials.de/forum/images/rueckblick1.jpg" alt="r&uuml;ckblick" border="0" class="r&uuml;ckblick"/></a></div>
  <div class="marquee">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','500','height','70','movie','marquee/tanteju','quality','high' ); //end AC code
  </script>
    <noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="70">
      <param name="movie" value="marquee/tanteju.swf" />
      <param name="quality" value="high" />
    </object>
    </noscript>
  </div>
  <img class="navileiste" src="http://www.tutorials.de/forum/images/navigation.jpg" alt="navigation" /><br />
  <br />
  <br />
  <div>
    <p><span class="termdate">24.08.</span></p>
    <p> <span class="termevent">Astillero - brandneuer Tango Nuevo aus Buenos Aires </span></p>
    <span class="info">Info</span><span class="preis"> 8,-/10,- &euro; </span>
    <p><span class="termdate">25.08.</span></p>
    <p> <span class="termevent">NOFOB.COM pr&auml;sentiert BOOOM Festival</span></p>
    <span class="info">Info</span><span class="preis"> 15,-/18,- &euro; </span>
    <p><span class="termdate">07.09.</span></p>
    <p> <span class="termevent">TribJUte: Kik it like Falco - es gibt ihn doch noch </span></p>
    <span class="info">Info</span><span class="preis"> 12,-/14,- &euro; </span>
    <p> <span class="termdate">08.09.</span></p>
    <p> <span class="termevent">Dresdner Band-Contest 2007</span></p>
    <span class="info">Info</span><span class="preis"> 4,-/6,- &euro; </span>
    <p> <span class="termdate">13.09.</span></p>
    <p> <span class="termevent">Klima Kalima &ndash; jazzig, rockig, funky</span> </p>
    <span class="info">Info</span><span class="preis"> 8,-/10,- &euro; </span>
    <p> <span class="termdate">14.09.</span></p>
    <p> <span class="termevent">Van Wilks (USA) der exzellente Gitarrist wird in Texas als einer der Besten gefeiert.</span></p>
    <span class="info">Info</span><span class="preis"> 8,-/10,- &euro; </span>
    <p> <span class="termdate">16.09.</span></p>
    <p> <span class="termevent">Thrillbeats pr&auml;sentiert: Pro Pain (USA)</span> </p>
    <span class="info">Info</span><span class="preis"> 13,-/16,- &euro; </span>
    <p><span class="termdate">22.09.</span></p>
    <p> <span class="termevent">city.Zound pr&auml;sentiert: 2. Weltmusik-Basar Thema: Indische Musik und Kultur u.a. mit YATRA, Sitar Beat </span></p>
    <span class="info">Info</span><span class="preis"> 8,-/10,- &euro; </span>
    <p> <span class="termdate">16.09.</span></p>
    <p> <span class="termevent">Ben*jammin (D) Hip-Funk am Hochenergie-Limit!</span> </p>
    <span class="info">Info</span><span class="preis"> 6,-/8,- &euro; </span>
    <p><span class="termdate">28.09.</span></p>
    <p> <span class="termevent">cEast Europe meets Germany</span></p>
    <span class="info">Info</span><span class="preis"> 8,-/10,- &euro; </span> </div>
  <p><span class="termdate">29.09.</span></p>
  <!-- end content -->
</div>
</body>
</html>

Code: 
/* tante ju*/
body {background-color: #000066;}
#content {
	width: 783px;
	height:525px;
	background-color: #FFFFFF;
	overflow: scroll;
	margin: 50px auto;
}
.tanteju { width:140px; height:80px; position:relative; left: 15px; top: 18px; }
.rückblick { position:relative; height:70px; width:70px; margin-left: 660px; margin-top: -90px; background-attachment:fixed; }
.navileiste {margin-top: 0px; margin-left: 15px; margin-right:15px;position: relative;}
.marquee { width:500px; height:70px; position:relative; margin-left: 160px; margin-top: -50px; }
.header {background-image: url(../images/header.gif);position: absolute; width:770px;}
.left {
	background-image:url(../images/left.gif);
	position:absolute;
	height:520px;
}
.footer { background-image:url(../images/footer.gif);position: absolute;width: 770px; height:15px; margin-top:510px;}
.right {background-image:url(../images/right.gif);position:absolute;height:520px;width: 15px; margin-left:755px;}
.p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #013998; text-align:justify; padding-left: 45px; padding-right: 45px;}
.pindtop { margin-top:35px;}
.pind { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #990000; font-size:11px; font-style: oblique;}
.pinddate {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-weight:bold; color:#013998; font-size:11px; font-style:oblique; margin-left:405px; }
.termdate {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #990000;
	font-size:11px;
	margin-top: 0px;
	width: 50px;
	margin-left: 50px;
}
.termevent {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #013998;
	font-size:11px;
	margin-left: 100px;
	text-align:justify;
	width: 350px;
	font-weight: normal;
	margin-top: 0px;
}
.termeinzug { padding-left:66px;color:#013998;}
.terminfo {	margin: 20px 130px 0px 64px;font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;color: #013998; text-align:justify;}
.preis {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #013998;
	font-size:11px;
	font-weight:bold;
	width: 100px;
	padding-left: 50px;
}
.Stil1 {color: #FF0000;	font-weight: bold;}
.Stil3 {color: #013998;	right: 50px;}
.back {font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;color:#013998; font-size:11px; margin-left: 45px; margin-top:30px;}
.pback {font-family:Verdana, Arial, Helvetica, sans-serif;	color:#013998;	font-size:11px;	font-weight:normal;	margin-top: 20px;	margin-left: 45px;}
.pbackeinzug {position:absolute;margin-left:240px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#013998;font-size:11px;font-weight:normal;margin-top: -195px;}
.terminalinfo {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #013998;	text-align:justify;	padding-left: 45px;	padding-right: 50px;	margin-top: 40px; font-weight:normal;}
.terminalinfofoto {
	margin-left:555px;
	margin-top: 0px;
	position: absolute;
}
.terminalinfodate {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#990000;
	text-align:justify;
	font-weight:bold;
	margin-left: 45px;
	position: relative;
	margin-right: 500px;
}
.terminalinfofoto1 {

	margin-left:378px;
	margin-top: -2px;
	position: relative;
}
/* CSS Document */
a:link { text-decoration: none; display:block;}
a:visited { color: #990000; text-decoration: none;}
a:active {}
a:hover {}
.info {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#013998;
	background-color: #FFFFFF;
	text-align: center;
	font-size: 11px;
	border: #013998 1px solid;
	margin-left: 500px;
	padding: 0 20px 0 20px;
	margin-top: -55px;
}
.zurück {
	text-align:center;
	position:relative;
	border:#013998 solid 1px;
	width: 70px;
	margin-left: 45px;
}
 
Zuletzt bearbeitet:
Wieso setzt du an dieser Stelle nicht eine Tabelle ein, die dort semantisch ihre Daseinsberechtigung hat, und dir das Leben erleichtern würde?

Ansonsten würde ich mal die float-Eigenschaft zu Hilfe nehmen, um Blockelemente, wie das p-Element, nebeneinander auszurichten, oder das "Konstrukt" mit einer horizontalen Liste auszeichnen.
 
Hi,
Ich habe es mit Tabellen umgesetzt. Wieder neues Problem-die Tabelle besser gesagt die Infospalte zieht es auseinander, habe ich erst gesehen als diese auf dem Server geladen war. Bei mir absolut korrekt sowohl mit FF als auch mit IE. Zu sehen unter
http://mitglied.lycos.de/buddha111111/
dann Terminal anklicken.
Danke
 
Ich würde anstelle des <br />-Tags innerhalb der einzelnen Tabellenzellen mal besser mit <tr> ... </tr> jeweils eine neue Tabellenzeile anlegen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück