• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Script für Mozilla

danjo

New member
Liebe Leute,


auf meiner Page www.sb-installationen.de verrutscht im Mozilla Browser

unter anderem auf der index stets die Schrift nach unten....

Hat das etwas mit der float Einstellung des swf-Films zu tun??? :confused:


Danke im voraus!



Hier das Script:
Code:
*{
 margin:0;
 padding:0;
}

body{
 background:#eee;
 font:.8em "trebuchet ms", arial, sans-serif;
 text-align:center;
}


/* Formatierungen Layout (grob) */
#seite{
 background:#000 url(hintergrund.jpg) repeat-y;
 margin:0 auto;
 padding:10px 10px 5px 13px;
 text-align:left;
 width:715px
}

#oben{
 background:#fff url(header_layer.jpg);
 clear:both;
 height:168px;
 width:713px;
}

#margit{
 background:#fff url(margit.jpg);
 padding:10px 10px 5px 13px;
 margin:130px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 
 }
 #daniel{
 background:#fff url(daniel.jpg);
 padding:10px 10px 5px 13px;
 margin:145px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 }
 #book{
 background:#fff url(book.swf);
  margin:80px 25px 20px 20px;
  float:middle;
 clear:both;
 height:600px;
 width:700px;
}
 
 #flash1{
 background:#fff url(flash1.swf);
 /* oben/ rechts/-----/----/ */
 margin:50px 1px 0px 0px;
 clear:both;
 float:right;
 height:227px;
 width:227px;
  }
 #teppich{
 background:#fff url(goto_roter_teppich.jpg);
 /* oben/ rechts/-----/----/ */
 margin:70px 1px 0px 0px;
 clear:both;
 float:right;
 height:151px;
 width:227px;
 }
 
#links{
 float:left;
 margin:0 0 20px 0;
 width:458px;
}

#rechts{
 float:left;
 margin:0 0 20px 20px;
 width:235px
}

#unten{
 background:#000000;
 clear:both;
 width:713px
}
.back {
	
	background-repeat: repeat-y;
	background-position: top center;
	background-attachment: scroll;
}

/* Formatierungen Navigationsleiste */
#navigation{
 background:#000000;
 float:left;
 width:500px;
 padding:0 0 4px 0
}

#navigation ul{
}

#navigation ul li{
 display:inline;
 margin:0 10px 0 0 
}

#navigation ul li a{   /* Balken - Navi */
 text-decoration:none;
 border-bottom:4px solid #000000;
 color:#ffffff;
 font-size:.9em; 
 font-weight:bold;
}

#navigation ul li a:hover{
 text-decoration:none;
 border-bottom:4px solid #ffffff
}



/* Sonstige Formatierungen */
.titel{
 float:right;
 width:90px;
 padding:0 10px 0 0
}

.titel img{
 border:0
}



/* Schrift-Formatierungen */
h1,h2,h3,h4,h5,h6{
 border-bottom:1px solid #ccc;
 color:#ffffff;
 font-size:1.5em;
 letter-spacing:0.01em;
 margin:25px 0 0 0
}

#links p{
 text-align:justify
}

#unten p{
 color:#eee;
 font:.85em "trebuchet ms", verdana, sans-serif;
 padding:5px;
}

/* Formatierungen Navigation (Rechte Spalte) */
#rechts ul{
list-style:none;
 margin:0 0 0 0
}

#rechts ul li{
 background:url(liste.jpg) no-repeat;
 display:block;
  margin:0 0px 0 0;
 padding:0 0 0 16px
}

#rechts ul li a{
 text-decoration:none;
  color:#666;
}

#rechts ul li a:hover{
  color:#000;
}



/* Link-Formatierungen */
a:link,a:visited,a:active{
 color:#000;
 text-decoration:underline
}

a:hover{
 text-decoration:none
}


#unten a{
 color:#fff;
 text-decoration:underline
}

#unten a:hover{
 text-decoration:none
}
 
Zuletzt bearbeitet von einem Moderator:
hallo,

du musst die Reihenfolge im html beachten:

zuerst kommt der linke Container (mit float:left), dann der rechte (Flash, mit float:right und ohne clear: both), dann der "teppich" mit float: right, so müßte es gehen

planet4.
 
Hmm irgendwas hat sich wieder verstellt...

http://www.sb-installationen.de/

der Text ist schon wieder nach unten gerutscht


Script habe ich aber abgeändert:

Code:
*{
 margin:0;
 padding:0;
}

body{
 background:#eee;
 font:.8em "trebuchet ms", arial, sans-serif;
 text-align:center;
}


/* Formatierungen Layout (grob) */
#seite{
 background:#000 url(hintergrund.jpg) repeat-y;
 margin:0 auto;
 padding:10px 10px 5px 13px;
 text-align:left;
 width:715px
}

#oben{
 background:#fff url(header_layer.jpg);
 clear:both;
 height:168px;
 width:713px;
}

#margit{
 background:#fff url(margit.jpg);
 padding:10px 10px 5px 13px;
 margin:130px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 
 }
 #daniel{
 background:#fff url(daniel.jpg);
 padding:10px 10px 5px 13px;
 margin:145px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 }
 #book{
 background:#fff url(book.swf);
  margin:80px 25px 20px 20px;
  float:middle;
 clear:both;
 height:600px;
 width:700px;[COLOR=Green]
[COLOR=Indigo][B]}
#links{
 float:left;
 margin:0 0 20px 0;
 width:458px;
}
 
 #flash1{
 background:#fff url(flash1.swf);
 /* oben/ rechts/-----/----/ */
 margin:50px 1px 0px 0px;
 float:right;
 height:227px;
 width:227px;
  }

 #teppich{
 background:#fff url(goto_roter_teppich.jpg);
 /* oben/ rechts/-----/----/ */
 margin:70px 1px 0px 0px;
 clear:both;
 float:right;
 height:151px;
 width:227px;
 }[/B]
 [/COLOR]
[/COLOR]

#rechts{
 float:left;
 margin:0 0 20px 20px;
 width:235px
}

#unten{
 background:#000000;
 clear:both;
 width:713px
}
.back {
	
	background-repeat: repeat-y;
	background-position: top center;
	background-attachment: scroll;
}

/* Formatierungen Navigationsleiste */
#navigation{
 background:#000000;
 float:left;
 width:500px;
 padding:0 0 4px 0
}

#navigation ul{
}

#navigation ul li{
 display:inline;
 margin:0 10px 0 0 
}

#navigation ul li a{   /* Balken - Navi */
 text-decoration:none;
 border-bottom:4px solid #000000;
 color:#ffffff;
 font-size:.9em; 
 font-weight:bold;
}

#navigation ul li a:hover{
 text-decoration:none;
 border-bottom:4px solid #ffffff
}



/* Sonstige Formatierungen */
.titel{
 float:right;
 width:90px;
 padding:0 10px 0 0
}

.titel img{
 border:0
}



/* Schrift-Formatierungen */
h1,h2,h3,h4,h5,h6{
 border-bottom:1px solid #ccc;
 color:#ffffff;
 font-size:1.5em;
 letter-spacing:0.01em;
 margin:25px 0 0 0
}

#links p{
 text-align:justify
}

#unten p{
 color:#eee;
 font:.85em "trebuchet ms", verdana, sans-serif;
 padding:5px;
}

/* Formatierungen Navigation (Rechte Spalte) */
#rechts ul{
list-style:none;
 margin:0 0 0 0
}

#rechts ul li{
 background:url(liste.jpg) no-repeat;
 display:block;
  margin:0 0px 0 0;
 padding:0 0 0 16px
}

#rechts ul li a{
 text-decoration:none;
  color:#666;
}

#rechts ul li a:hover{
  color:#000;
}



/* Link-Formatierungen */
a:link,a:visited,a:active{
 color:#000;
 text-decoration:underline
}

a:hover{
 text-decoration:none
}


#unten a{
 color:#fff;
 text-decoration:underline
}

#unten a:hover{
 text-decoration:none
}
 
Zuletzt bearbeitet:
danjo schrieb:
Hmm irgendwas hat sich wieder verstellt...
.. du hast es wahrscheinlich verstellt :)
du musst in deinem HTML-Quelltext die Reihenfolge einhalten: zuerst kommt der links-Container, dann der
Flash, dann der "Teppich"...
und wenn du dann hier deinen Quelltext hinpostest, musst du mal auf <> klicken, um den Code zu formatieren...
[edit] ach so: und beim "Teppcih" brauchst du kein clear: both [/edit]
planet4.
 
Zuletzt bearbeitet:
Du meinst hier sollte ich die Container neu ordnen?

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Temporär, Universität Hannover, Hannover, sb, sb-installationen, layer, Margit Schild, Daniel Baum, Installationen, Lichtkunst, Lichtinstallationen, Beamer, Dialog, Events, Flash, Film, Siloplane, 175 Jahrfeier, Baum, Schild, Kunst, Temporäres, ">
<meta name="description" content="temporäre installationen im raum - lichtinstallationen für events">
<meta name="author" content="Baum Daniel">
<meta name="organization" content="sb-installationen">
<meta name="language" content="de">
<META NAME="Robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="extern.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>.:: sb-installationen ::.</title>

<style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
body,td,th {
	font-size: 0.8em;
}
body {
	background-color: #333333;
	background-image: url(bg.gif);
}
a:link {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #00CC33;
}
a:active {
	color: #FFFFFF;
}
.Stil2 {color: #FFFFFF; font-size: medium; }
-->
</style>
</head>
<body>
		
<div id="seite">

<!-- Beginn Navigationsleiste -->
<div id="navigation">
<ul>
<li><a href="index.html" target="_self">home</a></li>
<li><a href="fotos.html" target="_self">fotos</a></li>
<li><a href="aktuelles.html" target="_self">aktuelles</a></li>
<li><a href="profil.html" target="_self">profil</a></li>

<li><a href="kontakt.html" target="_self">kontakt</a></li>
<li><a href="links.html" target="_self">links</a></li>
<li><a href="impressum.html" target="_self">impressum</a></li>
</ul>
</div>
<div class="titel"></div>
<!-- Ende Navigationsleiste -->

<!-- Header -->
<div id="oben">
  <p> </p>
  <p> </p>

  <p> </p>
</div>
<!-- Header -->
[COLOR=Red]<div id="flash1">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="227" height="227">
    <param name="movie" value="flash1.swf" />
    <param name="quality" value="high" />
    <embed src="flash1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="227" height="227"></embed>
  </object>
</div>[/COLOR]
[COLOR=Red]<div id="teppich"><a href="roterteppich.html" target="_self"><img src="goto_roter_teppich.jpg" border="0" /></a>

</div>[/COLOR]
<!-- Beginn Linke Spalte -->

[COLOR=Red]<div id="links">[/COLOR]

<p class="Stil2"> </p>
<p class="Stil2"> </p>
<p class="Stil2"><strong>temporär</strong> <lat.-fr.>: zeitweilig [auftretend], vorübergehend. </p>
<p class="Stil1"> </p>
<h2 class="Stil1">temporäre installationen </h2>

<p class="Stil1"> </p>
<p class="Stil1">Architekten, Landschafts- und Freiraumplaner zeigen vermehrt Interesse an temporären Installationen. Sie werden als Dekorationen oder als Eyecatcher für Veranstaltungen eingesetzt - z.B. "Der <a href="roterteppich.html" target="_self">Rote Teppich</a> für den Tag der offenen Tür der Fakultät für Architektur und Landschaft" der Universität Hannover. In anderen Zusammenhängen sollen sie als eine Art neue Herangehensweise aktuellen Aufgaben begegnen - u. a. den Transformationsprozessen, der Schrumpfung und dem Leerstand. Die Initiatorinnen und Initiatoren greifen dabei tief in die Material- und Technikkiste. Sie sehen darin eine Möglichkeit, den Orten für einen begrenzten Zeitraum ein anderes Gesicht zu verleihen, neue Bilder in ihnen zu erzeugen oder ein Geschehen zu intendieren. </p>

<p> </p>
</div>
<div id="unten">
<p align="center">.:: Alle Rechte auf Inhalt und Fotos liegen bei " sb-installationen " und unterliegen dem Copyright 2006<span class="Stil1"><span class="meldungsmall"> ©</span></span> ::. <a href="http://www.webcounter.goweb.de/" target="_blank"><img src="http://webcounter.goweb.de/20434.GIF" hspace="1" vspace="1" border="0" alt="Web Counter by www.webcounter.goweb.de" /></a></p>
</div>
<!-- Counter by GOWEB -->
 
</div>
</body>

</html>
 
Zuletzt bearbeitet:
(den geposteten Quelltext kann man jetzt leider nicht richtig lesen, aber das liegt, glaub ich, nicht an dir)

ich mein: der Quelltext wird ja nacheinander abgearbeitet, sozusagen, wenn du jetzt den Container "links"
erst an dritter Stelle hinschreibst, nach "flash" und "teppich", dann zeigt der Browser ihn auch erst
als dritten an, logischerweise, stehen dann die beiden anderen Container höher :)
(es sei denn, man positioniert sie absolut oder relativ, aber das ist ja hier nicht der Fall)
also einfach im HTML-Quelltext zuerst links usw. ...

ich hab mir gerade die schönen Fotos vom Jazz-Abend angeschaut.... und ihr habt nur 3 Rollen Tesafilm gebraucht :)

planet4.
 
So sieht es noch nicht korrekt aus in der Darstellung......


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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Temporär, Universität Hannover, Hannover, sb, sb-installationen, layer, Margit Schild, Daniel Baum, Installationen, Lichtkunst, Lichtinstallationen, Beamer, Dialog, Events, Flash, Film, Siloplane, 175 Jahrfeier, Baum, Schild, Kunst, Temporäres, ">
<meta name="description" content="temporäre installationen im raum - lichtinstallationen für events">
<meta name="author" content="Baum Daniel">
<meta name="organization" content="sb-installationen">
<meta name="language" content="de">
<META NAME="Robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="extern.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>.:: sb-installationen ::.</title>
<style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
body,td,th {
	font-size: 0.8em;
}
body {
	background-color: #333333;
	background-image: url(bg.gif);
}
a:link {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #00CC33;
}
a:active {
	color: #FFFFFF;
}
.Stil2 {color: #FFFFFF; font-size: medium; }
-->
</style>
</head>
<body>
		
<div id="seite">

<!-- Beginn Navigationsleiste -->
<div id="navigation">
<ul>
<li><a href="index.html" target="_self">home</a></li>
<li><a href="fotos.html" target="_self">fotos</a></li>
<li><a href="aktuelles.html" target="_self">aktuelles</a></li>
<li><a href="profil.html" target="_self">profil</a></li>
<li><a href="kontakt.html" target="_self">kontakt</a></li>
<li><a href="links.html" target="_self">links</a></li>
<li><a href="impressum.html" target="_self">impressum</a></li>
</ul>
</div>
<div class="titel"></div>
<!-- Ende Navigationsleiste -->

<!-- Header -->
<div id="oben">
  <p> </p>
  <p> </p>
  <p> </p>
</div>

[COLOR=Red]<div id="links">[/COLOR]
<!-- Header -->
<div id="flash1">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="227" height="227">
    <param name="movie" value="flash1.swf" />
    <param name="quality" value="high" />
    <embed src="flash1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="227" height="227"></embed>
  </object>
</div>
<div id="teppich"><a href="roterteppich.html" target="_self"><img src="goto_roter_teppich.jpg" border="0" /></a>
</div>
<!-- Beginn Linke Spalte -->



<p class="Stil2"> </p>
<p class="Stil2"> </p>
<p class="Stil2"><strong>temporär</strong> <lat.-fr.>: zeitweilig [auftretend], vorübergehend. </p>
<p class="Stil1"> </p>
<h2 class="Stil1">temporäre installationen </h2>
<p class="Stil1"> </p>
<p class="Stil1">Architekten, Landschafts- und Freiraumplaner zeigen vermehrt Interesse an temporären Installationen. Sie werden als Dekorationen oder als Eyecatcher für Veranstaltungen eingesetzt - z.B. "Der <a href="roterteppich.html" target="_self">Rote Teppich</a> für den Tag der offenen Tür der Fakultät für Architektur und Landschaft" der Universität Hannover. In anderen Zusammenhängen sollen sie als eine Art neue Herangehensweise aktuellen Aufgaben begegnen - u. a. den Transformationsprozessen, der Schrumpfung und dem Leerstand. Die Initiatorinnen und Initiatoren greifen dabei tief in die Material- und Technikkiste. Sie sehen darin eine Möglichkeit, den Orten für einen begrenzten Zeitraum ein anderes Gesicht zu verleihen, neue Bilder in ihnen zu erzeugen oder ein Geschehen zu intendieren. </p>
<p> </p>
</div>
<div id="unten">
<p align="center">.:: Alle Rechte auf Inhalt und Fotos liegen bei " sb-installationen " und unterliegen dem Copyright 2006<span class="Stil1"><span class="meldungsmall"> ©</span></span> ::. <a href="http://www.webcounter.goweb.de/" target="_blank"><img src="http://webcounter.goweb.de/20434.GIF" hspace="1" vspace="1" border="0" alt="Web Counter by www.webcounter.goweb.de" /></a></p>
</div>
<!-- Counter by GOWEB -->
 
</div>
</body>
</html>
 
hoppla! wo ist denn jetzt dein </div> für den link-Container?
du hast jetzt alle anderen divs in diesem link-div drin, deshalb ist es jetzt ganz falsch...

planet4.
 
ja, im IE, aber im Firefox ist der rote Teppich ein bisschen zu weit unten ausgerollt...
musst du wohl die 70px margin-top wegnehmen und dann mal gucken was IE dazu meint...

planet4.
 
wo ist welcher teppich ausgerollt...bin gerade etwas verwirrt auch wegen der Doppeldeutigkeit...

Welchen html seite meinst du?
 
ich mein die Seite hier: http://www.sb-installationen.de/

im Firefox hängt das letzte Bild ("der rote Teppich") zu weit unten,
ich häng mal zwei Screenshots an

wenn du also die erste Angabe im margin für dieses Bild auf 0 setzt,
(also margin-top), (du hast dort jetzt 70px stehen), dann müsste es klappen

planet4
 

Anhänge

  • sb_install_IE.jpg
    sb_install_IE.jpg
    21,3 KB · Aufrufe: 6
  • sb_install_FF.jpg
    sb_install_FF.jpg
    20,4 KB · Aufrufe: 6
Zurück
Oben