Layouthilfe ---> CSS

Basicline334ak · 12.07.2006, 16:20

Hallo Ihr lieben,

habe mal wieder eine frage, ich habe ein frage möchte über über eine Imagemap ein Popupmenü in DW8 einrichten was auch klappt, aber ich bekomme es leider nicht angezeigt.

Als zweites habe ich das Design mit Ebenen gestaltet und habe eine externe CSS wie kann ich die die ganzen eingaben etwas gliedern Atribute für positionen und schrift an einer Stelle und soweiter.

Im IE zerpflügt er bmir das Design aufgrund der nichtdarstellbarkeit von png transparenzen Opera/ FF / NS klappt

Ich poste den link zur seite : www.infree.de/hc/web-content/index.html
link zur css: www.infree.de/hc/web-content/css/basic.css

LG Basic danke für eure unterstützung

Basicline334ak · 13.07.2006, 12:27

Hallo ht niemand eine Idee..

StephanF · 13.07.2006, 16:04

Hallo Basicline334ak,
hab hier mal ein Beispiel, was mit JS und CSS funktioniert (IE und FF getestet). Vielleicht hilft dir das ja weiter. Eine reine CSS Lösung hab ich auch grad nicht zur Hand

PHP-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=iso-8859-1" />

<title>Ebenen Test</title>



<script type="text/JavaScript">

<!--



function an()

{document.getElementById('inhalt1').style.display = 'block';}



function aus()

{document.getElementById('inhalt1').style.display = 'none';}



function an2()

{document.getElementById('inhalt2').style.display = 'block';}



function aus2()

{document.getElementById('inhalt2').style.display = 'none';}



//-->

</script>

<style type="text/css">

<!--

#rahmen { 

width:400px; 

height:400px;

background-color: #CCCCFF;



} 



#inhalt1 {

position: absolute; 

height:50px;

width:150px;

background-color:#99CCFF;

z-index:1;



}

#inhalt2 {

position: absolute;

height:50px;

width:150px;

background-color: #00CC66;

z-index:2;

}

-->

</style>

</head>



<body>

<div id="rahmen">

<div id="show"><a href="#" onclick="an()">show 1 </a> | <a href="#" onclick="aus()">Hide 1 </a></div> 

<div id="show2"><a href="#" onclick="an2()">Show 2 </a> | <a href="#" onclick="aus2()">Hide 2 </a></div> 

<div id="show3"><a href="#" onclick="an(),an2()">Beide an</a> | <a href="#" onclick="aus(),aus2()">Beide aus</a></div> 

<br />

<div align="center" id="inhalt1" style="display: block;">ich bin ebene 1</div>

<div align="center" id="inhalt2" style="display: block;">ich bin ebene 2</div>

</div>

</body>

</html>

StephanF · 13.07.2006, 16:19

Hier noch ein anderes Beispiel, aus CSS Praxis Buch

PHP-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>

<title>Unbenanntes Dokument</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<script type="text/javascript"><!--//--><![CDATA[//><!--



sfHover = function() {

    var sfEls = document.getElementsByTagName("LI");

    for (var i=0; i<sfEls.length; i++) {

        sfEls[i].onmouseover=function() {

            this.className+=" sfhover";

        }

        sfEls[i].onmouseout=function() {

            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

        }

    }

}

if (window.attachEvent) window.attachEvent("onload", sfHover);



//--><!]]></script>





<style type="text/css">

<!--

body {

background-color: silver;

}

ul { 

        margin: 0;

        padding: 0;

        list-style: none;

        width : 11em;

    }

    

li {     

        position : relative;

        float : left;

        line-height : 1.25em;

        margin-bottom : -1px;

        width: 11em;

        background-color: #fbaf5b;        

}

    

li ul { 

        display: block;

        position : absolute;

        left: -999em;        

        margin-left : 11.05em;

        margin-top : -2.35em;

}

    

li a {

        display : block;

        padding : 0.5em;

        width: 11em;

        width : 10em;

        color : black;

        text-decoration : none;

        border : 1px solid black;

}

    

li a:hover {

        background-color : #faeedc;

    }

    

li:hover ul, li.sfhover ul { 

        left: auto;

    }

// -->

</style>











</head>



<body>



<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#" class="aktuell">Link 2</a></li>

<li><a href="#">Link 3</a><ul>

<li><a href="#">Link 3.1</a></li><li><a href="#">Link 3.2</a></li></ul></li>

<li><a href="#">Link 4</a></li>

<li><a href="#">Link 5</a></li>

</ul>





</body>

</html>