Suche im Forum:
Suchen


Autor Nachricht
Beitrag13.11.2009 um 12:18 (UTC)    
Titel: Fragen zum CSS Design
Antworten mit Zitat
Hi,

ich möchte gerne dieses Design (kirmesaction.de.tl) ein wenig abändern und da brauche ich eure Hilfe, da es mir niemand in einer kurzen Zeit machen will.

1.Wie ersetzte ich die normale Navigation durch ein Coolmenü ??

Code ohne Style Tags:

Code:

/*<<--CSS CODE OHNE STYLE-TAGS ANFANG-->>*/     
 
h1#title{display: none;}   
h2#title span {display: none;}   
div.header{display: none;}   
li.nav_element{list-style-type: none;}   
li{list-style-type: none;} #counter{display:none}   
 
body {   
    background-image: url(http://img.webme.com/pic/p/poddi-test/bg.png);   
    background-color: #000000;}     
 
p, div, b{   
    font-family:  Sans-Serif;   
    font-size: 12px;   
    text-decoration: none;}     
a{ 
    color : #99cc00;   
    font-size : 12px;   
    text-decoration : none;}   
       
a:hover {   
    color : #3AA9CA;   
    font-size: 12px;   
    text-decoration: none;}     
     
a:active { 
    color : #3AA9CA;   
    font-size : 12px;   
    text-decoration : none;}     
     
* { padding: 0; margin: 0; }   
 
#Poddi{   
    margin : 0 auto;   
    margin-top: 10px;   
    margin-bottom: 10px;   
    width : 898px;   
    border: 2px solid #C0C0C0;   
    background-color: #FFFFFF;}     
 
#Header {   
    background-image: url(http://img.webme.com/pic/p/poddi-test/greenheader.png);   
    width: 748px;   
    height: 81px;   
    font-size: 50px; color: #99CC00;   
    float : left;   
    padding: 20px 0px 0px 150px;}     
     
#nav_container{   
    background-image: url(http://img.webme.com/pic/p/poddi-test/greennav_bg.png);   
    background-color: #ffffff;   
    height: 28px;   
    width: 858px;   
    float: left;   
    clear: both;   
    margin: -67px 20px 0px 20px;}     
     
#top{   
    background-image: url(http://img.webme.com/pic/p/poddi-test/sidebar_head.png);   
    height: 14px;   
    width: 190px;   
    padding: 5px;   
    float: right;   
    font-weight: bold;   
    color: #73BA0F;   
    margin-right: 20px;}   
     
#Box{   
    background-image: url(http://img.webme.com/pic/p/poddi-test/sidebar_bg.png);   
    font-size: 12px;   
    padding: 5px;   
    padding-bottom: 0px;   
    width: 190px;   
    float: right;   
    margin-right: 20px;}   
     
#bottom{   
    background-image: url(http://img.webme.com/pic/p/poddi-test/sidebar_foot.png);   
    height: 7px;   
    width: 200px;   
    float: right;   
    margin-right: 20px;   
    margin-bottom: 10px;}   
     
#nav a {   
    text-decoration: none;   
    color: #FFFFFF;}     
     
#nav li{   
    list-style-type: none;   
    color: #FFFFFF;   
    display: block;   
    font-size: 12px;   
    text-decoration: none;   
    height: 14px;   
    padding: 5px;   
    float: left;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/greennav.png);}   
     
#nav li:hover{   
    height: 14px;   
    list-style-type: none;   
    color: #FFFFFF;   
    display: block;   
    font-size: 12px;   
    text-decoration: none;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/greennav_hover.png);   
    padding: 5px;}   
     
#nav li.checked_menu{   
    height: 14px;   
    list-style-type: none;   
    color: #FFFFFF;   
    display: block;   
    font-size: 12px;   
    text-decoration: none;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/greennav_hover.png);   
    padding: 5px;}     
     
#nav li a{   
    list-style-type: none;   
    color: #FFFFFF;   
    display: block;   
    font-size: 12px;   
    text-decoration: none;}   
     
#nav li a:hover{   
    color: #FFFFFF;}   
 
#content_top{   
    width: 640px;   
    height: 14px;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/content_head.png);   
    margin: 0px 0px 0px 20px;   
    display: inline;   
    font-weight: bold;   
    color: #73BA0F;   
    padding: 5px;   
    float: left;}   
     
#content {   
    width: 640px;   
    color: #000000;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/content_bg.png);   
    background-color: #FFFFFF;   
    margin: 0px 0px 0px 20px;   
    display: inline;   
    padding: 5px;   
    padding-bottom: 0px;   
    float: left;   
    overflow: auto;}     
     
#content_bottom {   
    width: 650px;   
    height: 7px;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/content_foot.png);   
    margin: 0px 0px 10px 20px;   
    display: inline;   
    float: left;}     
     
#links{   
    width: 675px;   
    background-color: #FFFFFF;   
    margin: 43px 0px 0px 0px;   
    float: left;   
    overflow: none;}   
     
#rechts{   
    width: 223px;   
    background-color: #FFFFFF;   
    margin: 43px 0px 0px 0px;   
    float: right;   
    overflow: none;}     
     
#Footer{   
    width: 898px;   
    height: 20px;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/foot.png);   
    color: #000000;   
    text-align: center;   
    font-size: 11px;   
    clear: both;}         
     
/*<<--ENDE-->>*/     
 
/*WERBUNG ZENTRIEREN*/   
 
-->  </style> 
<table style="margin: 0px auto; margin-top: 0px;" cellpadding="0" cellspacing="0" ><tr><td>   
<style type="text/css">  <!--   
↑
Beitrag13.11.2009 um 19:51 (UTC)    
Titel:
Antworten mit Zitat
Ich denke ich habe es richtig gemacht:

Code:

/*<<--CSS CODE OHNE STYLE-TAGS ANFANG-->>*/     
 #nav a {display: none;}       
#nav li{display: none;}     
#nav li:hover{display: none;}     
#nav li.checked_menu{display: none;}       
#nav li a{display: none;}   
#nav li a:hover{display: none;}   
h1#title{display: none;}   
h2#title span {display: none;}   
div.header{display: none;}   
li.nav_element{list-style-type: none;}   
li{list-style-type: none;} #counter{display:none}   
 
body {   
    background-image: url(http://img.webme.com/pic/p/poddi-test/bg.png);   
    background-color: #000000;}     
 
p, div, b{   
    font-family:  Sans-Serif;   
    font-size: 12px;   
    text-decoration: none;}     
a{
    color : #99cc00;   
    font-size : 12px;   
    text-decoration : none;}   
       
a:hover {   
    color : #3AA9CA;   
    font-size: 12px;   
    text-decoration: none;}     
     
a:active {
    color : #3AA9CA;   
    font-size : 12px;   
    text-decoration : none;}     
     
* { padding: 0; margin: 0; }   
 
#Poddi{   
    margin : 0 auto;   
    margin-top: 10px;   
    margin-bottom: 10px;   
    width : 898px;   
    border: 2px solid #C0C0C0;   
    background-color: #FFFFFF;}     
 
#Header {   
    background-image: url(http://img.webme.com/pic/p/poddi-test/greenheader.png);   
    width: 748px;   
    height: 81px;   
    font-size: 50px; color: #99CC00;   
    float : left;   
    padding: 20px 0px 0px 150px;}     
     
#nav_container{   
    background-image: url(http://img.webme.com/pic/p/poddi-test/greennav_bg.png);   
    background-color: #ffffff;   
    height: 28px;   
    width: 858px;   
    float: left;   
    clear: both;   
    margin: -67px 20px 0px 20px;}     
     
#top{   
    background-image: url(http://img.webme.com/pic/p/poddi-test/sidebar_head.png);   
    height: 14px;   
    width: 190px;   
    padding: 5px;   
    float: right;   
    font-weight: bold;   
    color: #73BA0F;   
    margin-right: 20px;}   
     
#Box{   
    background-image: url(http://img.webme.com/pic/p/poddi-test/sidebar_bg.png);   
    font-size: 12px;   
    padding: 5px;   
    padding-bottom: 0px;   
    width: 190px;   
    float: right;   
    margin-right: 20px;}   
     
#bottom{   
    background-image: url(http://img.webme.com/pic/p/poddi-test/sidebar_foot.png);   
    height: 7px;   
    width: 200px;   
    float: right;   
    margin-right: 20px;   
    margin-bottom: 10px;}   
     
#content_top{   
    width: 640px;   
    height: 14px;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/content_head.png);   
    margin: 0px 0px 0px 20px;   
    display: inline;   
    font-weight: bold;   
    color: #73BA0F;   
    padding: 5px;   
    float: left;}   
     
#content {   
    width: 640px;   
    color: #000000;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/content_bg.png);   
    background-color: #FFFFFF;   
    margin: 0px 0px 0px 20px;   
    display: inline;   
    padding: 5px;   
    padding-bottom: 0px;   
    float: left;   
    overflow: auto;}     
     
#content_bottom {   
    width: 650px;   
    height: 7px;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/content_foot.png);   
    margin: 0px 0px 10px 20px;   
    display: inline;   
    float: left;}     
     
#links{   
    width: 675px;   
    background-color: #FFFFFF;   
    margin: 43px 0px 0px 0px;   
    float: left;   
    overflow: none;}   
     
#rechts{   
    width: 223px;   
    background-color: #FFFFFF;   
    margin: 43px 0px 0px 0px;   
    float: right;   
    overflow: none;}     
     
#Footer{   
    width: 898px;   
    height: 20px;   
    background-image: url(http://img.webme.com/pic/p/poddi-test/foot.png);   
    color: #000000;   
    text-align: center;   
    font-size: 11px;   
    clear: both;}         
     
/*<<--ENDE-->>*/     
 
/*WERBUNG ZENTRIEREN*/   
 
-->  </style>
<table style="margin: 0px auto; margin-top: 0px;" cellpadding="0" cellspacing="0" ><tr><td>   
<style type="text/css">  <!-- 


Coolmenü Code (Bei Text über dem Design)

Code:
<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 190px;
left: 100px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #00CCFF;
background-image: url(URL);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="Unterlink 1.1">Untermenü 1.1</a></li>
<li><a href="Unterlink 1.2">Untermenü 1.2</a></li>
<li><a href="Unterlink 1.3">Untermenü 1.3</a></li>
<li><a href="Unterlink 1.4">Untermenü 1.4</a></li>
<li><a href="Unterlink 1.5">Untermenü 1.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="Unterlink 2.1">Untermenü 2.1</a></li>
<li><a href="Unterlink 2.2">Untermenü 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="Unterlink 3.1">Untermenü 3.1</a></li>
<li><a href="Unterlink 3.2">Untermenü 3.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">Untermenü 4.1</a></li>
<li><a href="Unterlink 4.2">Untermenü 4.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Unterlink 5.1">Untermenü 5.1</a></li>
<li><a href="Unterlink 5.2">Untermenü 5.2</a></li>
</ul>
</li>
</div>

______________
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.