✔ Bilder lassen sich nicht positionieren

Ranger 1281

Ranger 1281

Mitglied
Hallo allerseits,

ich habe ein Problem, dass eigentlich keines sein sollte, vieleicht habe ich ein Brett vorm Kopf, keine Ahnung...
Ich möchte ganz simpel drei Bilder diagonal von oben links nach unten rechts anordnen.
Die Seite soll in allen Browsern horizontal zentriert angezeigt werden.
Die Bilder werden jedoch entweder am linken Rand untereinander (div- Container) oder am oberen Rand nebeneindaner (span- Attribut) angezeigt.
Beim "div" werden die Bilder direkt aneinander plaziert, beim "span" kann ich immerhin die horizontalen Abstände einstellen.
Das Layout bindet einen iFrame in den Hauptteil ein, aber auch die "nackte Seite" funkioniert nicht.

Die Seite ist leider noch lokal auf meinem Rechner, so dass ich Euch keinen Link posten kann...

HTML- Code von der index.html:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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"  xml:lang="en" lang="en">
 <head>
  <title>Familie Schepp</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Ralf Schepp" />
  <meta name="robots" content="index, follow" />
  <meta name="language" content="de" />
  <meta name="DC.rights" content="Ralf Schepp" />
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <meta http-equiv="date" content="25.01.2012" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="content-style-type" content="text/css; charset=iso-8859-1" />
  <meta http-equiv="content-script-type" content="text/javascript; charset=iso-8859-1" />

  <!--  -----------Script Main Menu--  -->

  <script language="JavaScript">
<!--
button100= new Image();
button100.src = "img/homeb2_224x24.png"
button1= new Image();
button1.src = "img/homeb2_224x24.png"
button2= new Image();
button2.src = "img/gartenb1_224x24.png"
button3= new Image();
button3.src = "img/tierb1_224x24.png"
/* usw. für alle Grafiken,
die am Mouse-Over-Effekt beteiligt sind */
//-->
  </script>

 </head>
 <body>

  <!--  ------------Background-------  -->

  <div id="bgsite">
   <img src="img/bg_overall1205x995.png" alt="Familie Schepp" border="0" width="100%" height="100%" />
  </div>

  <!--  ------------Header-----------  -->

  <div id="boxtop">
   <img src="img/header1140x130.png" alt="boxtop" border="0" width="1155" height="160" />
  </div>

  <div id="header_fam">
   <img src="img/header_fam470x79.png" alt="header_fam" border="0" width="420" height="65" />
  </div>

                   <!-- ------------Bilder im Header-----------  -->

  <div id="head_pic1">
   <img src="img/Ralf120x120.jpg" alt="Ralf" border="0" width="120" height="120" />
  </div>

  <div id="head_pic2">
   <img src="img/Katja120x120.jpg" alt="Katja" border="0" width="120" height="120" />
  </div>

  <div id="head_pic3">
   <img src="img/Page120x120.jpg" alt="Page" border="0" width="120" height="120" />
  </div>

  <div id="head_pic4">
   <img src="img/Pimpsi120x120.jpg" alt="Pimpsi" border="0" width="120" height="120" />
  </div>

  <div id="head_pic5">
   <img src="img/Leon120x120.jpg" alt="Leon" border="0" width="120" height="120" />
  </div>

  <div id="head_pic6">
   <img src="img/Jonas120x120.jpg" alt="Jonas" border="0" width="120" height="120" />
  </div>

  <div id="head_pic7">
   <img src="img/Maray120x120.jpg" alt="Maray" border="0" width="120" height="120" />
  </div>

  <div id="head_pic8">
   <img src="img/Ponys120x120.jpg" alt="Bonito & Maya" border="0" width="120" height="120" />
  </div>

  <!-- -------------Top Menu---------  -->

  <div id="topmenu">
   <img src="img/topbutton1140x34.png" alt="Menu oben" border="0" width="1155" height="34" />
  </div>

  <div id="impb">
   <ul>
    <li>
     <a href="impressum.html" target="main" onfocus="this.blur()"></a>
    </li>
   </ul>
  </div>

  <div id="kontb">
   <ul>
    <li>
     <a href="kontakt.html" target="main" onfocus="this.blur()"></a>
    </li>
   </ul>
  </div>

  <!--  ------------Main Menu--------  -->

  <div id="leftmenu">
   <img src="img/bg_left_column240x640h.png" alt="Hauptmenu" border="0" width="240" height="408" />
  </div>

  <div id="button1">
   <img src="img/mainb1_224x36.png" alt="Hauptmenu" border="0" width="224" height="36" />
  </div>

  <div id="button2">
   <a href="home.html"
     onmouseover="homeb1.src='img/homeb2_224x24.png';" width="224"height="24"
     onmouseout="homeb1.src='img/homeb1_224x24.png';"  width="224"height="24"
     target="main">
    <img src="img/homeb1_224x24.png" border="0" width="224"height="24" name="homeb1">
   </a>
  </div>

  <div id="button3">
   <a href="garten.html"
     onmouseover="gartenb1.src='img/gartenb2_224x24.png';" width="224"height="24"
     onmouseout="gartenb1.src='img/gartenb1_224x24.png';"  width="224"height="24"
     target="main">
    <img src="img/gartenb1_224x24.png" border="0" width="224"height="24" name="gartenb1">
   </a>
  </div>

  <div id="button4">
   <a href="tiere.html"
     onmouseover="tierb1.src='img/tierb2_224x24.png';" width="224"height="24"
     onmouseout="tierb1.src='img/tierb1_224x24.png';"  width="224"height="24"
     target="main">
    <img src="img/tierb1_224x24.png" border="0" width="224"height="24" name="tierb1">
   </a>
  </div>

  <!--  ------------Main Iframe-------  -->

  <div id="boxmain">
   <img src="img/bg_main.png" alt="Familie Schepp" border="0" width="890" height="550">
  </div>

  <div id="main">
   <iframe src="home.html" name="main" width="835" height="500" scrolling="auto" frameborder="0">
   </iframe>
  </div>
 </body>
</html>
HTML- Code von der betroffenen Seite (tiere.html):
HTML: 
<!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"  xml:lang="en" lang="en">
 <head>
  <title>Familie Schepp</title>

  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Ralf Schepp" />
  <meta name="robots" content="all" />
  <meta name="language" content="de" />
  <meta name="DC.rights" content="Ralf Schepp" />

  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="style.css" type="text/css" />

  <meta http-equiv="date" content="25.01.2012" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="content-type" content="text/css; charset=iso-8859-1" />
  <meta http-equiv="content-type" content="text/javascript; charset=iso-8859-1" />

 </head>
 <body>
  <h1>unsere Tiere</h1>

   <div id="pic3">
    <img src="img/Page120x120.jpg" alt="Page" border="0" width="120" height="120" />
   </div>

   <div id="pic31">
    <img src="img/Pimpsi120x120.jpg" alt="Pimpsi" border="0" width="120" height="120" />
   </div>

   <div id="pic32">
    <img src="img/Ponys120x120.jpg" alt="Bonito&Maja" border="0" width="120" height="120" />
   </div>

  </body>
</html>
CSS- Code der gesamten Webseite:
Code: 
/* --------------- Global ---------- */
body      { background-color: #ffffff;}

a:link    { color: #0000ff;}
a:visited { color: #00ff00;}
a:active  { color: #0000ff;}
a:hover   { color: #0000ff; text-decoration: underline;}

h1        { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 150%; font-weight: bold;}
h2        { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 140%; font-weight: bold;}
h3        { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 130%; font-weight: bold;}
h4        { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 120%; font-weight: bold;}
h5        { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 110%; font-weight: bold;}

p         { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 100%; font-weight: bold;}
ul        { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 100%; font-weight: bold;}
#bgsite   { position: fixed; left: 50%; margin-left: -603px; top: 5px;  z-index: 0;}

/* --------------- Header ---------- */

#box1       { position: fixed; left: 0px; top: 0px; z-index: 7;} /* für den oberen Dummy, falls nötig*/
#boxtop     { position: fixed; left: 50%; margin-left: -570px; top:  25px; z-index: 2;}
#header_fam { position: fixed; left: 50%; margin-left: -210px; top: 165px; z-index: 2;}
              /* ------------- Bilder im Header --------  */
#head_pic1  { position: fixed; left: 50%; margin-left:    2px; top: 34px; z-index: 3;}
#head_pic2  { position: fixed; left: 50%; margin-left: -122px; top: 34px; z-index: 3;}
#head_pic3  { position: fixed; left: 50%; margin-left: -246px; top: 34px; z-index: 3;}
#head_pic4  { position: fixed; left: 50%; margin-left:  126px; top: 34px; z-index: 3;}
#head_pic5  { position: fixed; left: 50%; margin-left: -370px; top: 34px; z-index: 3;}
#head_pic6  { position: fixed; left: 50%; margin-left:  250px; top: 34px; z-index: 3;}
#head_pic7  { position: fixed; left: 50%; margin-left: -494px; top: 34px; z-index: 3;}
#head_pic8  { position: fixed; left: 50%; margin-left:  374px; top: 34px; z-index: 3;}

/* --------------- Menubereich ----- */

              /* ------------- Menu links -------------- */

#leftmenu { position: fixed; left: 50%; margin-left: -570px; top: 260px; z-index: 1;}

#button1  { position: fixed; left: 50%; margin-left: -565px; top: 270px; z-index: 3;}
#button2  { position: fixed; left: 50%; margin-left: -565px; top: 330px; z-index: 3;}
#button3  { position: fixed; left: 50%; margin-left: -565px; top: 360px; z-index: 3;}
#button4  { position: fixed; left: 50%; margin-left: -565px; top: 390px; z-index: 3;}
#button5  { position: fixed; left: 50%; margin-left: -565px; top: 420px; z-index: 3;}

              /* ------------- Menu oben --------------- */

#topmenu { position: fixed; left: 50%; margin-left: -583px; top: 222px; z-index: 1;}

#impb   { position: fixed; left: 50%; margin-left: -265px; width: 260px; top: 211px; z-index: 3;}
#impb ul ,#impb li
         { list-style: none;}
#impb li a:link , #impb li a:visited , #impb li a:active
         { display:block; height:23px;  line-height:23px; background-image:url(img/impressumb1_224x24.png);}
#impb li a:hover
         { background-image:url(img/impressumb2_224x24.png);}

#kontb   { position: fixed; left: 50%; margin-left: -35px; width:260px; top: 211px; z-index: 3;}
#kontb ul ,#kontb li
         { list-style: none;}
#kontb li a:link , #kontb li a:visited , #kontb li a:active
         { display:block; height:23px;  line-height:23px; background-image:url(img/kontaktb1_224x24.png);}
#kontb li a:hover
         { background-image:url(img/kontaktb2_224x24.png);}

/* --------------- Main Iframe ----- */


#boxmain { position: fixed; left: 50%; margin-left: -325px; top: 260px;  z-index: 2;}
#main    { position: absolute; left: 50%; margin-left: -300px; top: 285px; width: 810px; height: 550px; z-index: 2;}

/* --------------- Sites Global ---- */

#h1      { position: absolute; left: 50%; margin-left: -250px; top: 190px; width: 900px; z-index: 7;}
#text1   { position: absolute; left: 20px;  top: 110px;  width: 400px;  text-align: justify;  z-index: 7;}

/* --------------- home.html ------- */

#pic1   { float: left;  top: 30px;}

/* --------------- garten.html ----- */

#pic2   { float: left;  top: 30px;

/* --------------- tiere.html ------ */

#pic3   { position: absolute; left: 50%; margin-left: -120px; top:  60px;  z-index: 3;}
#pic31  { position: absolute; left: 50%; margin-left: - 60px; top: 120px;  z-index: 3;}
#pic32  { position: absolute; left: 50%; margin-left:   60px; top: 180px;  z-index: 3;}
Ach so, mein Testbrowser ist der Firefox 10.0.2
Ich habe diese Form der Formatierung eigentlich schon 'zig mal eingesetzt und noch nie solch ein Problem gehabt.
Was habe ich diesmal verbockt, ich habe mir die Codes schon Tagelang angesehen und überprüft, aber ich finde einfach den Fehler nicht....

Gelöst: ich habe in der CSS - Anweisung für #pic2 die schließende geschweifte Klammer vergessen!! Somit stand die "float-Anweisung" über den nachfolgenden Definitionen....
Ich wusste doch, dass es nur ein Brett vorm Kopf ist....
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück