ATM my page is on the left how can i centralise it all? Oh and to centralis a whole spry menu bar within a header div tag?-or that just a case of tracking it down in the CSS?
Thanks
Craig
Craig
Presuming you are using CSS given what you said just add the following to your container div
margin: 0 auto;
This will centralise any element so you should be able to use it on your Spry as well.
If you want to post a link to the site I will look at the code and give you some specifics.
Quote from: Colin on January 01, 2011, 07:18:06 AM
Craig
Presuming you are using CSS given what you said just add the following to your container div
margin: 0 auto;
This will centralise any element so you should be able to use it on your Spry as well.
If you want to post a link to the site I will look at the code and give you some specifics.
Thanks Colin,it seems to have sorted it ;D :dance:. Tried <center> like one site suggested, it worked for everything but...
http://www.craigleaper.co.uk
EDIT: Hopeless lol, can't find the right CSS part to make the SPRY menu central
Craig
You have some errors in your CSS in the Spry menu bar. Run it through the W3C validator here (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.craigleaper.co.uk%2F) to see them. You also have a couple of other errors there is no such thing as align=absmiddle for the elements that you are trying to style with this.
I presume that this is work in progress as your top logo is partially hidden by the menu bar, your index_logo is missing and the cursor changes to a cross rather than a hand when it passes over the menu items. Well this is what it does in Firefox anyway.
Rather than the Spry menu you may be better off doing this with pure CSS have a look at Stu Nichols site (http://www.cssplay.co.uk/menus/) for excellent code examples on how to do this.
Quote from: Colin on January 02, 2011, 07:44:40 AM
I presume that this is work in progress as your top logo is partially hidden by the menu bar, your index_logo is missing and the cursor changes to a cross rather than a hand when it passes over the menu items. Well this is what it does in Firefox anyway.
Same here in IE8 ;)
Also, Menu is still a bit off center, and slightly to the left. Footer is nicely centered. Not sure about the missing image in the middle of page, all I get is a blank box with a 'X' in it. ??? Two screen grabs below to show you what I see.
Woah, some work ahead to do then.
The logos show fine in Safari (i know i should prob use FF or different but hey lol)
Quote from: Colin on January 02, 2011, 07:44:40 AM
Rather than the Spry menu you may be better off doing this with pure CSS have a look at Stu Nichols site (http://www.cssplay.co.uk/menus/) for excellent code examples on how to do this.
This is part of my course thing and in the brief it says we have to use spry :(
Thanks a lot for pointing these out.
No idea where that border came from around my top logo either tbh...
This is what i see:
haha, looks like you managed to center your menu now. :tup:
Still the same problems with your logos though. :(
Quote from: admin on January 02, 2011, 04:53:00 PM
haha, looks like you managed to center your menu now. :tup:
Still the same problems with your logos though. :(
As for the menu, i added another tab or option to make it look central still slightly left but you can't tell that bad ;D
Quote from: CML-1591 on January 02, 2011, 06:42:54 PM
Quote from: admin on January 02, 2011, 04:53:00 PM
haha, looks like you managed to center your menu now. :tup:
Still the same problems with your logos though. :(
As for the menu, i added another tab or option to make it look central still slightly left but you can't tell that bad ;D
second that, may have sorted it with some padding.
I think I have also managed to get rid of the blue border around the top image.
Oh and probably got rid of the blue/purple underlined links in two ways ???
Colin - How do you remember/learn all this? lol, or just experience/job?
Craig,
I learn by doing and my wife complains about the time that it takes. I am lucky I am retired and it is something that interests me. I have it as a part time activity making websites for people.
Your site is looking much better now. Can I suggest that you set a min-height value on your container div as it looks better if all pages are at least the same size and only growing and not shrinking with content.
Firefox is reckoned to be the best browser for development and with the web developer tool bar extension it is a very productive tool. You should always check your site in the main browsers as well to ensure compatibility as they all display sites somewhat differently.
Any more questions let me know but I only tend to visit this site once a day in the morning.
Quote from: Colin on January 03, 2011, 07:40:16 AM
Craig,
Can I suggest that you set a min-height value on your container div as it looks better if all pages are at least the same size and only growing and not shrinking with content.
my container has a height of 950px (too big?). I think its the size of the main_container (should be main_content but i have a feeling if i change it, it will mess up) that is affecting the varying heights and sizes if thats what you are on about? If i set my main_container to a set height will it not screw up the content if it couple of images in a row? Like i have two images in the main_container at 700px high, and so if i set the height of the main_container to say 650px will it not crop and change things?-i think something like that happened before so i took out the height. Although the main_content is a Editable Region
Quote from: Colin on January 03, 2011, 07:40:16 AM
Craig,
I learn by doing and my wife complains about the time that it takes.
Amen to that!
Quote from: Colin on January 03, 2011, 07:40:16 AM
Your site is looking much better now.
Thanks. I think it looks and works WAY better than my last website, if you remember it.
TBH i think you would make a better teacher than this guy we had, if you paired up with the lecture we had last year then DAMN, awesome class...
Sorry another Q.
I'm trying to get rid of this table http://www.craigleaper.co.uk/site_map.html, is it going to work through creating a separate CSS and call it table and apply it as a 'class' or through a different property panel.
Oh and for some reason the odd page does not seem affected by:
<style type="text/css">
a:link {
color: #746C6C;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #746C6C;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
color: #E8E8E8;
}
</style>
but can be done with a 'Class' tag to stop it. :doh: :-\ ???. For example on this page http://www.craigleaper.co.uk/site_map.html the 'site map' link from the template is working by the use of <style> but the 'facebook' written link is affected by the 'Class': .links. ??? EDIT: hmm it might be working with <style> alone now... Interesting
If i had the software on a non trial, I would invest in a dreamweaver book of sort and stop bugging people lol :(
Craig
Add the following
#main_container {min-height:700px}
What this does is sets a minimum height for this container and then if you put a larger item in it then it will grow but smaller content won't shrink it.
Try and incorporate all your styles (other than the spry stuff) into one external style sheet, it makes the subsequent pages load quicker. This is the reason for the styles not being on all pages as this is embedded styling only on the site_map.html page.
You can get rid of the table by pure css.
What you would do is have a table container div and then using the site_map.html as an example you would have three floated left classes with fixed sizes and borders that you would place within that. If you get stuck I can work up an example for you.
See your PM's