• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div container verändert durch img seine größe

Status
Für weitere Antworten geschlossen.
B

blackarchitect

Neues Mitglied
buona sierra,
ich sitze seit 1 woche an meiner homepage und bin ein absoluter anfänger.
viele sachen hab ich durch www recherge schon selbst gelöst, aber das bringt mich wieder seit stunden halb um den verstand.
also, ich möchte eine bildergalerie erstellen, was ich jetzt auch fast geschafft habe, aber meine sorgfälltig positionierten div container welche verlinkt sind mit meinem iframe vergrößern sich. d.h. das image im div ,,schiebt'' immer einen silbernen rand nach unten und, mann staune, verzehrt so meinen div container.wenn ich im style css sheet img auf margin -5px setze, passt es, aber die grafik ist halt abgeschnitten.

es wäre schön wenn ihr eine idee hättet.

achso und im ie wird das verlinkte bild im iframe auch immer mit rand dragstellt (diesmal oben und links), nicht aber in mozilla. auch lustig:???:

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="de" lang="de">

<head>

    <title>index3</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly" />

    <link href="css/style3.css" type="text/css" rel="stylesheet"/>

</head>

<body>

 <!-- link mit externen fenster
            <div class="gallery1">
                  <a href="archi/centrobig.gif"  target="_blank">
                    <img src="archi/centrogallery.gif"/>
                </a > </div>    -->


<!-- mainframe mit gerüst/linien -->

        <div id="mainwindow">

<!-- showframe mitte -->

           <div class="gshow">
                  <iframe src="showframe.html"
                          name="galleryshow"
                          width="100%"
                          height="100%"
                          frameborder="0"
                          scrolling="no"

                          >
                 </iframe>
           </div>

<!-- gallery links -->

         <div class="gallery1">
                <a href="archi/c1s.gif"  target="galleryshow"  >
                    <img src="archi/c1m.gif" />
                </a>
           </div>

          <div class="gallery2">
              <a href="archi/c2s.gif"  target="galleryshow">
                    <img src="archi/c2m.gif"/>
                </a>
           </div>

           <div class="gallery3">3</div>

           <div class="gallery4">4</div>

           <div class="gallery5"></div>

           <div class="gallery6"></div>

           <div class="gallery7">7</div>

           <div class="gallery8">8</div>

           <div class="gallery9">9</div>

           <div class="gallery10">10</div>

           <div class="gallery11">11</div>

           <div class="gallery12">12</div>

           <div class="gallery13">13</div>

           <div class="gallery14">14</div>

           <div class="gallery15">15</div>

           <div class="gallery16">16</div>

           <div class="gallery17">17</div>

           <div class="gallery18">18</div>

       </div>


<!--text rechts -->




</body>

</html>
Code: 
body
       {
          background-image:url("../img/back1024.gif");
          background-position: right;
          background-repeat:no-repeat;
          margin: 0;
          padding: 0;
          background-color: white;
          color: #000000;
          font-family:century gothic;
          font-size: 100.01%;
       }


#mainwindow
       {
           background-image:url("../img/main2.gif");
           background-position:center;
           background-color: transparent;
        /*   margin: auto 10% 10% auto;  */
           margin-bottom: 50px;
           margin-top: 5%;
           margin-right: 15%;
           margin-left:auto;
         /*   position: absolute; */
           height: 500px;
           width: 1000px;
          /* right: 15%;  */

        }




img     {
            border:0;
      /*  margin-top: -5px; */
         }



.gshow
        {
          background-color:silver;
          background-color: yellow;
          background-position: center;
          border: 1px solid black;
          height: 305px;
          width: 420px;
          margin: 75px auto auto 300px;
          position:absolute;
          padding:0;
       }

.gallery1
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 75px auto auto 20px;
          position:absolute;
      }

.gallery2
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 75px auto auto 75px;
          position:absolute;
      }

.gallery3
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 75px auto auto 130px;
          position:absolute;
      }
.gallery4
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 130px auto auto 20px;
          position:absolute;
      }

.gallery5
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 130px auto auto 75px;
          position:absolute;
      }

.gallery6
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 130px auto auto 130px;
          position:absolute;
      }

.gallery7
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 185px auto auto 20px;
          position:absolute;
      }

.gallery8
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 185px auto auto 75px;
          position:absolute;
      }

.gallery9
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 185px auto auto 130px;
          position:absolute;
      }

.gallery10
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 240px auto auto 20px;
          position:absolute;
      }

.gallery11
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 240px auto auto 75px;
          position:absolute;
      }

.gallery12
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 240px auto auto 130px;
          position:absolute;
      }

.gallery13
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 295px auto auto 20px;
          position:absolute;
      }

.gallery14
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 295px auto auto 75px;
          position:absolute;
      }

.gallery15
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 295px auto auto 130px;
          position:absolute;
      }

.gallery16
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 350px auto auto 20px;
          position:absolute;
      }

.gallery17
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 350px auto auto 75px;
          position:absolute;
      }

.gallery18
      {
          background-color:silver;
          border: 1px solid black;
          height: 50px;
          width: 50px;
          margin: 350px auto auto 130px;
          position:absolute;
      }

ich hab das mit den divs gallery gemacht, weil ich mehre seiten mit der bildergallerie habn möchte, sieht irgendwie sehr viel aus, aber die htmls werden kleiner, denke ich. außderdem bin ich noch am erstellen und nicht am optimieren, naja, wenn das geht:wink:

so mir raucht der kopf, ich danke auf jeden fall schon mal im vorraus

problem-div-container.gif

problem-div-container.gif
 

Anhänge

  • problem-div-container.jpg
    problem-div-container.jpg
    20,9 KB · Aufrufe: 8
Ersetze mal das style für img:
Code: 
img     {
            border: none !important; /*important nur zum testen*/
            display: block;
         }
 
Zuletzt bearbeitet:
danke

super, was war es das none oder das important was geholfen hat? kenne important gar nicht, was macht das?priorität verändern?

danke danke

pS:hast auch nen typ für den iframe und dessen randproblem?

super, danke, freu mich, bin bescheuert geworden..
 
blackarchitect schrieb:
pS:hast auch nen typ für den iframe und dessen randproblem?
Zum Vergrößern anklicken....
Wenn es auch ohne important geht lösche es wieder.
Important bedeutet nur, daß es auf jeden Fall beachtet wird. Auch wenn an einer anderern/gewichtigerern Stelle ein Border definiert wurde.
(border: none; == kein Border)

Zu display in img-tags habe ich hier etwas geschrieben: css | Spalten :: css-störende Abstände

Wegen dem Rand im iframe:
Den Quellcode von showframe.html müsstest du mal posten.
 
Zuletzt bearbeitet:
ich bin echt erfreut das man hier so einfach hilfe bekommt. das hilft einem ,,anfänger'' sehr.

also die html showframe ist eigendlich nur html gerüst:

<!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="de" lang="de">

<head>

<title>showfram.html</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly" />

<link href="style3.css" type="text/css" rel="stylesheet" />

</head>

<body>

</body>

</html>

so mehr nicht. ich bin das problem jetzt erstmal umgangen, indem ich den frameborder und hintergrund auf 0 bzw. transparent gesetzt hab, so das man jetzt den rand nicht sieht, aber das ist irgendwie nicht zu meiner 100% zufriedenheit.

heute hab ich mir noch den kopf über mein vorleztes problem bei der realisierung meines webauftritts gedanken gemacht. wieder java usw ausprobiert, also murcks!weil ich es nicht schecke und eigendlich nach html und css nicht auch noch in java oder ajax odr so einsteigen will.

meine idee/problem ist , das ich ja links die thumbnails hab, die durch click ja das größere img im iframe darstellen. dank deiner hilfe hab ich das ja komplett hinbekommen. ich würde aber gerne zu den bilder (mitte) rechts noch beschreibungen anzeigen, für jedes bild einzeln.

jetzt hab ich erst versucht einen zweiten iframe einzubinden und in meinem div gallery zwei hrefs (links) einzubinden, aber das klappt nicht. hab schon gegoogelt, hier geschaut, aber ich find keinen code, wie ich wenn ich einen link habe zwei objekte (bild/text) öffnen kann. denke aber vom prinzip kein problem.klappte nicht

dann hab ich versucht den mittigen iframe einfach so groß zu machen, das er auch den rechten teil abdeckt und ich bild mit rechts davon text im gelichen frame öffnen kann.keine zwei links, aber problem, auch web abgerast, nada, wie öffne ich ein z.b.
<a href="archi/c1s.gif" target="archishow" ><img src="archi/c1m.gif" /> mit text gleichzeitig? mmhh

ich suche noch weiter, komm mit meiner logik nicht weiter.

vielen dank für deine hilfe erstmal.

kommst du aus hannover?wegen den nanas. studiere dort architektur (dafür auch die homepage) bin aber zur zeit noch in italien :-)

liebe grüße
 
seitenaufbau

mal zum verständniss der aufbau meiner homepage, man sieht so simpel aus , so komplex
 

Anhänge

  • websideaufbau.jpg
    websideaufbau.jpg
    23,2 KB · Aufrufe: 1
blackarchitect schrieb:
also die html showframe ist eigendlich nur html gerüst:

<!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="de" lang="de">

<head>

<title>showfram.html</title>
<link href="style3.css" type="text/css" rel="stylesheet" />
</head>

<body>

</body>

</html>
wie öffne ich ein z.b.
<a href="archi/c1s.gif" target="archishow" ><img src="archi/c1m.gif" /> mit text gleichzeitig? mmhh
Zum Vergrößern anklicken....
Ich hab es nicht so mit Frames.
Ich würde es wohl so lösen:
archi/c1s.gif als ganz normales img in showfram.html einbinden.
Den Text kannst du in die gleiche Datei darunter schreiben.
Damit es keine Ränder gibt schreibst du in showfram.html:
Code: 
  <style type="text/css">
body {
margin: 0px;
padding:0px;
}
img {
display: block;
border: none;
}
  </style>
PS:
Ich wohne in Hannover Linden.
Die Architekten-Partys am Königsworther Platz waren immer die geilsten Uni-Partys in der ganzen Stadt.
 
danke

danke, aber deine idee kalppt nicht, weil ich sonst für jedes bild eine eigende html seite brauche, daswär zuviel. die showframe.html ist nur ne ,,blanko''seite, die bilder werden einfach immer wieder auf diese seite projeziert,würde was stehen, wäre text immer der gleich bzw. ich bräuchte 40 html seiten.
aber danke, ich werde das nochmal mit meinen 2 restlichen problemen extra posten.

liebe grüße

ps: jetzt gibts immer die diebar aber nicht am köngisworher sondern an den herrenhäuser gärten
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben