What exactly is the "Insert HTML" function in SCC Pro?
I can't seem to find any discussion in the Help documentation.
The implication would be that you could insert HTML code and have it appear in your page. I have tried inserting HTML code and it does not format it. i.e. I have inserted a billeted code to create a list, but when I display it in preview, I get the text but none of the formatting.
Maybe I am using it incorrectly or just don't understand it's function. A brief clarification would be helpful.
Thanks.
Mark Roberts
Registered User
37 posts
The Philosopher
Registered User
2,038 posts
Insert your code as you would a normal html document. So, you need to declare your styles in the head section, and your body elements in the body portion.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
Mark Roberts
Registered User
37 posts
So I did that. I put in:
<ul>
<li> first tiem</li>
<li>second item</li>
</ul>
And i just get:
first item
second item
(no bullets)
<ul>
<li> first tiem</li>
<li>second item</li>
</ul>
And i just get:
first item
second item
(no bullets)
The Philosopher
Registered User
2,038 posts
Then it should look like this:
Click the html tool and put this:
<head>
<style>
li{list-style-type:disc; }
</style>
</head>
Insert this html first.
Then insert another set of html with the html tool, that looks like this:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>etc.</li>
</ul>
That should work
Click the html tool and put this:
<head>
<style>
li{list-style-type:disc; }
</style>
</head>
Insert this html first.
Then insert another set of html with the html tool, that looks like this:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>etc.</li>
</ul>
That should work
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
Mark Roberts
Registered User
37 posts
That's cool
Except...this is what I get when I do that....(see attachment)
Except...this is what I get when I do that....(see attachment)
BookPublisher
Registered User
171 posts
Actually, you shouldn't enter the <head> tags at all. Just enter the following:
<ul style="list-style-type:disc;">
<li>item 1</li>
<li>item 2</li>
<li>etc.</li>
</ul>
<li>item 1</li>
<li>item 2</li>
<li>etc.</li>
</ul>
BookPublisher
Registered User
171 posts
You'll probably need to adjust the left margin or padding, too. Just add the following style to the <ul> tag:
margin-left: 20px;
or
padding-left: 20px;
(Add this after the "list-style-type:disc;" text so it would look like this:
<ul style="list-style-type: disc; padding-left: 20px;">
margin-left: 20px;
or
padding-left: 20px;
(Add this after the "list-style-type:disc;" text so it would look like this:
<ul style="list-style-type: disc; padding-left: 20px;">
The Philosopher
Registered User
2,038 posts
I believe you do need to add the head tags when you are declaring certain styles in the head, this ensures all browsers will display it properly.
Mark,
I am not sure I am clear on what you want. Is it that you want the bullets inside the menu itself? If that's the case then as far as I know of you can only declare bullet position as inside or outside, like such:
<style>
li {list-style-type:disc; list-style-position:inside;}
</style>
But, I don't think declaring "inside" will move it in far enough for you. I know if you want to customize your bullet as an image (say the image you create is a bullet), then you can alter the position of the bullet using the background-position, like such:
<style>
li{list-style-image:url('images/SomeBulletImage.gif') no-repeat 0 0;}
</style>
In this case the "0 0" represent your X,Y axis. The first 0, is left to right, the second is up and down. Declare how far you want to move the bullet in px. So it might look something like this:
<style>
li{list-style-image:url('images/SomeBulletImage.gif') no-repeat 5px 5px;}
</style>
its been awhile since, I have done custom ullets, so I am not sure if anything changed with CSS3 yet. Give her a try though. Let us know how it goes.
Mark,
I am not sure I am clear on what you want. Is it that you want the bullets inside the menu itself? If that's the case then as far as I know of you can only declare bullet position as inside or outside, like such:
<style>
li {list-style-type:disc; list-style-position:inside;}
</style>
But, I don't think declaring "inside" will move it in far enough for you. I know if you want to customize your bullet as an image (say the image you create is a bullet), then you can alter the position of the bullet using the background-position, like such:
<style>
li{list-style-image:url('images/SomeBulletImage.gif') no-repeat 0 0;}
</style>
In this case the "0 0" represent your X,Y axis. The first 0, is left to right, the second is up and down. Declare how far you want to move the bullet in px. So it might look something like this:
<style>
li{list-style-image:url('images/SomeBulletImage.gif') no-repeat 5px 5px;}
</style>
its been awhile since, I have done custom ullets, so I am not sure if anything changed with CSS3 yet. Give her a try though. Let us know how it goes.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
Janys Hyde
Ambassador
6,076 posts
I think you are going to have to make the background the same colour for the navigation menu, and for the individual items...
BookPublisher
Registered User
171 posts
Declaring styles between the <head> tags creates global styling. Using the method I described creates a localized style -- specific only to the element the style is attached to.
The navigation menu in SCC is created using <li> tags and is styled on line 30 of the default.css file "ol, ul {list-style: none outside none;}". A bulleted list within a product's description will acquire the styles defined in the css file, which hides the bullet. That is why Mark would need to add the local style to the <ul> element (so the bullet will show).
The navigation menu in SCC is created using <li> tags and is styled on line 30 of the default.css file "ol, ul {list-style: none outside none;}". A bulleted list within a product's description will acquire the styles defined in the css file, which hides the bullet. That is why Mark would need to add the local style to the <ul> element (so the bullet will show).
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.
