mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Sa 26.05.2012 09:15 Benutzername: Passwort: Auto-Login

Thema: [CSS] auf ID verlinken (IE 6 & Netscape) vom 03.01.2011

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] auf ID verlinken (IE 6 & Netscape)
Autor Nachricht
timonn
Threadersteller

Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 03.01.2011 12:07
Titel

[CSS] auf ID verlinken (IE 6 & Netscape)

 Antworten mit Zitat Zum Seitenanfang
Hallo,
Inspiriert von folgender Seite http://www.cssplay.co.uk/menu/clickgallery.html habe ich versucht, meinen Inhalt so zu gliedern, dass immer nur der aktuelle Teil sichtbar wird. Ich habe also einen Bereich mit overflow:hidden, der genau die Höhe von einem Inhaltsteil hat. Der zweite Inhaltsteil hat ebenfalls diese Höhe und wird bei einem Link auf dessen ID angezeigt(es wird quasi nach unten gescrollt).
Das ganze funktioniert in FF, Google Chrom, Opera, IE5,(7),8,9 auch wunderbar.
Beim IE6 wird jedoch trotz overflow:hidden beim Inhalt-div alles angezeigt. Das ganze könnte man durch ein weiteres overflow:hidden bei dem rechts-div zwar fixen, jedoch funktioniert die verlinkung dann nicht.
Ähnlich sieht es bei Netscape aus.
Falls Screenshots oder eine Live-Version der Seite weiterhelfen würden, eben kurz sagen, dann stell ich die auch noch rein.
Hier ersteinmal der Code

HTML
Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="Author" content="Franz-Peter Haas" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>+++ Beschriftungen +++</title>

</head>

<body>
<div class="header">
   <div class="linksheader">
       <img alt="." style="margin-right:20px;" src="img/karo.jpg" />
       Ihr Spezialist für Werbung seit 1991
       <img alt="." style="margin-left:20px;" src="img/punkte.jpg" />
    </div>
    <div class="rechtsheader">
       <img alt="Hase" src="img/hase.jpg" />
       <img alt="Logo" src="img/logo.jpg" />
    </div>
</div>

<div class="inhalt">

   <div id="beschriftungen">
      <div  class="links">
          <b>Wandmalerei</b> oder <br />
          aufwendige <b>Airbrushtechnik</b>.<br />
          <br />
          Sie ist eine wirksame Alternative zur<br />
            Werbeanlage mit Profilbuchstaben.<br />
          Gern  liefern wir Ihnen auch die<br />
           gerädelten Pausen an zur<br />
           Weiterverarbeitung.<br />
          <br />
           Durch fachgerechte, feinfühlige<br />
           Planung und Ausführung<br />
           wird so Werbemaßnahme und<br />
          Fassade stilgerecht vereint.<br />
           <br />
          <br />
          <br />
          Fassadengestaltung mit<br />
          <b>Profilbuchstaben</b>.<br />
          Unterschiedliche Materialstärken und<br />
           Lacktechniken heben Ihre Werbung<br />
             ins richtige Licht.
         </div>
       
      <div class="rechts">       
           <br /><br />
            <img src="img/karo1.jpg" alt="karo" align="left" /><br /><br />
           <img class="bildrahmen"  alt="Beispielbild" src="img/beschriftung1.jpg" /><br /><br />
            <img src="img/karo1.jpg"  alt="karo" align="right" /><br /><br />
           
            <a href="#beschriftungen"><img align="left"  alt="1" src="img/pfeil2.gif" /></a>
            <a href="#schaufenster"><img align="left" alt="2" src="img/pfeil.gif" /></a>
            <a href="#planenbeschriftung"><img align="left" alt="3" src="img/pfeil.gif" /></a>
            <a href="#fahrzeuge"><img align="left" alt="4" src="img/pfeil.gif" /></a>
        </div>
        <div style="clear:both"></div>
   </div>
   
   
    <div id="schaufenster">
      <div  class="links">
          <b>Wandmalerei</b> oder <br />
          aufwendige <b>Airbrushtechnik</b>.<br />
          <br />
          Sie ist eine wirksame Alternative zur<br />
            Werbeanlage mit Profilbuchstaben.<br />
          Gern  liefern wir Ihnen auch die<br />
           gerädelten Pausen an zur<br />
           Weiterverarbeitung.<br />
          <br />
           Durch fachgerechte, feinfühlige<br />
           Planung und Ausführung<br />
           wird so Werbemaßnahme und<br />
          Fassade stilgerecht vereint.<br />
           <br />
          <br />
          <br />
          Fassadengestaltung mit<br />
          <b>Profilbuchstaben</b>.<br />
          Unterschiedliche Materialstärken und<br />
           Lacktechniken heben Ihre Werbung<br />
             ins richtige Licht.
         </div>
       
      <div class="rechts">       
           <br /><br />
            <img src="img/karo1.jpg" alt="karo" align="left" /><br /><br />
           <img class="bildrahmen"  alt="Beispielbild" src="img/beschriftung2.jpg" /><br /><br />
            <img src="img/karo1.jpg"  alt="karo" align="right" /><br /><br />
           
            <a href="#beschriftungen"><img align="left"  alt="1" src="img/pfeil.gif" /></a>
            <a href="#schaufenster"><img align="left" alt="2" src="img/pfeil2.gif" /></a>
            <a href="#planenbeschriftung"><img align="left" alt="3" src="img/pfeil.gif" /></a>
            <a href="#fahrzeuge"><img align="left" alt="4" src="img/pfeil.gif" /></a>
        </div>
        <div style="clear:both"></div>
   </div>
   
</div>

<div class="menu">
   <table id="menuliste" cellspacing="0" cellpadding="0" width="100%">
      <tr>
            <td><a href="#">Wir über uns</a></td>
            <td><a class="folienfuchs" href="#">Folienfuchs</a></td>
            <td><a class="aktuell" href="#">Beschriftungen</a></td>
            <td><a href="#">Digitaldruck</a></td>
            <td><a href="#">Siebdruck</a></td>
            <td><a href="#">Werbeanlagen</a></td>
            <td><a href="#">Einzelanfertigungen</a></td>
            <td><a href="#">Kontakt</a></td>
      </tr>
   </table>
</div>

</body>
</html>



CSS
Code:

@charset "utf-8";
/* CSS Document */

body{
   text-align:center;
   margin:auto;
   padding:auto;
   background-color:black;
   font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
   font-size: 11px;
   color:black;
}

b{color:#006600; font-weight:bold; text-decoration:none; font-size:11px;}
A:link {text-decoration: none; color:#6e9fac; font-weight:bold;}
A:visited {text-decoration: none; color:#6e9fac; font-weight:bold;}
A:active {text-decoration: none; color:#6e9fac; font-weight:bold;}
A:hover {text-decoration: none; color:#a1c9c9; font-weight:bold;}

img{border:0;}





.header{
   width:749px;
   height:71px;
   background-color: #000000;
   margin:auto;
   color:white;
   margin-bottom:20px;
   text-align:left;
}

.header .linksheader{float:left;}
.header .rechtsheader{float:right; margin-top:20px;}

.inhalt{
   width:689px;
   height:448px;
   background-color: #eaf4db;
   margin:auto;
   overflow:hidden;
   padding:30px;
   padding-top:00px;
   padding-bottom:0px;
}

* html .inhalt {
   width:749px;
   height: 450px;
}

.links{
   float:left;
   width:243px;
   background-color:#dbecc2;
   height:318px;
   text-align:right;
   padding:35px;
   margin-top:30px;
   margin-bottom:30px;
}

* html .links {height:388px; width:313px;}

.rechts{
   float:right;
   width:346px;
   height:388px;
   position:relative;
   margin-top:30px;
   margin-bottom:30px;
   text-align:center;
   overflow:hidden;
}

.bildrahmen{border:4px solid #8cc43d;}

.menu{
   width:749px;
   background-color: #000000;
   margin:auto;
   clear:both;
   padding-top:15px;
}


#menuliste tr td {text-align:left; color:#8cc43d; border-left:1px solid #8cc43d; padding:0px; padding-left:7px;  white-space:nowrap; font-size:11px;}
#menuliste tr td a:link{color:#8cc43d; text-decoration:none; font-weight:normal;}
#menuliste tr td a:visited{color:#8cc43d; text-decoration:none; font-weight:normal;}
#menuliste tr td a:active{color:#8cc43d; text-decoration:none; font-weight:normal;}
#menuliste tr td a:hover{color:white; text-decoration:none; font-weight:normal;}
#menuliste tr td a.folienfuchs:link{color:#fab913; font-weight:bold;}
#menuliste tr td a.folienfuchs:visited{color:#fab913; font-weight:bold;}
#menuliste tr td a.folienfuchs:active{color:#fab913; font-weight:bold;}
#menuliste tr td a.folienfuchs:hover{color:#ffd511;  font-weight:bold;}
#menuliste tr td a.aktuell:link{color:#999999}
#menuliste tr td a.aktuell:visited{color:#999999}
#menuliste tr td a.aktuell:active{color:#999999}
#menuliste tr td a.aktuell:hover{color:white;}
#menuliste tr td a.folienfuchsaktuell:link{color:#999999; font-weight:bold;}
#menuliste tr td a.folienfuchsaktuell:visited{color:#999999; font-weight:bold;}
#menuliste tr td a.folienfuchsaktuell:active{color:#999999; font-weight:bold;}
#menuliste tr td a.folienfuchsaktuelle:hover{color:white}



Zuletzt bearbeitet von timonn am Mo 03.01.2011 12:23, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
timonn
Threadersteller

Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 03.01.2011 12:39
Titel

Antworten mit Zitat Zum Seitenanfang
Wollte meinen Beitrag jetzt noch editieren und ein paar Screenshots einfügen, aber das geht nicht mehr. Eventuell wäre ja ein Admin so nett und kopiert die Bilder in den ersten Beitrag. Ich hoffe mal, die Bilder sind groß genug, um noch etwas zu erkennen. Wollte die Seite hier nicht sprengen. Falls erwünscht, kann ich ein paar größere Screenshots extern verlinken.

Firefox(links Startseite, rechts wenn man auf den Link zur andern ID klickt)




Netscape(etwas runtergescrollt. bei einem Klick auf den Link, scrollt die Seite ein bisschen nach unten)




IE6 (etwas runtergescrollt bei einem Klick auf den Link, scrollt die Seite ein bisschen nach unten)

  View user's profile Private Nachricht senden
willshedo

Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 39
Geschlecht: -
Verfasst Mo 03.01.2011 13:22
Titel

Antworten mit Zitat Zum Seitenanfang
Hi,
guck mal hier:
http://www.epigroove.com/posts/78/how_to_fix_ie_6_and_overflow_hidden
  View user's profile Private Nachricht senden
timonn
Threadersteller

Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 03.01.2011 13:38
Titel

Antworten mit Zitat Zum Seitenanfang
Ersteinmal vielen Dank für die Antwort.
Leider komme ich auch mit dem Link nicht weiter. Ich habe doch dem übergeordneten Element(inhalt) eine feste Höhe(und Breite) vergeben. Auch eine testweise feste Breite der beiden divs mit der id "beschriftung" und "schaufenster" hat nichts geholfen.
Oder habe ich da irgendwas falsch verstanden?
Wenn ich bei den beiden ID-Divs unterschiedliche Hintergrundfarben nehme, werden die übrigens geändert, die Bilder jedoch nicht.
Vielleicht hat ja noch jemand eine Idee bzw. eine Erläuterung wie ich die Informationen aus dem Link auf meinen Code anwenden kann.


//edit: Jippie, ich habe es doch geschafft, nachdem ich mir die Kommentare auf der Seite durchgelesen habe. Ein "position:relative" im inhalt-div hat das Problem beseitigt. Zumindestens im IE6. Bei Netscape besteht das Problem weiterhin.

Zuletzt bearbeitet von timonn am Mo 03.01.2011 13:42, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
aUDIOfREAK

Dabei seit: 04.04.2002
Ort: Ansbach
Alter: 32
Geschlecht: Männlich
Verfasst Di 04.01.2011 11:41
Titel

Antworten mit Zitat Zum Seitenanfang
timonn hat geschrieben:
Bei Netscape besteht das Problem weiterhin.


ganz im ernst... netscape ist ein ausgestorbener browser der nicht einmal im entferntesten aktuelles, standardkonformes html und css beherrscht. streich das ding einfach aus deinem gedächtnis. die 3 user, die deine webseite im laufe der nächsten 10 jahre mit netscape besuchen werden, sind den aufwand definitiv nicht wert.

eigentlich sieht es beim ie6 genauso aus, durch die aber nach wie vor hohe verbreitung von XP ist auch der ie6 noch relativ weit verbreitet (useranteil von 10 - 15%) - aber auch das wird sich in den nächsten jahren stetig ändern. und das ist auch gut so Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen CSS Bugs in Opera und Netscape - Brauche Hilfe!
CSS extern verlinken
[CSS] Ganze Box verlinken
CSS - Keinen I-Frame und nun verlinken?
Netscape nur warum??
Problem im Netscape 4
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

mediengestalter.info ist ein Projekt von webformatik :: Forensoftware: phpBB © 2001, 2005 phpBB Group