Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Menu link help

  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Menu link help

    I've made this site: www.terningenarena.no

    The problem is, when I zoom out on the screen(on any web-browser), I see that the meny links(over the slider) is moving out of its place when I continue zooming. Have no idea why this is happening, its really frustrating.

    HTML/CSS shown below

    Any help is highly appreciated.

    Iselin

    Code:
    {content assign="capturedcontent"} {if !isset($pagetitle)}{capture assign='pagetitle'}{title}{/capture}{/if}     
    <!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" xml:lang="{if empty($lang)}en{else}{$lang}{/if}" >           
      <head>                   
        <title>{sitename} - {$pagetitle}</title>
        {if isset($canonical)}
        <link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}
        <link rel="canonical" href="{$content_obj->GetURL()}" />{/if}
        {metadata}
        {cms_stylesheet}{literal}     
        <!--[if IE]>
            <style type="text/css"> 
         .sf-menu li a:hover, .sf-menu li a:active, .sf-menu li a.current {
          height:28px;
        	line-height: 28px;
        	padding:0 5px;
        	border: none;
        } 
        </style> 
        <![endif]--> {/literal} 
        {cms_selflink dir='start' rellink=1}
        {cms_selflink dir='prev' rellink=1}
        {cms_selflink dir='next' rellink=1}             
      </head>           
      <body>{* Template Controls like the Slider Images, News etc. *}
    {capture assign=galleryfolder value=$entry->gallery}{content block="Gallery Folder" description='Enter the name of the Gallery folder you wish to use'  page_tab='Header Options' wysiwyg='false' oneline='true'}{/capture}
    {content block="Display Slider Images" description='Enter + sign to enable this field, with - this field is disabled in the frontend'  oneline="true" size="1" default="-" assign="slider" page_tab='Header Options'}{if empty($slider)}{assign var="slider" value="+"}{/if}
    {content block="Activate Sidebar" description='Enter + sign to enable this field, with - this field is disabled in the frontend' oneline="true" size="1" default="-" assign="sidebar" page_tab='Sidebar Options'}{if empty($sidebar)}{assign var="sidebar" value="+"}{/if}
    {content block="Display Sidebar Navigation" description='Enter + sign to enable this field, with - this field is disabled in the frontend' oneline="true" size="1" default="-" assign="sidenav" page_tab='Sidebar Options'} {if empty($sidenav)}{assign var="sidenav" value="+"}{/if}
    {content block="Display News Categories" description='Enter + sign to enable this field, with - this field is disabled in the frontend' oneline="true" size="1" default="-" assign="newscat" page_tab='Sidebar Options'} {if empty($newscat)}{assign var="newscat" value="+"}{/if}
    {content block="Display News Slider in Content" description='Enter + sign to enable this field, with - this field is disabled in the frontend' oneline="true" size="1" default="-" assign="contentnews" page_tab='Page Options'} {if empty($contentnews)}{assign var="contentnews" value="+"}{/if}
    {content block="Display Three Blocks in Content" description='Enter + sign to enable this field, with - this field is disabled in the frontend' oneline="true" size="1" default="-" assign="contentblocks" page_tab='Page Options'} {if empty($contentblocks)}{assign var="contentblocks" value="+"}{/if}
    {content block="Display Footer News List" description='Enter + sign to enable this field, with - this field is disabled in the frontend' oneline="true" size="1" default="+" assign="footerfirst" page_tab='Footer Options'} {if empty($footerfirst)}{assign var="footerfirst" value="+"}{/if}
    {content block="Display Footer SocialNetworks" description='Enter + sign to enable this field, with - this field is disabled in the frontend' oneline="true" size="1" default="+" assign="footersecond" page_tab='Footer Options'} {if empty($footersecond)}{assign var="footersecond" value="+"}{/if}
    {content block="Display Footer Contact form" description='Enter + sign to enable this field, with - this field is disabled in the frontend' oneline="true" size="1" default="+" assign="footerthird" page_tab='Footer Options'} {if empty($footerthird)}{assign var="footerthird" value="+"}{/if}               
        <!-- start pageHeader -->                      
        <div id="pageHeaderOuter">                         
          <div id="pageHeader">                                   
            <!-- start pageLogo -->                                  
            <div class="pageLogo">
             <h1>{cms_selflink dir='start' alt=$sitename image='http://www.terningenarena.no/uploads/BizBuzz/logo.png' imageonly='1'}</h1>                                           
              <!-- end pageLogo -->                                      
            </div>                                   
            <!-- start searchBox -->    
    <div class="follow"></div>    
    <div class="page-btn"><a href="http://nb-no.facebook.com/Terningenarena"><img src="http://www.terningenarena.no/uploads/BizBuzz/Facebook-48.png"/></a></div>                                                                           
    <!-- end searchBox -->      
                                    
          </div>                      
                  
        <!-- start pageNavigation -->  
          {menu template="BizBuzzV2 : pageNavigation"}                             
          <div id="pageNavigation">                                    
            <!-- end pageNavigation -->                               
          </div>                          
                  
        </div>                      
        <!-- start pageWrapper -->                     
        <div id="pageWrapper">                        
          <!-- start pageTeaser -->{if $slider == "+"}                           
          <div id="pageTeaserWrapper">                               
            <div id="pageTeaser">
            {Gallery template='Slider' dir=$galleryfolder}                            
              <!-- end pageTeaser -->                                                      
            </div>       
          </div>{/if}                              
    <!-- start pageContent -->    
          <div class="innhold-bak">  
             
    {if $sidebar == "+"}       
          <div class="pageSidebar">
          {if $sidenav == "+"}
          <h3>Navigation</h3>
          {menu start_level='2'}     
          {/if}
          {* NEW CONTENT BLOCK *}
          <h3>Arrangementer</h3>
          {content block='extra_side_block' label='Some name for this block' wysiwyg='false'}
          {* END OF NEW BLOCK *}
          {if $newscat == "+"}
          <h3>News Categories</h3>
          {cms_module module='News' action='browsecat' detailpage='news'}
          {/if}
          </div>           
          <div class="pageContentSide">
          {else} 
          <div class="pageContent">
          {/if}
          {$capturedcontent}
     <!-- start infoBlock -->
            {if $show_contentnews == "+"}                              
            <div class="infoBlockWrapper">                            
              <div class="infoBlock">
              {news summarytemplate='newsFrontpage'}                                 
                <!-- end infoBlock -->                              
              </div>                        
            </div> </div></div></div>{/if}
    Code:
    /* RESETS --------------------------------------------- */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	border: 0;
    	outline: 0;
    	background: transparent;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    :focus {
    	outline: 0;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    dfn {
    	display: none;
    }
    
    img, img a
     {max-width: 100%;}
    /* PAGE ELEMENTS --------------------------*/
    body {
    	margin: 0;
    	padding: 0;
    	line-height: 1.3em;
    	background: url('http://www.terningenarena.no/uploads/BizBuzz/bakgrunn1.jpg');
    	font-family: Helvetica, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    	font-size: 0.8em;
    	color: #404040;;
    	letter-spacing: 0.1em;
    }
    /* List Styles */
    
    
    
    ul.list-add li, ul.list-delete li, ul.list-checkmark li, ul.list-help li, ul.list-favorites li {
    	margin: 5px 0;
    	position: relative;
    	overflow: hidden;
    	line-height: 18px;
    }
    ul.list-add li, ul.list-delete li, ul.list-checkmark li, ul.list-help li, ul.list-favorites li {
    	list-style-image: none;
    	list-style-position: outside;
    	list-style-type: none;
    	margin-bottom: 2px !important;
    	padding-left: 25px !important;
    }
    li.list-print a {
    	background: transparent url('uploads/BizBuzz/images/printer.png') no-repeat scroll 0 3px;
    	display: block;
    	padding-left: 25px;
    	line-height: 18px;
    }
    li.list-back a {
    	background: transparent url('uploads/BizBuzz/images/back.png') no-repeat scroll 0 3px;
    	display: block;
    	padding-left: 25px;
    	line-height: 18px;
    }
    ul.list-add li {
    	background: transparent url('uploads/BizBuzz/images/add.png') no-repeat scroll 0 3px;
    }
    ul.list-delete li {
    	background: transparent url('uploads/BizBuzz/images/delete.png') no-repeat scroll 0 3px;
    }
    ul.list-checkmark li {
    	background: transparent url('uploads/BizBuzz/images/ok.png') no-repeat scroll 0 3px;
    }
    ul.list-help li {
    	background: transparent url('uploads/BizBuzz/images/arrow.png') no-repeat scroll 0 3px;
    }
    ul.list-favorites li {
    	background: transparent url('uploads/BizBuzz/images/favorites.png') no-repeat scroll 0 3px;
    }
    ul.list-square li {
    	list-style-type: square;
    	margin:0 0 0 15px;
    	padding-left:10px;
    }
    ul.list-circle li {
    	list-style-type: circle;
    	margin:0 0 0 15px;
    	padding-left:10px;
    }
    /* PAGE STRUCTURE */
    /* Header part */
    #pageHeaderOuter {
    	background: url('/uploads/BizBuzz/header2.gif') repeat-x bottom #ebebeb;
            margin-top: -55px;
            margin-bottom: -20px;
    	padding-bottom: 0px;
    	border-bottom: 0px groove #eee;
    }
    #pageHeader {
    	width: 960px;
    	margin: auto;
    	height: 199px;
    	position: relative;
            background: url('uploads/BizBuzz/header-outer.jpg') no-repeat top center;
    }
    .pageLogo {
    	width: 320px;
    	height: 62px;
    	position: absolute;
    	left: 30px;
    	top: 73px;
            z-index:1;
    }
    
    .page-btn {
            width: 95px;
            height: 50px;
            margin-top: 128px;
            margin-right: -115px;
            float: right;
    }
    
    .follow {
           font-family: 'CicleGorditaItalic', Helvetica, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
           color: #fff;
           float: right;
           width: 95px
           height: auto;
           padding-top: 93px;
           padding-left: 25px;
           margin-right: 45px;
          	font-weight: bold;
    	-moz-text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    	-webkit-text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    	text-shadow: 0 -1px 1px rgba(3,3,3,0.31);
    }
    
           
    #pageNavigation {
    	background: transparent;
    	height: 28px;
    	width: 940px;
    	padding: 4px 10px;
    	margin: auto;
    }
    
    #pageWrapper {
    	width: 960px;
    	margin: 20px auto;
    }
    /* Slider Images */
    #pageTeaserWrapper {
    	height: 365px;
    	background: url('uploads/BizBuzz/images/pageTeaserBG.gif') no-repeat bottom;
            z-index:1;
    }
    #pageTeaser {
    	height: 365px;
    	width: 950px;
    	border: 1px solid #fff;
    	background: #f4f2f2;
    	padding: 5px;
    }
    /* Content part */
    
    .innhold-bak {
    background:url('http://www.terningenarena.no/uploads/BizBuzz/innhold.png') no-repeat;
    margin-top: 19px;
    margin-left: -7px;
    margin-bottom: 12px;
    with: 980px;
    height: 563px;
    }
    
    .pageContent {
    background: transparent;
    margin-top: -400px;
    margin-left: 14px;
    padding-top: 30px;
    padding-left: 25px;
    width: 530px;
    height: 230px;
    }
    
    
    .pageContentr {
    float: right;
    background: transparent;
    margin-top: 0px;
    margin-left: 10px;
    padding-top: 30px;
    padding-left: 25px;
    width: 200px;
    height: 500px;
    }
    
    .pageContentSide {
            background:url('http://www.terningenarena.no/uploads/BizBuzz/tekstinnhold.png') no-repeat;
    	float: left;
            margin-top: 10px;
            margin-left: 15px;
            padding-top: 30px;
            padding-left: 25px;
            padding-right: 35px;
            width: 470px;
            height: 547px;
    	display:inline;
    }
    h2.contentTitle {
            background: transparent;
            width: 960px;
            height: 400px;
            margin-top: 30px;
    	padding-top: 40px;
            padding-left: 39px;
    	font-size: 1.6em;
    }
    .pageContent p {
    	/*text-shadow: 1px 1px 0px #fff;*/
    }
    /* Sidebar */
    .pageSidebar {
    	float: right;
    	width: 320px;
            margin-top: 41px;
            margin-right: 55px;
    	padding: 0 0 0 10px;
    }
    
    .pageSidebar h3 {
    	display: block;
    	border-bottom: 2px groove #ebebeb;
    	text-shadow: none;
    	text-decoration: none;
    	line-height: 2.2em;
    	color: #6a6a6a;
    	margin-bottom:10px;}
    
    /* Content Blocks */
    .infoBlockWrapper {
    	background: url('uploads/BizBuzz/images/infoBlockShadow.gif') no-repeat bottom right;
    	padding-bottom: 40px;
    	margin: 10px 0;
    	position: relative;
    }
    .infoBlock {
    	background-color: #464545;
    	color: #fff;
    	padding: 10px;
    	border: 1px solid #ebebeb;
    }
    .infoBlock h2, .infoBlock p {
    	color: #fff;
    	text-shadow: none;
    }
    .infoBlockGroup {
    	width: 300px;
    	margin: 10px 20px 10px 0;
    	min-height: 100px;
    	float: left;
    }
    
    .infoBlockGroup h3 {
    	background: url('uploads/BizBuzz/images/infoBlockGroupBG.gif') no-repeat bottom;
    	color: #464545;
    	padding: 5px 5px 0 -5px;
    	height: 2.0em;
    }
    
    
    .infoBlockGroup a {
     color:#fff;}
     
    .infoBlockGroupInner {
    	padding: 10px;
    }
    .infoBlockGroup.last {
    	margin: 10px 0 0 0;
    }
    /* Footer part */
    #pageFooter {
            background: url('http://www.terningenarena.no/uploads/BizBuzz/footer-inner.jpg') no-repeat bottom;
    	width: auto;
            min-height: 200px;
            margin: 0 auto; 
            padding-top: 20px;
    }
    
    #navmenu {
    	margin: 15,auto,0,auto;
            padding: 0;
            list-style-type: none;
    }
    
    #navmenu li {
            display: inline;
            list-style: none;
            width: 126px;
            min-height: 60px;
            float: left;
            margin: 0 10px 10px 0;
            text-align: center;
    }
    
    #pageFooterInner {
    	width: 960px;
    	padding: 10px;
    	margin: auto;
    	color: #fff;
    }
    #pageFooterInner .infoBlockGroup p, #pageFooterInner .infoBlockGroup h3 {
    	color: #fff;
    }
    
    .copyright {
     	display: block;
    	color: #fff;
    	padding:10px;
    	border-top: 2px groove #00467f;
    	}
    
    .copyright a, .copyright p {
            color:#fff;}	
    
    /* END OF STRUCTURE */
    /* NAVIGATION */
    .sf-menu {
    	line-height: 1.0;
    }
    .sf-menu ul {
    	position: absolute;
    	top: -999em;
    	width: 15em;
    }
    .sf-menu ul li {
    	width: 100%;
    }
    .sf-menu li:hover {
    	visibility: inherit;
    }
    .sf-menu li {
    	position: relative;
    	z-index: 999;
            float: left;
    }
    .sf-menu a {
    	display: block;
    	position: relative;
    }
    .sf-menu li:hover ul, .sf-menu li.sfHover ul {
    	left: 0;
    	top: 2.6em;
    	z-index: 99;
    }
    ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
    	top: -999em;
    }
    ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
    	left: 15em;
    	top: 0;
    }
    ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
    	top: -999em;
    }
    ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
    	left: 15em;
    	top: 0;
    }
    .sf-menu {
    	float: right;
    	margin-bottom: 1px;
            margin-top:3px;
            margin-right: 185px;
    }
    
    .sf-menu li a:link, .sf-menu li a:visited {
    	display: block;
    	font-size: 0.9em;
    	line-height: 28px;
    	color: #fff;
    	background: transparent;
    	padding: 0 3px;
    	font-weight: bold;
    	-moz-text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    	-webkit-text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    	text-shadow: 0 -2px 1px rgba(5,5,5,0.31);
    	border: none;
    	text-decoration: none;
    	margin-right: 15px;
    }
    .sf-menu li a:hover, .sf-menu li a:active, .sf-menu li a.current {
            color: #c3ced5;
    	line-height: 26px;
    	-moz-border-radius: 0px;
    	-webkit-border-radius: 0px;
            border-bottom-width: 0.01em;
            border-bottom-style: dotted;
    	border-radius: 0px;
    	background: transparent;
    	padding:0 4px;
    }
    .sf-menu li li a:link, .sf-menu li li a:visited {
    	background: #1C1C1C;
    	text-transform: none;
    	text-shadow: none;
    	height: 26px;
    	line-height: 26px;
    	font-weight: normal;
    	-moz-border-radius: 0;
    	-webkit-border-radius: 0;
    	border-radius: 0;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	box-shadow: none;
    	border: none;
    	margin: 0;
    }
    .sf-menu li li a:hover, .sf-menu li li a:active, .sf-menu li li a.current {
    	background: #910b24;
    	text-decoration: none;
    	-moz-border-radius: 0;
    	-webkit-border-radius: 0;
    	border-radius: 0;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	box-shadow: none;
    	border: none;
    	padding: 0 5px;
    }
    .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    	outline: 0;
    }
    .sf-menu a.sf-with-ul {
    	padding-right: 2.25em;
    	min-width: 1px;
    }
    .sf-sub-indicator {
    	position: absolute;
    	display: block;
    	right: .75em;
    	top: 1.05em;
    	width: 10px;
    	height: 10px;
    	text-indent: -999em;
    	overflow: hidden;
    	background: url('http://www.terningenarena.no/uploads/BizBuzz/arrows-ffffff.png') no-repeat -10px -100px;
    }
    a > .sf-sub-indicator {
    	top: .8em;
    	background-position: 0 -100px;
    }
    a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {
    	background-position: -10px -100px;
    }
    .sf-menu ul .sf-sub-indicator {
    	background-position:  -10px 0;
    }
    .sf-menu ul a > .sf-sub-indicator {
    	background-position:  0 0;
    }
    .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    	background-position: -10px 0;
    }
    .sf-shadow ul {
    	background: url('uploads/BizBuzz/images/shadow.png') no-repeat bottom right;
    	padding: 0 8px 9px 0;
    	-moz-border-radius-bottomleft: 17px;
    	-moz-border-radius-topright: 17px;
    	-webkit-border-top-right-radius: 17px;
    	-webkit-border-bottom-left-radius: 17px;
    }
    .sf-shadow ul.sf-shadow-off {
    	background: transparent;
    }
    /* END OF NAVIGATION */

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's because currently, #menu has a right margin of 185px - so however wide the screen is , it'll have that margin, which may move it out of line with the rest of your page.

    If you put #menu within #pageNavigation (currently an empty div) and remove the right margin and top-margin you'd be nearly there.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •