Spry Menüleiste CS5 Verlauf

Steffi3477

Hallo Zusammen,

ich mache gerade meine Ausbildung zum Mediengestalter in Print. Habe also eigentlich mit HTML, CSS und dem ganzen Zeug nichts am Hut. Mein Chef wollte jetzt aber von mir, dass ich eine Internetseite erstelle. Habe mir auch schon total viele Übungsvideos angeschaut, aber so ganz durchblicken tu ich s noch nicht.

Also zuerst habe ich mir in Photoshop einen grafischen Entwurf erstellt und dann die Slices in Dreamweaver reingezogen. Der Rest der Seite ist eine Spry-Menübar horizontal und ein Textfeld.

Irgendwo habe ich gehört, dass man in ein Spry Menü keinen Verlauf nach rechts erstellen kann. Deswegen habe ich den Verlauf einzeln in Photoshop erstellt und daraus ein Slices gemacht, das ich dann einfach hinter der Menüleiste (im gleichen Tag) eingefügt habe.

Das Problem ist aber, dass jetzt zwischen dem Verlauf-Bild und der Menüleiste ein dünner weißer Balken ist, und ich ihn einfach nicht wegbringe.

Wäre super, wenn mir wer helfen würde.
Lg, Steffi

Bandit

Mit den Infos, die du hier lieferst, wird dir niemand helfen können. Idealerweise packst du den Kram auf irgendeinen Server, damit man sich das malansehen kann. Und auf die "Slicerei" solltest du besser verzichten und die Sachen vernünftig zusammenbauen.

Steffi3477

Na gut, danke trotzdem. Auf den Trainings DVDs die ich mir angeschaut hab, wirds halt nur mit Slices erklärt. Und ehrlich gesagt, solls auch keine super perfekte Internetseite werden sondern nur was kleines. Auf n Server laden kann ich leider auch nicht, weil ich wie schon gesagt habe, null Ahnung hab. Aber den Quellcode oder die CSS kann ich kopieren, wenn das was helfen würde?!

Bandit

Nur den HTML- und CSS-Code zu sehen, reicht vielleicht, aber besser wäre es, wenn man das Problem richtig sehen würde. Du könntest dir irgendwo Free-Webspace besorgen, z.B. hier http://www.bplaced.net/ und dann den Kram per FTP rüberkopieren und hier einen Link posten.

Ich frage mich nur, wieso man so eine Aufgabe bekommt, wenn man null Ahnung davon hat. Entweder ist dein Chef durch den Wind oder du hast nicht den Mut gehabt, ihm zu sagen, dass du das nicht kannst. So oder, beides etwas gaga.

Steffi3477

Ok. Also hier wäre der HTML-Code:

<html>
<head>

<title>pbs_logos</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link href="../styles/arial_ueberschrift.css" rel="stylesheet" type="text/css">
<link href="../styles/Pbs_beschreibung_h2.css" rel="stylesheet" type="text/css">
<link href="../styles/h2.css" rel="stylesheet" type="text/css">


<link href="../styles/rahmenhovers.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#FFFFFF" leftmargin="10" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('../hover/logo_10.gif','../hover/logo_13.gif','../hover/logo_14.gif','../hover/logo_15.gif','../hover/logo_16.gif','../hover/logo_17.gif')">
<div align="center" </div>

<table id="Tabelle_01" width="1205" height="1595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="../Bilder/pbs2_01.gif" width="1204" height="60" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><a href="../home.html"><img src="../Bilder/pbs2_03.gif" width="168" height="83" alt=""></a></td>
<td width="1036">
<img src="../Bilder/pbs2_04.gif" width="1036" height="56" alt=""></td>

</tr>
<tr>
<td rowspan="2"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../home.html">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Unternehmen </a>
<ul>
<li><a href="../Allgemein.html">Allgemein</a></li>
<li><a href="../struktur.html">Struktur</a></li>
<li><a href="../vertriebskanaele.html">Vertriebskanäle</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Marken</a>
<ul>
<li><a href="../schneider.html">Schneider</a> </li>
<li><a href="../novus.html">Novus</a></li>
<li><a href="../dahle.html">Dahle</a></li>
<li><a href="../herma.html">Herma</a></li>
<li><a href="../aristo.html">Aristo</a></li>
<li><a href="../rechner.html">Rechner</a></li>
</ul>
</li>
<li><a href="../kontakt.html">Kontakt</a></li>
</ul>
<img src="../Bilder/pbs22_06.gif" width="302" height="28" alt="verlaufsbalken"></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="../Bilder/pbs2_06.gif" width="168" height="1" alt=""></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td width="168">
<img src="../Bilder/pbs2_07.gif" width="167" height="26" alt=""></td>
<td colspan="2"> 
</td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="2"><a href="../schneider.html"><img src="../Bilder/pbs2_09.gif" alt="" name="schneiderlogo" width="167" height="58" id="schneiderlogo" onMouseOver="MM_swapImage('schneiderlogo','','../hover/logo_10.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td colspan="2"> <blockquote>
<h1>Pbs Markenpool</h1>
</blockquote></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="56" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="7">
<blockquote>
<p>g</p>
</blockquote>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td><a href="../novus.html"><img src="../Bilder/pbs2_12.gif" alt="" name="novuslogo" width="167" height="58" id="novuslogo" onMouseOver="MM_swapImage('novuslogo','','../hover/logo_13.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="58" alt=""></td>
</tr>
<tr>
<td><a href="../dahle.html"><img src="../Bilder/pbs2_13.gif" alt="" name="dahlelogo" width="167" height="69" id="dahlelogo" onMouseOver="MM_swapImage('dahlelogo','','../hover/logo_14.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="69" alt=""></td>
</tr>
<tr>
<td><a href="../herma.html"><img src="../Bilder/pbs2_14.gif" alt="" name="hermalogo" width="167" height="54" id="hermalogo" onMouseOver="MM_swapImage('hermalogo','','../hover/logo_15.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
<td><a href="../aristo.html"><img src="../Bilder/pbs2_15.gif" alt="" name="aristologo" width="167" height="74" id="aristologo" onMouseOver="MM_swapImage('aristologo','','../hover/logo_16.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="74" alt=""></td>
</tr>
<tr>
<td><a href="../rechner.html"><img src="../Bilder/pbs2_16.gif" alt="" name="rechnerlogo" width="167" height="56" id="rechnerlogo" onMouseOver="MM_swapImage('rechnerlogo','','../hover/logo_17.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="56" alt=""></td>
</tr>
<tr>
<td>
<p><img src="../Bilder/pbs2_17.gif" width="167" height="597" alt=""></p></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="597" alt=""></td>
</tr>
<tr>

<td>
<img src="../Bilder/Abstandhalter.gif" width="1" height="458" alt=""></td>
</tr>
<tr>
<td>
<img src="../Bilder/Abstandhalter.gif" width="167" height="1" alt=""></td>
<td width="1">
<img src="../Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="1036" height="1" alt=""></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

sorry falls er verwirrend und total unordentlich ist...

und das ist der CSS-Code vom Spry-Menü:

@charset "UTF-8";
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
cursor: default;
width: inherit
}

ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8.6em;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.6em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 8.6em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute
margin: -5% 0 0 90%
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #CCC;
padding: 0.3em 0.9em;
color: #000;
text-decoration: none;
font-family: Arial
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #CCC;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #CCC;
color: #FFF;
}

ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 2% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 2% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 2% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 2% 50%;
}
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
#Tabelle_01 tr td blockquote h1 {
font-size: 18px;
}
#Tabelle_01 tr td blockquote h3 {
font-size: 14px;
}
.normal {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: normal;
font-variant: normal;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
line-height: 23px;
}
.normal .normal {
line-height: 16px;
}

Wenn dir das nichts bringt, dann versuch ich s mal mit bplaced. aber kann die website dann jeder sehen?

Bandit

Irgendwie habe ich bei den Begriffen "Photoshop", "Slicen" und "Dreamweaver" mit so einer Katastrophe gerechnet. Das ist einfach nur grausam und meilenweit vom Stand der Technik entfernt.

Klar kann jeder, der den Link hier liest, die Website bei bplaced sehen.

Steffi3477

Okey. dann versuch ich mein Glück mal lieber in einem Dreamweaver Forum Vielleicht können die ja eher was damit anfangen Danke

Bandit

Die werden dir nix anderes sagen. Das ganze Tabellen-Layout ist einfach Schrott und mehrfaches <p> </p> macht die Sache auch nicht besser. Das ist das Problem mit Dreamweaver. Jeder glaubt, damit könne er eine Seite zusammenschnitzen und dann kommt sowas bei raus.

Spry Menüleiste CS5 Verlauf

Tags

Benutzer online in diesem Thema