SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Navigation Matching Help

    I have started to use the PyroCMS CMS and by default the CMS does its code like this:
    Code:
        <li class="first current">
        	<a href="http://example.com/home">Home</a>
        </li>
        <li class="">
        	<a href="http://example.com/about-us">About Us</a>
        	<ul>
        		<li class="first">
        			<a href="http://example.com/contact">Contact</a>
        		</li>
        		<li class="last">
        			<a href="http://example.com/staff">Staff</a>
        			<ul>
        				<li class="single">
        					<a href="http://example.com/history">History</a>
        				</li>
        			</ul>
        		</li>
        	</ul>
        </li>
        <li class="last">
        	<a href="http://example.com/blog">Blog</a>
        </li>
    I have tried many variations of my css code but I cannot get my current style to replicate the above CMS style -> The above style is dynamically outputted by PHP.

    I do not require a current link.

    What are you having trouble with specifically?

    I am having trouble with the general css and formatting

    The above code is how the CMS replicates there navigation menus, the code below is how I have done mine and I am currently turning my HTML/CSS into a theme but I have tried many combinations and I cant seem to get it right.

    My CSS:
    Code:
        /* Main Menu */
        
        #mainMenu{
            height:50px;
            margin:0 0 15px 0px;
            background-color:#6a6a6a;
            -moz-border-radius:3px;
            -webkit-border-radius:3px;
        }
        
        #mainMenu ul{
            display:inline;
            -webkit-border-bottom-right-radius:2px;
            -webkit-border-bottom-left-radius:2px;
            -moz-border-radius-bottomright:2px;
            -moz-border-radius-bottomleft:2px;
        }
        
        #mainMenu ul li{
            margin-left:0px;
            width:120px;
            height:56px;
            display:inline;
            position:relative;
        }
        
        
        #mainMenu li a {
            float:left;
            display:block;
            text-decoration:none;
            width:120px;
            height:35px;
            font-size:13px;
            line-height:45px;
            text-align:center;
            color:#fff;
            text-transform:uppercase;
        	padding-top:-4px;
            margin:0px;
        }
        
        #mainMenu li a:hover, #mainMenu li a:active{
            text-decoration:none;
            background-color:#7a7a7a;
            color:#fff;
            width:120px;
            height:50px;
           -webkit-border-top-left-radius:2px;
            -webkit-border-bottom-left-radius:2px;
            -moz-border-radius-topleft:2px;
            -moz-border-radius-topleft:2px;
        }
        
        #mainMenu .signup{
            background-color:#69c21c;
            height:50px;
            margin-left:360px;
           -webkit-border-top-right-radius:2px;
            -webkit-border-bottom-right-radius:2px;
            -moz-border-radius-topright:2px;
            -moz-border-radius-bottomright:2px;
        }
        
        #mainMenu .signup:hover{
        	background-color:#00afd8;
        }
        
        /*mainMenu Sub Menu */
        
        #mainMenu ul li ul .single{
            
            display:none;
            background-color:#7a7a7a;
        }
        
        #mainMenu ul li:hover ul{
            text-transform:none;
            display:block;
            position:absolute;
            width:115px;
            top:50px;
            right:-37px;
        }
        
        #mainMenu ul li:hover ul a{
            float:left;
            margin:0 0 0 -35px;
            line-height:35px;
            width:150px;
            height:35px;
            border:none;
            font-size:12px;
            text-align:left;
            text-transform:none;
        
        
        }
        
        #mainMenu  ul li ul li a:hover{    
            width:152px;
            height:30px;
        	font-weight:bold;
            margin-left:-38px;
            line-height:35px;
        }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by JZM View Post
    I have started to use the PyroCMS CMS and by default the CMS does its code like this:
    Code:
        <li class="first current">
        	<a href="http://example.com/home">Home</a>
        </li>
        <li class="">
        	<a href="http://example.com/about-us">About Us</a>
        	<ul>
        		<li class="first">
        			<a href="http://example.com/contact">Contact</a>
        		</li>
        		<li class="last">
        			<a href="http://example.com/staff">Staff</a>
        			<ul>
        				<li class="single">
        					<a href="http://example.com/history">History</a>
        				</li>
        			</ul>
        		</li>
        	</ul>
        </li>
        <li class="last">
        	<a href="http://example.com/blog">Blog</a>
        </li>
    I have tried many variations of my css code but I cannot get my current style to replicate the above CMS style
    There is no style in the code above It's just HTML.

    I do not require a current link.

    What are you having trouble with specifically?

    I am having trouble with the general css and formatting
    Who's having this conversation?!



    The above code is how the CMS replicates there navigation menus, the code below is how I have done mine and I am currently turning my HTML/CSS into a theme but I have tried many combinations and I cant seem to get it right.
    You've only given CSS, but presumably your HTML is needed too.

    Your question is a bit confusing.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no style in the code above It's just HTML. That is taken from the PyroCMS documentation no css given





    Who's having this conversation?!
    I am in the process of changing my HTML/CSS theme into a PyroCMS Theme





    You've only given CSS, but presumably your HTML is needed too.This is my HTML from my HTML/CSS

    HTML Code:
    <nav id="mainMenu"> 
    		<ul> 
    		<li><a href="#"></a> 
    		<ul><!--Sub Menu --> 
    				<li><a href="#">?</a></li> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    				
    		</ul><!-- Sub Menu Ends --> 
    		</li> 
    		<li><a href="#"></a> 
    		<ul><!-- Sub Menu --> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    		</ul><!-- Sub Menu Ends --> 
    		</li> 
    		<li><a href="#"></a> 
    		<ul><!-- Sub Menu --> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    				</ul><!-- Sub Menu Ends --> 
    		</li> 
    		<li><a href="#"></a> 
    		<ul><!-- Sub Menu --> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    				<li><a href="#"></a></li> 
    		</ul><!-- Sub Menu Ends --> 
    		</li> 
    		<li><a class="signup" href="#">SIGN UP</a></li> 
    		</ul> 
    </nav><!-- Main Menu End -->

    Your question is a bit confusing.
    I agree I have tried so many ways to get my point across but I cannot word it correctly

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,255
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    I guess where I get confused is inderstanding what you mean by "style".

    The way the markup is rendered in a browser with the CSS rules applied?
    The format of the list i.e. the nesting or the indentation as seen in view-source?
    The selectors used in the CSS?

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    I guess where I get confused is inderstanding what you mean by "style".

    The way the markup is rendered in a browser with the CSS rules applied?
    The format of the list i.e. the nesting or the indentation as seen in view-source?
    The selectors used in the CSS?
    The format between the 2 codes is similar but were I have gotten myself confused is how to modify my css to fit within PyroCMS and its navigation CSS selectors

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,255
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    If I understand - please correct me if I'm wrong.

    The CMS creates mark-up and uses its CSS - you like the way it renders.
    You want to use your own mark-up and have it look the same/similar.
    But .. you are having trouble writing the CSS to accomplish this.
    And .. you still want to use the CMS' CSS where possible.

    Unless I'm not seeing it, the list nesting looks similar, except for the class names.

    You can't use the same names?

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand - please correct me if I'm wrong.

    The CMS creates mark-up and uses its CSS - you like the way it renders.

    The CMS creates the mark-up and by default uses the showen CSS selectors but no CSS is generated

    You want to use your own mark-up and have it look the same/similar.
    But .. you are having trouble writing the CSS to accomplish this.
    And .. you still want to use the CMS' CSS where possible.

    I want to use my CSS that I have given but I am having trouble how to modify it so that it works the same as I have it but within the CMS selectors



    Unless I'm not seeing it, the list nesting looks similar, except for the class names.

    You can't use the same names?
    Thats my issue I am having trouble on getting my code and css to function the same using the default and required selectors given by the CMS

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Perhaps give us a screen shot of how yo want the page to appear, so we can show you have to write the CSS.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Perhaps give us a screen shot of how yo want the page to appear, so we can show you have to write the CSS.

    This is what I am after:

    Screen shot 2011-06-13 at 12.19.41 PM.png

    Note: Nav 3 should of been nav 4

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anybody?


Bookmarks

Posting Permissions

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