iWeb HTML editing help

carmidy · Feb 2, 2011

I'm sorry. I've been going at this for a couple hours now and am having NO luck. I KNOW there has to be a way to do this. If not then whatever, I give up!

First of all: My domain is from godaddy (not sure if that matters) and I'm hosting through mobile me.

ALL I want to do is add a Facebook/Blogspot widget type thing to my webpage. Like this: Cinnamon Girl Studio | Shop See it on the right side?

Well luckily the web designer of that website has the code up for grabs. The directions are here: Adding Fixed Social Icons to your Blog | Cinnamon Girl Studio

SO I followed the directions to put the first set of code in an HTML snippet. But I cant for the LIFE of me figure out where to put the other code. It's supposed to go between the header tags. Everyone keeps saying to go to your iDisk > Sites then click on the file you want to edit. But it doesnt let me do that. When I click on the files it just says it's a webpage and asks me if I want to view it in a browser.

If you can help me I will be forever grateful. I'm so annoyed right now. I've been working forever on this site and just now is when I find out it's this hard to edit HTML/CSS stuff.

podraig · Feb 3, 2011

html

If you dont have it already, download textwrangler. Right click on page and open with the program. You will be good to go

[DT] · Feb 5, 2011

The second block of code is a style, for specific object ID (that's the # in front of the name). CSS definitions can go right on the object, in the page header, or in an external file. Since it sounds like you just want to use them right in the page, simply do this:

<html>
<head>
<style type="text/css">

#Social {
background: transparent;
width: 48px;
position: fixed;
top: 60%;
right: 0.20%;
}

</style>
</head>

Then note that the DIV block (below), has its ID attribute set to the same the style block above (Social):

<div id="Social">

<a href="yourlinkhere" target="_blank"><img src="http://www.cinnamongirlstudio.com/blogtemplates/social-icons/facebook.png" /></a><br />
<a href="yourlinkhere" target="_blank"><img src="http://www.cinnamongirlstudio.com/blogtemplates/social-icons/twitter.png" /></a><br />
<a href="yourlinkhere" target="_blank"><img src="http://www.cinnamongirlstudio.com/blogtemplates/social-icons/feed.png" /></a>

</div>

So now on that specific page, the object with id="Social", will pick up the #Social CSS definition. Also note that IDs should always be unique across a page.

Hope that helps!

[edit] Switch to a fixed font, thought it might be easier to read.

iWeb HTML editing help

carmidy

podraig

[DT]

Shop Amazon