Autor |
Nachricht |
-
rhetorischeberatung
|
28.04.2011 um 13:54 (UTC) Titel: [closed] Button fixieren |
|
|
heyy wollte fragen, wie ich meine navigations - coolmenü button's fixieren kann so dass das ganze so aussieht wie hier:
www.isupport.de.ms
der jeweils angeklickte button nimmt den hover effekt an...
mein coolmenü code:text über dem design:
Code: <div id="design1">
<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;
left: 48%;
top: 231px;
margin-left: -418px;
width: 980px; } /* Breite der Menüpunkte einstellen */
.menu li {
width: 150px;
float: left; }
/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://img.webme.com/pic/r/rhetorischeberatung/button1.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color:#FFFFFF; }
/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #;
background-image: url(http://img.webme.com/pic/r/rhetorischeberatung/button2.png);
#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="http://rhetorischeberatung.de.tl" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Home</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
</ul>
</li>
<li><a href="http://rhetorischeberatung.de.tl/Kontakt.htm" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Kontakt</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
</ul>
</li>
<li><a href="http://rhetorischeberatung.de.tl/G.ae.stebuch.htm" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Gästebuch</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
</ul>
</li>
<li><a href="http://rhetorischeberatung.de.tl/Rhetorik.htm" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Rhetorik</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
</ul>
</li>
<li><a href="
http://rhetorischeberatung.de.tl/Referenzen.htm" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Über mich</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">Hauptmenü 6</a>
<ul id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
</div>
<style type="text/css">
<!--
h1#header span {
display: none;
}
-->
</style>
css ohne style tags
Code:
#nav_container
{
display: none;
}
/* Allgemein */
body {
background-image: url(http://img.webme.com/pic/r/rhetorischeberatung/background.jpg); /* Wenn vorhanden, Klammer mit Bildadresse füllen */
background-color: #FFEFE0; /* Hintergrundfarbe mithilfe eines Hex-Codes*/
font-family: sans-serif; /* Schriftart */
font-size: 0.8em; /* Schriftgröße */
text-align: center; /* zentriert das Design im IE */
}
a {
color: #000; /* Farbe der Links */
}
/* Container */
#design1 {
width: 900px; /* Breite des Designs */
margin: 0 auto; /* zentriert das Design */
text-align: left; /* positioniert den Text links */
background-color: #fff; /* Hintergrundfarbe des Containers */
border: 0px solid #B98D56; /* Rand um das Design */
}
#unten {
clear: both; /* sorgt dafür, das Hintergrundfarbe über gesamten Container läuft */
}
/* Header */
#header_container {
height: 150px; /* Höhe des Headers */
background-color: #FFD194; /* Hintergrundfarbe des Headers */
background-image: url(http://img.webme.com/pic/r/rhetorischeberatung/header2.jpg);
border-bottom: 1px solid #B98D56; /* Rand am unteren Ende des Headers */
}
#pre_header, #post_header {
display: none; /* entfernt nicht genutzte Klassen */
}
#header {
margin: 0px; /* entfernt den weißen Rand oben */
padding-left: 400px; /* Abstand vom linken Rand */
padding-top: 50px; /* Abstand vom oberen Rand */
color: #000; /* Schriftfarbe */
font-family: serif; /* Schriftart */
}
/* Content */
#content_container {
float: left; /* positioniert den Content links neben die Navigation */
width: 699px; /* Briete des Contents */
border-left: 0px solid #B98D56; /* linker Rand */
}
#content {
padding: 15px; /* Innenabstand des Contents */
}
/* Klassen entfernen */
#counter, #title span, #sidebar_container {
display: none; /* Sidebar und Counter werden unsichtbar gemacht */
}
-khtml-border-radius-bottomright: 15px;
-khtml-border-radius-bottomleft: 15px;
-khtml-border-radius-topright: 15px;
-khtml-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;[
/* Kalibrierung der wichtigsten Abstände */
* { padding: 0; margin: 0; }
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }
vielen dank schonmal im vorraus!!
Zuletzt bearbeitet von rhetorischeberatung am 29.04.2011, 14:39, insgesamt 2-mal bearbeitet
|
|
↑
|
|
|
-
rhetorischeberatung
|
28.04.2011 um 16:43 (UTC) Titel: |
|
|
kann mir wirklich keiner weiterhelfen??
ich brauch doch nur einen simplen code |
|
↑
|
|
|
-
3fragezeichen
|
28.04.2011 um 19:02 (UTC) Titel: |
|
|
Ich versteh nicht so ganz, was du machen möchtest. ______________
|
|
↑
|
|
|
-
rhetorischeberatung
|
29.04.2011 um 08:03 (UTC) Titel: |
|
|
ich möchte, dass wenn man einen button anklickt, dieser den hovereffekt annimmt.
klick auf der seite www.isupport.de.ms auf den button kontakt, da wird der button jeweils makiert, hervorgehoben, damit man sieht auf welcher seite man sich grade befindet...
und genau das möchte ich bei mir auch haben...
der code dafür lautete irgendwas mit : td.checked [...] |
|
↑
|
|
|
-
3fragezeichen
|
29.04.2011 um 10:22 (UTC) Titel: |
|
|
Ne, so geht das bei dir nicht, weil du nicht die Standartnavi nutzt. Aber mit JavaScript müsste das funktionieren:
Zitat: <script type="text/javascript">
var nav_gefunden = false;
var i = 0;
var alle_divs = document.getElementsByTagName("div");
while ((nav_gefunden == false) && (i < alle_divs.length)){
if ((alle_divs[i].className) == 'menu'){
nav_gefunden = true;
var nav = alle_divs[i];
}
i = i+1;
}
var nav_punkte = nav.getElementsByTagName("a");
for (i=0; i<nav_punkte.length;i++){
if (nav_punkte[i].href == location.href) nav_punkte[i].style.backgroundImage = 'url(http://img.webme.com/pic/r/rhetorischeberatung/button2.png)';
}
</script>
Wenn das nicht klappen sollte, lass den Code bitte trotzdem drin, damit ich gucken kann, was da falsch läuft. ______________
Zuletzt bearbeitet von 3fragezeichen am 29.04.2011, 21:24, insgesamt 7-mal bearbeitet
|
|
↑
|
|
|
-
rhetorischeberatung
|
29.04.2011 um 10:36 (UTC) Titel: |
|
|
ok vielen dank schonmal wo muss ich denn den code einfügen?
-> funktioniert nicht... habe den code jeweils bei:
-text über dem design
-css ohne style tags
eingefügt jedoch ohne ergebnis
Zuletzt bearbeitet von rhetorischeberatung am 29.04.2011, 11:39, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
3fragezeichen
|
29.04.2011 um 10:43 (UTC) Titel: |
|
|
Am besten bei Text unter dem Design. ______________
|
|
↑
|
|
|
-
rhetorischeberatung
|
29.04.2011 um 10:45 (UTC) Titel: |
|
|
funktionierts auch nicht |
|
↑
|
|
|
-
3fragezeichen
|
29.04.2011 um 10:46 (UTC) Titel: |
|
|
Du hast vorher das hier stehen:
Entferne das mal. ______________
|
|
↑
|
|
|
-
rhetorischeberatung
|
29.04.2011 um 10:48 (UTC) Titel: |
|
|
geht immer noch nicht:
das habe ich jetzt alles bei text unter dem design:
Code: <div id="unten"></div></div>
<p style="text-align: center;"><span style="color: rgb(255, 0, 0);">©2011 | webmaster </span></p>
<script type="text/javascript">
var nav_gefunden = false;
var i = 0;
var alle_divs = document.getElementsByTagName("div");
while ((nav_gefunden == false) and (i < alle_divs.length)){
if (alle_divs[i].ClassName == 'menu'){
nav_gefunden = true;
var nav = alle_divs[i];
}
i = i+1;
}
var nav_punkte = nav.getElementsByTagName("a");
for (i=0; i<nav_punkte.length;i++){
if (nav_punkte[i].href == location.href) nav_punkte[i].style.backgroundImage = 'http://img.webme.com/pic/r/rhetorischeberatung/button2.png';
}
</script>
|
|
↑
|
|
|
-
3fragezeichen
|
29.04.2011 um 10:53 (UTC) Titel: |
|
|
Ich hab oben am Code was verändert, füg den mal neu ein. ______________
|
|
↑
|
|
|
-
rhetorischeberatung
|
29.04.2011 um 10:55 (UTC) Titel: |
|
|
funktioniert leider immer noch nicht... |
|
↑
|
|
|
-
3fragezeichen
|
29.04.2011 um 11:00 (UTC) Titel: |
|
|
Okay, hab nochmal was geändert... ______________
|
|
↑
|
|
|
-
rhetorischeberatung
|
29.04.2011 um 11:12 (UTC) Titel: |
|
|
immer noch ohne ergebnis |
|
↑
|
|
|
-
3fragezeichen
|
29.04.2011 um 11:17 (UTC) Titel: |
|
|
Gibts doch garnicht...Versuchs nochmal, pls, hab wieder was geändert. ______________
|
|
↑
|
|
|
|