Bilder lassen sich nicht positionieren

Ranger1281 · 04.03.2012

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 die schließende geschweifte Klammer für "#pic2" vergessen....
Also doch nur ein Brett vorm Kopf......

Davi2000 · 06.03.2012

AW: Bilder lassen sich nicht positionieren

Pack die Gallery in ein Div, im Div machst du eine Liste/UL, dort kannst du entweder die Liste Vertikal lassen oder horizontal floaten. Wenn du floatest und display block definierst, hast du die Möglichkeit dem li breiten, höhen sowie Abstände zu geben. Im Prinzip kann man am li das Boxmodel anwenden. Ein li ist von Haus aus ein Inline Element.

anste14 · 09.03.2012

AW: Bilder lassen sich nicht positionieren

Das wäre auch noch eine Möglichkeit:

<div id="picbox">
<img src="img/Page120x120.jpg" alt="Page" border="0" width="120" height="120" id="pic1" /><br>
<img src="img/Pimpsi120x120.jpg" alt="Pimpsi" border="0" width="120" height="120" id="pic2" /><br>
<img src="img/Ponys120x120.jpg" alt="Bonito&Maja" border="0" width="120" height="120" id="pic3" />
</div>

CSS:

body {text-align:center;}
#picbox {width:380px; margin:0px auto;}
#picbox br {clear:left;}
#pic1 {float:left; width:120px; margin:0px;}
#pic2 {float:left; width:120px; margin:0px 0px 0px 130px;}
#pic3 {float:left; width:120px; margin:0px 0px 0px 260px;}

Ranger1281 · 09.03.2012

AW: Bilder lassen sich nicht positionieren

Hallo zusammen,
Danke für Eure Antworten und Tipps! Ich habe den Fehler jedoch gefunden.
In meiner style.css hatte ich in der Anweisung zur Seite garten.html bei #pic2 die schließende geschweifte Klammer vergessen. Jetzt ist alles so, wie ich es haben wollte.
Ich hatte meine urprünglichen Beitrag editiert um Euch zu informieren. Kann ich das Thema noch ander als "Gelöst" markieren?