border krijg ik niet dunner.

Status
Niet open voor verdere reacties.
B

Breaky623

Gebruiker
Lid geworden
27 mei 2010
Berichten
85
Eerst even alle codes daarna leg ik het probleem uit met een voorbeeld uiteraard.

HTML

HTML: 
<!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 & CSS -->
		<title>Test</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
        
	<!-- JQUERY -->
		<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
        
	<!-- BGSTRETCHER -->
    	<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
        <script type="text/javascript">  
				var FullscreenrOptions = {  width: 1027, height: 717, bgID: '#bgimg' };
				jQuery.fn.fullscreenr(FullscreenrOptions);
		</script>
        
	<!-- ROUNDED CORNERS -->
		<script src="js/jquery.curvycorners.source.js" type="text/javascript"></script>
		<script type="text/JavaScript">
				$(function(){ 
						settings = {
          						tl: { radius: 10 },
          						tr: { radius: 10 },
         						bl: { radius: 10 },
								br: { radius: 10 },
								antiAlias: true,
								autoPad: true,
								validTags: ["div"]
      					}

  				$('#header').corner(settings);
  				});;
		</script>
        
	<!-- LAVALAMP -->
    	<script src="js/jquery.lavalamp.min.js" type="text/javascript"></script>
        <script src="js/jquery.easing.min.js" type="text/javascript"></script>
        <script type="text/javascript">
				$(function() {
						$(".lavaLampBottomStyle").lavaLamp({
						fx: "backout",
						speed: 1000
						});
				});
		</script>
        
	<!-- CUSTOM FONT -->
    	<script src="js/typeface-0.14.js" type="text/javascript"></script>
		<script src="js/crack_and_bold_regular.typeface.js" type="text/javascript"></script>
</head>

<body>

	<!-- BACKGROUND -->
	<img id="bgimg" src="images/background.jpg" />
        
    <div id="realBody">
    
	<!-- CONTAINER -->
		<div id="container">
        
	<!-- HEADER -->
				<div id="header">
			    		<div id="logo"></div>
				</div>
                
	<!-- MENU -->
                <div id="menu">
                		<ul class="lavaLampBottomStyle">
                        		<li class="current"><a href="#">Home</a></li>
                                <li><a href="#">Info</a></li>
                                <li><a href="#">Results</a></li>
                                <li><a href="#">Members</a></li>
                                <li><a href="#">Contact</a></li>
                        </ul>
                </div>
               
		</div>
        
	</div>
</body>
</html>

CSS
Code: 
body {
	overflow: hidden; 
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

#bgimg {
	position:absolute;
	z-index: -1;
}

#realBody{
	position: absolute;
	z-index: 5;	
	overflow: auto; 
	height: 100%;
	width: 100%;
}

#container {
	margin: auto;
	width: 900px;	
}

#header {
	margin-top: 20px;
	width: 900px;
	height: 200px;
	background: #000;
}

#logo {
	margin: 20px;
	float: right;
	background: url(images/logo.png);
	width: 268px;
	height: 150px;
}

.lavaLampBottomStyle {
	font-family: Crack and Bold;
	font-size: 28px;
	position: relative;
	height: 30px;
	width: 750px;
	background: url(images/trans.png);
	padding: 15px;
	margin: auto;
	overflow: hidden;
}

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

.lavaLampBottomStyle li.back {
	border-bottom: 5px solid #e7c006;
	width: 9px;
	height: 40px;
	z-index: 8;
	position: absolute;
}

.lavaLampBottomStyle li a {
	text-decoration: none;
	color: #000;
	outline: none;
	text-align: center;
	top: 7px;
	text-transform: uppercase;
	letter-spacing: 0;
	z-index: 10;
	display: block;
	float: left;
	height: 30px;
	position: relative;
	overflow: hidden;
	margin: auto 20px;
}
   
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
	border: none;
}

JavaScript
[JS]
(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(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);



EN


/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}};


EN JQUERY... maar die hoef ik niet te posten heeft er niets mee te maken.
[/JS]

Voorbeeld: http://tinyurl.com/4gfqtoe

Nou het probleem is zegmaar die border bottom bij het menu moet dunner. want die komt langs de tekst en dat wil ik eigenlijk niet, die steekt uit. Dit komt natuurlijk door de margin maar er moet ook ruimte tussen staan.. ik weet wel ongv. waar het aan ligt maar ik weet niet hoe ik het moet oplossen.

[JS]{$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);[/JS] Dat wad ongv. een stukje van de eerste javascript code. en het ligt aan de offsetwidth.. die neemt de margin mee in de grootte die functie geloof ik? En dat is de breedte van de border geloof ik.

Dus genoeg info denk ik? kan iemand mij helpen?
 
Hoi Breaky623,
Deze css?
Code: 
.lavaLampBottomStyle li {
    margin: 0 40px 0 0;     /* toevoegen */
    }
.lavaLampBottomStyle li a {
    margin: auto 0;         /* wijzigen */
    }
Met vriendelijke groet,
CSShunter
_________
PS: heb je de Web Developer Toolbar voor Firefox al geïnstalleerd?
Errug handig om real-time veranderingetjes te bekijken: menu CSS > "Edit CSS". :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan