Spry.menubar

Status
Niet open voor verdere reacties.
J

jeffcaba

Gebruiker
Lid geworden
1 mrt 2011
Berichten
5
Ik ben net begonnen met het leren van dreamweaver.
Nu ben ik bezig met het aanpassen van de spry.menubar.

Nu heb ik schijnbaar iets veranderd, waardoor de drop down menu's altijd zichtbaar zijn. ik heb al van alles geprobeerd, maar ik krijg het niet meer normaal.

weet iemand hoe ik dit weer op kan lossen?

Verder heb ik gezien dat de menubar's bij verder gevorderden met dreamweaver er heel anders uit zien dan de standaard bar. zo heb ik deze website die ook gebouwd is in dreamweaver, maar de menubar ziet er totaal anders uit: http://www.chantelly.com/indexNL.html weet iemand hoe ik dit ook zou kunnen doen? kan ik op de een of andere manier de hoeken van de website en menubar rond maken?

Hier staan mijn spry-assets: http://student.hro.nl/0807012/Help/SpryAssets
Hier staat mijn styleheet: http://student.hro.nl/0807012/Help/stylesheet.css



Dit is de code van mijn website:

<!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>
<link href="../../Documents/Unnamed Site 2/stylesheet.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #000;
}
a:visited {
color: #000;
}
a:hover {
color: #F6C;
}
a:active {
color: #F6F;
}
</style>
</head>


<body bgcolor=#F6C text="#000000" link="#000000" vlink="#FF66CC" alink="#FF66CC">

<div class="container">
<div class="header"><span style="text-align: center" href="#"></span><img src="../../Documents/Unnamed Site 2/header.png" alt="Insert Logo Here" name="Insert_logo" width="900" height="290" id="Insert_logo" style="background: #F6C; display:block;" />
<!-- end .header --></div>
<center>
<div class="container" >
<div align="center" >
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><strong><a href="#" style="background-color:#F6C">Homepage</a> </strong></li>
<li class="MenuBarHorizontal"><strong><a href="#" class="MenuBarItemSubmenu" style="background-color:#F6C">Cupcakes</a>
<ul>
<li><a href="#">Bakker</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</strong> </li>
<li class="MenuBarItemSubmenu"><strong><a href="#" class="MenuBarItemSubmenu" style="background-color:#F6C">Recepten</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Aardbei</a>
<ul>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">Chocola</a></li>
<li><a href="#">Citroen</a></li>
<li><a href="#">Toppings</a></li>
</ul>
</strong> </li>
<li><strong><a href="mailto:jeff.caba@hotmail.com" style="background-color:#F6C">Contact </a></strong></li>
</ul>
</div>
</div>
</center>

<div class="content">

<h1 align="center">Welkom</h1>

<p align="center">To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pae of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<!-- end .content --></div>

<div class="footer">
<a href="#"><img src="../../Documents/Unnamed Site 2/footer.png" alt="Footer" name="footer" width="900" height="290" id="footer" style="background: #F6C; display:block;" /></a>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>


Alvast bedankt!:thumb:
 
Spry menubar

Hallo jeffcaba :thumb:
Heb je CSS bekeken en wat aangepast hopelijk heb je er wat aan

Code: 
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
	background-color: #F09;
	border: 0px solid #F09;
}

Hier heeft het geen zin om om background-color en border te bepalen

Code: 
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
	position: absolute;
	left: 0px;
	background-color: #F09;
}

in deze heb je de z-index verwijderd dus bij voegen { z-index:1020; }

Code: 
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: 225px;
	float: left;
	background-color: #F09;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F09;
	border-right-color: #F09;
	border-bottom-color: #F09;
	border-left-color: #F09;
}

Hier is je definitie van je border zeer verwarrend dus gewoon deze plaatsen border-top: 1px solid #F09;
border-bottom: 1px solid #F09;

en de rest gewoon verwijderen dus krijg volgend css
Code: 
ul.MenuBarHorizontal li
{
	 margin: 0;
	 padding: 0;
	 list-style-type: none;
	 font-size: 100%;
	 position: relative;
	 text-align: center;
	 cursor: pointer;
	 width: 225px;
	 float: left;
	 background-color: #F09;
	 border-bottom: 1px solid #F09;
	 border-top: 1px solid #F09;
}

Code: 
ul.MenuBarHorizontal ul li
{
	float: none;
	background-color: #F09;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F39;
	border-right-color: #F39;
	border-bottom-color: #F39;
	border-left-color: #F39;

}

Hier alles verwijderen en terug width: auto; dit is al

Code: 
ul.MenuBarHorizontal ul
{
	border: 0px none #000;
	background-color: #F09;
	color: #FFF;
}

Hier heeft je bepaling van je border geen enkel effect

Code: 
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #FFF;
	color: #F6C;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	visibility: inherit;
}

Hier enkel font-family en visibility verwijderen dat heeft geen enkel nut

Groetjes Michelscot :cool:
 
Tnx!

@ michelscot

Hey bedankt, hij werkt nu weer goed!:D heb er vandaag even mee zitten *****n en de menubar ziet er nu naar mijn mening top uit!

Bedankt!(y)
 
Ronde hoeken

Hallo :thumb:

Voor antwoord op je vraag naar ronde hoeken?
Met de komst van CSS3 is het mogelijk via CSS ronde hoeken te bepalen voor elementen, momenteel hebben enkel FireFox/Mozilla en Safari 3 deze optie geïntrigeerd.
Andere browsers zullen het dus voorlopig nog zonder moeten doen, maar hoe gebruik je nu border-radius?

CSS3( dus deze zal voorlopig niet werken )
#voorbeeld {
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 10px;
}
#voorbeeld {
border-radius: 5px; /*alle hoeken hetzelfde*/
}

Voor Safari/webkit
#voorbeeld {
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 10px;
}
#voorbeeld {
-webkit-border-radius: 5px; /*alle hoeken hetzelfde*/
}

Voor FireFox/Mozilla
#voorbeeld {
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 10px;
}
#voorbeeld {
-moz-border-radius: 5px; /*alle hoeken hetzelfde*/
}

groetjes michelscot :cool:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan