PDA

View Full Version : Hi, first time caller with first time css site questions!


forumhound
11-27-2007, 01:27 PM
Hi, this looks like a great place to get help, so here goes: I am starting to build my first pure css site and the design goal is to be fast, simple, and to raise money for an NGO. Here is what I have so far:

animalnepal.org/New (http://www.animalnepal.org/New)

I am using Dreamweaver Cs3 on a mac with BBedit when needed. I have tested the design with Firefox, Opera, Safari, and IE6. Here are my questions:

1) The rollovers work in all browsers but IE6. Can someone check in IE7? Arg, just noticed i messed something up in the last update, but the effect still stands, they don't show up in IE and never did.

2) There is a one pixel border around the page contents in all browsers except in IE6, where a 2 pixel border appears on the right. Huh? Can i get rid of all the white border?

3) I would like to know if it's possible to create a rotating slide show from the pics in the right-hand column. The editable regions will be the left column only. I don't want to use flash, unless it's a very fast applet, as the readers of this site are mostly going to be sitting in a cybershop on dialup. Okay, maybe it's not that bad, but broadband here in Nepal is 64k max. Anyway, I am looking for a script that will go to a directory and just randomly put pictures in that area on the right.

4) Anyone know off the top of their head how to make the right column float so that it stays in front of the viewer as they scroll down (and down, and down). I've seen it done on other sites, but no idea on how to it. These pages will tend to get pretty long and it would nice to keep the navigation in view...

5) which leads to this question: i was thinking of just having the right column be the navbar, and not clutter up the page with any other navigation (exception being the footer). Is that a good idea or not?

Okay, just one more bugaboo with Dreamweaver itself. Here is a pic of a validated document in DW and the results in a browser. I can't get a border no matter what I do there. The border appears in the DW viewport, but not in any browser that I own. Arg...

http://www.extreme-nepal.com/forumboards/screen-capture-5.png

Well, thanks!!!

domedia
11-27-2007, 02:58 PM
Hi forumhound and welcome to the forums!

1) The rollovers work in all browsers but IE6. Can someone check in IE7? Arg, just noticed i messed something up in the last update, but the effect still stands, they don't show up in IE and never did. :hover only works on anchor tags (links) in IE6

2) There is a one pixel border around the page contents in all browsers except in IE6, where a 2 pixel border appears on the right. Huh? Can i get rid of all the white border? In my IE6/WinXP there was only a 1 px border

3) I would like to know if it's possible to create a rotating slide show from the pics in the right-hand column. The editable regions will be the left column only. I don't want to use flash, unless it's a very fast applet, as the readers of this site are mostly going to be sitting in a cybershop on dialup. Okay, maybe it's not that bad, but broadband here in Nepal is 64k max. Anyway, I am looking for a script that will go to a directory and just randomly put pictures in that area on the right.
You can do this with flash/javascript/gif. The technology you choose is not going to increase download speed significantly, but the amount and size of images will decide the time it takes to download.

4) Anyone know off the top of their head how to make the right column float so that it stays in front of the viewer as they scroll down (and down, and down). I've seen it done on other sites, but no idea on how to it. These pages will tend to get pretty long and it would nice to keep the navigation in view...
You can try this, but I don't see the benefit.. You'd like people to see the content in that column, but by disabling it to scroll, you can never see the full column
#linkList {style.css (line 144)
margin-left:550px;
position:fixed;
top:368px;
width:145px;
}

15) which leads to this question: i was thinking of just having the right column be the navbar, and not clutter up the page with any other navigation (exception being the footer). Is that a good idea or not? Yes, I think so.

Okay, just one more bugaboo with Dreamweaver itself. Here is a pic of a validated document in DW and the results in a browser. I can't get a border no matter what I do there. The border appears in the DW viewport, but not in any browser that I own. Arg...
You're adding the border to an empty H1 with a ton of style to it.. not sure exactly why it doesn't show up but I can think of many reasons why. Add the style to the #pageHeader instead.

forumhound
11-27-2007, 04:01 PM
Thanks so much for the great input!

On #1, so it works in IE7? Dont have here yet.

On #2, must be my bootcamp install then. I won't worry. But why is there a border at all?

On #3, the trick is that I can't use a page-dependent technology like animated gif, as the column is meant to be a locked area in a DW template. So I just want to find some script to put in the template that says: on every page refresh, change the graphics using this image directory. Not sure if that's possible. I am not a coder.

On #4, okay then, forget that idea. but thanks for that bit of code.

On #5, huh? What am I doing? here is the code:
<div id="pageHeader">
<h1>FAQs</h1>
<h2></h2>
</div>
The home page is empty, but all other pages have this H1 that just overlays the page title text over the graphic included by pageHeader:
/* pageHeader heading image replacement */
#pageHeader {
background: url(header.jpg) no-repeat top center;
width: 700px;
height: 318px;
margin: 0;
padding: 0;
}
#pageHeader h1 {
margin: 0;
}
So I can't mess with that, right? Funny, Dreamweaver does what I want with it, it just won't render. Or do you mean add the style to #pageHeader h1 {

Well, thanks again!!!

domedia
11-27-2007, 07:15 PM
Top Border:
To make a top border, add the border to your top element, instead of the H1. I've added one extra CSS rule to your #pageHeader:
#pageHeader {
background: url(header.jpg) no-repeat top center;
width: 700px;
height: 318px;
margin: 0;
padding: 0;
border-top: 5px solid white;
}

Change Background color:
IE7 will change the background color of your column, but it looks kinda weird :)

For the rotating image: Can you explain how this should work? I don't think using a DW template changse anything. A random image for each page?

forumhound
11-27-2007, 09:20 PM
Hi there. I guess I am confusing u on the H1 thing. See this page:
http://www.animalnepal.org/New/currentprojects.htm
I am just trying to move, for example, the text "Projects" to the left 20 pixels or so (see original screen shot). In dreamweaver it is placed correctly - or maybe that's just a fluke!

On the rotating images, I have put in some sample javascript to demonstrate what I am trying to do in the bottom right column. I want to rotate thru this org's large pic galleryin those pic areas. Random is fine. But as you can see in my javascript ya have to define each pic to be rotated. I don't think i want to do that, as it would take a lot of time (I think) to hardcode all the image names into the template. Then they may add some new ones to the image lib! Plus, this code does not seem to be compliant with my DTD, as it won't validate. So have u seen anything like that in javascript - goes to a directory picks up a new random image and is compliant? I saw something on the web in php, but i barely know what that is, and not sure if my hoster has that.

Well, I am almost there!!! Thanks so much for taking the time to help.

tux
11-27-2007, 09:33 PM
With regards to your "Rotating Image", do you mean you want a different image displayed each time the page loads or is refreshed?

If so you could use Sreven Jones' - 'Move to random record' Extension. You can get it here.....

http://www.dmxzone.com/showDetail.asp?TypeId=3&NewsId=3705

and see an example here....

http://www.focus-rydeimaginggroup.co.uk/gallery.asp

A new image is used each time the page loads.

Hope this helps, regards

Paul

Cary
11-28-2007, 02:33 AM
Hi there. I guess I am confusing u on the H1 thing...I am just trying to move, for example, the text "Projects" to the left 20 pixels or so (see original screen shot)...

You want to use padding or margin for that sort of thing. Borders are something else. Your CSS was giving the border thickness, but as you can see from Domedia's post where he added border-top, you also need to include the color of the border as well as its style (solid, dotted, etc.), otherwise browsers will ignore the border entirely. Apparently, DW CS3 tries to make what little sense it can from the incomplete styling.

forumhound
11-28-2007, 04:45 AM
With regards to your "Rotating Image", do you mean you want a different image displayed each time the page loads or is refreshed?

If so you could use Sreven Jones' - 'Move to random record' Extension. You can get it here.....

http://www.dmxzone.com/showDetail.asp?TypeId=3&NewsId=3705

and see an example here....

http://www.focus-rydeimaginggroup.co.uk/gallery.asp

A new image is used each time the page loads.

Hope this helps, regards

Paul

that one looks grand, but i don't think we have an .asp server here to use. do u think there is something like that in JS on the client side? thx.

forumhound
11-28-2007, 04:47 AM
You want to use padding or margin for that sort of thing. Borders are something else. Your CSS was giving the border thickness, but as you can see from Domedia's post where he added border-top, you also need to include the color of the border as well as its style (solid, dotted, etc.), otherwise browsers will ignore the border entirely. Apparently, DW CS3 tries to make what little sense it can from the incomplete styling.

Cary, thanks, got it. I guess DW was just trying to be helpful to this dumb user:roll:

domedia
11-28-2007, 01:46 PM
that one looks grand, but i don't think we have an .asp server here to use. do u think there is something like that in JS on the client side? thx.
http://www.google.com/search?q=dreamweaver+random+image

forumhound
11-28-2007, 06:01 PM
http://www.google.com/search?q=dreamweaver+random+image

ha lol. before i go thru all 1 million seventy hits, is there a recommendation. This page displays the first search page in action (top 2 hits):
http://www.animalnepal.org/New/test.htm

The rotator script on the right column works, but is pretty basic. ya have to hardcode in all the image names/locations.

The rotator in the top left column is actually a DM extension that's really cool, only if it did not have so many bugs! even in the demo, it does not look like the author had any width/height constraints working. but at least with that script you can specify a dir of images for a random slideshow. I guess I will go with that one and resize all the images the same to prevent the behavior u see on the test page (pushing of format up and down).

But what i would REALLY like is a script that 1) handled odd sized images well 2) had transition(s) and 3) handled a directory of images vs. just automatic generation of hardcoded names inside the script - so user could just ftp new images and not have to change page script. Am I am asking too much? oh, and one more thing, WC3 compliance.

Thanks!

http://www.animalnepal.org/New/test.htm

domedia
11-28-2007, 07:54 PM
Am I am asking too much? oh, and one more thing, WC3 compliance. :) Considered I have not had the need for this kind of functionality, yes. I'm not going to research this for you, I just gave you a pointer to a Google search as a starting point ;-)

Actually it sounds like you need a custom solution (customized to your needs), so I would look into learning Javascript or hire someone to write it for you.

davidj
11-28-2007, 09:11 PM
ching ching $$$$

domedia
11-28-2007, 09:19 PM
ching ching $$$$ For a programmer/scripter maybe, not for me :-/ My help is free 8)

forumhound
11-30-2007, 11:43 AM
For a programmer/scripter maybe, not for me :-/ My help is free 8)

great dom, i'll take a bit more of that then. I decided to go with the Kaosweaver image changer despite the fact that i have to hardcode the filenames into the page template. now i only have 2 more issues for this site shell and then i will be happy (maybe).

ISSUE #1
i need a a dynamic text rotator! the one from kaosweaver states "works with a modern DOM-enabled browser." I guess IE6 and latest opera don't qualify, as the script bombs in those browsers. all i want to do is rotate a set of pre-selected quotations on the page evertime it's changed/refreshed. see:
test page with quotation rotator but only for FF and Safari, please test in IE7? Quotes are in blue, 2nd para, left column. (http://www.animalnepal.org/New/test.htm)
Also this script has a bug that makes it really hard to enter a quote character. And then of course it's a client side solution that requires a regen of the script and all pages to add a new quotation.

ISSUE #2
There is a 5 or so pixel border on the bottom of every page only in FF and Safari. In IE6 the page displays in that regard correctly (what a shock). Hmmmm....

Well, cha-ching! Rest in knowing that you are helping the starving street animals of Nepal.

Cheers!

domedia
11-30-2007, 02:30 PM
#1
IE6 and plenty other browsers are using the DOM, so you can use the kaosweaver extension. Do they have some kind of support for their stuff?

#2
All your paragraphs have margin you've set:
p {
margin:0 0 10px;
text-align:justify;
}

This gets added to your <p class="credits"> on bottom of the page.
To remove the bottom margin from this bottom paragraph, add a bottom margin CSS property of 0:
.credits {
font-size:9px;
font-style:italic;
letter-spacing:2px;
padding-bottom:6px;
padding-left:12%;
padding-top:6px;
margin-bottom:0;
}

forumhound
11-30-2007, 02:53 PM
#1
IE6 and plenty other browsers are using the DOM, so you can use the kaosweaver extension. Do they have some kind of support for their stuff?

no support forum that I can find for a free user, and the author has not responded to my questions as of yet. But that extension does not work with IE or Opera, but works with FF and Safari, so something is off.
#2
All your paragraphs have margin you've set:
p {
margin:0 0 10px;
text-align:justify;
}
This gets added to your <p class="credits"> on bottom of the page.
To remove the bottom margin from this bottom paragraph, add a bottom margin CSS property of 0:
.credits {
font-size:9px;
font-style:italic;
letter-spacing:2px;
padding-bottom:6px;
padding-left:12%;
padding-top:6px;
margin-bottom:0;
}
u rock. i am still getting my tablepeas brain around this new coding... cheers!