Menu alignment in header problem #2 -...

User 187934 Photo


Senior Advisor
20,273 posts

Put all your code back to the original and place your navigation and image html inside a div with an id.

Leave everything between the style tags out.
You'll have to play around with the top and left on the #nav css to get it positioned.
<!-- Start PureCSSMenu.com STYLE -->
<style type="text/css">
<!--
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: relative;left:-1px;top:20px;}
ul.pureCssMenu ul ul{position :relative;left:20px;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 1px 1px 0px;
background-color:#;
background-repeat:repeat;
border-color:#A6A6A6;
border-width:0px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: inherent;
}
ul.pureCssMenu ul{
width:124.95px;
}
ul.pureCssMenu li{
display:block;
margin:1px 0px 0px 1px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#;
border-width:0px;
border-color:#FCEEB0;
border-style:solid;
text-align:left;
text-decoration:none;
padding:5px;
_padding-left:0;
font:12px Verdana;
color: #808080;
text-decoration:none;
cursor:pointer;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3;
height:100%;
display:inline-block;
background-color:#A6A6A6; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#;
border-color:#4C99AB;
border-style:solid;
font:12px Verdana;
color: #FF0000;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#;
border-color:#4C99AB;
border-style:solid;
font:12px Verdana;
color: #FF0000;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_blue_2.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:8px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white_2.gif)}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}


#nav {
position:relative;
left:300px;
top:254px;
}
-->
</style>
<!-- End PureCSSMenu.com STYLE -->



<div id="nav"> your html code goes here</div>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 516429 Photo


Registered User
83 posts

Eric, thanks for the help. I'll give it a try in the morning and let you know how I make out.

Mark
User 187934 Photo


Senior Advisor
20,273 posts

Ok Great!
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 516429 Photo


Registered User
83 posts

Good morning!

Almost there....

The new code allows me to position it closer to the header but doesn't stay in the correct position if the browser is resized. I'm also not sure how to adjust the padding around it because it touches the vertical Home button. Maybe because everything is inserted before SCCC sets up its Header section, that placement is difficult.

I put the menu in a typical webpage and had no problems getting it into position and keeping it in the Header section as the browser window is resized.

Here is a sample of my test:

http://whiteoconnellphoto.com/Store/Sto … led-1.html

Here is what I'm getting on my store:

http://whiteoconnellphoto.com/Store/Sto … index2.htm


I made the header bigger in SCDP but that doesn't seem to effect the output of the page.

Do you think it can be done?

Thanks for your continued help.
Mark
User 38401 Photo


Senior Advisor
10,951 posts

Just curious why you're bothering with a horizontal menu that basically mimics a bunch of the things on the Vertical menu already, pretty much overkill and strange too. :)
User 516429 Photo


Registered User
83 posts

Good question Jo Ann. This is just a template for future use. I needed placeholders to get the alignment issues worked out before I continue with the design.
Thanks!
User 187934 Photo


Senior Advisor
20,273 posts

You may need absolute positioning or increase the width of the nav div.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 516429 Photo


Registered User
83 posts

Eric, thanks for your help on this. I think what I wanted is not doable in this case since it's loaded before SCCC and it's alignment will vary with each browser size. I'll give it a couple of more tries before I hang it up.
Mark
User 187934 Photo


Senior Advisor
20,273 posts

You can alter the theme. I've been trying to with another user but keep corrupting the theme when I zip it back up.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 516429 Photo


Registered User
83 posts

That's a thought! Will the theme stay after I change it or does it revert back to it's it's previous design layout? I hate to go through the effort for it to lose everything if I try to make changes to the layout through SCDP.
Thanks!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.