Völlig falsche Positionierung im FF

jilli · 04. Feb. 2006

hallo,

leider kome ich mal wieder nicht weiter. mein layout sieht im IE super aus genau so wie ich es wollte. Im FF ist der content-Bereich ("Bla, Bla, Bla") total falsch platziert!!!!

www.is-kandemir.de/kiga/index.html

wo liegt mein fehler??

danke vorab - JILLI

Code:

CSS
----------------------------------
* {
padding:0px;
margin:0px;
}

body
{
scrollbar-base-color: #ffffe6;
scrollbar-3d-light-color: #ffcc00;
scrollbar-arrow-color: #ffcc00;
scrollbar-darkshadow-color: #ffffe6;
scrollbar-face-color: #ffffe6;
scrollbar-highlight-color: #ffcc00;
scrollbar-shadow-color: #ffcc00;
scrollbar-track-color: #ffffe6;
font-family:verdana;
font-size:11px;
background-color: #FFFFFF;
text-align:center;
}
 
#rahmen {
width:780px;
height:550px;
border:1px solid #ff6900;
margin:25px auto;
text-align:left; 
background-color:#FFFFFF;
}

#header {
height:175px;
background-color:#ff6900;
}

#bild1 {
float:left;
}

#bild2 {
float:left;
padding-left:6px;
}

#bild3 {
float:right;
}

#nav {
float:left;
width:200px;
height:375px;
background-color:#FDD6B1;
}


 a {
       display:block;
       height:25px;
       background-repeat:no-repeat;
      }
	div.nav p {
	padding:0px;
	margin:0px;
	}
    div.nav {
        float:left;
		width:185px;
    }
	div.nav_1 {
		padding-left:15px;
		padding-top:30px;
		
		}
    div.nav_1 a {
        background-image:url(images/grafiken/konzept.gif);
    }
    div.nav_1 a:visited {
        background-image:url(images/grafiken/konzept.gif);
    }
    div.nav_1 a:hover {
        background-image:url(images/grafiken/konzept_h.gif);
    }
	div.nav_1 a:active {
        background-image:url(images/grafiken/konzept_h.gif);
    }
	
	div.nav_2 {
	padding-left:15px;
	padding-top:6px;
	}
    div.nav_2 a {
        background-image:url(images/grafiken/konzept.gif);
    }
    div.nav_2 a:visited {
        background-image:url(images/grafiken/konzept.gif);
    }
    div.nav_2 a:hover {
        background-image:url(images/grafiken/konzept_h.gif);
    }
	div.nav_2 a:active {
        background-image:url(images/grafiken/konzept_h.gif);
    }
	
#content {
float:right;
width:576px;
height:373px;
padding-left:15px;
padding-top:30px;
border:1px solid green;
}

	
	
	
	
	
HTML
-------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Liane Kita</title>
<link rel=stylesheet type="text/css" href="kita.css">
</head>

<body>
    
   <div id="rahmen">
   <div id="header">
   <div id="bild1"><img src="images/fotos/garten1.jpg"></div>
   <div id="bild2"><img src="images/fotos/kind_tuer.jpg"></div>
   <div id="bild3"><img src="images/grafiken/logo.gif"></div>
   </div>
   
   <div id="nav">
   		<div class="nav_1"><p><a href=""></a></p></div>
		<div class="nav_2"><p><a href=""></a></p></div>
   </div>
   
	   [B]<div id="content">
	   
	   Bla Bla Bla
	   
	   
	   </div>[/B]   
   
   
   
   </div>
   
</body>

</html>

dkdenz · 04. Feb. 2006

Da da 15px padding-left stehen, rechnet FF diese zu der Breite dazu.

Code:

#content {
float:right;
width:[B]561[/B]px;
height:373px;
padding-left:[B]15[/B]px;
padding-top:30px;
border:1px solid green;
}

jilli · 04. Feb. 2006

hallo dekadenz,

viiiiiielen dank. leider habe ich aber immer noch ein kleines problem. die bg-grafik ist 560x359 groß. ich möchte, dass sie in der rechten unteren ecke platziert ist. beim IE ist es okay beim FF leider wieder nicht!!!

kannst du nochmal einen blick drauf werfen. www.is-kandemir.de/kiga/konzept_ziele.htm

vielen dank - JILLI

Code:

css
-------------------------
* {
padding:0px;
margin:0px;

}

body
{
font-family:verdana;
font-size:12px;
background-color: #FFFFFF;
text-align:center;
line-height:0.47cm;
scrollbar-base-color:#ff6900;
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ff6900;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-shadow-color:#ff6900;
scrollbar-arrow-color:#ff6900;
}
h1 {font-size:13px;color:#000000;margin:0px;}

 
#rahmen {
width:790px;
height:560px;
border:2px solid #ff6900;
margin:25px auto;
text-align:left;
background-color:#FFFFFF;
}

#header {
height:175px;
background-color:#ff6900;
}

#bild1 {
float:left;
}

#bild2 {
float:left;
padding-left:6px;
}

#bild3 {
float:right;
}

#nav {
float:left;
width:190px;
height:385px;
background-color:#FDD6B1;
}

/*Hier beginnt die Navigation*/
…………
/*Ende Navigation*/

#content {
background-image: url(images/grafiken/bg_logo.gif);
repeat:no-repeat;
Background-Position: bottom;
background-attachment:fixed;
float:left;
width:560px;
height:359px;
padding-left:35px;
padding-right:5px;
padding-top:26px;
overflow:auto;
}

#content p {
padding-bottom:15px;
padding-right:15;
margin:none;
text-align:justify;
}

#pfeile {
font-weight:bold;
float:left;
color:#ff6900;
font-size:13px;
}
	
#link {
padding-left:30px;
font-weight:bold;
font-size:13px;
color:#000000;
margin:0px;


html
--------------------------------------
<!-- saved from url=(0022)[url]http://internet.e-mail[/url] -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Liane Kita</title>
<link rel=stylesheet type="text/css" href="kita.css">
</head>

<body>
    
   <div id="rahmen">
   <div id="header">
   <div id="bild1"><img src="images/fotos/garten1.jpg"></div>
   <div id="bild2"><img src="images/fotos/kind_tuer.jpg"></div>
   <div id="bild3"><img src="images/grafiken/logo.gif"></div>
   </div>
   
   <div id="nav">
   		<div class="nav_1"><p><a href=""></a></p></div>
		<div class="nav_2"><p><a href=""></a></p></div>
   </div>

	   <div id="content">
	   <div align="right"><img src="images/grafiken/zitat_jjr.gif" alt="" width="499" height="81" border="0"></div><br>
	   <p>Kinder lernen nur über Personen ihre Menschlichkeit zu entwickeln. Nur durch die Erfahrung vorbehaltlos akzeptiert und geliebt zu
	   werden, können sie Selbstkompetenz, Soziabilität und alle anderen Leben stiftenden Fähigkeiten aufbauen.<br>
	   Aus diesem Grund ist unsere pädagogische Arbeit durch einen vertrauensvollen Umgang miteinander geprägt. Sie orientiert sich an den
	   Leitlinien der Ev. Kirche Hessen/Nassau und dem KJHG.<br>
	   Wir Erzieher wollen für unsere Kinder kompetente Vorbilder mit klaren Überzeugungen sein, an denen sie sich orientieren können.
	   In unserer Arbeit berücksichtigen wir die Bedürfnisse und Fähigkeiten der Kinder, sowie die Vielzahl der Einflüsse denen sie ausgesetzt
	   sind. Jedes Kind wird bei uns in seiner Einzigartigkeit angenommen und in seinen individuellen Fähigkeiten und Fertigkeiten gefördert.
	   </p>
	   <div id="pfeile">>></div><div id="link">Förderverein der Kindertagesstätte</div>   
	   
		</div>
		

</div>
   
</body>

</html>

pit-r · 04. Feb. 2006

Moin!

Nur mal so als Tip: Du könntest es dkdenz durchaus abnehmen, jeweils code-Tags um Deine ellenlangen Codes zu packen, indem Du das selbst erledigst. Ich weiß, daß er da geduldiger ist als ich, wollte es aber mal loswerden...

Ahoi - Pit

dkdenz · 05. Feb. 2006

So:

Code:

background-image: url(images/grafiken/bg_logo.gif);
background-repeat:no-repeat;
background-position: bottom right;
background-attachment:fixed;

Oder Kurzform:

Code:

background:url(images/grafiken/bg_logo.gif) no-repeat bottom right fixed;

Danke pit-r für Deine Bemerkung.

@jilli:
Über dem Textfeld gibt es folgendes Zeichen: #
Dieses benutzt man allgemeinhin, um die Darstellung von Quellcode zu visualisieren...

jilli · 05. Feb. 2006

hallo dekadenz,

vielen dank für deine erneute hilfe und den FREUNDLICHEN (was man nicht von jedem behaupten kann) hinweis über meine "nicht korrekte" vorgehensweise. ich habe den "fehler" nicht mit absicht gemacht, man weiss als newbie nicht alles.

gruss JILLI

dkdenz · 05. Feb. 2006

Bitteschön...

jilli · 05. Feb. 2006

hi nochmal,

die freude das es klappt kam doch zu früh. ich habe deinen code integriert, leider ist das ergebnis noch immer nicht richtig (im FF).

das bg-bild wird überhaupt nicht dargestellt und der scrollbar ist nicht mehr farbig sondern die standard?????

gruss JILLI

css

Code:

#content {
background-image: url(images/grafiken/bg_logo.gif);
background-repeat:no-repeat;
background-position: bottom right;
background-attachment:fixed;
float:left;
width:560px;
height:359px;
padding-left:35px;
padding-right:5px;
padding-top:26px;
overflow:auto;
}

pit-r · 05. Feb. 2006

Moin!

Die meisten Browser (darunter auch FF) interpretieren die Geschichten bzgl. bunter Scrollbars nicht. Abgesehen davon ist das kein gültiges CSS.

Ahoi - Pit

jilli · 05. Feb. 2006

danke pit,

auch noch eine idee wegen der bg-grafik. bevor ich dkdenz's code eingefügt habe saß die bg-grafik zentriert im content --> jetzt erscheint sie garnicht mehr ??????

JILLI

pit-r · 05. Feb. 2006

Bei mir wird sie angezeigt, trotz folgender Fehler:
repeat:no-repeat;
Background-Position: bottom;

muß heißen:
background-repeat:no-repeat;
background-position: bottom;

Hast Du mal den Cache geleert?

Ahoi - Pit

jilli · 05. Feb. 2006

hi,

ich hatte den code von dkdenz bereits integriert

Code:

#content {
background-image: url(images/grafiken/bg_logo.gif);
background-repeat:no-repeat;
background-position: bottom right;
background-attachment:fixed;
float:left;
width:560px;
height:359px;
padding-left:35px;
padding-right:5px;
padding-top:26px;
overflow:auto;
}

ich habe auch meinen cache gelöscht -- NIX zu sehen. hier ein link.

www.is-kandemir.de/kiga/rundgang_platz.htm

JILLI

nwibs · 05. Feb. 2006

Also bei mir wird die Grafik (denke mal sind die "Figuren") als BG im IE und im FF angezeigt.
Wenn auch im FF etwas verschoben.

Testest du Lokal und hast vllt. eine falsche Pfadangabe, die aber im Web dann wieder stimmt??

mfg nwibs

dkdenz · 05. Feb. 2006

Online steht bei Dir immer noch dies hier:

Code:

background-position: bottom;

jilli · 05. Feb. 2006

hi,

ja ich habe es jetzt nochmal geändert, weil ich es nicht gesehen habe und pit-r es mir so gepostet hatte. das merkwürdig ist, dass ihr die bg-grafik (abgesoftete figuren) seth. ich habe die seite mir jetzt mal bei zwei leuten angeschaut, keiner sieht die grafik (aktuelle FF version).

???? und jetzt.

gruss JILLI

hier nochmal der code wie er online ist.

Code:

#content {
background-image: url(images/grafiken/bg_logo.gif);
background-repeat:no-repeat;
background-position: bottom right;
background-attachment:fixed;
float:left;
width:560px;
height:359px;
padding-left:35px;
padding-right:5px;
padding-top:26px;
overflow:auto;
}

dkdenz · 05. Feb. 2006

Bei mir sind sie da.
FF 1.0.7 und Opera 8.5

jilli · 05. Feb. 2006

hi,

ich habe die seite jetzt nochmal auf zwei verschiedenen rechnern mit ff1.5 getestet - nix zu sehen. gibt es irgendwelche browsereinstellungen die ich ändern muss???

JILLI

dkdenz · 05. Feb. 2006

Hast Du mal ein anderes Netzseitenanguckprogramm versucht?

jilli · 06. Feb. 2006

... wenn du mit "Netzseitenanguckprogramm" einen browser meinst, JA. mit dem IE wird alles tadellos angezeigt.

JILLI

dkdenz · 06. Feb. 2006

Tja, dann weiss ich auch nicht weiter.
Irgendwas im Browser verstellt?

Völlig falsche Positionierung im FF

New member

New member

New member

pit-r

Guest

New member

New member

New member

New member

pit-r

Guest

New member

pit-r

Guest

New member

New member

New member

New member

New member

New member

New member

New member

New member