Hoe bepaal ik de breedte van een menu-item?

Status
Niet open voor verdere reacties.

Iineke

Gebruiker
Lid geworden
24 aug 2012
Berichten
68
In een horizontaal menu lopen de verschillende menu-items over elkaar heen.
De totale breedte is voldoende, maar alleen het laatste menu-item wordt volledig getoond.
Dus volgens mij mis ik een stukje code, maar ik weet niet wat.
In SpryMenuBarHorizontal.css staat nu:

display: block;
cursor: pointer;
background-color: #4774ab;
padding: 0.5em 0.75em;
text-decoration: none;
width: 100px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
padding-left: 40px;
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
font-size: 16px;
font-weight: bolder;
text-decoration: none;
background-repeat: repeat-x;
background-position: 0px 0px;
border-color: 0e2946;
border-style: solid;
border-width: 1px;
padding-right: 40px;
float: right;

En in het stylesheet.css staat:
width: 1100px;
padding-left: 60px;
padding-right: 20px;
float: inherit;
min-height: 0px;
font-family: Verdana, Geneva, sans-serif;

Moet ik een waarde aan dat block bovenaan geven? En zo ja, hoe?


Enne... kan ik ook alle info alleen in het spry-css zetten, of moet het over twee bestanden verdeeld blijven?

Alvast mijn dank!
 
Laatst bewerkt:
Ik mis in de CSS-bestanden de Class- of ID-naam waarvoor de instellingen gelden.
Nu gelden deze instellingen voor alle HTML-elementen wat volgens mij nooit de bedoeling kan zijn.

Bovendien, wanneer er instellingen in beide CSS bestanden zitten dan overschrijft de laatst aangeroepene de instellingen van de eerst aangeroepene.

Met een beetje geluk kom je aardig in de richting wanneer je de padding-left aanpast. (lees: kleiner maakt)
 
Laatst bewerkt:
Ah, fantastisch, dankjewel voor je snelle reactie.
Ik heb nu de padding-left op 5px gezet, en dat is beter, alleen blijft nu de het laatste blokje te breed en is niet gecentreerd, zoals de andere. Nog een idee waar dat aan kan liggen?

Ik had die class/ID-namen weggelaten omdat ik wel wist waar het probleem zat, maar niet hoe ik het op moest lossen.

Hier is de hele code van het spry-css:
Code:
@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* 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;
	margin-left: 260px;
	margin-right: auto;
	margin-bottom: 10px;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 120em;

}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
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: center;
	cursor: pointer;
	width: 8em;
	float: left; /* Bepaalt de richting van de menu-items, zodat de bovenste links staat */
}
/* 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: -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 solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #4774ab;
	padding: 0.5em 0.75em;
	text-decoration: none;
	width: 100px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #fff;
	font-size: 16px;
	font-weight: bolder;
	text-decoration: none;
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border-color: 0e2946;
	border-style: solid;
	border-width: 1px;
	padding-right: 40px; /* bepaald plaats vanaf rechter zijkant vd tekst rechts bovenaan pagina */
	float: right;
}
/* 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;
	filter:alpha(opacity:0.1);
}
/* 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;
		float: left;
		background: #FFF;
	}
}

Ik had dit stukje in stylesheet.css geplaatst:
Code:
.topmenu /* bepaalt horizontaal menu bovenaan tekstdeel, overige specificaties in SpryMenuBarHorizontal.css */
{
	width: 900px;
	padding-left: 60px;
	padding-right: 20px;
	float: inherit;
	min-height: 0px;
	font-family: Verdana, Geneva, sans-serif;

}

Omdat ik dit menu in zijn geheel ook een stukje naar rechts moest zetten om het op de goede plek te krijgen. Dreamweaver heeft zelf die spry-bestanden gemaakt.

Wellicht kan ik ook deze code in het spry-css zetten, en dan daarnaar verwijzen in de pagina zelf?
 
Laatst bewerkt:
Ook al lijken de eerste 4 menu-items gecentreerd te zijn, zij zijn dit niet. De eerste 4 menu-items liggen gedeeltelijk onder het menu-item rechts er naast. Aangezien er na het laatste item niets meer zit rechts zie je daar duidelijk dat de tekst niet gecentreerd is.

Ik geef geen garantie maar ik zie nog ergens een padding van 40 px, ik zou alleen uit moeten zoeken of dit links, rechts top of bottom is, ik ken die volgorde niet uit mijn hoofd. Ik gok er op dat dit rechts is waardoor de tabs aan de rechterkant onnodig breed worden.

In het CSS-bestand zou ik bij "ul.MenuBarHorizontal a " die padding van 40 punten ook eens iets kleiner maken, met een beetje geluk lost dat je probleem op.

Verder de tip om eens met Firefox de site te bekijken met de AddOn FireBug geinstalleerd in FireFox. Hiermee kan je precies alle CSS instellingen zien van alle HTML elementen. Ik meen zelfs dat de CSS-instellingen zelfs online kunt wijzigen om de gevolgen ervan meteen te kunnen bekijken. Dan zie je dus ook meteen of je op de juiste plaats aan het zoeken bent.
 
Nogmaals dank! Het lijkt nu inderdaad gelukt te zijn, met die aanpassing van de padding.
Perfect, ik ben hier blij mee!
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan