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:
/* 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;
}
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.
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
<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
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
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.
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
I am having trouble on getting my code and css to function the same using the default and required selectors given by the CMS