Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag13.11.2009 um 12:18 (UTC)    
Titel: Fragen zum CSS Design

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:

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:   


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