PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   CSS Bildpositionierung bei Firefox/Opear (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/79298-css-bildpositionierung-bei-firefox-opear.html)

tams 15-12-2006 14:04

CSS Bildpositionierung bei Firefox/Opear
 
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

Und so weit bin ich momentan (leider):
Status


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"><!--
html{
margin: 0px;
padding: 0px;
}

body {
background-color: #ffffff;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:10px;
margin:0px;
text-align: center;
}

#inhalt {
text-align: left;
vertical-align: middle;
margin: 0px auto;
margin-top: 40px;
padding: 0px;
width: 988px;
height: 600px;
border: 1px #AEAEAE solid;
background-color: #ffffff;
}


#land {
margin-top: 40px;
padding: 0px;
left: 410px;
top: 303px;
}

#logo {
margin-top: 0px;
padding-top: 10px;
padding-left: 37px;
width: 217px;
height: 45px;
}

#kontaktkompass {
margin-top: 0px;
padding-top: 60px;
padding-left: 800px;
}

#achtungkompass {
margin-top: 0px;
padding-top: 30px;
padding-left: 800px;
}

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

p, h1, pre {
margin: 0px;
padding: 5px 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}

a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}

#logo a img{
border-width: 0;
}

pre {
color: #564b47;
font-size: 11px;
background-color:transparent;
font-family: Courier, Monaco, Monospace;
}
/* ]]> */
--></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.
PHP-Code:

#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)
PHP-Code:

#barountenrechts {
margin-top0px;
padding-top20px;
padding-left623px;
}
/* IE 6*/
html #barountenrechts {
font-size0px;
}
/* IE 7*/
>body #barountenrechts {
padding-top10px;


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

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



Aber heissen Dank nochmals.

TorstenGecodete Site

Kropff 15-12-2006 17:14

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

peter
EDIT:
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

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

PHP-Code:

>body #barountenrechts {
margin-top10px// MARGIN


peter


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:00 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG