Hi,

I want to add my logo and a menu in the header section of SCC. I have all the code inserted but cannot get the logo or menu to stay within the header box. It goes to the top left corner of the page. How can I get it into the confines of the header?

Here is the link to the test page. If someone can read the source code and perhaps give me a clue as to what I need to change, it would be greatly appreciated.

Thanks!
Mark

http://whiteoconnellphoto.com/Store/StoreTest/index.htm

Did you use the app to place the header or did you hard code a div into your page?

Hi Eric,

I copied the code parts and placed them in the window for adding HTML to the header in SCC

You'll need to use relative positioning to get it where you want.

This is some of the code that I think effects it.

ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}


I can change it but I'm confused on how it will line up accurately depending on the size of the monitor it's being viewed on. If the monitor is 1024x768 it looks pretty good, but if it's 1920x1068 it will be way to the left. Since I can't see the coding of the SCC I can't fit it in somewhere.

Do you think it can be done?

Thanks!

Change the absolute to relative then change the 98% to 20px

I made these changes but it still looks the same.

ul.pureCssMenu ul{position: relative;left:-1px;top:20px;}
ul.pureCssMenu ul ul{position:relative;left:20px;top:-2px;}

oops, this is how it looks...

ul.pureCssMenu ul{position: relative;left:-1px;top:20px;}
ul.pureCssMenu ul ul{position: relative;left:20px;top:-2px;}

Do you have your code like this.

Here is what I have before the menu ...


<div>
<!-- Start PureCSSMenu.com STYLE -->
<style>
#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;
}
</style>
<img src="file:///L|/2010whiteoconnellphoto/images/whiteoconnellfont2010_splash_1_5in.png" width="288" height="108">
<!-- End PureCSSMenu.com STYLE -->