CSS Bildpositionierung bei Firefox/Opear [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

Archiv verlassen und diese Seite im Standarddesign anzeigen :
CSS Bildpositionierung bei Firefox/Opear

tams

15-12-2006, 14:04

Hallo,

habe da ein Problem bei meiner ersten kompletten CSS-Site. Ich muß sicherlich noch vieles lernen, bräuchte nun aber mal Eure Hilfe, da ich unbeding endlich den Einstieg in tabellenloses Design schaffen möchte.

Hier mal der Link zur fertigen Layoutansicht als Screenshot:

Endergebnis (http://www.ttams.de/layout/endergebnis.htm)

Und so weit bin ich momentan (leider):
Status (http://www.ttams.de/layout/index1.html)

Probleme habe weniger bei der Positionierung der oberen Grafiken. Eher bei den unteren Grafiken unten links und unten rechts, die sich genau am Rand des Kastens befinden sollen. Später dann möchte ich die Grafiken unten rechts und links dann durch Flashelemente ersetzen.

Bei IE 7 klappt es soweit auch, nur bei Firefox 2.0 und Opera 9.0 ist die rechte untere Grafik einfach nicht an der Linie dran.

Ich hoffe ich habe alles richtig erklärt und nichts vergessen.

Vielen lieben Dank für etwas Hilfe.

Gruß
Torsten

Kropff

15-12-2006, 14:08

da helfen keine screenshots, sondern code. oder eine online-version

gruß
peter

tams

15-12-2006, 16:05

Hhmm, versteh ich nicht, ich hab doch einen Link zur meiner noch unfertigen programmierten Version genannt. Aber hier noch mal mein bisheriger Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Unbenannt</title>
</head>

<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"></style>
</head>
<body>

<div id="inhalt">
<div id="land"><img src="images/land_in_sicht.gif" alt="" /></div>

<div id="logo"><a href="#"><img src="images/logo_steuermann.gif" alt="" /></a></div>

<div id="kontaktkompass"><img src="images/kontakt_kompass.gif" alt="" /></div>

<div id="achtungkompass"><img src="images/kontakt_achtung.gif" alt="" /></div>

<div id="barountenrechts"><img src="images/uhr_unten_rechts.gif" alt="" /></div>

</div>

</body>

</html>

</body>
</html>

Gruß
Torsten

Kropff

15-12-2006, 16:20

ups, sorry, dachte das war ein bild.
#barountenrechts
{
padding-top: ...
}
pass das mal an. und darin noch ein font-size: 0px; für den ie

gruß
peter

tams

15-12-2006, 16:50

Heissen Dank Kropff,

habe ich schon versucht, leider ohne Auswirkungen. Muß noch anders gehen. Der IE interpretiert das irgendwie anders. Entweder ist die Grafik bei Firefox nicht richtig dran oder beim IE.

Gruß
Torsten

Kropff

15-12-2006, 17:00

also so sieht es bei mir in allen browsern gleich aus (ff 1.5 und 2, ie 6 und 7)

#barountenrechts {
margin-top: 0px;
padding-top: 20px;
padding-left: 623px;
}
/* IE 6*/
* html #barountenrechts {
font-size: 0px;
}
/* IE 7*/
>body #barountenrechts {
padding-top: 10px;
}

peter

tams

15-12-2006, 17:12

Hallo Kropff,

hmm irgendwie klappt das zwar nun mit IE 7 aber dummerweise sieht es bei Firefox 2.0 und Opera nun so aus:

Firefox 2.0 (http://www.ttams.de/layout/firefox2_0.gif)

Sorry, weiß auch nicht was ich verkehrt mache. Habe Deinen Code doch genauso eingebaut:

Aber heissen Dank nochmals.

TorstenGecodete Site (http://www.ttams.de/layout/index1.html)

Kropff

15-12-2006, 17:14

bei mir nicht. hast du das padding-top auf 20px gesetzt?

peter
stimmt, 20px. da musst aber noch etwas geändert haben. jetzt klappt es auch bei mir nicht mehr

tams

15-12-2006, 17:17

habe das eingebaut:

#barountenrechts {
margin-top: 0px;
padding-top: 20px;
padding-left: 623px;
font-size: 0px;
}
* html #barountenrechts {
font-size: 0px;
}
body #barountenrechts {
font-size: 0px;
padding-top: 10px;
}

Kropff

15-12-2006, 17:22

komisch. schmeiss das padding-top raus und arbeite mit margin-top. dann klappt es auch. spiel ein wenig herum. du hast ja drei varianten für die browser

gruß
peter

tams

15-12-2006, 17:22

mach ich mal...

tams

15-12-2006, 17:35

Hmmm echt komisch, die Varianten zeigen bei mir irgendwie alle keine Wirkung. Habe das padding-top überall mal rausgeworfen und mit margin-top gespielt. hatte aber entweder nur Auswirkungen auf den IE oder Firefox/Opera. Langsam gebe ich auf. Muß wohl doch wieder mit tabellen arbeiten (seufz)...

Kropff

15-12-2006, 17:38

das forum hat was verschluckt. vor das body #barountenrechts muss direkt ohne leerzeichen ein größer als also >body #barountenrechts

peter

tams

15-12-2006, 17:56

hmmm, gibt's doch nicht. So langsam glaub, daß was mit meinem Browsern nicht stimmt. Genau so hab ich es jetzt eingebaut:

#barountenrechts {
margin-top: 0px;
padding-top: 20px;
padding-left: 623px;
}
/* IE 6*/
* html #barountenrechts {
font-size: 0px;
}
/* IE 7*/
>body #barountenrechts {
padding-top: 10px;
}

Merkwürdigerweise wirken sich Änderungen an:
/* IE 6*/
* html #barountenrechts {
font-size: 0px;
}
/* IE 7*/
>body #barountenrechts {
padding-top: 10px;
}

in keinster Weise bei mir aus.

Einzig Änderungen an:

#barountenrechts {
margin-top: 0px;
padding-top: 20px;
padding-left: 623px;
}

scheinen sich auzuwirken. So wie es jetzt unter folgendem Link
gebaut ist:

Link zum Coding (http://www.ttams.de/layout/index1.html)

klappt es auf dem PC nur unter Firefox 2.0 und Opera. Der blöde IE 7.0.5700 will einfach nicht. Solche Probleme sind der Grund warum ich immer noch viel mit Tabellen mache.

Muß nun mal eben kurz in die Autowerkstatt. Wenn ich zurück bin, mach ich weiter. Vielen Dank Dir erstmal!!!!

Kropff

15-12-2006, 18:15

>body #barountenrechts {
margin-top: 10px; // MARGIN
}

peter

Kropff

15-12-2006, 18:44

und da ein

#barountenrechts {
margin-top: 20px;
padding-left: 623px;
}
* html #barountenrechts {
font-size: 0px;
margin-top: 10px;
}

gruß
peter

tams

15-12-2006, 19:10

Hi, da bin ich wieder. OK also habe nun folgenden Code drin:

#barountenrechts {
margin-top: 20px;
padding-left: 623px;
}
* html #barountenrechts {
font-size: 0px;
margin-top: 10px;
}
/* IE 7*/
>body #barountenrechts {
margin-top: 10px; // MARGIN
}

Ergebnis:

FF OK, Opera OK, IE nicht OK - Grafik sitzt immer noch zu tief.

Vielleicht sieht#s bei Dir ja OK aus, dann stimmt irgendwas mit meinem IE nicht. Ansonstzen weiß ich auch nicht. Änderungen an:

/* IE 7*/
>body #barountenrechts {
margin-top: 10px; // MARGIN
}

wirken sich leider immer noch nicht aus.

LG
Torsten