HTML - Site Sits Off Centre On Iphone Due To Background Image. Please Help

Hi there,

Hoping I can explain my situation without having to post an example.

I have a logo, which I want to be centred... Easy enough.
However, on the left of the text for the logo, there is an image, which kind of overlaps the text (imagine someone holding there arm out straight across top of text, and the person is fat lol).

My predicament is this...

If I leave the person as a part of the original logo, the font isn't centred and does look kinda odd with the rest of the page.

So what I'd like to do is have the text centred, and have the person to the left, without affecting the centre of the text. Although I will need the person on the left to be close enough to the text to look like the complete logo.

Also, might be worth me mentioning, the person on the left is taller than the font, and so I'd like the text to be in the midle of them (say waist height).

Anyone understand me or am I gonna have to post up an example? lol

Cheers

Ps, I think I've done something similar in XML and CSS using just text, but never with an image, and don't really remember it too well anyway.

Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result?

Hi All,

I am building a website for a friend.

The site is built in Dreamweaver CS2. I need to have the top part of the background in black and the bottom part of the background in white.

I have done this so far with a table, 100% width, background black. But when I view it in IE or Firefox, the background has a white border around it, rather than coming right to the edge of the screen.

You can see what I mean he Test Site

Any help is much appreciated.

Hello,

Here is my site logo, with the name covered due to private project:



Now I have created a background the same as this without the logo.

I have tiled this accross the webpage, but now need to line the logo with it, so that I can have the webpage viewable by any screen resolution.

Please could you tell me how to make this line up correctly:


Thank you.

PS. Im using Microsoft Frontpage 2003

please help choose a nice background color theme for my site...
I'm not savy with html...I'm trying to find the code so I can change this "plain jane" background color of my "template made site". Can I get some opinions on a color theme and ALSO where I would insert the color codes. Not looking for a "in your face" attack..just anything better than the blah brown/tan colors!
TIA

http://goldenworldgoods.awardspace.com/

Hello again, I did this site in Dreamweaver, looked fine in my dreamweaver editor, uploaded it and voila everything goes nuts.

List of Problems: The Links are not positioned properly, not big enough plus the drop downs to the bottom and not to the right. That was properly my fault since I just copied a suckerfish method... But can someone help with this.

If you study the News Header in the CSS, it says it has a background image, how ever it doesn't show when I uploaded it. I know the url and the pic is correct cause it worked in Dreamweaver...

The background for "welcome" is all the way up there which isn't supposed to happen, it supposed to be right on top of the Hello text but that isn't happening either.

The hello and welcome are supposed to be aligned to the left of the right header.

Thats about it, please can someone help me. I've changed the format of this like 3 times just to get it correctly done, but nothings working.

Thank you

And don't worry I got it all validated and what not

I need to create a page like the image its really simple but i just cant get my divs working.

Please help me im tearing no ripping my hair out.

Many thanks in advance

Matthew



CSS

body
{
background-color:#F0F;
margin: 0;

}



#wrapper {
width: 700px;
height: 100%;
min-height: 100%;
position: relative;
margin: 0 auto;
background-color: #CCC;
}

#main {
left: 0;
position: relative;
top: 50%;
height: 500px;
width:700px;
background-color: #666;
}


#footer {
height: 50px;
width:500px;
bottom: 0;
position: absolute;
background-color: #CCC;

}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>2010</title>
<link href="test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<div id="wrapper">
<div id="main"><p>container</p></div>
<div id="footer"><p>footer</p></div>
</div>

</body>
</html>

Testing a new concept on our site,

here is the test page http://www.victorylifecenter.org/tadtest.php

You will notice an image on the top left corner, this is just a scrub image I found for testing purposes, but for some reason I can not get the image over the entire site?

Also, wondering how I would get an image to move across the site?

Thanks
Pastor

Hello,

I have a website I am working on and I have almost finished and have just noticed that when I use Chrome or Opera the different pages on my website shift 20 pixels or so to the left. That is some jump left and some don't.

Under IE8 this is o.k.

Having spent a few hours trying to work out the difference( I assumed this would be easy ) I have discovered that sometimes by adding a <p>Hello World</P> into the centre DIV causes the webpage to fix itself.

I have no styling on the P other than to change the colour and can't work out what is causing it.

I was trying to make the website HMTML 4.01 strict to avoid these inter-browser problems using but this one has caught me out.

I am new to this FORUM and so I am not sure of the correct way of doing this.

So I am happy to post code here or if someone wants to have a look at the website its he

http://www.sharpcoders.co.uk/index.htm

Simple clicking on HOME and then the tab marked "Windows Apps" will show the shifting I am talking about.

Thanks for any support or suggestions anyone can give me.

Regards,

Please could anyone help me.

Adding items to the left column moves the centre column, increasing the space betweeen centre column text and the header.
Could anyone help me with this.
Here is the detail.
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="default.css" title="default"/>
</head>
<body>
<div id="WholePage">
<div id="Inner">
<div id="Container">
<div id="Head">
<div id="Head_left">
<div id="Leaf_top"></div>
<div id="Leaf_bottom"> <a class="registration" href="">REGISTRATION</a> <a class="log-in" ">LOG IN</a> </div>
</div>
<div id="Head_right">
<div id="Logo">
<div id="Name"><span class="blue">A</span><span>dvance </span>&nbsp;<span class="blue">P</span><span>rofessional</span> </div>
<div id="Informations">Laundry | Catering | Auto Dosing Equipment </div>
</div>
<div id="Top_menu"> <a class="kart" href=""><span>KART</span></a> <a class="orders" href=""><span>ORDERS</span></a> <a class="contact" href=""><span>CONTACT</span></a> </div>
</div>
</div>
<div id="CentralPart">
<div id="LeftPart">
<div id="Menu">
<div id="Menu_header">
<div class="menu_header_left"> <span class="menu_text">LAUNDRY PRODUCTS</span> </div>
<div class="menu_header_right"> </div>
</div>
<div id="Menu_content"> <a class="menu_item" href=""><span>Professional Powder
</span></a><br/>
<a class="menu_item2" href=""><span>Non- Biological</span></a><br/>
<a class="menu_item2" href=""><span>Biological</span></a><br/>
<a class="menu_item" href=""><span>Professional Liquids</span></a><br/>
<a class="menu_item2" href=""><span>Biological</span></a><br/>
<a class="menu_item2" href="<span>Non-Biological</span></a><br/><a class="menu_item" href=""><span>Fabric Conditioners</span></a><br/>
<a class="menu_item2" href=""><span>Disinfecting</span></a><br/>
<a class="menu_item2" href=""><span>Peach Liquid</span></a><br/>
<a class="menu_item" href=""><span>Destainers</span></a><br/>
<a class="menu_item" href=""><span>Oxy Boost</span></a><br/> </div>
</div>

<div id="Menu">
<div id="Menu_header">
<div class="menu_header_left"> <span class="menu_text">CATERING PRODUCTS</span> </div>
<div class="menu_header_right"> </div>
</div>
<div id="Menu_content"> <a class="menu_item""><span>Warewashing</span></a><br/>
<a class="menu_item2" href=""><span>Auto Dishwash Liquid</span></a><br/>
<a class="menu_item2" href=""><span>Biological</span></a><br/>
<a class="menu_item2" href=""><span>Dish Wash Powder</span></a><br/>
<a class="menu_item2" href=""><span>Dish Wash Tablets</span></a><br/>
<a class="menu_item2" href=""><span>Rinse Aid</span></a><br/>
<a class="menu_item2" href=""><span>Tanin Stain Remover</span></a><br/>
<div id="Menu_content"> <a class="menu_item" "><span>Glass Washing</span></a><br/>
<a class="menu_item2" href=""><span>Auto Glasswash</span></a><br/>
<a class="menu_item2" href=""><span>Rinse Aid-Glasswash</span></a><br/>
<a class="menu_item2" href=""><span>Glass Renovating Powder</span></a><br/>
<a class="menu_item2" href=""><span>.....</span></a><br/>
<a class="menu_item2" href=""><span>Rinse Aid</span></a><br/>

<div id="Poll">
<div id="Poll_header">
<div class="menu_header_left"> <span class="menu_text">SERVICE</span> </div>
<div class="menu_header_right"> </div>
</div>
<div id="Poll_content"> <span class="poll_question">Laundry Systems</span><br/>
<a class="menu_item2" href=""><span>1111111</span></a><br/>
<a class="menu_item2" href=""><span>2222222</span></a><br/>
</div>
<div id="Poll_content"> <span class="poll_question">Warewashing Systems</span><br/><a class="menu_item2" href=""><span>3333333</span></a><br/>
<a class="menu_item2" href=""><span>44444</span></a><br/>
<a class="menu_item2" href=""><span>55555</span></a><br/>
<a class="poll_unswer" href=""><span>Laundry Dispensers</span></a><br/>
<a class="poll_unswer" href=""><span>Dishwash Dispensers</span></a><br/>

</div>
</div>
<div id="Banner"> <img src="img/banner.jpg" alt="" /> </div>
</div>
<div id="RightPart">
<div id="Page">
<div id="Page_header">
<h1>Save money by buying direct...</h1>
<table>
<tr>
<td class="page_header_img"><img src="img/basket.gif" alt="" /></td>
<td class="page_header_text"><p>Buy on-line direct from us. No middlemen and achive massive savings.</p></td>
<td class="page_header_img"><img src="img/idea.gif" alt="" /></td>
<td class="page_header_text"><p>All prices on our website include delivery. No hidden charges.</p></td>
</tr>
<tr>
<td class="page_header_img"><img src="img/car.gif" alt="" /></td>
<td class="page_header_text"><p>Should you have any queries or need some techinical advice, we are on hand. Just send us an email.</p></td>
<td class="page_header_img"><img src="img/envelope.gif" alt="" /></td>
<td class="page_header_text"><p>Donec at justo ac ipsum laoreet dapibus. Vivamus lacinia. Suspendisse ipsum. Morbi vitae nulla. In hac habitasse platea dictumst.</p></td>
</tr>
</table>
</div>
<div id="Page_top">
<p> Introductory Offer...Buy any 100 litres Get any 20 litres FREE<br/>
Great savings every month <a href="http://www.free-css.com/">libero,</a> <a href="">vestibulum ut,</a> <a href="">venenatis ac,</a> <a href="">interdum quis, mi.</a><br/>
Donec at justo ac ipsum laoreet <a href="">dapibus</a><br/>
<a href="http://www.free-css.com/">1</a> 2 3 .... 11 12 13<br/>
</p>
</div>
<div id="Page_center">
<table>
<tr>
<td class="page_center_button"><a class="page_center_buy" href="http://www.free-css.com/"><span>buy</span></a><a class="page_center_info" href=""><span>more-info</span></a> </td>
<td class="page_center_content"><div class="page_center_text"> <span class="blue2">Lorem ipsum dolor</span><br/>
<span class="gray">Donec at: justo ac</span><br/>
<span class="gray">Cras ut: ligula nec</span><br/>
<br/>
<span class="green">Price: $156</span><br/>
</div></td>
<td class="page_center_img"> </td>
<td class="page_center_button"> </td>
<td class="page_center_content"></td>
<td class="page_center_img2" > </td>
</tr>
<tr>
<td class="page_center_button"><a class="page_center_buy" href="http://www.free-css.com/"><span>buy</span></a><a class="page_center_info" href=""><span>more-info</span></a> </td>
<td class="page_center_content"><div class="page_center_text"> <span class="blue2">Lorem ipsum dolor</span><br/>
<span class="gray">Donec at: justo ac</span><br/>
<span class="gray">Cras ut: ligula nec</span><br/>
<br/>
<span class="green">Price: $156</span><br/>
</div></td>
<td class="page_center_img" > </td>
<td class="page_center_button"> </td>
<td class="page_center_content"></td>
<td class="page_center_img2" > </td>
</tr>
</table>
</div>
</div>
</div>
<div class="cleaner"></div>
</div>
<div id="Bottom">
<p class="down">Copyright &copy; 2007 <a href="">Design by: Sunlight webdesign</a> </p>
<div class="down2">
<p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a> </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in anticipation...Any other comments welcome to this novice.

Hi,

I'm a complete newb and html-challenged, so please forgive my stupid questions.

This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right?
So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks!

~Serena

P.S. is it possible to do mouseovers for certain coordinates on an image map?

I am currently working on a web site. and i have got a few problem's with it so far. with the image's streching. i want to make it so a 1px width image can stretch along with the web site when information is type in to the news ill give you a link to a image showing what i mean and a link to a copy of the web site since ilm not worried about people having it. Ilm great with 2d art.. and i suck with html. but i am learning slowly if anyone could help me with this problem i would he very great full!

if it needs any work done on the frame's i can do that if it would help.

i have attached files below! =]

edit: and here is a image on how it looks without text in the middle =] so u understand what i am getting on to more. =]

I made this site www.matildarestaurant.com

Right now for a special, I am trying to super impose an image into the upper left hand corner of the page. Just one image, in that corner specifically. How would I accomplish this?

It would be something like http://www.cornify.com/ only more specific in terms of position and less hilarious

thanks!

Hi,

I am new to writing html but am learning. I would like to be able to include an image on the site I am creating I am currently doing this by writing this;

<html>
<head>
<title>Title</title>
</head>
<body>
<u>Here is the text</u>
<img src="image1.jpeg" />
</body>
</html>

I then have the image i need saved in the same folder as the .htm file. When I load up the website my browser I get a small blue box with a question mark on it and an associated error described as "The requested URL was not found on this server". I was wondering if anyone might be able to help me out as I am sure there is just something quite simple I am getting wrong. Your help is most appreciated.

Cheers!! :-)

Hello,

Could someone please help I have made a very simple site

http://www.101.dentalcompanion.com

I placed a <span> image to sit on top, it works when crome opens but in internet explorer and firefox the image does not open.

I also added the same image in a <div> tag in the siidebar and the same issue crops up.

i thought I had it worked out but I just can't seem to make it work.

Thank you ever so much.

kama