mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 19.04.2024 21:10 Benutzername: Passwort: Auto-Login

Thema: Fixe Position mit CSS | Unterschied bei FF und InetExp vom 01.02.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Fixe Position mit CSS | Unterschied bei FF und InetExp
Autor Nachricht
choise
Threadersteller

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Do 01.02.2007 15:00
Titel

Fixe Position mit CSS | Unterschied bei FF und InetExp

Antworten mit Zitat Zum Seitenanfang

Hi Leute,
Ich will eine grafik auf eine fixe Position bringen.
Hab das ungefähr so gemacht:
HEAD
<style type="text/css">

html {
padding: 0;
}

#fixiert {
position: absolute;
top: 217px; left: 0px;
width: 20px;
border: none;
}
html>body #fixiert {
position: fixed;
z-index: 200;
}
</style>

BODY

<div id="fixiert">
<img src="pix/12345.gif" width="18" height="127" /></div>


Funktioniert im InternetExplorer und im Firefox,
wenn ich das ganze aber in eine vorhandene Page einbaue seh ich das ganze noch im Firefox,
aber im Internet Explorer nicht. Wenn sich die Seite im Explorer lädt, dann sehe ich noch kurz
das Bild, aber es sieht dann so aus als würde es hinter den anderen Bausteinen verschwinden.
Diese Seite ist hauptsächlich mit Ebenen gebastelt(kann ich auch nich ändern).
Keine Ebene hat einen z-index über 200.

Was soll ich tun ?

pls help
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Zim

Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht: Männlich
Verfasst Do 01.02.2007 15:10
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,

html>body #fixiert { ...

was solln das schliessende tag symbol da?

versuch erst mal das nicht so zusammenzufassen also

html { ...}
#fixiert ...
body ...

einzelnd definieren und schauen ob es dann klappt

ZIM
  View user's profile Private Nachricht senden
Anzeige
Anzeige
choise
Threadersteller

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Do 01.02.2007 15:19
Titel

Antworten mit Zitat Zum Seitenanfang

hm k also wenn ich einfach schreib;

Code:
HEAD

#fixiert {
    position: fixed;
    top: 217px; left: 0px;
    width: 20px;
    border: none;
    z-index: 200;

BODY

<div id="fixiert">
<img src="pix/12345.gif" width="18" height="127" /></div>


Gehts zwwaar auf ner leeren Site, aber ich kanns nich einfügen *Schnief*
Irgendwie ... stimmt da was nich... steht in der vorhandenen Html datei wohl schon etwas ?
Es läd sich ja dahinter, glaub ich..
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Do 01.02.2007 15:21
Titel

Antworten mit Zitat Zum Seitenanfang

Zim hat geschrieben:
Hallo,

html>body #fixiert { ...

was solln das schliessende tag symbol da?

versuch erst mal das nicht so zusammenzufassen also

html { ...}
#fixiert ...
body ...

einzelnd definieren und schauen ob es dann klappt

ZIM


das "schließende tag symbol" ist ein css selektor.

Zitat:
Über den direkten Nachbarselektor (>) ist es möglich, ein Element anzusprechen, das unmittelbar einem anderen auf gleicher Ebene folgt.


in dieser form angewendet stellt es allerdings einen hack dar (die angabe wird vom IE nicht interpretiert).



ONTOPIC:
poste mal den rest deines sourcecodes.. ohne den ist es eigentlich nur rätselraten...


Zuletzt bearbeitet von sahnemuh am Do 01.02.2007 15:33, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
choise
Threadersteller

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Do 01.02.2007 16:04
Titel

Antworten mit Zitat Zum Seitenanfang

wenn du das willst ^^:



Code:
HEAD

<style type="text/css">
body {
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-image: url(pix/hg-rot.png);
   background-repeat: repeat-x;
   background-color: #7D212B;
}
body,td,th {
   color: #FFFFFF;
}
#Layer1 {
   position:absolute;
   width:904px;
   height:25px;
   z-index:1;
   left: 75px;
   top: 97px;
}
#Layer2 {
   position:absolute;
   width:720px;
   height:19px;
   z-index:2;
   left: 125px;
   top: 127px;
}
#Layer3 {
   position:absolute;
   width:119px;
   height:68px;
   z-index:3;
   left: 413px;
   top: 10px;
}
#Layer4 {
   position:absolute;
   width:430px;
   height:313px;
   z-index:4;
   left: 0px;
   top: 200px;
}
#Layer5 {
   position:absolute;
   width:349px;
   height:29px;
   z-index:13;
   left: 446px;
   top: 193px;
}
#Layer6 {
   position:absolute;
   width:381px;
   height:123px;
   z-index:12;
   left: 446px;
   top: 228px;
}
#Layer7 {
   position:absolute;
   width:131px;
   height:102px;
   z-index:17;
   left: 446px;
   top: 854px;
}
#Layer8 {
   position:absolute;
   width:87px;
   height:103px;
   z-index:16;
   left: 740px;
   top: 844px;
}
#Layer9 {
   position:absolute;
   width:84px;
   height:102px;
   z-index:15;
   left: 641px;
   top: 844px;
}
#Layer10 {
   position:absolute;
   width:588px;
   height:26px;
   z-index:10;
   left: 0px;
   top: 795px;
}
#Layer11 {
   position:absolute;
   width:381px;
   height:37px;
   z-index:11;
   left: 441px;
   top: 976px;
}
.Stil1 {
   color: #FFFFFF;
   font-size: 10px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
   color: #FFFFFF;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #FFFFFF;
}
a:hover {
   text-decoration: none;
   color: #FFFFFF;
    font-weight: bold;
}
a:active {
   text-decoration: none;
   color: #FFFFFF;
}
.Stil3 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 9px;
}
.Stil4 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-style: normal;
   line-height: 16px;
   font-variant: normal;
   text-align: justify;
}
a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
}
.Stil5 {font-size: 10px}
#Layer12 {
   position:fixed;
   width:23px;
   height:115px;
   z-index:14;
   left: 0px;
   top: 217px;
}
#Layer13 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:15;
   left: 158px;
   top: 245px;
}
.Stil6 {font-size: 11px}
.Stil8 {font-size: 11px; color: #B01C2E; }
-->
  html {
    padding: 0;
  }

  #fixiert {
    position: fixed;
    top: 217px; left: 0px;
    width: 20px;
    border: none;
  }
 #fixiert {
   position: fixed;
   z-index: 200;
  }
</style>





--------------------------------------------------------------------------------------------
BODY



<div id="fixiert">
<img src="pix/12345.gif" width="18" height="127" /></div>
<div id="Layer1">
  <table width="862" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="77" align="center" valign="middle"><div align="center"><a href="traditionell.html"><u>Haus-Ideen</u></a></div></td>
      <td width="42" align="center" valign="middle"><div align="center"><img src="pix/linie-rot.gif" width="42" height="25" /></div></td>
      <td width="77" align="center" valign="middle"><div align="center"><a href="voema-system.html">Bio-Qualit&auml;t</a></div></td>
      <td width="42" align="center" valign="middle"><div align="center"><img src="pix/linie-rot.gif" width="42" height="25" /></div></td>
      <td width="100" align="center" valign="middle"><div align="center"><a href="beispielhaeuser.html">Beispielh&auml;user</a><a href="aktuelles.html"></a></div></td>
      <td width="42" align="center" valign="middle"><div align="center"><img src="pix/linie-rot.gif" width="42" height="25" /></div></td>
      <td width="77" align="center" valign="middle"><div align="center"><a href="haus-des-monats.html">Aktuelles</a></div></td>
      <td width="42" align="center" valign="middle"><div align="center"><img src="pix/linie-rot.gif" width="42" height="25" /></div></td>
      <td width="70" align="center" valign="middle"><div align="center"><a href="staerken.html">V&Ouml;MA</a></div></td>
      <td width="42" align="center" valign="middle"><div align="center"><img src="pix/linie-rot.gif" width="42" height="25" /></div></td>
      <td width="77" align="center" valign="middle"><div align="center"><a href="ansprechpartner.html">Kontakt</a></div></td>
    </tr>
  </table>
</div>
<div id="Layer2">
  <table width="377" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="15" align="center" valign="middle"><div align="right"><a href="traditionell.html"></a><img src="pix/pfeil-rot.gif" width="20" height="25" /></div></td>
      <td width="77" align="center" valign="middle"><div align="center"><a href="traditionell.html">Traditionell</a></div></td>
      <td width="15" align="center" valign="middle"><div align="right"></div></td>
      <td width="77" align="center" valign="middle"><div align="center"><a href="modern.html">Modern</a></div></td>
      <td width="15" align="center" valign="middle"><div align="center"></div></td>
      <td width="77" align="center" valign="middle"><div align="center"><a href="nordisch.html">Nordisch</a></div></td>
      <td width="15" align="center" valign="middle"><div align="center"></div></td>
      <td width="77" align="center" valign="middle"><div align="center"><a href="service.html">Service</a></div></td>
    </tr>
  </table>
</div>
<div id="Layer3"><a href="index.html"><img src="pix/logo.png" width="166" height="81" border="0" /></a></div>
<div id="Layer4">
  <table width="394" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><a href="galerie/modern/modern-1.html"><img src="galerie/thumb/m-1.jpg" width="118" height="80" border="0"></a></td>
      <td><a href="galerie/modern/modern-2.html"><img src="galerie/thumb/m-2.jpg" width="118" height="80" border="0"></a></td>
      <td><a href="galerie/modern/modern-3.html"><img src="galerie/thumb/m-3.jpg" width="118" height="80" border="0"></a></td>
    </tr>
    <tr>
      <td colspan="3"><img src="pix/blank.gif" width="10" height="10"></td>
    </tr>
    <tr>
      <td><a href="galerie/modern/modern-4.html"><img src="galerie/thumb/m-4.jpg" width="118" height="80" border="0"></a></td>
      <td><a href="galerie/modern/modern-5.html"><img src="galerie/thumb/m-5.jpg" width="118" height="80" border="0"></a></td>
      <td><a href="galerie/modern/modern-6.html"><img src="galerie/thumb/m-6.jpg" width="118" height="80" border="0"></a></td>
    </tr>
    <tr>
      <td colspan="3"><img src="pix/blank.gif" width="10" height="10"></td>
    </tr>
    <tr>
      <td><a href="galerie/modern/modern-7.html"><img src="galerie/thumb/m-7.jpg" width="118" height="80" border="0"></a></td>
      <td><a href="galerie/modern/modern-8.html"><img src="galerie/thumb/m-8.jpg" width="118" height="80" border="0"></a></td>
      <td><a href="galerie/modern/modern-9.html"><img src="galerie/thumb/m-9.jpg" width="118" height="80" border="0"></a></td>
    </tr>
    <tr>
      <td colspan="3"><img src="pix/blank.gif" width="10" height="10"></td>
    </tr>
    <tr>
      <td><a href="galerie/modern/modern-10.html"><img src="galerie/thumb/m-10.jpg" width="118" height="80" border="0"></a></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<div id="Layer5"><img src="pix/heads/modern.gif" width="380" height="33" /></div>
<div class="Stil4" id="Layer6">
  <p align="justify">test</p>
  </div>
<div class="Stil3" id="Layer7">test</div>
<div id="Layer8"><img src="pix/thumb/thumb2.png" width="85" height="103" /></div>
<div id="Layer9"><img src="pix/thumb/thumb5.png" width="85" height="103" /></div>
<div id="Layer10"><img src="pix/slogan/rot.png" width="688" height="24" /></div>
<div class="Stil1" id="Layer11">
  <table width="201" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="80" align="center" valign="middle"><div align="center"><span class="Stil8"><a href="datenschutz.html">Datenschutz</a></span></div></td>
      <td width="10" align="center" valign="middle"><img src="pix/linie-dunkelrot.gif" width="42" height="25" /></td>
      <td width="77" align="center" valign="middle"><div align="center"><span class="Stil6"><a href="impressum.html">Impressum</a></span></div></td>
    </tr>
  </table>
</div>



So... das is alles, und da funzts einfach nich


Zuletzt bearbeitet von choise am Do 01.02.2007 16:06, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Header 100% Höhe und fixe Navigation
HG-Grafik im Div bis unten und zwei fixe Menüs
fixe breite in Tabelle erzwingen > Mozilla ?
Elastisches Layout ohne fixe Bezugsgröße
3 Spalten Layout - aussen fixe Breite, mitte variabel
[CSS] position
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.