✔ Textumbruch bei Link

buddha · 15. August 2007

Hi,
Wie kann man einen Zeilenumbruch noch verhindern, habe es mit whitespace-nowrap, geschützten Leerzeichen etc. probiert, entweder bricht es im Explorer um oder es wird als Zeile angezeigt. Eigentlich soll es als Zeile angezeigt werden.

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>Tante JU</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>
<style type="text/css">
#content { overflow-x: hidden;}
.Stil4 {color: #990000}
</style>
</head>
<body>
<div class="terminalinfodate" 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>
  <!-- ImageReady Slices (navigation.jpg) -->
  <table id="Tabelle_01" width="783" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img id="navigation_01" src="http://www.tutorials.de/forum/images/navigation_01.gif" width="50" height="110" alt="" /></td>
      <td><a href="index.html"> <img id="news" src="http://www.tutorials.de/forum/images/news.gif" width="76" height="110" border="0" alt="index" /></a></td>
      <td><a href="terminal.html"> <img id="terminal" src="http://www.tutorials.de/forum/images/terminal.gif" width="75" height="110" border="0" alt="terminal" /></a></td>
      <td><a href="tickets.html"> <img id="tickets" src="http://www.tutorials.de/forum/images/tickets.gif" width="76" height="110" border="0" alt="tickets" /></a></td>
      <td><a href="luftpost.html"> <img id="luftpost" src="http://www.tutorials.de/forum/images/luftpost.gif" width="76" height="110" border="0" alt="luftpost" /></a></td>
      <td><a href="anfahrt.html"> <img id="anfahrt" src="http://www.tutorials.de/forum/images/anfahrt.gif" width="75" height="110" border="0" alt="anfahrt" /></a></td>
      <td><a href="clubinfo.html"> <img id="clubinfo" src="http://www.tutorials.de/forum/images/clubinfo.gif" width="76" height="110" border="0" alt="clubinfo" /></a></td>
      <td><a href="vermietung.html"> <img id="vermietung" src="http://www.tutorials.de/forum/images/vermietung.gif" width="76" height="110" border="0" alt="vermietung" /></a></td>
      <td><a href="kontakt.html"> <img id="kontakt" src="http://www.tutorials.de/forum/images/kontakt.gif" width="75" height="110" border="0" alt="kontakt" /></a></td>
      <td><a href="gaestebuch.html"> <img id="gaestebuch" src="http://www.tutorials.de/forum/images/gaestebuch.gif" width="76" height="110" border="0" alt="gaestebuch" /></a></td>
      <td><img id="navigation_11" src="http://www.tutorials.de/forum/images/navigation_11.gif" width="52" height="110" alt="" /></td>
    </tr>
  </table>
  <!-- End ImageReady Slices -->
  <p class="tickets"><span class="Stil4">Tickets</span> <br />
    zu unseren Veranstaltungen erhalten Sie an folgenden Vorverkaufsstellen<br />
    <br />
    <strong>SaxTicket</strong><br />
    In der Schauburg<br />
    01099 Dresden Neustadt<br />
    <br />
    <strong>Konzertkasse Florentinum</strong><br />
    Ferdinandstr. 12<br />
    01069 Dresden<br />
    <br />
    <strong>SZ-Ticket im Elbepark</strong><br />
    Eingang Kaufmarkt<br />
    01139 Dresden<br />
    <br />
    <strong>Tourist-Information</strong><br />
    Prager Stra&szlig;e<br />
    01067 <br />
    <br />
  </p>
  <p class="tickets">&nbsp;</p>
  <p class="ticketseinzug"><strong>ST-Ticket im Karstadt </strong><br />
    Prager Stra&szlig;e<br />
    01069<br />
    <br />
    <strong>Kozertkassen in der Schillergalerie</strong> <br />
    Loschwitzer Str. 52a<br />
    01309 Dresden<br />
    <br />
    <strong>SZ &ndash; Ticket im Seidnitzcenter</strong><br />
    01277 Dresden<br />
    <br />
    <br />
    <strong>Schinkelwache</strong><br />
    Theaterplatz<br />
    01067 Dresden<br />
    <br />
  </p>
  <div class="ticketimg"><img src="http://www.tutorials.de/forum/images/hintergrund.gif"  alt="img"/></div>
  <div class="ticketreservierung">Ticketreservierung unter
    <a href="mailto:ticket@tanteju.com">ticket@tanteju.com</a>
    oder (0351) 25 22 557</div>
</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: 20px; }
.navileiste {position: absolute;margin-top: 0px;margin-right: 15px;margin-left: 15px;}
.marquee { width:500px; height:70px; position:relative; margin-left: 160px; margin-top: -120px; }
.rückblick { position:relative; height:70px; width:70px; left: 660px; 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;}
.pind { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #990000; font-size:11px; font-style: oblique;}
.pclubinfo {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	padding-left: 45px;	padding-right: 45px; padding-top:10px;}
.pclubinfo1 {font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #013998;padding-right: 45px;padding-top: 5px;}
.clubinfoJU {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	padding-left: 45px;	padding-right: 45px;text-align: justify;padding-top: 5px;}
.fotoju {	padding-right: 40px;	padding-left: 10px;	padding-top: 5px;}
.pindtop { margin-top:35px;}
.pinddate {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-weight:bold; color:#013998; font-size:11px; font-style:oblique; margin-left:405px; }
.fotooben {	background-image:url(terminalinfo/klimakalima.jpg);	background-repeat:no-repeat;margin-top: 30px;float: right;	margin-right: 40px;	margin-left: 10px;	margin-bottom: 5px;}
.fotoobentext {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #013998;	text-align:justify;	margin-top: 30px;	margin-left: 40px;	margin-right: 40px;}
.fotoobendatum {font-family: Verdana, Arial, Helvetica, sans-serif;	color: #990000;	font-size:11px;	font-weight: bold;	margin-left: 40px;}
.fotounten {	padding-right: 40px;	margin-top: -20px;}
.fotountentext {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	padding: 10px 40px 0 40px;}
.fotountendatum {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color:#990000;	text-align:justify;	font-weight:bold;	margin-left: 40px;	margin-top: -93px;}
.preis {font-family: Verdana, Arial, Helvetica, sans-serif;	color: #013998;	font-size:11px;	font-weight:bold;}
.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;}
.pbackeinzug {position:absolute;margin-left:240px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#013998;font-size:11px;font-weight:normal;margin-top: -195px;}
th,td,tr { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:justify;}
th { color: #013998; font-weight:normal;}
td { color: #013998;}
.imganfahrt { margin-right:70px;}
.panfahrt {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	margin-left: 120px;	margin-top: -260px;}
.print {font-size: 12px;color: #013998;	font-weight:bold;	font-family:Verdana, Arial, Helvetica, sans-serif;	margin-left: 120px;	position: absolute;	margin-top: -30px;} 
.luftpost {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	padding-left: 130px;padding-top: 30px;	text-align: justify;	padding-right: 130px;}
.luftpostemail {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	color: #013998;	text-align:justify;	font-weight: bold;	margin-left: 320px;	padding-top: 15px;	border-bottom-color: #990000;	border-bottom-style: solid;	width: 140px;	border-width: 1px;}
.vermietung {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	padding-left: 45px;	padding-right: 45px;	padding-top: 15px;}
.tickets {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #013998;
	text-align:justify;
	padding-left: 100px;
	padding-right: 45px;
	padding-top: 15px;
}
.ticketseinzug {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #013998;
	text-align:justify;
	padding-left: 320px;
	margin-top: -258px;
	visibility: visible;
}
.ticketreservierung {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight: bold;
	color: #013998;
	padding-left: 562px;
	margin-top: -87px;
}
.ticketimg {
	padding-left: 540px;
	margin-top: -109px;
}

Maik · 15. August 2007

Hi,

dazu kann man derzeit echt nicht viel sagen, außer, dass da wohl grundlegend etwas nicht mehr stimmt:

Dieses Bild zeigt sich in allen IE-Versionen, auch in der 7er-Baureihe.

Vielleicht solltest du das Bisherige besser in den Papierkorb schieben, und nochmal von vorne anfangen, denn so "buggy" ist der IE nun auch nicht.

buddha · 15. August 2007

Hi,
Bei mir schaut es so aus

, wobei das zentrierte der FF ist.
Gruß
PS.: Der Content hat 50px auto - da müsste der doch zentriert sein,...diese rot weiss blauen streifen sind die Umrandung, die Breite ist jeweils 15px. Das passiert nur wenn man im Body oder im Stylesheet eine andere Breite vergibt.

Maik · 15. August 2007

Hast du da vielleicht einen anderen CSS-Code gepostet, als in der Online-Version, denn im Firefox sieht's bei mir auch wieder ganz anders aus, als bei dir.

Wenn du in meinem angehängten Screenshot genau hinschaust, wirst du sehen, dass das DIV #content im IE horizontal zentriert ist.

Nachtrag: Dass der IE margin:50px auto ignoriert, liegt einfach daran, dass sich vor dem Doctype diese Zeilen befinden:

Code:

<div id="z4421d491" style="text-align: center; margin: 0px; padding: 0px;" align="center"></div>
<script src="http://ads.tripod.lycos.de/ad/google/framejs.php?rnd=z4421d491&ss=56ba9eb8&gg_bg=&gg_template=&mkw=&cat=noref"></script>

weshalb der IE in den Quirksmodus fällt, und das Boxmodell nicht unterstützt.

Gesehen auf http://mitglied.lycos.de/buddha111111/

buddha · 15. August 2007

Ich habe keinen anderen CSS Code gepostet, es sind ein paar Seiten dazu gekommen aber deswegen kann es nicht so aussehen. Du bist mit dem IE6 auf der Testseite gewesen der Content ist zentriert und ich mit dem IE7 da ist es linksbündig, da dürften auch keine Unterschiede sein.

Maik · 15. August 2007

Der Screenshot ist vorhin lokal auf der Festplatte geschossen worden, und basiert auf deinem geposteten Quellcode, in dem die eben genannten Zeilen nicht vor dem Doctype vorhanden sind - dafür aber in der Online-Version, die dir Lycos da unterjubelt.

buddha · 15. August 2007

Hi,
Habe den Code validiert, siehe Foto. Das andere Foto zeigt diese Fehler an wenn man bei Lycos sich das anschaut.

Maik · 15. August 2007

Wie gesagt, Lycos haut dir da noch seinen eigenen Scriptcode ins Dokument:

http://mitglied.lycos.de/buddha111111/ hat gesagt.:

Code:

<div id="z96fc238c" style="text-align: center; margin: 0px; padding: 0px;" align="center"></div>
<script src="http://ads.tripod.lycos.de/ad/google/framejs.php?rnd=z96fc238c&ss=97ac36de&gg_bg=&gg_template=&mkw=&cat=noref"></script>

<!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">

...


<!-- end content -->
</body>
</html>
</pre></xmp></noscript>

<script language="javascript" src="http://ads.tripod.lycos.de/ad/test_frame_size.js"></script>
<script language="javascript">
x6f37e8c46cd = "97ac36de";
if (!AD_clientWindowSize()) {document.write("<NOSC"+"RIPT>");}
</script>
<script>displayGoogleAd97ac36de();</script>

<!-- SZM VERSION="1.3" -->
<script language="JavaScript" type="text/javascript">
<!--
var IVW="http://lycos.ivwbox.de/cgi-bin/ivw/CP/2B04APBA0000;";
document.write("<img src=\""+IVW+"?r="+escape(document.referrer)+"\" width=\"1\" height=\"1\" />");
// -->

</script>
<noscript>
<img src="http://lycos.ivwbox.de/cgi-bin/ivw/CP/2B04APBA0000;" width="1" height="1" /> </noscript>
<!-- /SZM -->
<!-- SZMFRABO VERSION="1.1" -->
<script language="JavaScript" type="text/javascript">
var szmvars="lycos//CP//2B04APBA0000";
</script>
<script src="http://lycos.ivwbox.de/2004/01/survey.js"
language="JavaScript" type="text/javascript"> </script>
<!-- /SZMFRABO -->

<script language="javascript" src="http://ads.tripod.lycos.de/ad/popunder_lycos_update.php?cat=noref&CC=de"></script>
<script type="text/javascript" src="http://ads.tripod.lycos.de/ad/ad.php?cat=noref&mkw=&CC=de&ord=97ac36de&adpref="></script>

<!-- START RedSheriff Measurement V5.01 -->

<!-- COPYRIGHT 2002 RedSheriff Limited -->
<script language="JavaScript" type="text/javascript"><!--
  var _rsCI='lycos-de';
  var _rsCG='noref';
  var _rsDT=1;
  var _rsSI=escape(window.location);
  var _rsLP=location.protocol.indexOf('https')>-1?'https:':'http:';
  var _rsRP=escape(document.referrer);
  var _rsND=_rsLP+'//secure-uk.imrworldwide.com/';

  if (parseInt(navigator.appVersion)>=4) {
    var _rsRD=(new Date()).getTime();
    var _rsSE=0;
    var _rsSV='';
    var _rsSM=0;
    _rsCL='<scr'+'ipt language="JavaScript" type="text/javascript" src="'+_rsND+'v5.js"><\/scr'+'ipt>';
  } else {
    _rsCL='<img src="'+_rsND+'cgi-bin/m?ci='+_rsCI+'&cg='+_rsCG+'&si='+_rsSI+'&rp='+_rsRP+'">';
  }
  document.write(_rsCL);
//--></script>
<noscript>
<img src="//secure-uk.imrworldwide.com/cgi-bin/m?ci=lycos-de&amp;cg=noref" alt="">
</noscript>
<!-- END RedSheriff Measurement V5 -->

buddha · 16. August 2007

Guten Morgen,
Habe das Teil validieren lassen-keine Fehler, allerdings wird beim scrollen die klappertafel vor dem blau -weiss roten Rahmen gezeigt und nicht dahinter. Gibts da noch eine Lösung? Habe mehrere verschiedene Positionen probiert-kein Erfolg.
Gruss

Maik · 16. August 2007

Hi,

setz mal zur Schichtpositionierung der einzelnen Elemente die z-index -Eigenschaft ein. Hierbei gilt: je größer der Wert, desto weiter vorne (oben) liegt das Element:

Code:

.marquee { width:500px; height:70px; position:relative; margin-left: 160px; margin-top: -50px; z-index:0;}
.header {background-image: url(../images/header.gif);position: absolute; width:770px; z-index:10;}

Zusätzlich muss das swf-File mit wmode=opaque ausgestattet werden, einmal im Script und zum anderen im object-Element:

Code:

<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','wmode','opaque' ); //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" />
      <param name="wmode" value="opaque" />
    </object>
    </noscript>

✔ Textumbruch bei Link

buddha

Erfahrenes Mitglied

Maik

buddha

Erfahrenes Mitglied

Anhänge

Maik

buddha

Erfahrenes Mitglied

Maik

buddha

Erfahrenes Mitglied

Anhänge

Maik

buddha

Erfahrenes Mitglied

Maik

Neue Beiträge