Hi guys, I was wondering if you all could give me a little advice on my page (<!-- m --><a class="postlink" href="http://www.spatschool.org/index_new.htm">http://www.spatschool.org/index_new.htm</a><!-- m -->). I am building it using Studio MX, and my question is about the navigation bar / border thing on the left side.<br />
<br />
How can I make it so that the empty space behind my border is transparent? I'm just running in circles trying to get it done... I know that it's possible, because the original version of my page (<!-- m --><a class="postlink" href="http://www.spatschool.org/">http://www.spatschool.org/</a><!-- m -->) (which was created by MS Publisher 2004) displays it just fine. I'm re-designing the page exclusively in Dreamweaver and Fireworks because the Publisher version had horrible compatibility with other browsers. I've been trying to figure this out for weeks now.<br />
<br />
If anyone could offer any help, I'd really really appreciate it.<br />
<br />
Thanks in advance!<!--content-->Find this bit of the code:<br />
<br />
<br />
<br />
<span style='position:absolute;z-index:20;<br />
left:186px;top:581px;width:557px;height:383px' id="text"><br />
<table cellpadding=0 cellspacing=0><br />
<br />
And change the z-index from 20 to 999 that should put your content on top.<br />
I would seriously suggest that you don't use image maps though. Your page could easily be created without them and you could slash Download <!--more--> times by not forcing users to Download <!--more--> huge images. The main image has vast expanses of blue and green the could be set with a background colour.<!--content-->I tried modifying that code you suggessted, but it didn't look like it changed anything. It's not a matter of getting the content on top though, it's the blue space in inside of the green border. I specified that blue space to be transparent in fireworks, the only thing is that it doesn't show up on my html page as transparent, it shows up as blue for some reason.<br />
<br />
That's OK though, because I just figured out that if I just use a .gif image instead of the .png, the transparency works fine.<br />
<br />
I just still a little curious as to what MS Publisher did to the html code to make the original .png file have a transparent background (I already tried replacing my png with the one publisher originally created, and it still showed up with a blue background, so I'm sure it has something to do with the way the Publisher html was set up...).<br />
<br />
But thanks a lot for taking the time to reply to my question anyway!<br />
<br />
I'll probably be lurking around this forum from now on, so I'll see you around. Thanks!<!--content-->OK, so you insist on using image maps, I can live with that, barely. It occurs to me that your links at the bottom of the page are un-clickable. A z-index change should fix that, find this line:<br />
<br />
<br />
<div id="navbottom" style="position:absolute; width:200px; height:86px; z-index:25; left: 183px; top: 1012px;"> <img name="navbottom" src=http://www.webdeveloper.com/forum/archive/index.php/"navborder_files/navbottom.gif" width="560" height="75" border="0" usemap="#m_navbottom" alt=""><br />
And change it to this:<br />
<br />
<br />
<div id="navbottom" style="position:absolute; width:200px; height:86px; z-index:100; left: 183px; top: 1012px;"> <img name="navbottom" src=http://www.webdeveloper.com/forum/archive/index.php/"navborder_files/navbottom.gif" width="560" height="75" border="0" usemap="#m_navbottom" alt=""><!--content-->Aha! Cool... that was my next order of business, to fix that bottom navbar. Thanks for showing me how to get that fixed. As you can probably tell, I am a complete amatuer at web design, so would you mind telling me what that z-index stuff is all about?<br />
<br />
Also, what would you suggest I do to maintain that exact same look without using an image map? Honestly, I could care less about a 70k difference in size... If someone is using dial-up, well, let 'em wait.<br />
<br />
Thanks for the help
<!--content-->Well, the "Welcome to St. Patrick School" and the "What you will be, you are now becoming" could all be part of an h1 tag with the green oval as a background.<br />
The side bar could be replace with, the logo image, the link image and a light green background colour, very simple that wouldn't take up more than 10Kb I would say.<br />
The huge image of the school would have to be a background and then the "welcome" anmation could be positioned appropriately.<br />
The rest of the page is just text so this would not be a problem at all.<br />
<br />
If you like I could whip up a quick CSS based layout for you to use and dramatically reduce Download <!--more--> times.<br />
<br />
Originally posted by life036<br />
If someone is using dial-up, well, let 'em waitI use dial up and I don't like waiting.
<!--content-->Sure! If you don't mind spending a little time on it...<br />
I'd love to see a sample of what you're talking about. <br />
I also have no idea of what the purpose of cascading style<br />
sheets is, so it'd be great to see how I could use them to my<br />
advantage. Yep, I think it would be good to slash Download <!--more--><br />
times for dial-up users Thanks a lot for taking the time to<br />
help me out.<!--content-->Originally posted by life036 <br />
I also have no idea of what the purpose of cascading style<br />
sheets is, so it'd be great to see how I could use them to my<br />
advantage. <br />
<br />
This (<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=012%2F012%2Ecss">http://www.csszengarden.com/?cssfile=012%2F012%2Ecss</a><!-- m -->) is the purpose of CSS.
Plus, of course, all the other designs. Check out the different designs, and behold The Power Of CSS!<!--content-->I'll get started on a mock up of your page in about 16 hours when I get home from school. Right now I need sleep (00:49 here). CSS can also do those cool little links where the underline appears underneath them when you hover over them. <!--content-->
<br />
How can I make it so that the empty space behind my border is transparent? I'm just running in circles trying to get it done... I know that it's possible, because the original version of my page (<!-- m --><a class="postlink" href="http://www.spatschool.org/">http://www.spatschool.org/</a><!-- m -->) (which was created by MS Publisher 2004) displays it just fine. I'm re-designing the page exclusively in Dreamweaver and Fireworks because the Publisher version had horrible compatibility with other browsers. I've been trying to figure this out for weeks now.<br />
<br />
If anyone could offer any help, I'd really really appreciate it.<br />
<br />
Thanks in advance!<!--content-->Find this bit of the code:<br />
<br />
<br />
<br />
<span style='position:absolute;z-index:20;<br />
left:186px;top:581px;width:557px;height:383px' id="text"><br />
<table cellpadding=0 cellspacing=0><br />
<br />
And change the z-index from 20 to 999 that should put your content on top.<br />
I would seriously suggest that you don't use image maps though. Your page could easily be created without them and you could slash Download <!--more--> times by not forcing users to Download <!--more--> huge images. The main image has vast expanses of blue and green the could be set with a background colour.<!--content-->I tried modifying that code you suggessted, but it didn't look like it changed anything. It's not a matter of getting the content on top though, it's the blue space in inside of the green border. I specified that blue space to be transparent in fireworks, the only thing is that it doesn't show up on my html page as transparent, it shows up as blue for some reason.<br />
<br />
That's OK though, because I just figured out that if I just use a .gif image instead of the .png, the transparency works fine.<br />
<br />
I just still a little curious as to what MS Publisher did to the html code to make the original .png file have a transparent background (I already tried replacing my png with the one publisher originally created, and it still showed up with a blue background, so I'm sure it has something to do with the way the Publisher html was set up...).<br />
<br />
But thanks a lot for taking the time to reply to my question anyway!<br />
<br />
I'll probably be lurking around this forum from now on, so I'll see you around. Thanks!<!--content-->OK, so you insist on using image maps, I can live with that, barely. It occurs to me that your links at the bottom of the page are un-clickable. A z-index change should fix that, find this line:<br />
<br />
<br />
<div id="navbottom" style="position:absolute; width:200px; height:86px; z-index:25; left: 183px; top: 1012px;"> <img name="navbottom" src=http://www.webdeveloper.com/forum/archive/index.php/"navborder_files/navbottom.gif" width="560" height="75" border="0" usemap="#m_navbottom" alt=""><br />
And change it to this:<br />
<br />
<br />
<div id="navbottom" style="position:absolute; width:200px; height:86px; z-index:100; left: 183px; top: 1012px;"> <img name="navbottom" src=http://www.webdeveloper.com/forum/archive/index.php/"navborder_files/navbottom.gif" width="560" height="75" border="0" usemap="#m_navbottom" alt=""><!--content-->Aha! Cool... that was my next order of business, to fix that bottom navbar. Thanks for showing me how to get that fixed. As you can probably tell, I am a complete amatuer at web design, so would you mind telling me what that z-index stuff is all about?<br />
<br />
Also, what would you suggest I do to maintain that exact same look without using an image map? Honestly, I could care less about a 70k difference in size... If someone is using dial-up, well, let 'em wait.<br />
<br />
Thanks for the help
<!--content-->Well, the "Welcome to St. Patrick School" and the "What you will be, you are now becoming" could all be part of an h1 tag with the green oval as a background.<br />The side bar could be replace with, the logo image, the link image and a light green background colour, very simple that wouldn't take up more than 10Kb I would say.<br />
The huge image of the school would have to be a background and then the "welcome" anmation could be positioned appropriately.<br />
The rest of the page is just text so this would not be a problem at all.<br />
<br />
If you like I could whip up a quick CSS based layout for you to use and dramatically reduce Download <!--more--> times.<br />
<br />
Originally posted by life036<br />
If someone is using dial-up, well, let 'em waitI use dial up and I don't like waiting.
<!--content-->Sure! If you don't mind spending a little time on it...<br />I'd love to see a sample of what you're talking about. <br />
I also have no idea of what the purpose of cascading style<br />
sheets is, so it'd be great to see how I could use them to my<br />
advantage. Yep, I think it would be good to slash Download <!--more--><br />
times for dial-up users
Thanks a lot for taking the time to<br />help me out.<!--content-->Originally posted by life036 <br />
I also have no idea of what the purpose of cascading style<br />
sheets is, so it'd be great to see how I could use them to my<br />
advantage. <br />
<br />
This (<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=012%2F012%2Ecss">http://www.csszengarden.com/?cssfile=012%2F012%2Ecss</a><!-- m -->) is the purpose of CSS.
Plus, of course, all the other designs. Check out the different designs, and behold The Power Of CSS!<!--content-->I'll get started on a mock up of your page in about 16 hours when I get home from school. Right now I need sleep (00:49 here). CSS can also do those cool little links where the underline appears underneath them when you hover over them. <!--content-->