✔ Doppelte Scrollleiste bei IFrame Seite

Status
Nicht offen für weitere Antworten.
A

AFreez

Mitglied
Hallo zusammen :)

Ich überarbeite grade die HP meiner Firma da diese wirklich "veraltet" ist.
Nun habe ich das Problem dass die Seite auf i-Frames basiert und ich nach umstellen und einfügen verschiedener Objekte z.B. einem Dropdown-Menü in der Index.html nun bei einigen Frames 2 Scrollbars habe. Eine in der index.html und eine im aktivem Frame.

Die erste Version sieht so (2scrollbars): Link1 aus.

Die zweite Version unter Zuhilfenahme des {overflow:hidden;}Codes (ja, ich habe nach "Scrollbar unterdrücken" gesucht :p ) sieht so: Link 2 aus. Nur noch eine SB dafür wird im FF aber der iFrame nur noch in einem sehr kleinem Fenster dargestellt:suspekt:
Da ich mich noch nicht allzu lange mit HTML Programmieren befasse wäre es nett wenn ihr mir ein "wenig" auf die Sprünge helfen könntet.

Danke vorab für die Hilfe :)

AFreez

P.S.: die Original Seite findet ihr unter: Link-org.Page
 
Zuletzt bearbeitet:
Hi,

dass in der zweiten Version der iFrame in der Vertikalen nicht mehr auf 100% gestreckt wird, liegt nicht an der overflow:hidden-Deklaration für den Dokumentkörper, sondern an den fehlenden öffnenden Tags zur Tabelle, die den iFrame umschliesst - einfach den HTML-Quellcode mit der ersten Version vergleichen.
 
Woops ich gehe kurz einkaufen und du hast schon geantwortet:suspekt: :)
Danke für die schnelle Antwort, kann es leider erst später korrigieren da ich jetzt arbeiten muss. Mehr dazu also in ein paar Std..

AFreez
 
Sodele weiter geht´s ...
Ich Nase habe einige wichtige Dinge in meinem ersten Post weggelassen... Die Original-Seite nach deren Layout ich die oben erwähnten .html Seiten erstellt habe sieht so: Original aus.

Da mir die Navigationsleiste ein Dorn im Auge war wollte ich sie durch eine CSS/DropdownMenu basierende NL ersetzen.
Aufgrund meiner nur rudimentären HTML Kenntnisse war es mir nicht möglich sie in der Orginalseite in den Bereich der bestehenden NL zu integrieren (irgendetwas in meinen Logikschaltkreisen sagt mir das es nicht möglich ist diesen Code in eine Tabelle einzufügen?)
Da der Dokumentenkörper nur wenige Ojekte enthält (Heador.jpeg/Flash Element/ Navi.Leiste/iframe) und ich eine "sauber" codierte Seite erstellen wolte habe ich Sie neu aufgesetzt.

Was zu folgendem Fehler führte: <Vermutung; XHTML 1.0 Strict statt der im Original verwendeten HTML 4.01 Transitional benutzt aber für den iFrame die Version aus dem 4.01 Code genommen /Vermutung> Dies führte zu der Darstellung der iFrames im FF in einem sehr kleinem Fenster mit Scrollbar welche wenn bis zum unterem Anschlag gescrollt den gesamten Inhalt der integrierten .html Seite anzeigt.

Durch einbetten des IFrame Codes in eine Tabelle und festlegen der Höhe mit :
Code: 
<table width="100%" height="769" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="769" align="center" valign="top"><iframe src="first.html" name="content" width="100%"
 height="100%" scrolling="auto" frameborder="0" class="Stil13">
      <div align="center">Ihr Browser kann keine eingebetteten 
        Frames anzeigen</div>
    </iframe></td>
  </tr>

</table>
entstand die 2-Scrollbar Seite

Wenn ich den Code in:
Code: 
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="100%" align="center" valign="top"><iframe src="first.html" name="content" width="100%"
 height="215%" scrolling="auto" frameborder="0" class="Stil13">
      <div align="center">Ihr Browser kann keine eingebetteten 
        Frames anzeigen</div>
    </iframe></td>
  </tr>

</table>
abändere zeigt mir FF2 den IFrame wieder in einem kleinem Fenster(immerhin) und der IE6 in seiner grenzenlosen Pracht ignoriert ihn schlichtweg... ein MS Programm hat es ja nun wirklich nicht nötig sich mit schnöden Codes abzugeben ...uhmm ist das OT?;-)

BTT: Wenn ich nun in dem mit height="769" codiertem .html im Dokumentenkörper den {overflow:hidden;} Befehl einfüge verschwindet wie gewollt die Scrollbar jedoch ist es nicht mehr möglich bis zu dem unterem Rand des IFrames zu scrollen bzw. er verschwindet Teils unter der Statusleiste des jeweiligen Browsers. Siehe:not_enough_scrolll Dies war, wenn ich mich nicht täusche, dein Lösungsansatz.

Um meinem wirren Gedankengängen noch ein kleines quäntchen Logik anzuerziehen:

Wo liegt mein Fehler in der "height" Definition derTabelle/des IFrames?(warum akzeptieren die Browser den "100%" Wert nicht?)
Liegt es überhaupt daran oder habe ich beim Aufbau der Seite schlichtweg Mist gebaut?
Ist es möglich die Dropdown NL in eine Tabelle einzubinden?(diese leise Stimme flüstert schon wieder ein Nein)

ein weiteres Mal Danke im Voraus

newbiesche Grüße

AFreez

Noch nicht genug Text?

Marvin: Sag mir eine beliebige Zahl.
Matratze: 9
Marvin: Falsch! Siehst du?
Die Matratze war beeindruckt...
Douglas Adams mh R.I.P.
 
Zuletzt bearbeitet:
Hi,

vielleicht hilft dir das folgende Modell weiter, das auf dem Beispiel http://www.cssplay.co.uk/layouts/basics.html basiert?

Code: 
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> stu nicholls | CSS PLaY | cross browser fixed layout bare essentials </title>
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
}

html {
height:100%;
max-height:100%;
border:0;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

body {
height:100%;
max-height:100%;
overflow:hidden;
border:0;
direction:ltr;
color:rgb(255, 255, 255);
background-color:rgb(00, 00, 00);
}

#head {
position:absolute;
z-index:2;
top:0px;
left:0px;
width:100%;
background: #000;
}

#navi {
position:absolute;
z-index:2;
top:235px;
left:0px;
width:100%;
background: #000;
}

#content {
overflow:hidden;
position:absolute;
z-index:1;
top:275px;
bottom:0px;
left:0px;
right:0;
}

* html #content {
height:100%;
width:100%;
top:0;
left:0;
border-top:275px solid #000;
}

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(prodrop2/button4.gif);}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#000000 url(prodrop2/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {
        display:block;
        float:left;
        height:40px;
        line-height:33px;
        color:#FF9900;
        text-decoration:none;
        font-size:15px;
        font-weight:bold;
        padding:0 0 0 12px;
        cursor:pointer;
        font-style: normal;
}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(prodrop2/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {
        position:absolute;
        left:-9999px;
        top:-9999px;
        width:0;
        height:0;
        margin:0;
        padding:0;
        list-style:none;
}

.menu2 :hover ul.sub {
        left:2px;
        top:40px;
        padding:3px 0;
        border:1px solid #000000;
        white-space:nowrap;
        width:93px;
        height:auto;
        background-color: #660000;
}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub li a {
        display:block;
        font-size:15px;
        height:20px;
        width:87px;
        line-height:20px;
        text-indent:5px;
        color:#CC9900;
        text-decoration:none;
        border-top-width: 0;
        border-right-width: 0;
        border-bottom-width: 0;
        border-left-width: 2px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #000000;
        border-right-color: #000000;
        border-bottom-color: #000000;
        border-left-color: #000000;
}
.menu2 :hover ul.sub li a.fly {
        background-color: #660000;
        background-image: url(prodrop2/arrow.gif);
        background-repeat: no-repeat;
        background-position: 80px 7px;
}
.menu2 :hover ul.sub li a:hover {
        color:#000000;
        background-color: #FFCC99;
}
.menu2 :hover ul.sub li a.fly:hover {
        color:#000000;
        background-color: #FFCC99;
        background-image: url(prodrop2/arrow.gif);
        background-repeat: no-repeat;
        background-position: 80px 7px;
}
.menu2 :hover ul li:hover > a.fly {
        color:#333333;
        background-color: #FFCC99;
        background-image: url(prodrop2/arrow.gif);
        background-repeat: no-repeat;
        background-position: 80px 7px;
}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{
        left:90px;
        top:-4px;
        padding:3px 0;
        border:1px solid #000000;
        white-space:nowrap;
        width:93px;
        z-index:200;
        height:auto;
        background-color: #660000;
}
</style>

</head>
<body>
<span class="preload2"></span>
<div id="head">
     <div style="background-color: rgb(0, 0, 0); background-image: url(images/headbg.gif); height: 97px; width: 543px;"><img src="Pics/headlogo.jpg" alt="" style="width: 543px; height: 97px;"></div>
     <div style="background-color: rgb(0, 0, 0); background-image: url(images/headbg.gif); height: 138px; width: 850px;">
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0" height="138" width="850">
                  <param name="movie" value="heador2.swf">
                  <param name="quality" value="high">
                  <param name="bgcolor" value="#000000">
                  <embed src="heador2.swf" quality="high" bgcolor="#000000" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" height="138" width="850">
          </object>
     </div>
</div>
<div id="navi">
     <ul class="menu2">
         <li class="top"><a href="first.html" target="content" id="home" class="top_link"><span>Home</span></a></li>
         <li class="top"><a href="info.html" target="content" id="informations" class="top_link"><span class="down">Info</span>
         <!--[if gte IE 7]><!-->
         </a>
         <!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <ul class="sub">
             <li><a href="info.html" target="content" class="fly">Info 1
             <!--[if gte IE 7]><!-->
             </a>
             <!--<![endif]-->
             <!--[if lte IE 6]><table><tr><td><![endif]-->
                     <ul>
                         <li><a href="info.html" target="content">juten</a></li>
                         <li><a href="info.html" target="content">Tach</a></li>
                         <li><a href="info.html" target="content">Zusammen</a></li>
                     </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
             </a>
             </li>
             <li><a href="info.html" target="content">Gold</a></li>
             <li><a href="info.html" target="content">Platin</a></li>
             <li><a href="info.html" target="content">Material</a></li>
             <li><a href="preise.html" target="content">Preise</a></li>
         </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li class="top"><a href="werkstatt.html" target="content" id="content" class="top_link"><span class="down">Werkstatt</span>
         <!--[if gte IE 7]><!-->
         </a>
         <!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
                 <ul class="sub">
                     <li><a href="werkstatt.html" target="content">Werkstatt</a></li>
                     <li><a href="Nurnberg.html" target="content">Nürnberg</a></li>
                     <li><a href="berlin.html" target="content">Berlin</a></li>
                     <li><a href="duesseldorf.html" target="content">Düsseldorf</a></li>
                     <li><a href="koeln.html" target="content">Köln</a></li>
                     <li><a href="hamburg.html" target="content">Hamburg</a></li>
                     <li><a href="Offenbach.html" target="content">Offenbach</a></li>
                     <li><a href="Stuttgart.html" target="content">Stuttgart</a></li>
                 </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li class="top"><a href="kontakt.html" target="content" id="contacts" class="top_link"><span class="down">Kontakt</span>
         <!--[if gte IE 7]><!-->
         </a>
         <!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
                 <ul class="sub">
                     <li><a href="anmeldung.html" target="content">Anmeldung</a></li>
                     <li><a href="kontakt.html" class="fly">E-Mail to
                          <!--[if gte IE 7]><!-->
         </a>
         <!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <ul>
              <li><a href="mailto:info@hobbygoldschmiede.de">Nürnberg</a></li>
              <li><a href="mailto:Berlin@hobbygoldschmiede.de">Berlin</a></li>
              <li><a href="mailto:duesseldorf@hobbygoldschmiede.de">Düsseldorf</a></li>
              <li><a href="mailto:koeln@hobbygoldschmiede.de" >Köln</a></li>
              <li><a href="mailto:offenbach@hobbygoldschmiede.de">Offenbach</a></li>
              <li><a href="mailto:hamburg@hobbygoldschmiede.de">Hamburg</a></li>
              <li><a href="mailto:Stuttgart@hobbygoldschmiede.de" >Stuttgart</a></li>
              <li><a href="mailto:muenchen@hobbygoldschmiede.de" >München</a></li>
         </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a href="first.html">unbridled</a></li>
         <li><a href="first.html">at</a></li>
         <li><a href="first.html">dusk</a></li>
         </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li class="top"><a href="pic_ov.html" target="content" id="shop" class="top_link"><span class="down">Bildergalerie</span>
         <!--[if gte IE 7]><!-->
         </a>
         <!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <ul class="sub">
             <li><a href="tr_ov.html" target="content">Trauringe</a></li>
             <li><a href="pic_ov.html" target="content">Schmuck</a></li>
             <li><a href="trauringe_howto.html" target="content">Kursablauf</a></li>
         </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li class="top"><a href="gaestebuch.html" target="content" id="privacy" class="top_link"><span>Gästebuch</span></a></li>
     </ul>
</div>
<div id="content">
     <iframe src="first.html" name="content" width="100%" height="100%" scrolling="auto" frameborder="0" class="Stil13">
          <div align="center">Ihr Browser kann keine eingebetteten Frames anzeigen</div>
     </iframe>
</div>

</body>
</html>
 
Yeppers :)

Hat wunderbar geklappt.
Danke für deine Zeit die du investiert hast den Code abzuändern :eek:

/bow low and cheers

AFreez
 
Hehehe eine halbe Stunde....
Deinen abgeänderten Code kopieren: ca. 5 sec
Die Seite im FF/ iE aufrufen und freudig durchs Zimmer hüpfen:5min
Den Code auseinander nehmen um zu verstehen was du gemacht hast: 2Std--> still in Progress :suspekt:

solltest du einmal Schmuck (oder Trauringe? ;-)) für was auch immer brauchen: Goldschmiede Kargus (hoffe das diese Seite bald "etwas" anders aussieht brrr) Werkstatt Köln oder welche immer gefällt.

/bow low again

AFreez
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück