| Autor |
Nachricht |
zorro
Threadersteller
Dabei seit: 09.10.2003
Ort: HB
Alter: -
Geschlecht: -
|
Verfasst Di 27.06.2006 16:44
Titel CSS Denkfehler ? |
  |
|
...und wieder mal jemand der sich den kopf einrennt...
will ja gerne nach dem box-modell via externem css ne seite
aufbauen. funzt ja wunderbar bis auf folgenden punkt:
wenn ich via css im "content" ein Hintergrundbild eingebe das ich
mittels "background-attachment: fixed" fixiere
läufts ma wieder im IE wie gewünscht, aber der FF fixiert es nicht im "content"
sondern in der "box" drumherum.
Wo iss denn da wieder der dänkfähler ???
html:
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FF0000">
<div id="box" style="position:absolute; left:50%; top:50%; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00;">
<div id="content" style="position:absolute; width:594px; height:435px; z-index:1">
<p>gfdgdg</p>
<p>dfg</p>
<p>gf</p>
<p>dg</p>
<p>dfgd</p>
<p>f</p>
<p>g</p>
<p>dg</p>
<p>fdg</p>
<p>fd</p>
<p>gd</p>
<p>g</p>
<p>dg</p>
<p>fdg</p>
<p>dg</p>
<p>fdg</p>
<p>dgfd</p>
<p>gfd</p>
</div>
</div>
</body>
</html>
|
und css:
| Code: | #box {
position: absolute;
height: 570px;
width: 780px;
margin: -285px 0 0 -390px;
top: 50%;
left: 50%;
text-align: left;
padding: 0;
border: 1px none #003333;
}
#content {
overflow: auto;
background-image: url(pix/bg.jpg);
background-attachment: fixed;
left: 50;
top: 40;
}
.ueber01 {
font: bold 16px Arial, Helvetica, sans-serif;
color: #000033;
} |
Besten Dank für Eure Tipps !!!
Zuletzt bearbeitet von Nimroy am Mi 28.06.2006 06:57, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: 
|
Verfasst Mi 28.06.2006 12:58
Titel Re: CSS Denkfehler ? |
|
|
Hi zorro 
| zorro hat geschrieben: |
will ja gerne nach dem box-modell via externem css ne seite
aufbauen. |
Dann solltest du mit einem anderen Doctype arbeiten, denn so lässt du den IE in den Quirksmode rendern und er interpretiert das Boxmodell falsch 
| zorro hat geschrieben: |
wenn ich via css im "content" ein Hintergrundbild eingebe das ich
mittels "background-attachment: fixed" fixiere
läufts ma wieder im IE wie gewünscht, aber der FF fixiert es nicht im "content"
sondern in der "box" drumherum.
|
Der IE kennt background-attachment für andere Elemente als für den body-Tag gar nicht an. Somit versteht er diese Angabe auch für Divs nicht und positioniert das Hintergrundbild eben dann anders als im FF oder Opera. 
btw:
Wenn du schon CSS verwendest, dann solltest du es auch strikt durchziehen und nicht mal etwas mit html formatieren, wie die Hintergrundfarbe für den body, oder das CSS direkt in dem formatierten Element einbinden via style="".
Nutze doch einen Vorteil von CSS und trenne Inhalt vom Layout
|
|
| |
|
|
|
Anzeige
|
|
|
zorro
Threadersteller
Dabei seit: 09.10.2003
Ort: HB
Alter: -
Geschlecht: -
|
Verfasst Mi 28.06.2006 14:28
Titel
|
|
|
Hi nicoG 
Besten Dank für deine Hinweise!!!
Hab jetzt ma den Doctype auf
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">" gesetzt
und im css den "content" positioniert.
Dat läuft im FF ja super, aber wie gesagt geht im IE dann ja
nicht "background-attachment: fixed".
Erstaunlicherweise passiert aber folgendes:
wenn ich im css trotzdem "background-attachment: fixed"
für den "content" reinsetze, funzt es im IE aber im
FF wird dadurch das Bild einfach zentriert.
Hast du vieleicht dazu noch ne Idee ???
btw: hab nur "auf die Schnelle im html formatiert; mach ich sonst auch
nicht (aber Danke für die Erinnerung)
|
|
| |
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Mi 28.06.2006 14:59
Titel
|
|
|
Das Hintergrundbild wird zentriert mit dem CSS, das du da angegeben hast? Normalerweise müsste er das Bild endlos wiederholen und den ganzen Div füllen.
Wenn du das CSS geändert hast, kannst du das neue mal posten?
Achja: Ein kleiner Workaround für den IE
http://www.thestyleworks.de/tut-art/iewinfixed.shtml
|
|
| |
|
|
zorro
Threadersteller
Dabei seit: 09.10.2003
Ort: HB
Alter: -
Geschlecht: -
|
Verfasst Mi 28.06.2006 15:32
Titel
|
|
|
merci,
das mit dem zentriert stimmt nicht ganz (sah nur so aus, da die Maße der
Box und Content entsprechend sind.
Das Hintergrundbild wird im FF fixiert aber nicht am "content" sondern
der "box" ausgerichtet. Im IE6 wird´s "richtig" dargestellt (also
Hindtergrund fixiert im "content").
Hier das geänderte CSS:
[code]#box {
position: absolute;
height: 570px;
width: 780px;
margin: -285px 0 0 -390px;
top: 50%;
left: 50%;
text-align: left;
padding: 0;
border: 1px none #003333;
}
#content {
overflow: auto;
background-image: url(pix/bg.jpg);
background-attachment: fixed;
position: absolute;
height: 594px;
width: 435px;
top: 100px;
left: 50px;
}[/code]
???
|
|
| |
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Do 29.06.2006 11:16
Titel
|
|
|
| zorro hat geschrieben: |
Das Hintergrundbild wird im FF fixiert aber nicht am "content" sondern
der "box" ausgerichtet. Im IE6 wird´s "richtig" dargestellt (also
Hindtergrund fixiert im "content"). |
Stichwort Viewport:
http://www.thestyleworks.de/ref/background-attachment.shtml
Es ist nunmal so und man kann da nichts ändern. Du müsstest das Bild dann einfach positionieren per background-position, so dass es an der richtigen Stelle steht.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[JS] Denkfehler?
[CSS] Denkfehler?
Adobe Flash - Denkfehler :(
|
|
Willkommen auf dem Portal für Mediengestalter
