'Fresh' Pagekit Problem

Hi, Ive decided that I want to have a new style for my site and I decided to use the fresh pagekit, Ive already changed some things around but because there is abit of editing required in the CSS Im struggling with other things.

What I would like to change is the width of the page, but not the background parts i.e. the grey and the white

And I would also like to put an image in the 'whole' of the grey part (until I resize the width of the page ^^^) apart from the menu at the top

Here is the page :
www.blascanto.com/test.html

CSS :
www.blascanto.com/style_fresh.css

THANKS in advance

Caroline

Another thing that I can't seem to fix is the links in the main text. They don't seem to change color when you hover the mouse on them, but in the CSS the hover color is set to black.

Hi Caroline,

To change the overall width of the page content you'll need to adjust the following values:

#header
{
width: 970px;

#promo
{
width: 970px;

#content
{
width: 970px;

#footer
{
width: 970px;

Once you've done that then you'll need to alter the widths of the elements within the page so that everything fits nicely into the new page width:

div.promo-item
{
float: left;
width: 290px;

div#left-column
{
width: 290px;

div#middle-column
{
width: 290px;

div#right-column
{
width: 310px;

That's for the homepage. The inner pages work in a similar way.

If you want a header image that fills the entire browser window then you're either going to have to make a very wide image (say, over 2000 pixels wide) or repeat the image. Either way you'll probably want to place it as a background image of the #header-wrapper element:

#header-wrapper
{
width: 100%;
height: 211px;
background-color: #333;
background-image: url(../images/header_bg.gif);
background-repeat: repeat-x;
}


You might need to remove the background image from the #header element too:

#header
{
width: 770px;
height: 211px;
margin: 0 auto 0 auto;
position: relative;
background-image: url(../images/header_bg_internal.gif);
background-repeat: repeat-x;
background-position: 0 100px;
}

Link colours: this is due to a bug in the PageKit:

a:hover
{
color: #000000;
font-size: 1.0em;
text-decoration: underline;
}


a:visited
{
color: #88ca35;
font-size: 1.0em;
text-decoration: none;
}

To fix the problem, swap these 2 rules around:

a:visited
{
color: #88ca35;
font-size: 1.0em;
text-decoration: none;
}


a:hover
{
color: #000000;
font-size: 1.0em;
text-decoration: underline;
}


Hope that helps!
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt, thanks for the help, its great.

One last thing can you tell me which part of the code if for the position of the menu at the top because it doesnt seemed to have lined up with the rest of the site on the right hand side. What do I need to change in the code ?

And about the header image, which part of the code needs to be changed to make it in line with the site with the new dimensions, I think Ive set it to 800px wide

Thanks again,

Caroline.

Hi Caroline,

Your menu is positioned on the right side of the header, so its position is controlled by the #header width (800px). The header and menu do in fact line up with your #content div. The problem is that the stuff inside your #content div (#left-column-page and #right-column) don't add up to 800px (inc padding/spacing).

So to solve the problem, increase the widths of #left-column / #left-column-page and #right-column until they are wide enough to fill your whole #content area.

Did that make sense?!
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Yes thank you

Hi Matt, Im having abit of trouble putting a background in the header part, if you look at the site :

http://www.blascanto.com/test.html

It seems that the background is only filling about half of the grey part. Ive tried to add the background to #header and h1#logo but that doesn't fill the grey part either ... where am I going wrong ??

Thanks,

Caroline.

Hi Caroline,

Just change:

#header-wrapper {
background-color:#333333;
background-image:url(../images/bg_floral_medium.png);
background-repeat:repeat-x;
...

to:

#header-wrapper {
background-color:#333333;
background-image:url(../images/bg_floral_medium.png);
background-repeat:repeat;
...

This will make the background repeat in all directions, not just left-to-right.

Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks Matt, thats done the job

Im sorry if I am asking too much, but I really love this pagekit but its hard because there is so much information in the css.

I promise I have only 2 more questions !!

Firstly now that I have the background pattern done, where would I need to put the code for an image to be within the grey part ? And within the width of the content of the website ?

And just one simple thing, between the grey part and the word 'Noticias' there is alot of white space, which part of the code controls that ?

Thanks again

Caroline.

Hi Caroline,

Put the image as a background image in the "header" element (you seem to have deleted the CSS for this):

#header
{
width: 970px;
height: 211px;
margin: 0 auto 0 auto;
position: relative;
background-image: url(your-image-url);
background-repeat: repeat-x;
background-position: 0 100px;
}

Adjust the values as necessary...

To put an image in the content part, add an img tag inside the "content" div (or inside one of the inner divs such as "left-column" or "right-column").

To remove the whitespace you can remove the "promo-wrapper" div from the HTML (which you no longer seem to be using):

<!-- Start Promo Wrapper -->
<div id="promo-wrapper">

<!-- Start Promos & Page Title Proper -->
<div id="promo">

<h1></h1>

</div>
<!-- End Promos & Page Title Proper -->


</div>
<!-- End Promo Wrapper -->

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

A BIG THANK YOU MATT, you have been a great help !!

Thank you, thank you,

Caroline.

No problem, Caroline! If you have any more questions, please feel free to ask.

Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hey Matt,

I've basically finished my new design for the site. I've been working on just one page as all the pages are going to be the same HTML etc. The problem is I want a different image on each page (the big image at the top) and the coding is in the CSS. I could try it myself but I really don't want to ruin what has already been made. Can you help me out with this please ? It would be better if the coding for the images was in the HTML and not the CSS, if that is possible ?

http://www.blascanto.com/test.html
http://www.blascanto.com/style_fresh.css

Thank you so much for your help Matt !

Caroline.

[Edited by dubenko_33 on 28-Sep-09 19:25]

Hi Caroline,

You could try modifying the "header-wrapper" div tag in each page as follows:

<div id="header-wrapper" style="background-image: url(myimage.png);">

The 'style' attribute should override the background image set in the CSS file.

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hey Matt,

Thanks for that help, it's done the trick

Though I've just found another problem that I really can't understand !!

If you look at this page :

http://www.blascanto.com/v2-music_es.html

The writing is alot bigger than on the index page (test.html)
It's like this on every new page I've made, but not on the test.html page that I've been working on. I haven't changed the css ...
If you see on the page above ^^^ the writing is big at the top of the page but not at the bottom of the page or on the right hand column

I've looked through the code but I can't see the problem ..


And also, do you know what code I would need to write to make the top image fit to every page in different web browsers. I use IE and it looks fine but my friend uses a different browser (I think it's google chrome) and he says the image is repeating, and I've checked on Mozilla and you can see it slightly repeating at one end. I've looked for a code on the internet but I can't find one to work with images.

Thanks,

Caroline

Hi Caroline,

First question: Your font size issue is because some of your text is enclosed in paragraph (<p> ... </p>) tags and some of it isn't. eg on http://www.blascanto.com/v2-music_es.html you have forgotten to add a closing </p> tag after your Flash movie embed, causing the browser to assume that the rest of your text is inside a paragraph. Since paragraph elements have a specific font size set in the CSS then this causes text inside a paragraph to have a smaller font size to non-paragraph text:

/*
	Standard paragraph style
*/

p
{
	color: #333;
	font-size: 0.7em;
	padding: 10px 0 10px 0;
}

In fact, from a semantic point of view, you probably should have all your text in paragraphs, rather than separating them with <br> tags as you have done.

It also would be a good idea to go through your HTML and fix the errors, eg:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.blascanto.com%2Ftest.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.blascanto.com%2Fv2-music_es.html&charset=%28detect+automatically%29&doctype=Inline&group=0

(I know it looks like there's a lot of errors but the validator often reports several "errors" for the same problem, so they shouldn't take long to fix.)

I'd recommend fixing these problems and putting all your text in paragraphs, then you should find that the pages display OK with consistent font sizes.

As a workaround, you could move the font-size property from the 'p' rule (shown above) into the content-wrapper rule:

#content-wrapper
{
	width: 100%;
	min-height: 200px;
	font-size: 0.7em;
}

(Personally I would do this anyway as I prefer having a global font size.)

Second question: If you want to stop the image repeating horizontally then you need to change:

/* Header */
#header-wrapper
{
	width: 100%;
	height: 350px;
	background-color: #333;
	background-image: url(../images/v2-index2.png);
        background-repeat: repeat-x;
}

to:

/* Header */
#header-wrapper
{
	width: 100%;
	height: 350px;
	background-color: #333;
	background-image: url(../images/v2-index2.png);
        background-repeat: no-repeat;
}

Hope that helps!
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/