mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 07.12.2016 21:54 Benutzername: Passwort: Auto-Login

Thema: CSS Denkfehler ? vom 27.06.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Denkfehler ?
Autor Nachricht
zorro
Threadersteller

Dabei seit: 09.10.2003
Ort: HB
Alter: -
Geschlecht: -
Verfasst Di 27.06.2006 15:44
Titel

CSS Denkfehler ?

Antworten mit Zitat Zum Seitenanfang

...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 05:57, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Mi 28.06.2006 11:58
Titel

Re: CSS Denkfehler ?

Antworten mit Zitat Zum Seitenanfang

Hi zorro Lächel
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 *zwinker*
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. * Ja, ja, ja... *

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 *zwinker*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
zorro
Threadersteller

Dabei seit: 09.10.2003
Ort: HB
Alter: -
Geschlecht: -
Verfasst Mi 28.06.2006 13:28
Titel

Antworten mit Zitat Zum Seitenanfang

Hi nicoG * Applaus, Applaus *
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)
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Mi 28.06.2006 13:59
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
zorro
Threadersteller

Dabei seit: 09.10.2003
Ort: HB
Alter: -
Geschlecht: -
Verfasst Mi 28.06.2006 14:32
Titel

Antworten mit Zitat Zum Seitenanfang

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]

???
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Do 29.06.2006 10:16
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
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.
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] Denkfehler?
[JS] Denkfehler?
Adobe Flash - Denkfehler :(
[CSS] Button verrutsch im Firefox, CSS-Künstler gesucht
[CSS/PHP/Javascript] CSS-Menu a:active soll sichtbar sein
[Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown
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.