Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag15.03.2012 um 07:32 (UTC)    
Titel: Navigation durchscheinend

Hi, erstmal nochmal danke für die immer wieder schnelle Hilfe, nun zu meinem Wunsch.

Habe eine Navigationsleiste mit aufklappenden Elementen und hätte es gerne so das die Navigation mit den Hauptpunkten leicht durchscheinend bleibt aber die Unterpunkte die aufklappen nicht durchscheinend angezeigt werden. Bekomm das nicht hin. Hat jemand ne Lösung?

Danke

Code:


Basisgerüst Homepage HGO


Inhalt Rechte Box:


<br>
<br>
<br>
<noscript>Enable Javascript to get full functionality of this <a href="http://www.freeshoutbox.net/">shoutbox</a><br /></noscript><iframe src="http://DE465150.freeshoutbox.net/" height="300" width="285" frameborder="1"></iframe>
<br>
</div>
<br>
<div class="fb-like-box" data-href="http://www.facebook.com/#!/pages/Hafengarde-Oberwinter-1987-eV/125604730898638?bookmark_t=page" data-width="292" data-colorscheme="dark" data-show-faces="true" data-border-color="white" data-stream="false" data-header="false"></div>


Text über Design:

<div style="width:1000px; margin: 0px auto; overflow:visible; position:relative;">

<ul id="menu-bar">
<li class="current"><a href="http://www.hafengarde-oberwinter.de.tl">Start</a>
<ul>
<li><a href="Mitgliederbereich.htm">Mitgliederbereich</a></li>
<li><a href="Kontakt.htm">Kontakt</a></li>
<li><a href="G.ae.stbuch.htm">Gästebuch</a></li>
<li><a href="Aktuelles.htm">Aktuelles</a></li>
<li><a href="Standort.htm">Anfahrt</a></li>
<li><a href="Linkliste.htm">Linkliste</a></li>
<li><a href="InGedenken.htm">In Gedenken</a></li>
<li><a href="Impressum.htm">Impressum</a></li>
</ul> 
</li>
<li><a href="http://hafengarde-tanzgruppe.de.tl/">Tanzcorps</a>
</li>
<li><a href="#">Galerie</a>
<ul>
<li><a href="http://www.hgo-galerie-2008.de.tl/Galerie/kat-1-1.htm">2008</a></li>
<li><a href="http://www.hgo-galerie-2009.de.tl/Galerie/index.htm">2009</a></li>
<li><a href="#">2010</a>
<ul>
<li><a href="http://www.hgo-galerie-2010.de.tl/Galerie-diverses/index.htm">Diverses</a></li>
<li><a href="http://hgo.jalbum.net/Rosenmontag-2010/">Rosenmontag</a></li>
<li><a href="http://hgo.jalbum.net/Dankesch%C3%B6nessen-Kallscheuer/">Bellevuechen</a></li>
<li><a href="http://hgoafrica.jalbum.net/HGO-goes-Africa/">HGO goes Afrika</a></li>
<li><a href="http://race-day-2010.jalbum.net/HGO-Race-Day-2010/">Race Day 2010</a></li>
<li><a href="http://hgotour2010.jalbum.net/HGO-%C3%9C-Tour-2010/">Ü-Tour</a></li>
</ul> 
<li><a href="#">2011</a>
<ul>
<li><a href="http://hgo-galerie-2011.jalbum.net/Kg-Kripp-2011/">KG Kripp</a></li>
<li><a href="http://kg2011.jalbum.net/KG-Oberwinter-2011/">KG Oberwinter</a></li>
<li><a href="http://www.kizoa.de/diashow/d1930476k9191208o1/sommerfest-remagen">Sommerfest Remagen</a></li>
<li><a href="http://ahrtalmeister.jalbum.net/Ahrtalmeister---Vizekreismeister-2011/">Ahrbrück</a></li>
<li><a href="http://weiberdonnerstag.jalbum.net/Weiberdonnerstag-2011/">Weiberfasnacht</a></li>
<li><a href="http://kripp2011.jalbum.net/Strohb%C3%A4rentreiben-in-Kripp-2011/">Strohbären Kripp</a></li>
<li><a href="http://rosenmontag2011.jalbum.net/Rosenmontag-2011/">Rosenmontag</a></li>
<li><a href="http://tus2011.jalbum.net/TUS-2011/">TUS Ball</a></li>
<li><a href="http://www.kizoa.de/diashow/d2107561k8177774o1/gardeapell-2011">Gardeapell</a></li>
</ul> 
<li><a href="#">2012</a>
<ul>
<li><a href="http://www.kizoa.de/diashow/d2233013k8532662o1/remagen-2012">Remagen</a></li>
<li><a href="http://www.kizoa.de/diashow/d2260170k1998908o1/kg-sitzung">KG Sitzung</a></li>
<li><a href="http://www.kizoa.de/diashow/d2260166k1710570o1/staugustin">St. Augustin</a></li>
<li><a href="http://www.prinzengarde-sankt-augustin.net/29.01.12/">St. Augustin Link</a></li>
<li><a href="http://www.kizoa.de/diashow/d2308972k1895032o1/meisterschaft-2012">Ahrbrück</a></li>
<li><a href="http://www.kizoa.de/diashow/d2312328k3931814o1/westum-2012">Westum</a></li>
<li><a href="http://www.kizoa.de/diashow/d2353211k1657570o1/m%C3%B6hne-2012">Weiberdonnerstag</a></li>
<li><a href="http://www.kizoa.de/diashow/d2353204k9379503o1/karnevalssamstag-2012">Biwak Remagen</a></li>
<li><a href="http://www.kizoa.de/diashow/d2354416k7128534o1/rosenmontag-2012">Rosenmontag</a></li>
</ul></ul>
<li>
<li><a href="#">Race Day</a>
<ul>
<li><a href="http://hgo-race-day-2010.de.tl/">2010</a></li>
<li><a href="http://hgo-race-day-2011.de.tl/">2011</a></li>
</ul>
<li><a href="#">Presseberichte</a>
<ul>
<li><a href="2009-Berichte.htm">2009</a></li>
<li><a href="2010-Berichte.htm">2010</a></li>
<li><a href="2011-Berichte.htm">2011</a></li>
<li><a href="2012-Berichte.htm">2012</a></li>
</ul>
<li><a href="http://www.fileden.com/files/2008/11/11/2182378//Mitgliedsantrag%20HGO.pdf">Mitglied werden</a></li>
</li>
</ul>


Text unter Design:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


CSS Code Hauptseite:

/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }


/* Hintergrund hinter Design */
body
{text-align: center;
background-image: url(http://img.webme.com/pic/h/hafengarde-tanzgruppe/back344.jpg);
background-color: transparent;
font-family: verdana;
color: #ffffff;
font-size: 15px;
onload="popUp1()"; }

/* Design-Container */
#container
{width: 960px;
margin: 10px auto ;
overflow: visible; }

#content #title
{display:none;}

/* Headerfeld 960 x 120 */
#header_container
{width: 960px;
height: 100px;
margin-top: 30px;
background-image: url(http://img.webme.com/pic/h/hafengarde-oberwinter/headerhgoneu.png);
background-repeat: no-repeat;
background-color: transparent;}

/* Titel im Headerfeld entfernt */
h1#header
{display: none; }

/* Feld der Navigation */
#nav_container
{width: 960px;
height: 40px;
margin-top: 30px;
background-color: transparent; }

/* Titel über Navigation entfernt */
#nav_heading
{display: none; }

/* Aufzählungspunkte in Navi entfernt */
ul#nav
{list-style-type: none; }

/* Navi-Buttons */
li.nav_element {display: none; }

/* Seiteninhalt */
#content
{float: left;
width: 665px;
min-height: 200px;
padding: 60px 20px 20px 20px;
background-color: transparent;
overflow: visible; }

/* Titel Seiteninhalt + Titel über Box */
#nav_heading {display:none; }

/* Rechte Box */
#sidebar_container
{float: right;
text-align: left;
width: 205px;
min-height: 300px;
padding: 80px 20px 20px 20px ;
background-color: transparent;
overflow: visible; }

/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content {display:none;}
#counter {display:none;}

#menu-bar
{position: absolute;
margin-top: 300px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 900px; /* die Breite anpassbar */
overflow: visible;}

/*Position des Menüs*/
#menu-bar
{margin: 150px 0px 0px 30px;
padding: 6px 6px 6px 6px;
height: 34px;
overflow:visible;
line-height: 100%; 
border-radius: 24px; 
-webkit-border-radius: 24px;
-moz-border-radius: 24px; 
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #CC0000; 
border: solid 1px #6D6D6D;
opacity: 0.90;
-moz-opacity: 0.90;
filter: alpha(opacity=90);}

#menu-bar li
{margin: 0px 0px 0px 30px; 
padding: 0px 0px 6px 0px; 
float: left;
position: relative;
list-style: none;}

#menu-bar a
{font-weight: bold;
font-family: verdana;
font-style: normal; 
font-size: 12px; 
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 8px 20px 8px 20px; 
margin: 0;  border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-shadow: 2px 2px 3px #000000;}

#menu-bar .current a, #menu-bar li:hover > a
{background: #EBEBEB; 
color: #444444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #FFFFFF;}

#menu-bar ul li:hover a, #menu-bar li:hover li a
{background: none;
border: none; 
color: #666; 
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;}

#menu-bar ul a:hover
{background: #CC0000 !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 3px #FFFFFF;}

#menu-bar ul
{background: #DDDDDD; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF); 
display: none;
margin: 0;
padding: 0;
width: 185px; 
position: absolute; 
top: 30px;
left: 0; 
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222; 
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;}

#menu-bar li:hover > ul
{display: block;}

#menu-bar ul li
{float: none;  margin: 0;  padding: 0;}

#menu-bar ul a
{padding:10px 0px 10px 15px; 
color:#424242 !important;
font-size:12px;
font-style:normal; 
font-family:arial; 
font-weight: normal; 
text-shadow: 2px 2px 3px #FFFFFF;}

#menu-bar ul li:first-child > a
{border-top-left-radius: 10px; 
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;}

#menu-bar ul li:last-child > a
{border-bottom-left-radius: 10px; 
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px; 
border-bottom-right-radius: 10px; 
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;}

#menu-bar ul ul
{position:absolute;
top:0;
left:160px;}

#menu-bar:after
{content: "."; 
display: block;
clear: both;
visibility: hidden;
line-height: 0;  height: 0;}

#menu-bar {  display: inline-block;}  html[xmlns]

#menu-bar {  display: block;}* html #menu-bar {  height: 1%;}


Zuletzt bearbeitet von hafengarde-tanzgruppe am 15.03.2012, 14:50, insgesamt 2-mal bearbeitet
Beitrag15.03.2012 um 18:19 (UTC)    
Titel:

ich würde dir raten einfach das Bild der Navigation mit einem Bildbearbeitungsprogramm wie GIMP oder PHOTOSHOP ein wenig transparent zu machen...das ist auf jeden Fall am einfachsten!
Beitrag15.03.2012 um 18:28 (UTC)    
Titel: Re: Navigation durchscheinend

Hallo,

hafengarde-tanzgruppe hat Folgendes geschrieben:
Hi, erstmal nochmal danke für die immer wieder schnelle Hilfe, nun zu meinem Wunsch.

Das solltest du umformulieren, wir sind nicht der Weihnachtsmann und erfüllen hier keine Wünsche. Wir helfen lediglich bei Problemen. Wink

Nun zu deinem Problem:
Das durchscheinen wird mit der CSS3 opacity Eigenschaft gemacht. Du gibst der Hauptliste diese Eigenschaft. Alle Kinderelemente erben dies automatisch. Das ist wie mit display. Setzt man das für ein Element auf none, werden auch alle Kinder nicht angezeigt, quasi so wie wenn du ein Stück Holz in einen Schuhkarton legst und diesen anzündest. Das Stück Holz verbrennt auch.

Du kannst das jetzt Html technisch so hinpfriemeln, wie du es möchtest, wesentlich einfacher ist es aber, wenn du dir mit einem Bildberbeitungsprogramm eine transparente Grafik nach deinen Wünschen erstellst und diese als Hintergrund für die Hauptmenüliste einrichtest.

EDIT: Warum klingelt mein Telefon eigentlich immer, wenn ich gerade einen Beitrag schreibe?
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 15.03.2012, 19:29, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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