problemen met menu

journeyman · 9 mei 2012

Hello,

ik heb n template gedwonload die ik nu aanpas in frontpage. in die template zitten javascripts. nu ken ik van javascripts echt niks. het probleem zit hem in de menu. als ik de menuitems ga benoemen, dan verdwijnt de laatste in het rijtje (opmdat er een langer item tussen zit). als ik het lettertype verklein dan staan ze wel weer op een lijn en staan ze er allemaal. nu is het neit echt de bedoeling dat d emenuitems er in het klein staan... wat ik ook probeer om de ruimte die er is om het menu te tonen, het lukt me niet. vandaar deze kleine noodkreet... wil er iemand aub zo goed zijn om dit probleem te helpen oplossen aub?
alvast bedankt

Janzwart · 9 mei 2012

Om dit probleem op te lossen zijn we in ieder geval de code nodig

journeyman · 9 mei 2012

ok, hier komt ze:

dit is van de indexpagina

Code:

<body>
  <div id="main">
    <div id="header">
	  <div id="banner">
	    <h1>
		<img border="0" src="images/HomeI&CRepairlogodefwhite.gif" width="397" height="142"></h1>
        <div id="menubar">
        <ul class="lavaLampWithImage" id="lava_menu">
          <li class="current"><a href="index.html">
			<font style="font-size: 10pt; font-weight: 700">Info</font></a></li>
          <li><a href="index.html">
			<font style="font-size: 10pt; font-weight: 700">Poolhouses &amp; Chalets</font></a></li>
          <li><a href="index.html">
			<font style="font-size: 10pt; font-weight: 700">Renovaties</font></a></li>
          <li><a href="index.html">
			<font style="font-size: 10pt; font-weight: 700">Ramen &amp; Deuren</font></a></li>
          <li><a href="index.html">
			<font style="font-size: 10pt; font-weight: 700">Contact</font></a></li>
        </ul>
        </div><!--close menubar-->

dit is mijn css:

Code:

html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal 100% Arial, Helvetica, sans-serif;
  background: #1B1B1B url(../images/pattern.jpg) repeat;
  color: #000;
}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;
  font-size: 100% }

img
{ border: 0;}

h1, h2, h3, h4, h5, h6 
{ font: normal 175% Arial, Helvetica, sans-serif;
  color: #03AFF7;
  letter-spacing: -1px;
  margin: 0 0 10px 0;
  padding: 5px 0 0 0;}

h2
{ font: normal 165% Arial, Helvetica, sans-serif;}

h3
{ font: normal 100% Arial, Helvetica, sans-serif;
}

h4, h5, h6
{ margin: 0;
  padding: 0 0 5px 0;
  font: normal 150% Arial, Helvetica, sans-serif;
  color: #03AFF7;
  line-height: 1.5em;}

h5, h6
{ font: normal 95% Arial, Helvetica, sans-serif;
  color: #888;
  padding-bottom: 15px;}

a, a:hover
{ background: transparent;
  outline: none;
  text-decoration: none;
  color: #00C0C0;
}

a:hover
{ text-decoration: underline;}

ul
{ margin: 2px 0 22px 30px;
  line-height: 1.7em;
  font-style: normal;
  font-size: 100%;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, #header, #banner, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto;}

#main
{ background: transparent;}

#header
{ width: 940px;
  height: 100px;
  padding-bottom: 20px;
  background: transparent;}

#banner
{ width: 940px;
  position: relative;
  height: 50px;
  padding: 30px 0px 0px 0px;
  background: transparent;}
  
#banner H1
{ font: normal 250% Arial, Helvetica, sans-serif;
  color: #FFF;
  padding-bottom: 10px;}
  
span
{ color: #03AFF7;
  padding-bottom: 10px;}


#menubar
{ width: 800px;
  float: left;
  height: 50px;
  margin: 0 auto;
  background: transparent;} 
  
#contact
{ width: 160px;
  float: right;
  height: 50px;
  margin: 0 auto;
  background: transparent;} 
  

.image {
  width: 650px;
  height: 350px;
  overflow: hidden;
  margin: 0;
  padding-top: 20px;}

#site_content
{ width: 920px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 0px 0 20px;
  background: #FFF;} 

.sidebar_container
{ float: left;
  width: 230px;
  margin: 20px 20px 20px 0;
  background: #E2E2E2;}

.sidebar
{ float: left;
  width: 210px;
  padding-left: 10px;
  margin-bottom: 10px;}

.sidebar_item
{ font: normal 100% Arial, Helvetica, sans-serif;
  padding: 0 15px 0 0;
  width: 201px;}

.sidebar h4
{ font-size: 125%;
  color: #000;}

.sidebar ul li, .sidebar ul li.selected
{ list-style: none; 
  margin: 15px 0;
  padding: 0;}

.sidebar li.selected, .sidebar li:hover
{ color: #5D5D5D;
  text-decoration: none;} 

.content_item
{ width: 630px;
  margin-top: 5px;
  margin-bottom: 5px;}

#content
{ width: 640px;
  padding-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
  background: #E2E2E2;}
  
.content_container
{ width: 280px;
  padding: 5px;
  margin-right: 10px;
  float: left;}

#footer
{ font: normal 120% Arial, Helvetica, sans-serif;
  letter-spacing: -1px;
  border-top: 5px solid #03AFF7;
  height: 25px;
  padding: 30px 0 26px 0;
  text-align: center; 
  background: #1D1D1D;
  color: #FFF;}

#footer a, #footer a:hover
{ color: #684430;
  text-decoration: none;
  padding-bottom: 20px;}

#footer a:hover
{ text-decoration: underline;}

#footer a, #footer a:hover
{ color: #FFF;
  text-decoration: none;}

#footer a:hover
{ text-decoration: underline;}

#footer_container
{ width: 880px;
  margin: 0 auto;}
 
 .button
{ font: normal 80% Arial, Helvetica, sans-serif;
  height: 40px;
  width: 130px;
  padding: 12px 0 0 30px;
  background: transparent url(../images/button.png) no-repeat;}
  
.button_small
{ font: normal 80% Arial, Helvetica, sans-serif;
  height: 25px;
  width: 80px;
  padding: 4px 0 0 8px;
  background: transparent url(../images/button_small.png) no-repeat;}
  
.button_small a
{ color: #FFF;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left; 
  width: 280px; 
  text-align: left;}
  
.form_settings input, .form_settings textarea
{ padding: 2px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings input[type="checkbox"]
{ padding: 2px 0; 
  width: 15px; 
  font: 100% arial; 
  border: 0; 
  background: #FFF; 
  color: #47433F;
  margin: 28px 0;}

.form_settings .submit
{ font: 100% arial; 
  border: 1px solid; 
  width: 99px; 
  margin: 0 0 0 206px; 
  height: 26px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #5082BD; 
  color: #FFF;}
 
/* from here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers */
.lavaLampWithImage {
  position: relative;
  height: 30px;
  padding: 5px 35px 5px 0px;
  overflow: hidden;
  float: left;
  margin: 0 40px 0 0px;
  width: 650px;
}

.lavaLampWithImage li {
  float: left;
  list-style: none;
}

.lavaLampWithImage li.back {
  background: #03AFF7;
  height: 28px;
  z-index: 8;
  position: absolute;
}

.lavaLampWithImage li a {
  font: normal 120% arial, sans-serif;
  text-decoration: none;
  color: #FFF;
  text-align: center;
  letter-spacing: 0;
  z-index: 10;
  display: block;
  float: left;
  height: 60px;
  padding: 3px 20px 0px 20px;
  position: relative;
  overflow: hidden;
}

.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
  border: none;
}

dit is het javascript

Code:

(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$.dequeue(this,"fx")}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

is dit voldoende?

Janzwart · 13 mei 2012

De oplossing bestaat uit 2 stappen:

1. de achtergrond voor het menu moet vergroot worden, hiervoor kun je de afbeelding gebruiken die bijgesloten is.

2. Nu moet je in de code van je css bestand de naam .lavaLampWithImage vervangen door de onderstaande code:

Code:

.lavaLampWithImage {
	position: relative;
	height: 60px;
	width: 600px;
	background: url("bg.gif") no-repeat top;
	padding: 15px;
	margin: 10px 0;
	overflow: hidden;
        }

Hierin heb ik de breedte en hoogte van het menu aangepast.

Als het menu nu nog niet groot genoeg is, moet je de afbeelding vergroten en de hoogte en breedte ook aanpassen.

journeyman · 14 mei 2012

thx,

ik heb n paar dagen in het buitenland gezeten maar ga er zsm mee aan de slag! van harte bedankt!

problemen met menu

journeyman

Gebruiker

Janzwart

Gebruiker

journeyman

Gebruiker

Janzwart

Gebruiker

journeyman

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy