Website Tonight- Need title image help

[matt15]

My website tonight page is fine except my title block is too small for the page

waynesmetalproducts.com

Does anyone have any suggestions- half understand CSS so please dumb it down

Thanks

[Kelon]

Well., I don't know if this is the only approach..

Can you edit your image? My method will require you to have another image consisting of a thin pixel (or two) wide vertical slice from the right-hand end of your header image.. if you follow?

I can talk you through putting in the necessary code for a couple of extra divs and the css to go with it, it's not too complicated (to me of course so I'll keep it simple, you'll be fine), however, if someone else happens along and can see where I'm going but has a better idea, then cool...

Need to know the answer to my question cos if you can't then I'm out of ideas.

[Kelon]

Oh durr... I jumped to a conclusion you were looking at a fluid layout. This is even simpler because it's a fixed width.

So measure the width of your masthead image...

In theme.css find:

.sf_outer_wrapper {
width: 798px;
margin: 50px auto;
}

.sf_wrapper {
width: 798px;
position: relative;
}

Change both widths to the pixel measurement.
If your masthead image is 500px wide, then change 798px to 500px.
I've checked through the rest of your pages and there shouldn't be any issues.

[matt15]

kelon

Change the width to the number to the same.- i don't get this sentence

I think I'm following you
If I change my whole body to 1000px and my headerwrapper to 1000px the space is still there.
If I change my .sf wrapper to the 798px that the header is at it leaves blank space on the right side of my page
Do i need to change the actual image inside the header instead of the header paramters?

[Kelon]

Ah... oh, helps if I investigate before my eagerness to help kicks in. Seems your image is 798px wide so why it's adding extra space, I'd need to have a real look at.

If I'm understanding you correctly... you think you can just stretch the 'green' bit. No can do. It's part of a photographic style picture, it's not made up of separate green bits and grey bits. I'm not sure swapping header images would do it either as website tonight clearly have a standard 798px wide website template in operation.

There's something adding extra space in, though the css says it shouldn't be. Perhaps someone will see it straight away, it's not jumping out at me., I'll take a little while to track it down. I am sorry, I thought this would be nice and easy... always the way isn't it.

[no/good/at/this]

whats the full width of the jpg your using?
The div width in your css is 798px; is that the same as the image?

[matt15]

no/good/at/this
It was one supplied by website tonight that was a part of the css template that I picked

Maybe this will help


/*********************************************************
**********************************************************

Folder: Theme313_Materials
Name: Materials
Cat: Industrial

**********************************************************
*********************************************************/

/*------------------------------------
GENERAL
------------------------------------*/
body {
margin: 0;
}

p {
padding: 0;
margin: 0;
}

.sf_outer_wrapper {
width: 1000px;
margin: 0px;
}

.sf_wrapper {
width: 1000px;
position: relative;
}

a {
color: #000;
}
a:hover {
color: #666;
}
a:visited {
color: #000;
}

/* ------------------------------------
HEADER
------------------------------------ */
.sf_header_wrapper {
margin-top: 0px;
height: 133px;
width: 1024px;
}

.sf_main_header p, .sf_sub_header p { margin: 0; padding: 0; }
.sf_main_header {
padding-top: 25px;
text-align: left;
line-height: 0.9;
position:relative;
left:0px;
margin-left: 18px;
height: 40px;
overflow: hidden;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: bold;
}

.sf_sub_header {
text-align: left;
padding: 4px 0 30px 0px;
width: 1000px;
height: 30px;
overflow: hidden;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}

/* ------------------------------------
NAVIGATION
------------------------------------ */
.sf_navigation_top { display: none; }
.sf_navigation {
clear: both;
height: auto !important;
height: 1%;
width: 1000px;
}

.sf_navigation ul {
margin: 0 0;
height: auto !important;
height: 1%;
padding-left: 0;
}

.sf_navigation ul:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}

.sf_navigation ul {
list-style-type: none;
}

.sf_navigation ul li {
float: left;
width: auto !important;
width: 5px;
white-space: nowrap;
}

.sf_navigation ul li a {
height: 40px;
margin: 0 0 0 1px;
text-decoration: none;
display: block;
line-height: 28px;
padding: 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}

.sf_navigation ul li a:hover {
text-decoration: none;
color: #fff;
display: block;
}
.sf_subnavigation, .sf_subnavigation2 {
display:none;
}
/*------------------------------------
Dropdown
------------------------------------*/
#Nav1 iframe {
position: absolute;
/* account for the border */
left: -0.25em;
top: -0.25em;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
margin-left: 3px;
}
#Nav1,
#Nav1 ul { /* all lists */
list-style:none;
width:100%;
}

#Nav1 a {
display:block;
}

#Nav1 li { /* all list items */
float:left;
}
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
#Nav1 li ul { /* second-level lists */
position:absolute;
left:-999em;
width:130px;
margin:-4px 0 0 0;
border:solid 1px #929292;
background:#ffffff;
padding:3px 3px 0 3px;
z-index:1000;
}
#Nav1 li ul li{
margin:0;
padding:0;
background:none;
}
#Nav1 li ul li a{
background:#e8e8e8;
height:auto;
margin:0 0 3px 0;
width:120px;
padding:5px;
line-height:normal;
white-space:normal;
border:none;
}
#Nav1 li ul li a:hover{
background:#999999;
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul { /* lists nested under hovered list items */
left:auto;
}
/*------------------------------------
CONTENT
------------------------------------*/
.sf_pagetitle {
clear: both;
padding: 10px 0 0 20px;
text-align: left;
height: auto !important;
min-height: 30px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}

.sf_content {
height: 300px;
padding: 20px 20px 0 20px;
margin: 0px;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: auto !important;
height: 200px;
min-height: 200px;
}

.sf_content:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}

/*------------------------------------
FOOTER
------------------------------------*/
.sf_footer {
font-size: 11px;
padding: 25px 0 0 20px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 30px;
}

/*------------------------------------
BANNER
------------------------------------*/
div.sf_banner {
margin-bottom: 0px;
padding-top: 0px;
text-align: center;
font-size: 0px;
}

div.sf_banner div#bannerLink {
padding-top: 0px;
}
/**
* Sticking flyout menu bug
*
* @bugfix
* @affected ie7
* @css-for ie7
* @valid yes
*/
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}

body{
background-color: #FFFFFF;
background-image: url(images/body_bg_4.jpg);
background-repeat: repeat-x;
background-position: top;
width: 1000px
}
.sf_wrapper {
position: relative;
}

.sf_outer_wrapper {
background-color: #fff;
border: 1px solid #B5B5B5;
border-top: none;
}

.sf_header_wrapper {
background-image: url(images/banner_image_4.jpg), width:200%;
background-repeat: no-repeat;
background-position: left top;
}

.sf_main_header {
color: #fff;
}

.sf_sub_header {
color: #fff;
}

.sf_footer {
color: #999;
}

.sf_pagetitle {
color: #046400;
}

/* nav images and colors */

.sf_navigation {
background-color: #fff;
background-image: url(images/nav_bkgd_tile_4.jpg);
background-repeat: repeat;
background-position: left bottom;
}

.sf_navigation ul {
list-style-type: none;
}

.sf_navigation ul li {
background-image: url(images/nav_bkgd_4.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

.sf_navigation ul li a {
color: #111;
background-image: url(images/nav_right_edge_4.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}

.sf_navigation ul li a:hover {
color: #fff;
background-image: url(images/nav_right_edge_hilite_4.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
.sf_navigation ul li a:visited {
color: #111;

}

.sf_footer {
border-bottom: 5px solid #046400;
background-image: url(images/footer_bkgd_4.jpg);
background-repeat: repeat-x;
background-position: left top;
}

[Kelon]

whats the full width of the jpg your using?
The div width in your css is 798px; is that the same as the image?

The answer is: yes.

There are an awful lot of width settings throughout the css here, so this needs proper investigation.

[matt15]

some of those width settings I changed to get rid of an inch wide grey border around my whole page, I wanted to get rid of that

[matt15]

If you need the original css from website tonight I have that also

[no/good/at/this]

Thats ok got it already!

[matt15]

new suggestion
I wouldn't mind putting my logo that is currently in the body of my home page:

http://www.waynesmetalproducts.com/Home_Page.html

(the green one)

into my header, would that be easier and how would I do that

[matt15]

how'd you get the original css no/good?

[Kelon]

Edit... oh moving too fast... I'm posting and you guys are off and running, this thread'll get too confusing.

[no/good/at/this]

Firefox webdeveloper ad on, dont worry im not some sort of hacker, i can't edit anything only view it.

[no/good/at/this]

Edit... oh moving too fast... I'm posting and you guys are off and running, this thread'll get too confusing.
Im actually listening to you too, see if i can learn a few new things!

[Kelon]

Terminology - this is slightly off topic... I suspect "original css" means different things to you two here. To Matt15 it means website tonights css it supplied before Matt15 did anything to it. To no/good it means the css behind Matt15's operating site which anyone can simply "view source" on Matt15's page, see the link to and grab. So... I don't think no/good has got the 'original' css Matt15, just a misunderstanding of terminology. He's welcome to correct me.

Though I've got confused too., have you solved the initial problm with the space? I've just checked your live page and it seems the same as before?

[Kelon]

Ok., got it. Matt15... it's changes you've made, knowingly or not. There is an extra style sheet that's not so straightforward (for us) to view called: 'wstuseradvancedstyles.css'.

Once I got to view it, I can see it's over-riding all the stylesheets listed above it in your header (that's normal, as it should be and how CSS works) with a duplicate set of settings only with your changes. In 'wstuseradvancedstyles.css' is code:

.sf_outer_wrapper {
width: 1000px;
margin: 0px;
}

.sf_wrapper {
width: 1000px;
position: relative;
}


See the 1000px... your masthead image is only 798px.
Can you remember doing anything to stretch or widen something to such a round measurement of 1,000px? Go back and undo it if you can remember what it was you were doing... and it should spring back... and by the way, the reason it's not centering the page in the browser window is because you've also got a margin set to 0., see above? The 'original' centered in the window... see my original bit of code from theme.css, you'll see: margin: 0 auto; or something like that which centres it all.

Humm, brain teaser... technically theme.css etc is the 'original' (so no/good has the 'original')... interesting... I see how website tonight works...