 Willkommen auf dem Portal für Mediengestalter
|
|
|
| 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) |
  |
|
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
|
|
| |
  |
 |
timonn
Threadersteller
Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 03.01.2011 12:39
Titel
|
|
|
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)
|
|
| |
|
|
|
Anzeige
|
|
|
willshedo
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
|
| |
|
|
timonn
Threadersteller
Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 03.01.2011 13:38
Titel
|
|
|
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
|
|
| |
|
|
aUDIOfREAK
Dabei seit: 04.04.2002
Ort: Ansbach
Alter: 44
Geschlecht: 
|
Verfasst Di 04.01.2011 11:41
Titel
|
|
|
| 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 
|
|
| |
 |
|
| |
|
|
| Ähnliche Themen |
netscape interpretiert mal so mal so!
Netscape nur warum??
height in Netscape
Problem im Netscape 4
1px dicke Tabelle im Netscape 4 ?
Framesetversatz bei Netscape/Mozilla
|
|
|
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.
|
|
