mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 26.04.2024 01:39 Benutzername: Passwort: Auto-Login

Thema: Hilfe bei CSS! vom 28.05.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Hilfe bei CSS!
Autor Nachricht
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 28.05.2008 13:41
Titel

Hilfe bei CSS!

Antworten mit Zitat Zum Seitenanfang

Hi mein Problem ich soll/will ne Navigation mit hidden layers machen - klappt soweit auch ganz gut und Erscheinungsbild der Navi wird mit diesem Stylesheet gesteuert:

Code:
A:link { color : #7a878c; text-decoration: none;}
A:visited {color : #7a878c; text-decoration: none;}
A:hover {color: #003369; text-decoration: none;}

#navigation {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   font-weight: bold;
   position:absolute;
   left:10px;
   top:108px;
   width:609px;
   height:15px;
   z-index:1;
   layer-background-color: #FF0000;
   border:1px none #000000;
   padding-left:5px;
   padding-top:2px;
   padding-right:5px;
   padding-bottom: 2px;
}

#unter {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   position:absolute;
   left: 11px;
   top: 131px;
   width:132px;
   height:150px;
   z-index:1;
   layer-background-color: #006699;
   border: 1px none #000000;
   padding-left: 5px;
   padding-top: 5px;
   padding-right:5px;
   padding-bottom: 5px;
   visibility: hidden;
}

#leist {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   position:absolute;
   left: 117px;
   top:131px;
   width:195px;
   height:244px;
   z-index:1;
   layer-background-color: #006699;
   border: 1px none #000000;
   padding-left: 5px;
   padding-top: 5px;
   padding-right:5px;
   padding-bottom: 5px;
   visibility: hidden;
}

#betrieb {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   position:absolute;
   left: 243px;
   top: 131px;
   width:150px;
   height:150px;
   z-index:1;
   layer-background-color: #006699;
   border: 1px none #000000;
   padding-left: 5px;
   padding-top: 5px;
   padding-right:5px;
   padding-bottom: 5px;
   visibility: hidden;
}    
   
#koop {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   position:absolute;
   left: 377px;
   top: 131px;
   width:150px;
   height:150px;
   z-index:1;
   layer-background-color: #006699;
   border: 1px none #000000;
   padding-left: 5px;
   padding-top: 5px;
   padding-right:5px;
   padding-bottom: 5px;
   color: #00CCFF;
   visibility: hidden;
}


jetzt werden aber logischerweise auch die Links in den hidden layers mit denselben Farben angesteuert wie die der "Elternlayer" wie kann ich das verhindern denn die beiden stehen auf farblich unterschiedlichen Inhalten. Falls jemand Rat weiß nur her damit - bin eigentlich printler und nicht so der web-knecht und brauch dringend mehr css Erfahrung wie ich merke... Menno!

[edit by Nimroy]
Bitte [code]-Tags verwenden.Außerdem verschoben


Zuletzt bearbeitet von Nimroy am Do 29.05.2008 05:55, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Snifferdog

Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht: Männlich
Verfasst Mi 28.05.2008 14:24
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,

also für mich fehlt leider im moment noch ein HTML Code ... in dem ich mir mal anschauen könnte wie du das ganze angeordnet hast und soweiter ... *zwinker*
Was du aber ganz unabhänig vom Problem mal machen könntest ist, dass du solche "allgemeinen Angaben" wie die Schriftart einfach dem html oder einem übergeordneten element zuweißt dann brauchst du sie nicht deuern wiederholen *zwinker*

Gruß


Zuletzt bearbeitet von Snifferdog am Mi 28.05.2008 14:30, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 28.05.2008 14:57
Titel

Antworten mit Zitat Zum Seitenanfang

So, hier der html-code der seite

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" />
<link rel="stylesheet" href="navi.css" type="text/css" />
<script language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<title>FERA - Unternehmen</title>
<style type="text/css">
<!--
body {
   margin-left: 0px;
   margin-top: 0px;
   background-color: #CCCCCC;
   background-image: url(../pic/bg.jpg);
   background-repeat: repeat;
   margin-right: 0px;
   margin-bottom: 0px;
}
body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #003369;
}
.Stil1 {color: #FFFFFF}
.Stil4 {
   font-size: 14px;
   color: #33FF66;
}
-->
</style></head>

<body>
<table width="980" height="413" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" height="107">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <td width="245" align="right" valign="top"><img src="../pic/ferra_logo.png" alt="Logo Fera" width="277" height="107" hspace="0" vspace="0" border="0" align="top" /></td>
  </tr>
  <tr>
    <td width="50" height="25">&nbsp;</td>
    <td colspan="2"><br />
<div class="Stil1 Stil4" id="navigation"><a href="#" onmouseover="MM_showHideLayers('unter','','show','leist','','hide','betrieb','','hide','koop','hide','hide')">Unternehmen </a> | <a href="#" onmouseover="MM_showHideLayers('unter','','hide','leist','','show','betrieb','','hide','koop','hide','hide')">Leistungen</a> | <a href="#" onmouseover="MM_showHideLayers('unter','','hide','leist','','hide','betrieb','','hide','koop','hide','hide')">Betriebseinrichtungen</a> | <a href="#" onmouseover="MM_showHideLayers('unter','','hide','leist','','hide','betrieb','','hide','koop','hide','hide')">Kooperationspartner</a></div></td>
   
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="50" height="229">&nbsp;</td>
    <td colspan="3" bgcolor="#00CC99"><table id="Tabelle_01" width="1023" height="232" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="171"><img src="../pic/atmo_unter/atmo-leiste_01.gif" width="171" height="58" alt="1" /></td>
        <td width="170"><img src="../pic/atmo_unter/atmo-leiste_02.gif" width="170" height="58" alt="2" /></td>
        <td width="171"><img src="../pic/atmo_unter/atmo-leiste_03.gif" width="171" height="58" alt="3" /></td>
        <td width="170"><img src="../pic/atmo_unter/atmo-leiste_04.gif" width="170" height="58" alt="4" /></td>
        <td width="171"><img src="../pic/atmo_unter/atmo-leiste_05.gif" width="171" height="58" alt="5" /></td>
        <td width="170"><img src="../pic/atmo_unter/atmo-leiste_06.gif" width="170" height="58" alt="6" /></td>
      </tr>
      <tr>
        <td><img src="../pic/atmo_unter/atmo-leiste_07.gif" width="171" height="58" alt="7" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_08.gif" width="170" height="58" alt="8" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_09.gif" width="171" height="58" alt="9" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_10.gif" width="170" height="58" alt="0" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_11.gif" width="171" height="58" alt="11" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_12.gif" width="170" height="58" alt="12" /></td>
      </tr>
      <tr>
        <td><img src="../pic/atmo_unter/atmo-leiste_13.gif" width="171" height="58" alt="13" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_14.gif" width="170" height="58" alt="14" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_15.gif" width="171" height="58" alt="15" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_16.gif" width="170" height="58" alt="16" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_17.gif" width="171" height="58" alt="17" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_18.gif" width="170" height="58" alt="18" /></td>
      </tr>
      <tr>
        <td><img src="../pic/atmo_unter/atmo-leiste_19.gif" width="171" height="58" alt="19" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_20.gif" width="170" height="58" alt="20" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_21.gif" width="171" height="58" alt="21" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_22.gif" width="170" height="58" alt="22" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_23.gif" width="171" height="58" alt="23" /></td>
        <td><img src="../pic/atmo_unter/atmo-leiste_24.gif" width="170" height="58" alt="24" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="50">&nbsp;</td>
    <td width="362" bgcolor="#00CC99">&nbsp;</td>
    <td width="244" bgcolor="#00CC99">&nbsp;</td>
    <td bgcolor="#00CC99">&nbsp;</td>
  </tr>
</table>
<div id="koop"><a href="#">Link 1</a><br />
<a href="#">Link 2</a></div>
<div id="leist"><a href="#">Fertigungs- und Montageprogramme</a><br />
  <a href="#">Fertigungsleistungen</a></div>
<div id="unter"><a href="#">Portrait</a><br />
<a href="#">Historie</a></div>
<div id="betrieb"><a href="#">Link 1</a><br />
  <a href="#">Link 2</a></div>
</body>
</html>


[edit by Nimroy]
Bitte [code]-Tags verwenden.


Zuletzt bearbeitet von Nimroy am Do 29.05.2008 05:56, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Snifferdog

Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht: Männlich
Verfasst Mi 28.05.2008 18:03
Titel

Antworten mit Zitat Zum Seitenanfang

Uff ... ^^
Sorry ich habs jetzt zwar aufm Pc alles mal schnell zusammengestellt aber ich hab keine Ahnung was genau du jetzt
ändern willst, weil bei mir alles nur grau / grün ist ^^
Ne Url wäre vll also auch noch nützlich damit man die Bilder auch sehen kann *zwinker*

Aber vll ist ja jemand anders da auch etwas heller als ich ... ~gg~

Gruß
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 28.05.2008 18:23
Titel

Antworten mit Zitat Zum Seitenanfang

Hab die Lösung bereits gefunden - aber trotzdem Danke für die Hilfe - es ist hier zu heiß zum Denken....
  View user's profile Private Nachricht senden
Nimroy
Community Manager

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 46
Geschlecht: Männlich
Verfasst Do 29.05.2008 05:56
Titel

Antworten mit Zitat Zum Seitenanfang

Lass uns daran teilhaben. Das ist der Sinn eines Forums. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
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.