gffects

May 30, 2012

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

May 25, 2012

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

May 22, 2012

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 ?

May 22, 2012

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:

May 11, 2012

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

May 11, 2012

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.

May 11, 2012

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:

<ul>

<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>

</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

May 11, 2012

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.

May 11, 2012

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.

May 11, 2012

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

May 10, 2012

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.

May 10, 2012

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.

May 10, 2012

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.

May 10, 2012

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.

May 10, 2012

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

May 10, 2012

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.

May 10, 2012

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:

</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.

April 25, 2012

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.

April 22, 2012

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

April 22, 2012

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.

April 16, 2012

Excelent thank you sometimes I make silly mistakes so the comma means and no coma is child of it's parent i'll rember it now

April 16, 2012

Ok been given a new website todo from my college and its quite a simple site to make although Ive come into a problem near the begining of the building.

As far as i know when you display a <li> as inline it sits side by side and if you set it to display as block it sits on top of each other.

now I am trying to code the navigation on the top of the site as block(left standard) and the footer as inline although when I use the code footer_navigation,li{display :inline;}.

it effects both list even though it should be only the child <li> to its parent footer_navigation

I will post the full css code below I sure theres a simple fix to the problem thanks in advance.

@charset "utf-8";

/* CSS Document */

/* Master function */

*{margin:0; padding:0;}

/* Text formating */

p{font-size:1em; padding:10px;}

a{}

h1{ font-size: 2.5em; padding:10px;}

h2{ font-size: 1.5em; padding:15px;}

h3{ font-size: 1.5em; padding:10px;}

h4{ font-size: 1.2em; padding:10px;}

h5{ font-size: 1em; padding:5px;}

ul{ font-size:1em; list-style:none; text-decoration:none;}

/* Main layout */

body{}

#wrapper{ width:1000px; margin:0px auto; padding:20px; background:#060;}

#header{ width:1000px; margin:5px auto; padding:5px; background:#039;}

#content{ width:1000px; margin:5px auto; padding:5px; background:#9C0;}

#footer{width:1000px; margin:5px auto; padding:5px; background:#666;}

/* Elements within main layout */

#banner{width:650px; height:200px; background:#0FF;}

#navigation{ width:350px; height:200px; background:#F0F; float:right;}

#navigation,li{display:block;}

#navigation_animation{ width:350; height:200px; background:#F00; float:right;}

#introduction_animation{ width:920px; height:500px background:#966;}

#pdf{}

#table{}

#footer_navigation{}

#footer_navigation a {}

#footer_navigation a:hover{}

#footer_navigation, ul {}

#footer_navigation,li {display:inline;}

April 4, 2012

I only showed it to make life easier for some people the code isn't difficult to learn once you have used it once or twice it's not a bad thing

April 4, 2012

Ok ecept for adding correwct spelling and what not both the hompage and the portfoliopages have passed the html markup validation should i do the same for the css validator or is that not as important.

I originally made everything to fit 1000 px but now it all at 944px just to fit in with the grpahics im ok with that.

Next page is the contact page proberbly the hardest one as well any tips on making a good one haven't gone into great detail with them at colege yet.

April 4, 2012

Awsome nice find

Ok I have fixed the resoloution as far as i can see ment removing the logo from the top nav though.

although for some reason I can not find the reason for the horizontal scrolling only happens on firfox workes ok in IE and i'll rember to change my own resoloution during design from now on that way this problem won't happen again. Liv and learn.

Sign In

Profiles

Forums

Events

Downloads

Gallery

Store

Posts posted by gffects