Antworten auf deine Fragen:
Neues Thema erstellen

ausrichten eines SpryAssets (DropdownMenü)

greenhope089

Noch nicht viel geschrieben

Hallo,

ich habe versucht ein DropDownMenü zu erstellen. Nun kann ich es irgendwie nicht richtig ausrichten. Hab schon im SpryMenuBarHorizontal.css geschaut, kenn mich aber nicht so aus und weiss nicht genau was ich wie ändern muß.
Kann mir vielleicht jemand helfen ?
Ich möchte es mit dem weißen Fenster, in dem mein Text dann stehen soll und dem Logo auf eine Linie ausrichten ...
siehe Bild ...

Wie bekomm ich das hin ? Vielen Dank jeder Tip hilft ...

Gruß,
Phil
 

greenhope089

Noch nicht viel geschrieben

das ist komisch ...

vielleicht so ?



Also du solltest eine Startseite sehen können und da gibts nur das Logo, das Dropdownmenü und das Fenster in dem dann der entspr. Text steht.

Die Menüleiste soll jetzt nach rechts rutschen damit alles auf einer Höhe ist ..

Welche Quelltext brauchst du ? Denn der Startseite oder die SpryMEnuBarHorizontal.css ?

SpryMenuBarHorizontal.css

Code:
@charset "UTF-8";
/* 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;
 width: 13em;
 float: left;
 background-color: #FFFFFF;
}
/* 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;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
 position: absolute;
 margin: -10% 0 0 90%;
}
/* 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 solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
 display: block;
 cursor: pointer;
 background-color: #FFFFFF;
 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
{
 background-color: #33C;
 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
{
 background-color: #33C;
 color: #FFF;
}
/*******************************************************************************
 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-image: url(SpryMenuBarDown.gif);
 background-repeat: no-repeat;
 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(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(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(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;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
 ul.MenuBarHorizontal li.MenuBarItemIE
 {
  display: inline;
  f\loat: left;
  background: #FFF;
 }
}
hier die Startseite selbst ...
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Delizia - the winery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mm_lodging1.css" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
.style2 {
 color: #000000;
 font-size: 14px;
}
.style4 {
 color: #000000;
 font-size: 16px;
}
.style6 {font-size: 16px}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="67" nowrap="nowrap" bgcolor="#000000"><img src="mm_spacer.gif" alt="" width="7" height="1" border="0" /></td>
 <td height="173" colspan="3" nowrap="nowrap" bgcolor="#000000" class="logo style1"><img src="delizia_logo_oben.jpg" width="219" height="119" /></td>
 <td width="56" bgcolor="#000000">&nbsp;</td>
 <td width="4" bgcolor="#000000">&nbsp;</td>
  </tr>
 <tr bgcolor="#ffffff">
 <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
 </tr>
  <tr bgcolor="#a4c2c2">
 <td width="67" nowrap="nowrap" bgcolor="#000000">&nbsp;</td>
    <td height="54" colspan="3" bgcolor="#000000" class="navText" id="navigation"><ul id="Menü" class="MenuBarHorizontal">
      <li><a href="#" class="MenuBarItemSubmenu">Winzer</a>
        <ul>
          <li><a href="#">Gildo</a></li>
          <li><a href="#">Pittaro</a></li>
          <li><a href="#">Lunardelli</a></li>
          <li><a href="#">La Delizia</a></li>
          <li><a href="#">La Contesse</a></li>
        </ul>
        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Anbaugebiete</a>
        <ul>
          <li><a href="#">Grave</a></li>
          <li><a href="#">Colli Orientali del Friuli</a></li>
        </ul>
        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Weine</a>
        <ul>
          <li><a href="#">Rotwein</a></li>
          <li><a href="#">Wei&szlig;wein</a></li>
          <li><a href="#">Ros&eacute;</a></li>
          <li><a href="#">Eiswein/S&uuml;&szlig;wein</a></li>
        </ul>
        </li>
      <li><a href="#">Prosecco</a>      </li>
      <li><a href="#">Events</a></li>
      <li><a href="#">zum Shop</a></li>
    </ul>
    </td>
    <td width="56" bgcolor="#000000">&nbsp;</td>
 <td width="4" bgcolor="#000000">&nbsp;</td>
  </tr>
 <tr bgcolor="#ffffff">
 <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
 </tr>
 <tr bgcolor="#ffffff">
 <td colspan="2" valign="top" bgcolor="#000000">&nbsp;</td>
 <td width="50" valign="top"><img src="mm_spacer.gif" alt="" width="50" height="1" border="0" /></td>
 <td width="814" valign="top"><br />
 <br />
 <table border="0" cellspacing="0" cellpadding="0" width="758">
  <tr>
  <td width="758" class="pageName"><p>bla bla der Startseite</p></td>
  </tr>
  <tr>
  <td bgcolor="#FFFFFF" class="bodyText">
  <p>. </p>
  <br />  </td>
  </tr>
 </table> </td>
 <td width="56" bgcolor="#000000">&nbsp;</td>
 <td width="4" bgcolor="#000000">&nbsp;</td>
  </tr>
 <tr bgcolor="#ffffff">
 <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
 </tr>
 <tr>
 <td width="67" bgcolor="#000000">&nbsp;</td>
 <td width="4" bgcolor="#000000">&nbsp;</td>
 <td width="50" bgcolor="#000000">&nbsp;</td>
 <td width="814" bgcolor="#000000">Philipp Ebert Arnulfstraße 174 80634 München</td>
 <td width="56" bgcolor="#000000">&nbsp;</td>
 <td width="4" bgcolor="#000000">&nbsp;</td>
  </tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("Menü", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

AW: ausrichten eines SpryAssets (DropdownMenü)

Bitte mach dich mal mit den Regeln und Funktionen des Forum vertraut, benutze bitte den Edit-Button direkt unter deinem letzten Post, wenn du noch etwas anhängen willst.
Und dann gibts da noch so kleine Icons oben im Editorfenster, die solltest du benutzen, und zwar für den richtigen Zweck:



mfG, cebito
 

heckmeck

Noch nicht viel geschrieben

AW: ausrichten eines SpryAssets (DropdownMenü)

Was soll alles auf einer Höhe sein? Logo links und Menü daneben, unten ausgerichtet?
 

greenhope089

Noch nicht viel geschrieben

AW: ausrichten eines SpryAssets (DropdownMenü)

das Logo, die Menüleiste und das Fenster unten sollen beide den gleichen Abstand von links haben.

Also alles soll den gleichen Abstand vom linken Rand haben.

Vielleicht kann die menüleiste auch zentriert sein.

Aber erstmal alles den gleichen Abstand von links ..
Wie kann ich das machen ?

Vielen Dank schon jetzt. Auch noch mal fürs ändern meines Eintrages.
Danke !
 

heckmeck

Noch nicht viel geschrieben

AW: ausrichten eines SpryAssets (DropdownMenü)

Nimm mal in Zeile 75 das colspan=2 raus und setze dafür width="67", vielleicht passt es ja dann ...
 

greenhope089

Noch nicht viel geschrieben

hey ...
vielen Dank.

Habe Zeile 75 und Zeile 79 geändert.
Bei Zeile 75 stand colspan="6" und 79 colspan="2" ... hab nun beides durch width="67" ersetzt und es geht ...

Vielen Dank !!! freu mich gerade super ...
Danke !!!

Gruß
Phil

Hey,

jetzt hab ich noch eine kleine Frage. Seh es wahrscheinlich einfach nur nícht ... vielleicht siehst du oder ein anderer das ja ...

Ich hab eigentlich so weiße Linien, die die Blöcke trenne.
Siehe linke Seite der Startseite ... drei weiße Linien.
Auf der rechten Seite fehlt der mittlere Strich.
In der Designobefläche von Dreamweaver kann ich das nicht ändern. Im Code find ich es nicht ...
Hilfe ?

Gruß, und schon mal Danke !!!
 
Zuletzt bearbeitet von einem Moderator:

heckmeck

Noch nicht viel geschrieben

AW: ausrichten eines SpryAssets (DropdownMenü)

Mmhhh, bei mir ist die da. Seht in Zeile 72:

<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.642
Beiträge
1.538.512
Mitglieder
67.559
Neuestes Mitglied
Andi Schäfer
Oben