# Image trouble



## giovannicosta (Aug 24, 2006)

Ok- so my logo has gone all wierd, heres a screen shot: 


As you can see half of the logo is cut off, also another problem is that the image is starting to be duplicated again any ideas on how to fix this I havve the css for this part:


```
.mainimage {
	background-image: url('images/mainimage.jpg');
	padding: 0 1px 0 4px;
	font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif; 
	color: #fff; 
	text-align: left; 
	font-size: 20px; 
	font-weight: normal;
	border-top: 5px solid #aa1f22;
	height: 9px;
}

.maintext {
	width: 500px; 
	padding: 10px 15px; 
	vertical-align: top; 
	text-align: justify; 
}

.catalog {
	width: 50%; 
	padding: 10px; 
	text-align: left; 
	vertical-align: top; 
}

.mainwide {
	width: 750px; 
	padding: 10px 30px; 
	text-align: justify; 
	vertical-align: top; 
}

.footerleft {
	text-align: center;
	background-color: #000;
	color: #d0d0d0; 
	font-size: 80%; 
	font-weight: normal;
	border-top: 5px solid #aa1f22;
	padding-top: 10px; 
}

.footerright {
	text-align: center;
	background-color: #000;
	color: #d0d0d0;
	font-size: 80%; 
	font-weight: normal;
	border-top: 5px solid #aa1f22;
	padding-top: 10px; 
}

.footerbottom {
	background-color: #000;
}

.imageleft {
	margin: 3px 10px 2px 0px; 
	float: left; 
	border: 3px double #c0c0c0;
}

.imageright {
	margin: 3px 0px 2px 10px; 
	float: right; 
	border: 3px double #c0c0c0;
}

.imagecenter {
	margin: 0px 5px; 
	border: 3px 
	double #c0c0c0;
}
```


----------



## Sequal7 (Apr 15, 2001)

You can define custom properties for the background (default is repeat and not fixed unless otherwise specified)

```
background-attachment: fixed;
```
will keep the background in a position so it does not move.


```
background-repeat: no-repeat;
```
will not allow the image to repeat.


----------



## giovannicosta (Aug 24, 2006)

Well at least it doesnt repeat now how do I chnage it to show the whole image? There is some missing to the right.


----------



## giovannicosta (Aug 24, 2006)

Ok made the image the correct size now how do I answer this:


CSS:

/* SETS BASIC HTML DEFINITIONS */

html {
height: 100%; 
margin-bottom: 1px;
}

body {
background-color: #000;
color: #000;
font-family: Arial, Verdana, sans-serif; 
font-size: 80%;
text-align: center; 
margin: 5px 0;
}

table, td {
padding: 0px; 
margin: 0; 
border-collapse: collapse; 
font-size: 100%;
}

ul li {
list-style-image: url('images/bullet.gif'); 
font-size: 100%;
}

hr {
background-color: #aa1f22; 
color: #aa1f22; 
height: 1px; 
width: 100%;
}

img {
border: none;
}

form {
margin: 5px 0 0 0; 
padding: 0; 
font-size: 100%;
}

.forminput {
background-color: #fff; 
color: #000; 
border: 1px solid #c0c0c0; 
padding: 2px; 
font-size: 100%; 
font-family: Verdana, Arial, sans-serif;
}

/* SETS HEADING PROPERTIES */

h1 {
font-family: Georgia, Times, serif; 
color: #aa1f22; 
text-align: left; 
font-size: 22px; 
font-weight: bold; 
}

h2 {
font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif; 
color: #959595; 
text-align: left; 
font-size: 20px; 
font-weight: normal; 
}

h3 {
font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif; 
color: #8b171a; 
text-align: left; 
font-size: 20px; 
font-weight: normal; 
}

h4, h5, h6 {
font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif; 
font-size: 18px; 
font-weight: normal; 
color: #aa1f22; 
}

/* SETS THE VARIOUS HYPERLINK PROPERTIES */

a:link {
color: #d53135; 
text-decoration: none; 
font-weight: bold;
}

a:visited {
color: #d53135; 
text-decoration: none; 
font-weight: bold;
}

a:hover {
color: #858585; 
text-decoration: underline; 
font-weight: bold;
}

a:active {
color: #d53135; 
text-decoration: none; 
font-weight: bold;
}

.headerleft a:link {
color: #d0d0d0; 
text-decoration: none; 
font-weight: normal;
}

.headerleft a:visited {
color: #d0d0d0; 
text-decoration: none; 
font-weight: normal;
}

.headerleft a:hover {
color: #fff; 
text-decoration: underline; 
font-weight: normal;
}

.headerleft a:active {
color: #d0d0d0; 
text-decoration: none; 
font-weight: normal;
}

.footerright a:link {
color: #d0d0d0; 
text-decoration: none; 
font-weight: normal;
}

.footerright a:visited {
color: #d0d0d0; 
text-decoration: none; 
font-weight: normal;
}

.footerright a:hover {
color: #fff; 
text-decoration: underline; 
font-weight: normal;
}

.footerright a:active {
color: #d0d0d0; 
text-decoration: none; 
font-weight: normal;
}

/* SETS THE CLASS PROPERTIES */

.wrapper {
width: 750px; 
background: #fff;
color: #000; 
text-align: left;
margin: 0 auto;
}

.headerleft {
background-color: #000000;
color: #d0d0d0;
text-align: center;
font-size: 100%;
}

.sitename {
background: #000000;
color: #d0d0d0;
padding: 10px 0;
font-family: Georgia, Times, serif; 
text-align: right; 
font-size: 26px; 
font-weight: bold; 
}

.sidebar {
width: 250px; 
padding: 10px; 
vertical-align: top; 
font-size: 90%; 
text-align: left;
}

.sidebarnav {
width: 250px; 
padding: 10px; 
font-size: 100%; 
text-align: left;
line-height: 22px;
border-top: 5px solid #aa1f22;
}

.sidebarnav ul li {
list-style-image: url('images/bullet2.gif'); 
font-size: 100%;
}

.mainimage {
background-image: url('images/mainimage.jpg');
padding: 0 1px 0 4px;
font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif; 
color: #fff; 
text-align: left; 
font-size: 20px; 
font-weight: normal;
border-top: 5px solid #aa1f22;
height: 1px;
background-attachment: fixed;
background-repeat: no-repeat; 
}

.maintext {
width: 500px; 
padding: 10px 15px; 
vertical-align: top; 
text-align: justify; 
}

.catalog {
width: 50%; 
padding: 10px; 
text-align: left; 
vertical-align: top; 
}

.mainwide {
width: 750px; 
padding: 10px 30px; 
text-align: justify; 
vertical-align: top; 
}

.footerleft {
text-align: center;
background-color: #000;
color: #d0d0d0; 
font-size: 80%; 
font-weight: normal;
border-top: 5px solid #aa1f22;
padding-top: 10px; 
}

.footerright {
text-align: center;
background-color: #000;
color: #d0d0d0;
font-size: 80%; 
font-weight: normal;
border-top: 5px solid #aa1f22;
padding-top: 10px; 
}

.footerbottom {
background-color: #000;
}

.imageleft {
margin: 3px 10px 2px 0px; 
float: left; 
border: 3px double #c0c0c0;
}

.imageright {
margin: 3px 0px 2px 10px; 
float: right; 
border: 3px double #c0c0c0;
}

.imagecenter {
margin: 0px 5px; 
border: 3px 
double #c0c0c0;
}

BTW the image is called mainimage.jpg


----------



## giovannicosta (Aug 24, 2006)

I think the problem is with the cells which are holding the image, but I dont know what they are.


----------



## Sequal7 (Apr 15, 2001)

Please provide the html of the page or a link to it so I can see the style. (in a PM if you dont want it public)


----------



## giovannicosta (Aug 24, 2006)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Advertise




 
  

*What&#39;s Hot:*

*11.12.2006:*
Computer Forumz Remodeled and re-opened.
www.phpbbserver.com/giovanni

*11.26.2006:*
Back-up forum launched 
www.computerforumz.co.nr 

*11.27.2006:*
Computer Forumz Website (this one) remodeled.

*12.09.2006:*

Web Forumz Launched

www.giovanni.xenweb.net/forum



*12.10.2006*

This site redisgned









*
Your Ad Here For Only $1.99 per Month, you ad will be exposed to more than 10000 monthly page views who use this site for regular news updates/game cheats/best sites and more, to advertise here click on advertise on the menu on the left.*

*Advertising*

*With all this audience, I see this as a great opportunity to advertise:*

We are proud at Computer Forumz for having our pages indexed by Google 24/7. 
That means that along with content your ad will appear too. We have great 
advertising opportunities for low prices. You can advertise on Computer Forumz 
(web support), this Computer Forumz website and in our monthly magazine which is 
available on the internet for free downloads and page views which means that 
also gets indexed by Google. We aim to offer cheap and reliable ads so here are 
the prices:

Now you can advertise on the Computer Forumz Website,

www.giovanni.xenweb.net/phpBB3, and on the Computer Forumz Monthly Magazine.

We aim to provide you with cheap and reliable ads, so here are the prices.

NOTE: WE HAVE AROUND 30.000 PAGE VIEWS PER MONTH. THAT&#39;S 
30.000 IMPRESSIONS, PLEASE SEE THE TABLE BELOW FOR THE CURRENT STATS (UPDATED 
WEEKLY)

10th December 2006










Computer Forumz (help and support forum)

1 Month - $1.99
6 Months - $9.99
12 Months - $18.99

Computer Forumz Website (this website) 
- On All Pages

*You can advertise in text ads or as interstial (when a user clicks a link 
and you ad appears for 20 seconds and then a popup box appears they press ok and 
it then redirects to the site the user chose.*

1 Month - $1.99
6 Months - $9.99
12 Months - $18.99

Computer Forumz Magazine - Per 
issue

1/2 Page ad - $1.49
1 Page Ad - $1.99
2 Page Ad - $3.49
3 Page ad - $4.99 
4 Page Ad - $6.49

You can advertise via text ads or banners which will be displayed

Banners on Computer Forumz must be 720 X 300 Pixels. Text ads can be up to 70 
Characters + Link and Title.

Ad pages on Computer Forumz Magazine do not have to be consecutive. e.g. Your ad 
can be on page 6, 8, 10, 12 and only pay $6.49 as it is a 4 Page ad. Or the ad 
can be consecutive. e.g. Your can be on page 3,4,5,6 and still pay $6.49

For more info and to order please P.M. me at
Computer Forumz this or post 
in

this topic, you can also email me with your website address and text or fill 
out the form on the link below, forms sent and emails will be answered within 12 
hours.




*
Want to see you ad here click on Advertise on the left-hand side menu for more details | Want a profesional looking website for $50-$150 click on website on the left hand side menu | Beat the scams by clicking the link on the left hand side menu |Want to see you ad here click on Advertise on the left-hand side menu for more details*



[TR]
[TD]

















 


----------



## Sequal7 (Apr 15, 2001)

Change the mainimage attribute to this:

```
.mainimage {
background-image: url('images/mainimage.jpg');
background-repeat: no-repeat;
background-position: center;
padding: 0 1px 0 4px;
font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
color: #fff;
text-align: left;
font-size: 20px;
font-weight: normal;
border-top: 5px solid #aa1f22;
height: 75px;
}
```


----------



## giovannicosta (Aug 24, 2006)

Sequal7 said:


> Change the mainimage attribute to this:
> 
> ```
> .mainimage {
> ...


Made no difference any other ideas?


----------



## giovannicosta (Aug 24, 2006)

OK the problem is diffinetly with the cells which hold the image.


----------



## DrP (Jul 23, 2005)

The main image [TD] is within a [TR] which also contains your sidebarnav [TD]. The height of this [TR] (row) will be governed by the highest item in the row. So, if whatever is in your sidebarnav [TD] comes to a height of 1000px, your main image [TD] will also be that height. If your image is only 200px high, or whatever it is, the rest will be empty space.
Also, if you can post a link to the page it'll help us.


----------



## Sequal7 (Apr 15, 2001)

Are you certain taht your not viewing a cached page? It worked fine for me doing that on both IE and FF2

link


----------



## giovannicosta (Aug 24, 2006)

Sequal7 said:


> Are you certain taht your not viewing a cached page? It worked fine for me doing that on both IE and FF2
> 
> link


How can I check if the page is cached?


----------



## Sequal7 (Apr 15, 2001)

So did you see it works correct on my server or was it still wrong?

What browser are you using? 
You can try a hard refresh by pressing and holding the shift key and clicking F5 to refresh or you can; 
*(IE)* press tools, internet options, delete temporary internet files (including offline) 
*(FF)* clear private data by pressing ctrl+shift+del keys
*(Opera)* you can press CTRL+F12, click History, Disk Cache, empty now 
*(Netscape) *you can click tools, options privacy and clear cache and stored pages


----------



## giovannicosta (Aug 24, 2006)

Sequal7 said:


> So did you see it works correct on my server or was it still wrong?
> 
> What browser are you using?
> You can try a hard refresh by pressing and holding the shift key and clicking F5 to refresh or you can;
> ...


FF2 Done but still not difefernce.


----------



## giovannicosta (Aug 24, 2006)

Have a look:

http://www.giovanni.xenweb.net/extra/

and in publisher it appears like that too.


----------



## ferrija1 (Apr 11, 2006)

~The _Smart, Stylish, Exciting!_ text can not be seen.

~Your title is Free Template 04. 

~Why does it say "Dark Dragon Group" at the top when it says it is ComputerForumz

~Marquees are very annoying.

~_Your Ad Here For Only $1.99 per Month, you ad will be exposed to more than 10000 monthly page views..._
>It is illegal to advertise false information.
>On your advertisement page, you say you have 30 page views.

Otherwise it looks great.


----------



## giovannicosta (Aug 24, 2006)

Not false information very correct in fact I ahve 14000 page views this month so far have a look under the advertise section.


----------



## ferrija1 (Apr 11, 2006)

giovannicosta said:


> Not false information very correct in fact I ahve 14000 page views this month so far have a look under the advertise section.


It clearly states:


> NOTE: WE HAVE AROUND 30.000 PAGE VIEWS PER MONTH. THAT'S 30.000 IMPRESSIONS, PLEASE SEE THE TABLE BELOW FOR THE CURRENT STATS (UPDATED WEEKLY)


----------



## Sequal7 (Apr 15, 2001)

No offence Gio, but your page views are in fact misleading, exposure usually means unique hits, your counter is displaying page refreshes, which counts everything including bots, crawlers, every time a user refreshes the page, spam bots crawling it etc. 
You will see that your actual page hits, and page counter will vary greatly and in fact I bet if you were to check the accuracy, you aren't even close to 1000 *unique hits *per month (those can be obtained by your hosting stats) 

*On to your problem.... :up: 
*
The code on that page in the link is different than the html code supplied earlier. Since then you have added a navigational bar ina cell of a table, and you are mixing hard coded tables and css table elements. As your navigational area grows, so to does the right cell of the table, that is why your image is shifting downwards.

This doesn't make good use of CSS mixing hard coded tables and css table elements, but I have fixed it for you to look at. Just view source and copy and paste whats in the html page. The second link is for the code of the css (which some elements had to be changed) so you need that too.

 HTML page
 CSS page


----------



## Eriksrocks (Aug 7, 2005)

Ferrija, I think the . should be a , but yes I was confused too.


----------



## Eriksrocks (Aug 7, 2005)

And yes Sequal is right.  This is the stat table that you have posted:








That clearly shows that you have barely over 10,000 *hits* this month, and only 14,000 all time. And under the unique visits, it shows that you've only had 160 unique visitors all time and only 99 visitors this month. That's far from 30,000 or even 10,000 impressions.


----------



## ferrija1 (Apr 11, 2006)

Eriksrocks said:


> Ferrija, I think the . should be a , but yes I was confused too.


I was just quoting the page.........


----------



## Eriksrocks (Aug 7, 2005)

Yeah I know. I think giovannicosta meant to put a ,


----------

