Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Dynamische Navigationsleiste mit Dreamweaver“

L

linlin

Guest

Hilfe!
Ich habe nächste Woche meine Abschlussprüfung und muss ne Homepage machen. Soweit so gut, aber diese Navileiste, die auch so vorgegeben wurde macht mir echt Probleme. Habe insgesamt 14 Stunden daran rumgebastelt.
Sie soll oben abgerundete Buttons haben, beim vierten Button soll es ein Untermenü geben. Also habe ich Buttons via Photoshop erstellt und im dreamweaver SpryMenuBarHorizontal eingefügt. Leider ist die dazugehörige css Datei mit sovielen Id´s und Klassen vollgestopft, dass ich den Überblick immer mehr verliere. Das Background-Image habe ich hinbekommen, allerdings erscheint dieses auch im SubMenu, was nicht sein soll, Die Breite des Buttons sollte sich unbedingt nach der Breite der Schrift richten, macht er aber nicht.
Bin echt verzweifelt und hoffe, dass mir jemand weiter helfen kann. Also Navileiste soll so ähnlich wie oben sein (Startseite- Galerie) Allerdings mit anderem Hintergrund.
So, dann hoffe ich mal auf schnelle Antwort!

Lg Lin
 
Zuletzt bearbeitet von einem Moderator:

webginga

Nicht mehr ganz neu hier

AW: Dynamische Navigationsleiste mit Dreamweaver

Hallo linlin,
stelle doch bitte deinen HTML und CSS code zu Verfügung und eine Ansicht, wie das Ganze werden soll. Dann kann man Dir sicher besser helfen.

LG Webginga
 
Zuletzt bearbeitet:
L

linlin

Guest

AW: Dynamische Navigationsleiste mit Dreamweaver


So, das ist das wie es sein sollte.
Mein Html code, bzw der Super Code von Dreamweaver:
<!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=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
a:link {
text-decoration: none;
color:#FFFFFF
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
float: left;
}
a:active {
text-decoration: none;
}
a {
color: #FFFFFF;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>


<table width="948" border="0" align="left">
<tr align="center">
<th width="336" height="141" align="center" bordercolor="#FFCC00" bgcolor="#FFFFFF"><div align="center">
<map name="Map" id="Map">
<area shape="rect" coords="0,5,289,130" href="file:///C|/Dokumente und Einstellungen/Lin/Desktop/start" target="_blank" alt="Logo Logistica 2010" />
</map>
<img src="Logo_Logistica_2010_4.jpg" width="279" height="120" hspace="20" border="0" usemap="#Map2" /></div></th>
<td width="602"><div align="right">
<p align="left"><img src="X_DATEN/banneroben.jpg" alt="Messe Gebäude, Flugzeug, LKW Fahrer" width="602" height="120"
/>
<div align="center"></div>
</div> </td>
</tr>
<tr align="left" valign="top">
<th bordercolor="#FFCC00" bgcolor="#FFFFFF">&nbsp;</th>
<td align="left" valign="top">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li class="MenuBarHorizontal">
<div align="center"><a href="#" class="MenuBarHorizontal">Start
</a>
<ul class="style14">
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="#" class="MenuBarHorizontal">Konzept-Logistica</a></div>
</li>
<li>
<div align="center"><a href="#">Standort</a></div>
</li>
<li>
<div align="center"><a href="#">Item 4</a></div>
</li>
</ul>
</td>
</tr>
<tr align="left" valign="top">
<th bordercolor="#FFCC00" bgcolor="#FFFFFF"><p><img src="X_DATEN/bearbeitet_links_1.jpg" alt="Messegebäude bei Sonnenuntergang" width="220" height="85" hspace="35" /> </p>
<p align="left"><img src="X_DATEN/test2.jpg" alt="Ausschnitt Halle 3 mit Besuchern" width="220" height="85" hspace="35" vspace="0" /></p> <div align="left">
<p><img src="X_DATEN/test3.jpg" alt="Messe Besucher auf Treppe" width="220" height="85" hspace="35" /></p>
<p><img src="X_DATEN/flaggen.jpg" alt="Messe-Gebäude mit verschiedenen Länderflaggen davor" width="220" height="85" hspace="35" /></p>

</div></th>
<td width="602" valign="top"><p><br class="style14" />
</p> </td>
</tr>
</table>
<p>&nbsp;</p>


<map name="Map2" id="Map2">
<area shape="rect" coords="-5,0,279,127" href="file:///C|/Dokumente und Einstellungen/Lin/Desktop/start.html" target="_parent" alt="Logo" />
</map>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

</body>

</html>


Und hier kommt die css datei dazu

@charset "UTF-8";
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
}


/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;

}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: */
ul.MenuBarActive
{
z-index: 1000;

}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
word-spacing: normal;
background-repeat:no-repeat;
background-image: url(../X_DATEN/button2.gif);
background-position:center;
width: 8em;
visibility: inherit;

}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;


}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;



}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
background-image: url(../X_DATEN/button2.gif);
background-repeat:no-repeat;
background-width: auto;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;


}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;


}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px #CCC;

}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;


}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{

color: #FFF;


}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{

color: #FFCC00;

}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{

background-position: 95% 50%;

}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryAssets/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryAssets/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryAssets/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
 

webginga

Nicht mehr ganz neu hier

AW: Dynamische Navigationsleiste mit Dreamweaver

Hallo linlin,

es stimmt, mit der vorgefertigten Dreamweaver-Variante ist das sehr unübersichtlich. Muss es so gemacht werden oder kannst du auch eine Lösung über CSS mit nur einer kleinen Behavior-Datei für den Hover effekt im IE nehmen. In Eric Meyer's CSS bei Addison Wesley ist das beschrieben. Du hast dann auch ein Horizontales Popup menü erzeugt, mit einer überschaubareren CSS Datei. Er erklärt auch wie man die Links so schrumpfen kann, dass sie sich den Inhalten anpassen und wie man dabei runde Ecken verwenden kann. Dazu kann ich Dir helfen, beim Fertigmenü von Dreamweaver muss ich leider passen.

LG Webginga
 
L

linlin

Guest

AW: Dynamische Navigationsleiste mit Dreamweaver

Hi! Ja kann ich natürlich auch selbst schreiben, ist mir sogar lieber! Das wäre echt super, wenn du mir dazu was schicken/schreiben/raten könntest.
Vielen Tausend Dank schonmal!

Lin
 

webginga

Nicht mehr ganz neu hier

AW: Dynamische Navigationsleiste mit Dreamweaver

Hi linlin,

ich habe jetzt so lange gebastelt bis es funktioniert. Grafisch könntest du es noch verschönern.
Hier dein Html code, das Java Script habe ich complett entfernt, da habe ich jetzt nicht acht gegeben ob Du es noch woanderes brauchst. Lade es am besten erstmal in einen leere neue HTML Datei.
<!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=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
a:link {
text-decoration: none;
color:#FFFFFF
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
float: left;
}
a:active {
text-decoration: none;
}
a {
color: #FFFFFF;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

-->
</style>
<link href="drop_menue_hori2.css"rel="stylesheet" type="text/css" media="screen" />

</head>

<body>


<table width="948" border="0" align="left">
<tr align="center">
<th width="336" height="141" align="center" bordercolor="#FFCC00" bgcolor="#FFFFFF"><div align="center">
<map name="Map" id="Map">
<area shape="rect" coords="0,5,289,130" href="file:///C|/Dokumente und Einstellungen/Lin/Desktop/start" target="_blank" alt="Logo Logistica 2010" />
</map>
<img src="Logo_Logistica_2010_4.jpg" width="279" height="120" hspace="20" border="0" usemap="#Map2" /></div></th>
<td width="602"><div align="right">
<p align="left"><img src="X_DATEN/banneroben.jpg" alt="Messe Gebäude, Flugzeug, LKW Fahrer" width="602" height="120"
/>
<div align="center"></div>
</div> </td>
</tr>
<tr align="left" valign="top">
<th bordercolor="#FFCC00" bgcolor="#FFFFFF">&nbsp;</th>
<td align="left" valign="top">


<ul class="level1">
<li><a href="/" >Start</a> </li>
<li class="submenu"><a href="/services/">Konzept-Logistica</a>
<ul class="level2">
<li><a class="untermenue" href="/services/strategy/">KL Untermen&uuml; 1</a></li>
<li><a class="untermenue" href="/services/optimize/">KL Untermen&uuml; 2</a></li>
<li><a class="untermenue" href="/services/training/">KL Untermen&uuml; 1</a></li>
</ul>
</li>
<li><a href="/events/">Standort</a></li>
<li class="submenu"><a href="/pubs/">Item 4</a>
<ul class="level2">
<li><a href="/pubs/articles/" class="untermenue">item 4 Untermen&uuml; 1</a></li>
<li class="submenu"><a href="/pubs/tuts/" class="untermenue">item 4 Untermen&uuml; 2</a>
<ul class="level3">
<li><a href="/pubs/tuts/html/" class="untermenue">item 4 Unter Untermen&uuml; 1</a></li>
<li><a href="/pubs/tuts/css/" class="untermenue">item 4 Unter Untermen&uuml; 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>


</td>
</tr>
<tr align="left" valign="top">
<th bordercolor="#FFCC00" bgcolor="#FFFFFF"><p><img src="X_DATEN/bearbeitet_links_1.jpg" alt="Messegebäude bei Sonnenuntergang" width="220" height="85" hspace="35" /> </p>
<p align="left"><img src="X_DATEN/test2.jpg" alt="Ausschnitt Halle 3 mit Besuchern" width="220" height="85" hspace="35" vspace="0" /></p> <div align="left">
<p><img src="X_DATEN/test3.jpg" alt="Messe Besucher auf Treppe" width="220" height="85" hspace="35" /></p>
<p><img src="X_DATEN/flaggen.jpg" alt="Messe-Gebäude mit verschiedenen Länderflaggen davor" width="220" height="85" hspace="35" /></p>

</div></th>
<td width="602" valign="top"><p><br class="style14" />
</p> </td>
</tr>
</table>
<p>&nbsp;</p>


<map name="Map2" id="Map2">
<area shape="rect" coords="-5,0,279,127" href="file:///C|/Dokumente und Einstellungen/Lin/Desktop/start.html" target="_parent" alt="Logo" />
</map>



</body>

</html>
Jetzt die CSS-Datei: drop_menue_hori2.css (liegt im selben Ordner wie die HTML Datei)
* {
margin: 0;
padding: 0;
border: none;
}
body {
behavior: url(../CSS_15_dez/KopievondropMenu/csshover.htc);
/*win-IE bugfix für hover-Befehl*/
}

ul {
background: #EEEEEE;
}

li {
position: relative;
list-style: none;
/* border-bottom: 1px solid #ccc;*/
margin-left:1em;
padding-left: 16px;
white-space: nowrap;
float: left;
width: auto;
line-height: 60px;
background: url(images/button_blau.gif) 0 100% no-repeat;
}
li:hover {
color: #3300FF;
text-decoration:none;


}
a{
text-align: center;
display: block;

}
a:hover{
text-decoration:none;
color: #3300FF;


}
li.submenu {
background: #FFFFFF url(images/button_blau.gif) 0 100% no-repeat;
margin-left:1em;
padding-left: 16px;
white-space: nowrap;
width: auto;
}
.level1 .submenu .level2 .untermenue {
background: url(images/grau.gif) repeat;
text-decoration:none;

}
li.submenu li.submenu {
background: url(images/grau.gif) repeat;

}
li.submenu li.submenu:hover {
background: url(images/grau.gif) repeat;
}
li.submenu:hover {
color: #3300FF;

}
ul a {
display: block;
float:left;
text-decoration:none;

width: 1em;
background: #FFF url(images/button_blau.gif) 100% 100% no-repeat;
padding: 0 16px 0 0;


}
ul ul {
position: absolute;

display: none;
margin-top: 32px;
width: auto;

}
ul ul li {
background: url(images/grau.gif) repeat;
left: -0.5em;
}
li a {
display: block;

width: auto;
}
ul.level1 li.submenu:hover ul.level2 {
display: block;
background: url(images/grau.gif) repeat;

}
ul.level2 li.submenu:hover ul.level3 {
visibility: visible;
display: block;
background: url(images/grau.gif) repeat;
}
ul.level2 {
top: 1.6em;
left: 0em;
background: url(images/grau.gif) repeat;
}
ul.level3 {
top: 10px;
left: 10em;

background: url(images/grau.gif) repeat;
}
und die Kopievoncsshover.htc
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.00.031224 - whatever:hover in IE
* ---------------------------------------------
* Peterned - Peterned
* (c) 2003 - Peter Nederlof
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/

var CSSBuffer, doc = window.document;

function parseStylesheets() {
var rules, sheet, sheets = doc.styleSheets;
var bufferIndex = sheets.length;
var head = doc.getElementsByTagName('head')[0];
var buffer = doc.createElement('style');

buffer.setAttribute('media', 'screen');
buffer.setAttribute('type', 'text/css');
head.appendChild(buffer);
CSSBuffer = sheets[bufferIndex];

for(var i=0; i<sheets.length -1; i++) {
sheet = sheets;
if(!sheet.media || sheet.media == 'screen') {
rules = sheet.rules;
for(var j=0; j<rules.length; j++) {
parseCSSRule(rules[j]);
}
}
}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!select || !style || select.indexOf(':hover') < 0) return;
var newSelect = select.replace(/\:hover/g, '.onHover');
CSSBuffer.addRule(newSelect, style);

var affected = select.replace(/\:hover.*$/g, '');
var elements = getElementsBySelect(affected);
for(var i=0; i<elements.length; i++) {
if(elements.nodeName == 'A') continue;
new HoverElement(elements);
}
}

/**
* HoverElement
* -------------------------
* applies the hover
*/

function HoverElement(element) {
if(element.isHoverElement) return;
element.isHoverElement = true;
element.attachEvent('onmouseover',
function() { element.className += ' onHover'; });

element.attachEvent('onmouseout',
function() { element.className = element.className.replace(/onHover/g, ''); });
}

/**
* domFinder
* -----------------------------------
* returns list of elements based on css selector
*/

function getElementsBySelect(rule) {
var nodeList = [doc], sets = rule.split(' ');
for(var i=0; i<sets.length; i++) {
nodeList = domFinder.filterNodes(sets, nodeList);
} return nodeList;
}

var domFinder = {
findNodes:function(tag, docs) {
var res, nodes = [];
for(var i=0; i<docs.length; i++) {
res = docs.getElementsByTagName(tag);
for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
} return nodes;
},

filterNodes:function(select, docs) {
var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
if(!s) return this.findNodes(select, docs);
nodes = this.findNodes((rule = select.split(s))[0], docs);
atr = (s == '#')? 'id':'className';
for(var i=0; i<nodes.length; i++) {
if(new RegExp('(^|\\s)' + rule[1] + '(\\s|$)').exec(nodes[atr]))
filtered[filtered.length] = nodes;
} return filtered;
}
}
</script>
Die Bilder sind 1x1 Pixel für grau.gif und button_blau.gif ist 300 Pixel breit und 60 Pixel hoch. Da wirst du dann vermutlich andere Werte haben. Wichtig ist nur, dass die Höhe deiner gewünschten Optik entspricht. und die Breite breit genug ist. Und du musst natürlich die line-height: 60px bei der Liste entsprechend anpassen. Wenn es Probleme gibt, kann ich Die sonst nur ein Zip direkt an deine E-Mail Schicken von dem Ganzen. Achtung ich habe es jetzt nur im Firefox getested. Den IE kannst Du ja dann selbst testen.

LG Webginga
 
Zuletzt bearbeitet:
L

linlin

Guest

AW: Dynamische Navigationsleiste mit Dreamweaver

Ich danke euch tausendmal!!!!!
Ist echt meine Rettung!
Cool, dass es sowas gibt. Werde mich mal weiterhin ranmachen!

Danke ihr lieben!

Ciao Lin
 

webginga

Nicht mehr ganz neu hier

AW: Dynamische Navigationsleiste mit Dreamweaver

Hallo Lin,
der Link in der CSS Datei
Style für den body
behavior: url(../CSS_15_dez/KopievondropMenu/csshover.htc);
muss natürlich auch angepasst werden je nachdem wo deine htc Datei liegt und wie Sie heist.

LG Webginga
 
L

linlin

Guest

AW: Dynamische Navigationsleiste mit Dreamweaver



So, mein weiteres Problem: hab jetzt DANK EUCH die Leiste hinbekommen. Habe als hover button zwei bilder eingesetzt, allerdings wird nur das rechte Bild angezeigt, sobald man in das Submenu klickt.

Hier mein Stylesheets:

<style>

body {
background:#fff;
margin:0;
padding:20px;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}



#header {
float:left;
width:100%;
background:white;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
background: url(X_DATEN/norm_right.gif) no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background: url(X_DATEN/norm_left.gif) no-repeat left top;
padding:5px 15px;

}
#header li:hover {
float:left;
background: url(X_DATEN/norm_right_hover.gif) no-repeat right top;
margin:0;
padding:0;

}

#header a:hover {
display:block;
background: url(X_DATEN/norm_left_hover.gif) no-repeat left top;
padding:5px 15px;

}


.style1 {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color: #FFFFFF;
font-style: inherit;
}

#nav li.off ul{ /* Verstecken der Untermenüs */
display: none; }

#nav li.off ul { /* Subnavs positionieren und verstecken */
display:none;
position: absolute ;
top: 33px;
height: 15px;
padding-top: 10px;
}

#nav li.off ul a { /* Vererbung des Rahmens für Untermenü des aktiven Themas unterdrücken */
background-image:none;
background-color: #000000;
width:100px;
}

#nav li.off ul a {
float: left; /* IE vererbt den Float nicht */
border: 0;
color: #FFFFFF;
}

#nav li.off:hover ul { /* Die anderen Themen anzeigen bei hover über dem Elternmenü */
display: block;

}

#nav li.off ul { /* Subnav nach unten verschieben */
top: 35px;
*top: 44px;

/* Repositionierung für IE */ }

#nav li.off ul a:hover{
background-color:#0033CC;
}



</style>


Hier der Html-Code:

<body contentEditable="false">


<div id="header">
<ul id="nav">

<li ><a href="#" class="style1">Start</a></li>
<li id="current"><a href="#" class="style1">Konzept-Logistica</a></li>
<li><a href="#" class="style1">Standort</a></li>

<li class="off"><a href="#" class="style1">Services</a>
<ul>

<li><a href="#" class="style1">Messedaten</a></li><br>
<li><a href="#" class="style1">Messestände</a></li><br>
<li><a href="#" class="style1">Messeausstattung</a></li><br>
<li><a href="#" class="style1">Download</a></li>

</ul>

</li> <li><a href="#" class="style1">Aussteller-Portal</a></li>
<li><a href="#" class="style1">Kontakt</a></li>
<li><a href="#" class="style1">Impressum</a></li>
</ul>

</div>


</body></html>




Wäre echt toll, wenn dieses letzte kleine Stück noch erledigt wäre.
Ansonsten tausend Dank für eure bisherige Hilfe!
Linlin
 
L

linlin

Guest

AW: Dynamische Navigationsleiste mit Dreamweaver



So, ich habe DANK EUCH!!!! die Leiste hinbekommen!
Habe als hover Bild (musste wegen der unterschiedlichen Breite der Buttons ein linkes und ein rechtes einfügen) diesen schwarzen Hintergrund gewählt, vorerst. Jetzt ist mein Problem und hoffentlich was die Leiste angeht mein letztes, dass wenn ich das Submenu anklicke, der linke schwarze Teil des linken Bildes nicht mehr angezeigt wird.Also eben linker Teil fehlt, Button soll aber komplett schwarz angezeigt werden. Vielleicht hat das was mit der Position des Submenüs zu tun. Hab aber schon wieder Stunden dran gesessen und ausprobiert, leider erfolglos.

Hier der Css Code:
<style>

body {
background:#fff;
margin:0;
padding:20px;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}



#header {
float:left;
width:100%;
background:white;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
background: url(X_DATEN/norm_right.gif) no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background: url(X_DATEN/norm_left.gif) no-repeat left top;
padding:5px 15px;

}
#header li:hover {
float:left;
background: url(X_DATEN/norm_right_hover.gif) no-repeat right top;
margin:0;
padding:0;

}

#header a:hover {
display:block;
background: url(X_DATEN/norm_left_hover.gif) no-repeat left top;
padding:5px 15px;

}


.style1 {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color: #FFFFFF;
font-style: inherit;
}

#nav li.off ul{ /* Verstecken der Untermenüs */
display: none; }

#nav li.off ul { /* Subnavs positionieren und verstecken */
display:none;
position: absolute ;
top: 33px;
height: 15px;
padding-top: 10px;
}

#nav li.off ul a { /* Vererbung des Rahmens für Untermenü des aktiven Themas unterdrücken */
background-image:none;
background-color: #000000;
width:100px;
}

#nav li.off ul a {
float: left; /* IE vererbt den Float nicht */
border: 0;
color: #FFFFFF;
}

#nav li.off:hover ul { /* Die anderen Themen anzeigen bei hover über dem Elternmenü */
display: block;

}

#nav li.off ul { /* Subnav nach unten verschieben */
top: 35px;
*top: 44px;

/* Repositionierung für IE */ }

#nav li.off ul a:hover{
background-color:#0033CC;
}



</style>


Der HTML COde:

<body contentEditable="false">


<div id="header">
<ul id="nav">

<li ><a href="#" class="style1">Start</a></li>
<li id="current"><a href="#" class="style1">Konzept-Logistica</a></li>
<li><a href="#" class="style1">Standort</a></li>

<li class="off"><a href="#" class="style1">Services</a>
<ul>

<li><a href="#" class="style1">Messedaten</a></li><br>
<li><a href="#" class="style1">Messestände</a></li><br>
<li><a href="#" class="style1">Messeausstattung</a></li><br>
<li><a href="#" class="style1">Download</a></li>

</ul>

</li> <li><a href="#" class="style1">Aussteller-Portal</a></li>
<li><a href="#" class="style1">Kontakt</a></li>
<li><a href="#" class="style1">Impressum</a></li>
</ul>

</div>


</body></html>
 
L

linlin

Guest

AW: Dynamische Navigationsleiste mit Dreamweaver

So!
Ist ja immer so... man probiert was stundenlang aus,
und kurz nachdem man gefragt hat, weil nicht klappte,
klappts dann doch!
Also hat alles gefunzt bisher!

Als nächstes muss ich ein Login machen. Einen Benutzernamen und ein Login angeben, und wenn man den eintippt, dann muss weitergeleitet werden. Also, den Grundbaustein hab ich bereits, aber diese if ...else kann ich nicht. Oder vielleicht geht das ja auch anders?
Vielleicht wisst ihr das ja?

Ihr seid auf jeden Fall schon mal die besten!

Ich freu mich soooo sehr!

Glg Lin
 

Sturmkraehe

Nicht mehr ganz neu hier

AW: Dynamische Navigationsleiste mit Dreamweaver

Hallo linlin,

schau mal hier:


wobei du von Anfang an anfangen sollst, damit du die Grundzüge verstehst und weißt was du da machst ;)

lg
Sturmi
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben