2 website issues

[tony84]

Hi,

Ive been working on my website (i know its still a bit pants but i will improve it once i get everything working etc).

Anyway...
First issue, the slider i cant find where to get rid of next/previous and the 123 underneath the images.

Second issue, on the right hand side i want it to be white and i cant work out how to do it.

Thanks in advance for any pointers.

 

[123Simples]

Tony - you must have missed some images that you needed to upload - that is why you are seeing the text Prev and Next, and 123
Re-read the page here: http://www.basic-slider.com/

 

[Alan]

OK,

I assume you are building your own website for the educational purpose and not because it is important to your business.

Regarding the slider, take a look at the documentation http://www.basic-slider.com/
and try
showcontrols : false,
showmarkers : false,

as options for the javascript that invokes it

BTW regarding sliders - take a look at this http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/ which states that testing shows sliders damage conversions. Basically sliders are something website owners want - but not website users.

Regarding your sidebar issue, you really need to wrap your 'content' div and 'rightcolumn' div in some inner-wrapper div, then you can control the background of both and float right the right column etc.

 

[tony84]

OK,

I assume you are building your own website for the educational purpose and not because it is important to your business.

Regarding the slider, take a look at the documentation http://www.basic-slider.com/
and try
showcontrols : false,
showmarkers : false,

as options for the javascript that invokes it

The first bit is a little condescending isnt it? I actually did web design/programming at college admittedly it was about 10 years ago and i have rarely used it since. I am capable of doing the majority of it im just not as proficient at it as a professional.

As for the rest of the design, i have a designer working on it, we have the basic outline that we are working to and i will make amendments when it is finished - im doing it in stages as i know im not the fastest coder in the world, so if i make a start on it now then im not trying to do it all last minute.

With regards to the javascript bit, thats the bit that i am looking for and have found but even removing the next/previous text it still displays?

 

[fisicx]

Sliders are ineffective. People don't hang around long enough to see the slides which makes them pointless

A static image with a tagline is far better.

Remember the days when people had little chains of stars folling their pointer. Looked pretty but was totally useless.

 

[wykthorr]

In order to make the right portion of the page have a white background you'll need to wrap the two divs:"content" and "rightcolumn" in another div and set its background to white.

Also just before the ending tag of the wrapper you'll need to add something like <div style="clear:both"></div> so that you force the wrapper to cover that area as the two elements contained both have float:left set.

Regarding the slider you'll need to replace:

$('#banner-slide').bjqs({
animtype : 'slide',
height : 320,
width : 620,
responsive : true,
randomstart : true
});

with:

$('#banner-slide').bjqs({
animtype : 'slide',
height : 320,
width : 620,
responsive : true,
randomstart : true,
showcontrols : false,
showmarkers : true
});

That should solve the issue.

 

[FIZIX Agency]

Sliders, at least in the sense of the ones that sit flipping through what are basically offers, different messages or pretty pictures are useless.

Presenting information across "slides" that the user instigates isn't quite the same provided it's real information; or creating information that is interactive in some way; but most lack imagination if I am honest.

If it's basically an offer than again I would call it bad.

An offer should be a clear, static thing, information can be spread across slides (like a carousel) but it should never, ever be automatic. EVER.

 

[tony84]

The slider i find breaks the page up. If it is just text people can lose focus. The slider as it stands at the minute is useless im aware of that.

My aim is to get the page looking about right, i will then tidy it all up and have it looking more professional before i launch it properly.

 

[fisicx]

Then just use a static image with a tagline.

And make the site background WHITE

 

[Alan]

The first bit is a little condescending isnt it?/QUOTE]
I did put a smiley face at the end.

 

[tony84]

Right, i have fixed those issues. One was easy to fix... just remove it altogether

Anyway, the site is starting to take shape now, however i do have another 2 issues.

First one is the site looks fine in firefox except the footer right at the very bottom, it doesnt stretch to the edges at the left, right and bottom - similar to the footer on this site.

In internet explorer i have the same issue, but also the boxes do not fit in the footer (although im confident i can fix the boxes issue myself). The other issue, is rounded corners do not appear to be working, im using ie 10, i thought this was only a problem in ie 9 and earlier? Are there any easy fixes for this?

 

[Alan]

Right, i have fixed those issues. One was easy to fix... just remove it altogether

Anyway, the site is starting to take shape now, however i do have another 2 issues.

First one is the site looks fine in firefox except the footer right at the very bottom, it doesnt stretch to the edges at the left, right and bottom - similar to the footer on this site.

In internet explorer i have the same issue, but also the boxes do not fit in the footer (although im confident i can fix the boxes issue myself). The other issue, is rounded corners do not appear to be working, im using ie 10, i thought this was only a problem in ie 9 and earlier? Are there any easy fixes for this?

Each browser has different default values for many element, for instance on the mac Firefox is adding a margin of 8px to the body element.

So what we 'old pros' do is reset all the browser default elements to specific values (mainly 0) so that all browsers start off the same values, at the top of the stylesheet with something like (pre HTML5)

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

his HTML 5 reset is here -> http://meyerweb.com/eric/tools/css/reset/

Most of us build in html 5 now, for some reason you are not, but if you did then there are a lot more elements the reset.

 

[tony84]

Thanks for the reply, im not building in HTML 5 as i do not know enough about it. Im just trying to do the best i can with the knowledge i have - im not looking to learn from scratch. I will be getting a professional to do it later on down the line.

Can anyone help with fixing these issues?

Cheers

 

[Alan]

I'm not getting at you, I provided the fix!


Copy and past the html block in my post into the top of your theme's style.css and that will get rid of the browser issues having different default settings.

 

[tony84]

Sorry must be miscommunication in the written word - i wasnt giving a sarky comment back... although now that i have read it back i can see how you would think that (especially with my previous comment).

I did try your code, it didnt seem to work - i will add it again.

 

[tony84]

Ignore my last post. Must have been something to do with the cache... its working now.
Thanks for the help.


Now its just the curved corners in ie?

 

[Alan]

Working for me in ie 10 (unless you mean somewhere other than the main body).

Did you fix it?

I see that you have only sepcified webkit & normal radius, you really need -moz too

see http://css-tricks.com/almanac/properties/b/border-radius/

 

[Alan]

You haven't by chance accidently left IE 10 in compatibilty mode or in IE 8 from testing have you?

(F12 -> Browser Mode tab)

 

[tony84]

hmmm, i dont recall ever putting ie in compatibility mode as i have never used it but it did have a tick in the box. Now i have unticked it, it works.

Cheers for your help.

 

[tony84]

Actually, one last question i think...

The bullet points on the Mortgage or Insurance page for example seem to be clipped. Is there any way i can move them in a little bit? Is it just a case of putting them in another div tags and padding it for 20px say or is there another way i should be doing it?

 

[tony84]

Actually, one last question i think...

The bullet points on the Mortgage or Insurance page for example seem to be clipped. Is there any way i can move them in a little bit? Is it just a case of putting them in another div tags and padding it for 20px say or is there another way i should be doing it?

Sorted this now.

 

[Alan]

You might also want to play with

#container ul
{
list-style-position:inside;
}

To indent the bullet points. Seems strange to me that the default is that bullet points sit outside the text line. But thats the way it is