Jump to content

harambeegirl

Members
  • Posts

    17
  • Joined

  • Last visited

harambeegirl's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Thanks! Genius! It works!I have been getting my feet wet in the language of JavaScript, but it would have taken me months to learn how to write that script.
  2. I have another idea on how I can manage a lot of data in a right sidebar.I think that I could have a short list of links (no more than two or three).I am trying to figure out if I could have each link connect to content within a hidden <div>. When the user clicks on the link, the content becomes visible below the link. Click on the link a second time and the content disappears again.Does anyone know how or if I could do this?
  3. I don't think that there is an error per se. I think it is behaving the way it is supposed to. The problem (for me) is that I think the solution is worse than the original problem because it looks worse (from a design standpoint) than before.Here is HTML code for the i-frame. <div id="rightsidebar"> <h3 class="h3green">Adinkra Symbolism</h3> <p>What is Adinkra? Read a definition at the <a href="http://www.ghana.gov.gh/visiting/culture/adinkra.php">Republic of Ghana</a></p> <iframe src="inline_content/adinkra_books.htm"></iframe> <iframe src="inline_content/adinkra_websites.htm"></iframe> <iframe src="inline_content/adinkra_meanings.htm"></iframe> </div> Here is CSS code for the site. /* CSS layout */body { margin: 0; padding: 0; border: 0; background-position: center center; background-image: url('../images/spiderback6.jpg'); background-repeat: repeat; background-attachment: scroll; font-family: African, Arial Black;}/* Site Typography */h1, h3 { margin-bottom: 10px; font-weight: lighter; text-align: center; font-family: African, Arial Black;}h1 { color: black; background-color: inherit; font-size: x-large; letter-spacing: 1px; position: absolute; z-index: 2; width: 740px; top: 10px; left: 50px;}h3.h3red { color: red; background-color: transparent; font-size: large; letter-spacing: 2px; padding: 3px; line-height: 14pt; position: absolute; z-index: 2; width: 740px; top: 65px; left: 50px;}h3.h3green { color: green; font-size: large; letter-spacing: 2px; padding: 3px; line-height: 14pt; background-image:url('../images/spiderback11.gif')}h3.h3greenmast { color: green; background-color: transparent; font-size: large; letter-spacing: 2px; padding: 3px; line-height: 14pt; position: absolute; z-index: 2; width: 740px; top: 110px; left: 50px;}p { font-size: small; background-color: inherit; line-height: 14pt; font-weight: lighter; color: black; font-family: African, Arial Black;}/* Links */a:link { color: blue; background-color: inherit; font-weight: lighter; text-decoration: underline; line-height: 14pt; font-size: small;}a:visited { color: red; background-color: inherit; font-weight: lighter; text-decoration: underline; line-height: 14pt; font-size: small;}a:hover { text-decoration: underline; color: maroon; font-size: small; background-color: inherit;}a:active { color: blue; background-color: inherit; font-weight: lighter; text-decoration: none; line-height: 14pt; font-size: small;}/* Site Divisions */#masthead { position: relative; top: 0px; margin-left: 60px; vertical-align: middle; height: 125px; width: 800px; overflow: hidden; padding: 20px; border: 0px; text-align: center; font-style: normal; text-indent: 0px; letter-spacing: 1.75px; background-position: center center; background-repeat: repeat; background-image: url('../images/spiderback11.gif'); font-family: African, Arial Black;}#navmenu { position: relative; top: 0px; margin-left: 60px; text-align: center; height: 75px; width: 832px; vertical-align: middle; overflow: hidden; padding: 5px 0px; border: solid medium; border-color: red green; background-image: url('../images/spiderback11.gif');}#container { position: relative; top: 0px; margin-left: 60px; vertical-align: middle; float: none; padding: 15px; width: 810px; height: 400px; border: 0px; background-image: url('../images/spiderback11.gif'); background-color: #ffffff;}#maincontent.shortwidth { overflow: scroll; vertical-align: middle; position: relative; float: left; width: 450px; height: 380px; background-color: #ffffff; border: 0px; padding: 10px;}#maincontent.longwidth { overflow: scroll; vertical-align: middle; position: relative; float: left; width: 800px; height: 380px; background-color: #ffffff; border: 0px; padding: 10px 0px;}#rightsidebar { overflow: scroll; vertical-align: middle; position: relative; float: right; width: 300px; height: 380px; background-color: #ffffff; padding: 10px; border: 0px;}#footer { position: relative; top: 0px; margin-left: 60px; overflow: auto; vertical-align: bottom; text-align: center; width: 580px; height: 95px; padding: 10px 130px; border: 0px; background-image: url('../images/spiderback11.gif');}/* Images */img.hspace1 { padding: 0px 30px; border: 0px; margin: 5px 0px;}img.hspace2 { margin: 0px 10px; border: solid 2px; border-color: green;}img.Gye{ position: absolute; left: 80px; top: 10px; z-index: 1; margin: 0px 10px;}img.YeOhene{ position: absolute; left: 255px; top: 10px; z-index: 1; margin: 0px 10px;}img.Nti{ position: absolute; left: 440px; top: 10px; z-index: 1; margin: 0px 10px;}img.AnanseMast{ position: absolute; left: 635px; top: 10px; z-index: 1; margin: 0px 10px;}img.AnanseMastLft{ position: absolute; left: 50px; top: 0px; padding: 0px 5px; z-index: 2;}img.AnanseMastRgt{ position: absolute; left: 640px; top: 0px; padding: 0px 5px; z-index: 2;}/* Miscellaneous */ul { font-size: small; font-weight: lighter; line-height: 14pt; font-family: African, Arial Black;}span.copyright { font-family: Times New Roman; font-size: medium;}a:link.caption { margin: 0px 18px; color: green; font-size: small; font-weight: lighter;}a:visited.caption { margin: 0px 18px; color: green; font-size: small; font-weight: lighter;}span.AdinkraNames { color: green;}iframe { overflow: scroll; width: 270px; position: static; height: 250px; margin: 5px;}
  4. Ignore my previous question -- not thinking straight.If you look at my page now (www.anansisweb.com), I put the iframes in the right sidebar. However this isn't the result that I had expected.I was expecting a list of links:Adinkra Books Adinkra Websites Adinkra Meanings that would open the same internal window within the sidebar. I was hoping that the same window would open for each link, not separate windows for each link, because there is still a lot of scrolling. I was also hoping to avoid the scroll window within the scroll window because it seems unattractive.Does anyone have suggestions as to how I can make this information available to users with a click so that they are not required to scroll through a long list of data? I wanted to avoid pop-up windows because everybody hates them, people don't want them cluttering their desktops and browsers block them anyway. Sorry, I don't know PHP or Javascript.
  5. I apologize if I sound geeky, but I-frames are cool!The html format has an open and close tag. Is something supposed to go inside these tags?
  6. My webpage is at www.anansisweb.comMy page layout has a right scroll <div> and a left scroll <div> within a container on a DWT.On some pages, I would like to manage large amounts of information that scroll down the page. I have considered this option -- put some content in a right column, create an internal link outside the <div> that opens a new window or page within the right column <div> while maintaining the same parent page. In essence, it would be a page within a page. Is this possible or am I merely delusional?
  7. Thanks everyone for their help. I resolved this issue.
  8. Thanks everyone for their help. I resolved this issue.
  9. Thanks so much! That worked! Could I also ask if you would work magic with that annoying image that won't load? Thanks.
  10. My website is at www.anansisweb.comI am mostly done with it. I have checked it for validation and ensured cross-browser compatibility. I have the design and style the way that I want it. Now I have two issues left to resolve before I can officially call it complete. One issue is the z-index. I have set the z-index for the images in the masthead at 1. I set the index for the text at 2. My text editor (MS Expression Web Designer) will not allow a z-index below 0. I placed the images at 1 because I want them to be in front of the background but behind the text. Still, the images are showing up above the text instead of below it. I don't know why it is doing this.Second, there is one image that will not load on the page. I have gone through several troubleshooting solutions, including verifying that the path is right, that the image is named correctly and that the image is uploaded correctly. Strangely, in the IE6 browser, the image shows up on some pages, but not others. It should show up on all pages or none because I placed it in the dynamic web template. In the other browsers, it will not show up on any pages.I hope that you good folks can help me with this.
  11. My website is at www.anansisweb.comI am mostly done with it. I have checked it for validation and ensured cross-browser compatibility. I have the design and style the way that I want it. Now I have two issues left to resolve before I can officially call it complete. One issue is the z-index. I have set the z-index for the images in the masthead at 1. I set the index for the text at 2. My text editor (MS Expression Web Designer) will not allow a z-index below 0. I placed the images at 1 because I want them to be in front of the background but behind the text. Still, the images are showing up above the text instead of below it. I don't know why it is doing this.Second, there is one image that will not load on the page. I have gone through several troubleshooting solutions, including verifying that the path is right, that the image is named correctly and that the image is uploaded correctly. Strangely, in the IE6 browser, the image shows up on some pages, but not others. It should show up on all pages or none because I placed it in the dynamic web template. In the other browsers, it will not show up on any pages.I hope that you good folks can help me with this.
  12. My site is at www.anansisweb.comI am validating my CSS at the W3C Validator. It suggests that I choose a generic font family as a last alternative. My page is written in an unusual font called African. I suppose that the validator wants me to choose a font in case some browsers can't read my font (although I have tested it in all the browsers and it does show up). How do I use CSS to choose an "alternative" font? I wrote a second line of code for Arial below the original font, but then all my fonts turned to Arial. I don't want the fonts to be written in Arial if African shows up just fine.The CSS validator is also saying that I need a background color for my headings and my paragraphs. I don't want any color, so I set it to transparent, but it is still giving me friendly "suggestions."Finally, the XHTML validator is telling me that it doesn't like the javascript in my widgets. I don't know what to do about this because I didn't create the widgets -- I just copied and pasted them. Do I ignore these warnings and the failed validation report or is there some way to adjust the code? I am using the beta version of Microsoft EWD (Expression Web Developer), if that helps.Here is my CSS: /* CSS layout */body { margin: 0; padding: 0; border: 0; background-position: center center; background-image: url('../images/spiderback6.jpg'); background-repeat: repeat; background-attachment: scroll; font-family: African;}/* Site Typography */h1, h2, h3 { font-family: African; margin-bottom: 10px; font-weight: lighter; text-align: center;}h1 { color: black; background-color: transparent; font-size: x-large; letter-spacing: 1px; z-index: 2;}h3.h3red { color: red; background-color: transparent; font-size: large; letter-spacing: 2px; padding: 3px; line-height: 14pt; z-index: 2; background-image:url('../images/spiderback11.gif')}h3.h3green { color: #00CC00; background-color: transparent; font-size: large; letter-spacing: 2px; padding: 3px; line-height: 14pt; z-index: 2; background-image:url('../images/spiderback11.gif')}p { font-size: small; background-color: transparent; line-height: 14pt; font-weight: lighter; color: black; font-family: African;}/* Links */a:link { color: blue; background-color: transparent; font-weight: lighter; text-decoration: underline; line-height: 14pt; font-size: small;}a:visited { color: red; background-color: transparent; font-weight: lighter; text-decoration: underline; line-height: 14pt; font-size: small;}a:hover { text-decoration: underline; color: maroon; font-size: small;}a:active { color: blue; background-color: transparent; font-weight: lighter; text-decoration: none; line-height: 14pt; font-size: small;}/* Site Divisions */#masthead { position: relative; top: 0px; margin-left: 60px; white-space: normal; vertical-align: middle; height: 125px; width: 800px; overflow: hidden; padding: 20px; border: 0px; text-align: center; font-family: African; font-style: normal; text-indent: 0px; letter-spacing: 1.75px; background-position: center center; background-repeat: repeat; background-image: url('../images/spiderback11.gif')}#navmenu { position: relative; top: 0px; margin-left: 60px; text-align: center; height: 70px; width: 832px; vertical-align: middle; overflow: hidden; padding: 5px 0px; border: solid medium; border-color: red #00CC00; background-image: url('../images/spiderback11.gif');}#container { position: relative; top: 0px; margin-left: 60px; vertical-align: middle; float: none; padding: 15px; width: 810px; height: 400px; border: 0px; background-image: url('../images/spiderback11.gif'); background-color: transparent;}#maincontent.shortwidth { overflow: scroll; vertical-align: middle; position: relative; float: left; width: 450px; height: 380px; background: #ffffff; border: 0px; padding: 10px;}#maincontent.longwidth { overflow: scroll; vertical-align: middle; position: relative; float: left; width: 800px; height: 380px; background: #ffffff; border: 0px; padding: 10px 0px;}#rightsidebar { overflow: scroll; vertical-align: middle; position: relative; float: right; width: 300px; height: 380px; background: #ffffff; padding: 10px; border: 0px;}#footer { position: relative; top: 0px; margin-left: 60px; overflow: auto; vertical-align: bottom; text-align: center; width: 580px; height: 95px; padding: 10px 130px; border: 0px; background-image: url('../images/spiderback11.gif');}/* Images */img.hspace1 { padding: 0px 30px; border: 0px; margin: 7.5px 0px;}img.hspace2 { margin: 0px 10px; border: solid 2px; border-color: #00CC00;}img.Gye{ position: absolute; left: 80px; top: 10px; z-index: 1;}img.YeOhene{ position: absolute; left: 255px; top: 10px; z-index: 1;}img.Nti{ position: absolute; left: 440px; top: 10px; z-index: 1;}img.Ananse{ position: absolute; left: 635px; top: 10px; z-index: 1;}/* Miscellaneous */ul { font-size: small; font-family: African; font-weight: lighter; line-height: 12pt;}
  13. My website is at www.anansisweb.comAs you can see from my masthead, the images are in front of the text. The images have a z-index of 1. The h1 and h3 text have a z-index of 2. Why is this happening?Here is my style sheet:(I also have the issue of that missing graphic and I have no idea why it won't load on the page when it loads in another location, but I might figure that out.) /* CSS layout */body { margin: 0; padding: 0; border: 0; background-position: center center; background-image: url('../images/spiderback6.jpg'); background-repeat: repeat; background-attachment: scroll; font-family: African;}/* Site Typography */h1, h2, h3, h4, h5, h6 { font-family: African; margin-bottom: 10px; font-weight: lighter; text-align: center;}h1 { color: black; font-size: x-large; letter-spacing: 1px; z-index: 2;}h3.h3red { color: red; font-size: large; letter-spacing: 2px; padding: 3px; line-height: 14pt; z-index: 2; background-image:url('../images/spiderback11.gif')}h3.h3green { color: #00CC00; font-size: large; letter-spacing: 2px; padding: 3px; line-height: 14pt; z-index: 2; background-image:url('../images/spiderback11.gif')}}p { font-size: small; line-height: 14pt; font-weight: lighter; color: black; font-family: African;}/* Links */a:link { color: blue; font-weight: lighter; text-decoration: underline; line-height: 14pt; font-size: small;}a:visited { color: red; font-weight: lighter; text-decoration: underline; line-height: 14pt; font-size: small;}a:hover { text-decoration: underline; color: orange; font-size: small;}a:active { color: blue; font-weight: lighter; text-decoration: none; line-height: 14pt; font-size: small;}/* Site Divisions */#masthead { position: relative; top: 0px; margin-left: 60px; white-space: normal; vertical-align: middle; height: 125px; width: 800px; overflow: hidden; padding: 20px; border: 0; text-align: center; font-family: African; font-style: normal; text-indent: 0px; letter-spacing: 1.75px; background-position: center center; background-repeat: repeat; background-image: url('../images/spiderback11.gif')}#navmenu { position: relative; top: 0px; margin-left: 60px; text-align: center; height: 70px; width: 832px; vertical-align: middle; overflow: hidden; padding: 5px 0px; border: solid medium; border-color: red #00CC00; background-image: url('../images/spiderback11.gif');}#container { position: relative; top: 0px; margin-left: 60px; vertical-align: middle; float: none; padding: 15px; width: 810px; height: 400px; border: 0px; background-image: url('../images/spiderback11.gif')}#maincontent.shortwidth { overflow: scroll; vertical-align: middle; position: relative; float: left; width: 450px; height: 380px; background: #ffffff; border: none; padding: 10px;}#maincontent.longwidth { overflow: scroll; vertical-align: middle; position: relative; float: left; width: 800px; height: 380px; background: #ffffff; border: none; padding: 10px 0px;}#rightsidebar { overflow: scroll; vertical-align: middle; position: relative; float: right; width: 300px; height: 380px; background: #ffffff; border: none; padding: 10px; border: none;}#footer { position: relative; top: 0px; margin-left: 60px; overflow: auto; vertical-align: bottom; text-align: center; width: 580px; height: 95px; padding: 10px 130px; border: none; background-image: url('../images/spiderback11.gif');}/* Images */img.hspace1 { padding: 0px 30px; border: none; margin: 7.5px 0px;}img.hspace2 { margin: 0px 10px; border: solid 2px; border-color: #00CC00;}img.Gye{ position: absolute; left: 80px; top: 10px; z-index: 1;}img.YeOhene{ position: absolute; left: 255px; top: 10px; z-index: 1;}img.Nti{ position: absolute; left: 440px; top: 10px; z-index: 1;}img.Ananse{ position: absolute; left: 635px; top: 10px; z-index: 1;}/* Miscellaneous */ul { font-size: small; font-family: African; font-weight: lighter; line-height: 12pt;}
  14. I resolved this by adding a <span> tag before the caption text, inserting an embedded style with wide left/right margins and placing this code below the images. img.hspace1 { padding: 0px 30px; border: none; margin: 7.5px 0px;}.caption { margin: 0px 20px; color: #00CC00; font-size: small; font-weight: lighter;}<div id="navmenu" style="visibility: visible"><a href="xxx.htm"><img class="hspace1" src="image1.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image2.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image3.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image4.gif" /></a><a href="xxx.htm"><img class="hspace1" src="image5.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image6.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image7.gif"/></a><span class="caption">TextA</span><span class="caption">TextB</span><span class="caption">TextC</span><span class="caption">TextD</span><span class="caption">TextE</span><span class="caption">TextF</span><span class="caption">TextG</span></div>
  15. For this design, I have been avoiding using tables by using <div> On my first design, I did use tables and my site was not cross-browser compatible. Now all of my images are in a <div>According to the developers at the Microsoft Expression Web Designer forum, if I decide to use <div>, then I should be consistent and use <div> all the way through the site.So, I am rather confused. When is it best to use tables and when is it best to use <div>? Is it good practice to mix the two and put a table inside a <div>?
×
×
  • Create New...