gffects

sorry takeing a while was trying to figure out comment boxes lol i'm on a pc mate not sure why its happening unless it just not fully intergrated yet.

It seems to work on my chrome and safari fine the active stae stays on the page and moves when hovered and click on another page.

without coming across as a hater I personally think transitions on a navbar lowers the quality of a site unless its a simple color fade thats not too slow, but kinda cool though.

I'm no expert but having been doing webdesign for 2 years and this is based just on the landing page as the site is massive. Not keen on the colour scheme it doesn't really say cars whereas maybe something darker with a chrome text look, the content is great and the mascot is cool but again hes not really car realated just a cute dog with a nova tag:P. I wouldn't have the get a quote at the very top either personally I like to see exactly what your site does the second I look at it so maybe have the slide fill the top then have the quote somewhere else also maybe chnage the font. Other than that I quite like the site. hope this might help

the problem is that any IE less than 9 will not recognise the @ media code is there a way around it?

Haha I knew it would be something simple forgot to add my resets to the css although the next prob is IE doesn't work with it ?

Hey people no idea what it is with me and navigations but the hate me lol. Ok heres the thing I am going to competing in the worldskills uk on june the 1st and I plan on winning with this design, the site consists of 3 parts pc screen,ipad screen and phone screen using the @media code now i have managed everything so far except when the page is set to phone size the nav bar has got a margin from the left so its not fitting the entire screen as I want it. Im sure theres an easy mistake somewhere as usual but your help would be awesome can't work it out. heres the css: @charset "utf-8"; /* CSS Document */ li{display:inline;list-style:none;} body{width:auto;padding:10px;} #wrapper{position:relative;max-width:1000px; margin:0px auto;background:#252525;} #header{position:relative;height:175px;background:#009;} #logo{width:180px;height:105px;position:absolute;top:45px; left:45px;background:#0F3;display:block} #content{padding:20px;background:#333;overflow:hidden;} #content_container_left{width:70%;float:left;background:#930;} #content_container_right{width:30%;float:left;background:#9C0;} #advert{background:#099;height:175px;} #caption{background:#666;} #navigation{ position: absolute; top: 77px; right: 20px; text-align: right;background:#F66;} #navigation a{padding: 7px 20px 7px 20px;text-decoration: none;} #footer{height:75px;background:#966;} @media screen and (min-width: 150px) and (max-width: 500px) { #header{height:50px;} #logo{top:3px;left:25px;height:38px;width:127px;} #content_container_left{width:inherit;float:none;} #content_container_right{width:inherit;float:none;} #navigation{position:inherit;width:100%;display:block;padding: 15px 0px 1px 0px;text-align: left;} #navigation a{padding: 7px 10px 7px 10px;display: block;margin: 10px auto;;background:#CCC;} #advert{height:100px;}} @media screen and (min-width: 501px) and (max-width: 800px) { #header{height:90px;} #logo{top:20px;left:25px;width:90px;height:55px;} #navigation{top:30px;} #advert{height:150px} } and a screenie of the problem:

finaly managed it that was lot more difficult than the tus showed and that you guys explained. I went with what was said about doing it as individual buttons so had to redesign the whole thing again, then came the problems of slicing 1 pixl off and it goes wrong so that too a while but thanks thats it done on the navbar just need to do it for the rest of my buttons tommorow and the speed of the site will be much better thanks again

The tutorial I followed was using the whole navigation image to do it thats why there are no individual images. navbar this is the image I am using. and the rollover does work its just not moving to the correct poistion of the image and sits in the wrong place during rollover. but i can make the individual images aswell to c if it works but will take a bit of time.

Hey guys this is a secondary pots to the previous one but highlight the problem with me trying to do the navigation with sprites. ok heres the code: html: <div id="navigation"> <ul> <li id="home" ><a href="#" title="Click to visit Hompage"><span>Home</span></a></li> <li id="portfolio" ><a href="#" title="Click to visit Portfolio"><span>Portfolio</span></a></li> <li id="contact" ><a href="#" title="Click to visit Contact"><span>Contact</span></a></li> <li id="about"><a href="#" title="Click to visit About"><span>About</span></a></li> <li id="testimonials"><a href="#" title="Click to visit Testimonials"><span>Testimonials</span></a></li> <li id="services"><a href="#" title="Click to visit Services"><span>Services</span></a></li> <li id="blog"><a href="#" title="Click to visit Blog"><span>Blog</span></a></li> <li id="rss"><a href="#" title="Click to visit RSS"><span>RSS</span></a></li> </ul></div> and the css: #navigation{width:1024px;height:50px;margin:0px;padding:0px;background-image:url(images/bg_navbar.gif);} #navigation a{display:block;height:50px;} #navigation a:hover{background-image:url(images/bg_navbar.gif);} #navigation li{margin:0px;padding:0px;display:inline;list-style-type:none;height:50px;text-align:center;float:left;} #home{width:109px;} #home:hover{background-position:0px bottom;} #portfolio{width:136;} #portfolio:hover{background-position:109px bottom;} #contact{width:132px;} #contact:hover{background-position:-245px bottom;} #about{width:124px;} #about:hover{background-position:-377px bottom;} #testimonials{width:174px;} #testimonials:hover{background-position:-501px bottom;} #services{width:134px;} #services:hover{background-position:-675px bottom;} #blog{width:109px;} #blog:hover{background-position:-809px bottom;} #rss{width:111px;} #rss:hover{background-position:-918px bottom;} span{display:none;} this should work I followed an online tut to the exact letter but when I roll over it doesnt disply the right part of the sprite image not to mention its in the wrong place on the site aswell. can anyone spot where I have gone wrong? thanks

Ok never heard of sprites other than tiny images so this is new to mee but I will give it a good read and put it into action thanks very much I will let you know how it goes.

Hey all I finally finished my homepage and it meets the w3c html and css recomendations but I am noticing a glitch. When I first load the page when i go to an image that is a link with a roll over when I go to use the link both images completly disapeer for a second then when i hover agin it works what could the reason be for this. I have use the images in css not html so that could be the cause or it could be the server being slow to load, I am with ipage hosting, could also be the sizes of the image but there only 50kb so that shouldn't be much of problem. The website I am discussing is in my signiture your help would be greatly appreciated.

Welcome always here to help out when not asking for it myself

Yeh well I trying to avoid trouble as my site is an ecommerce site and im using this forum for help with code not to advertise i have facebook for that haha. I ill try it out.

I'm still learning the dos and don't of coding even when things work W3c says no and you get that gutted feeling from it. By the way when are we allowed to add our site to the signiture don't want to go against terms and condistions.

Having you said that You answered my question, it was a general question that did not need the showing of the code by making the divs relative and giving them a z- index it works fine now thank andrea.

Hey people another little problem I am having. I have made a banner animation and added it to my page although the html link that i placed to be on top of it and now hides behind it is there anyway to quick fix this or do I need to make the button on flash also.

Excelent it works great thank you very much I had to make them as blocks for them to show but it works fantatic thanks very very much eddie

so use them in exactly the same way as the divs? just span then change the css to the span ids thanks i'll do that and test it again.

Hi there I was trying to make a new kind of navigation and this time i made my ul and li have a div inside of the anchor tag and it works great but according to w3c this is not allowed is there anyway to bypass this. the code is as follows: <div id="navigation"><ul> <li><a href="#"><div id="home"></div></a></li> <li><a href="#"><div id="portfolio"></div></a></li> <li><a href="#"><div id="contact"></div></a></li> <li><a href="#"><div id="about"></div></a></li> <li><a href="#"><div id="testimonials"></div></a></li> <li><a href="#"><div id="services"></div></a></li> <li><a href="#"><div id="blog"></div></a></li> <li><a href="#"><div id="rss"></div></a></li> </ul></div> The reason I tried to do it this way was that I could use the divs image as the buttons so I could make it look like whatever I please without too much coding involved. Perhaps if its was the button tag insted of a div tag it may work any advice would be greatly appreciated.

I'm still a learner but had 2 years experience with DW and I also agree your much better to learn the code yourself as this makes your code smaller and more effective although DW has some perks to it but all it's premade templates etc are poor code nd you can't edit it propperly if you don't understand what DW is doing.

This might help you out http://thenewboston.org/list.php?cat=21

Hey guys i'm trying something new with a navigation and having some problems. Ok the idea was to have an <ul> underneath a flash animation but still allow it to be clickable. now i have made the flash navigation and put it on top of ul put can't figur out how to be able to make the ul clickable as the the animation covers the links. any ideas on how to fix this ? thanks in advanced.