Autor |
Nachricht |
choise
Threadersteller
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Do 01.02.2007 15:00
Titel Fixe Position mit CSS | Unterschied bei FF und InetExp |
|
|
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
|
|
|
|
|
Zim
Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht:
|
Verfasst Do 01.02.2007 15:10
Titel
|
|
|
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
|
|
|
|
|
Anzeige
|
|
|
choise
Threadersteller
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Do 01.02.2007 15:19
Titel
|
|
|
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
Irgendwie ... stimmt da was nich... steht in der vorhandenen Html datei wohl schon etwas ?
Es läd sich ja dahinter, glaub ich..
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 01.02.2007 15:21
Titel
|
|
|
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
|
|
|
|
|
choise
Threadersteller
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Do 01.02.2007 16:04
Titel
|
|
|
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ä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ä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Ö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> </td>
<td> </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
|
|
|
|
|
|
|
|
Ä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
|
|