joannew
DNN Creative Magazine Subscriber
Nuke Ace
Posts:58
 |
| 28 Jun 2006 11:36 AM |
|
Hi Lee,
I'm currently working on a new ddn website and trying to implement tableless css skinning and your recommendations for HouseMenu etc. Your magazine is really helpful and a great resource.
Although I'm learning alot going through this process I seem to have now got myself to a stage where I'm unsure of what to do next or whether i'm going the right way about it at all? I'm currently working on a test page at http://www.rainfordtest.com/TestMenu/tabid/280/Default.aspx (please ignore the rest of the site as it broke when i changed doc type)
The image on the page is the basic layout effect I'm trying to achieve. I'm trying to place a div which is set to transparent underneath the div which holds the content - the main content area kind of works in firefox but stops short in ie?
Also the left menu in firefox has got bullets which i carn't seem to be able to move?
I'd be really greateful for any help or pointers you may be able to give me.
Thanks very much |
|
|
|
|
youngboy
Nuke Ace
Posts:50
|
| 28 Jun 2006 11:51 AM |
|
Lee can answer your question better than I can since your trying to dupe one of his styles, but you might want to try and use this as oppossed to transparency.
http://www.w3schools.com/css/pr_pos_z-index.asp
Remeber that people coming to your site don't always use uplevel browsers. Some of the CSS 2.0 specs are not supported in all browsers. |
|
|
|
|
joannew
DNN Creative Magazine Subscriber
Nuke Ace
Posts:58
|
| 28 Jun 2006 1:56 PM |
|
| thanks for the reply: you think I should be careful using transparency then, I'll try and find another work around. |
|
|
|
|
youngboy
Nuke Ace
Posts:50
|
| 28 Jun 2006 2:43 PM |
|
If you do enough web sites you'll quickly find that while you would love to have browsers display what you want they are only going to display what they have been programmed to do.
Even simple things like the choice of a font can be aggravating.
I was just trying to suggest another way of possibly doing what you need using a different CSS setting. The solution to your problem might be a combination of both.
Lee is located in the UK and there is a time diff. Plus he has a life too.. ROFL.. so sometimes he can't answer as fast as everyone likes. I was just trying to give you an alternative suggestion. Like I said in my previous post, it really is Lee's style your trying to use so he can better tell you what to change. I just know when I'm programming I want a answer, any answer, that I can try in the meantime.
If you want to have something appear on top of something. Try this. Set you bottom piece on a z-index on lets say 1 to make it easy. Set the piece that you want on top to a z-index of 2 and a background color of transparent. you might have to set some other CSS settings to get the exact effect but that should be close.
You might want to check this out:
http://www.dnncreative.com/Forum/tabid/88/forumid/12/postid/705/view/topic/Default.aspx
There is a free CSS editor in the batch that I highly recommend. It's free with no adware/spyware. You can quickly change your style sheet. You can then play around with various settings to see the effect. Google the CSS names if you don't know what each one does.
Good Luck. |
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3375
|
| 28 Jun 2006 2:55 PM |
|
hello, sorry for the delayed response, I'm working flat out editing videos at the moment for the next issue! -
OK, here we go... nice design, it looks like a good challenge!
transparency: I would always try to avoid it as youngboy says, it is not browser compatible at the moment. - The technique that designers use at the moment is to 'pretend'.
Basically you create your full transparent image with the various layers as one image rather than layer up the images in your design. - This way you just place the complete image as a background image behind your container.
The most important tip I can give you is to get hold of the web developers toolbar for Firefox and use the edit CSS function. This allows you to edit the CSS live without affecting the orginal CSS, allowing you to experiment with the CSS, for example the bullets in the menu.
FireFox web developers Toolbar
Looking at the CSS & source I've noticed that you need to remove the links to the stylesheets within your skin and containers, they are showing up all through the body section of your source code.
This will remove the bullets:
#HouseMenuLeftNav {
list-style: none;
width: 172px;
height: 100%;
font-family: Verdana, sans-serif;
font-size: 12pt;
line-height: 22px;
padding-top:5px;}
#HouseMenuLeftNav ul {list-style: none;
margin: 0;
padding: 0;}
#HouseMenuLeftNav li
{
list-style: none;
}
#HouseMenuLeftNav li a:link, #HouseMenuLeftNav li a:visited {
display: inline;
padding: 5px 5px 5px 0.5em;
border-left: 0px solid #eae6df;
color: #FFFFFF;
text-decoration: none;
list-style: none;
}
#HouseMenuLeftNav li a:hover {
display: inline;
color: #A741F7;
}
You had set it up to use list-style-type: none;
and it's list-style: none;
I also added in
#HouseMenuLeftNav li
{
list-style: none;
}
to make it compatible with the opera browser. (These settings are on the red leaf skin)
Another tip you may find is for centering the skin - in firefox the skin is aligned to the left, in IE it is in the center.
I've recently been putting together a new site that is fixed width and centered like your skin (it's not online I'm afraid) but this is the code I used to center it:
#wrap
{ /* centre the design */
width: 760px;
position: relative;
left: 50%;
margin-left: -380px;
}
You may also be interested to check out the videos that are coming out in issue 11 covering sIFR, basically it will allow you to replace your header images with flash that replaces text in any font you require, you can check out a demo of this here:
http://skins.dnncreative.com/sifr/Home/tabid/68/Default.aspx
It will be released if everything goes according to plan on Monday 3rd. Hope this helps, thanks, |
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/leesykes
 |
|
|
joannew
DNN Creative Magazine Subscriber
Nuke Ace
Posts:58
|
| 28 Jun 2006 3:07 PM |
|
thanks very much for both of your help and quick responses.
Youngboy,
I did manage to get the main content area div on top of a white transparent div by using the z-index. The problem is getting the background to scale with the main content area. In firefox it doesn't seem to be a problem but in IE it stops halfway before the content area finishes?
#rightcontainer .maincontent {
z-index:2;
position: relative;
padding-left: 18px;
padding-right: 14px;
background-color:transparent;
}
#rightcontainer #containerbackground {
position: absolute;
top:80px;
width: 530px;
height: 100%;
z-index:1;
background-color: #FFFFFF;
filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;
}
anyway, I was just writing the above when Lee replied!
Its good to get confirmation on whether to use transparency from both of you, I wasn't sure whether to use it or not.
So now I'm just going to work through your helpful pointers/tips Lee and see how fakin it goes!
thanks again, cheers... |
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3375
|
|
youngboy
Nuke Ace
Posts:50
|
| 28 Jun 2006 4:31 PM |
|
| Try adjusting your background height to auto |
|
|
|
|
joannew
DNN Creative Magazine Subscriber
Nuke Ace
Posts:58
|
| 16 Jul 2006 2:29 PM |
|
Hi Lee and youngboy,
Following on from the above a few weeks ago and just to let you know how I got on...
I took your advice about 'pretending' instead of using CSS transparency and now how a site which looks like this www.rainfordtest.com
I think it runs quite slowly and so would like your advice on this as I'm thinking its probably to do with the way I have put it together or applyed the skins. At the moment there are 3 main images which make up the skin.
1. header (774 x 652 25kb jpg) 2. expander (774 x 1 gif) 3. footer (774 x 230 gif)
All the main CSS is in my default.css and then for each main section a different skin is applyed which changes the header image.
|
|
|
|
|
joannew
DNN Creative Magazine Subscriber
Nuke Ace
Posts:58
|
| 16 Jul 2006 2:32 PM |
|
Also there is a left container and a right container applyed to each page.
My next step was to chop up the header into two as its just the photo that changes or I could chop it up into smaller 1pixel pieces but wondered if this was good practice now? CSS Zen Garden say that 40k image in a css file is an okay thing to do?
What do you think? I would be grateful for any help!
Cheers! |
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3375
|
| 17 Jul 2006 4:23 AM |
|
Hello,
Image sizes in CSS is an interesting question. - Basically you need to ensure that all of your images are as compressed as possible. - But, a new practise is emerging that you do tend to see in CSS Zen Garden where they place one large well designed image at the top of the page - some of them are up to 70k. - This is fine if it is called within the CSS as the text displays first so the visitor can begin reading the page before the image is loaded. - With this technique though they tend to just use the same header for all pages which means that for the inital load there is a delay in viewing the image, but for all further pages the image is already cached so the page loads much quicker. - In your case you are changing the header each time, so you are experiencing a delay each time.
As always I would try to compress the images as much as possible.
I wouldn't chop the image into 1pixel pieces unless you can use techniques where you take an image and repeat it horizontally or vertically.
The main slowness for the site was the very first page load of the site - and that is due to the site not being in your hosting servers memory. - It can take up to 17secs for a server to load a DNN site if it is not in its memory - plus the time for the page to load. - A DNN site stays in the servers memory by being regularly visited.
For instance with the host from DNN Creative, if I do not receive 1 visitor every 10-15mins the site is taken out of the memory until the site receives another visitor. - This is to save server resources.
You can get around this by regularly pinging your website every 10mins, so it will appear as though you are receiving a visitor every 10 mins and your website will now respond much quicker when you first visit the page.
To set this up go to http://host-tracker.com/
it's a free service which monitors your website for you and informs you if your site goes down. - You can set the time period that it checks your site.
Another thing to check is the display in Firefox - the bottom half of the news background does not display and is in a purple colour.
Thanks, |
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/leesykes
|
|
|
joannew
DNN Creative Magazine Subscriber
Nuke Ace
Posts:58
|
| 17 Jul 2006 5:18 AM |
|
Thanks for getting back to me Lee,
I'm just setting up host-tracker now, whats the best http method to use? head, post, get?
Do you put their code in an admin page?
Thanks for your help,
Cheers...
|
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3375
|
|