PDA

View Full Version : More Website Help Pweeaaase :D


Melonie Tomb Raider
16-08-08, 04:06
Ok, more on this bird website I've been working on.

Everything is properly centered on my computer, but the lady I'm making this for says that it's off centered. I figure I may be having alignment problems yet again, which seems to be an ongoing problem. :p

So, simply stated, is this centered properly? If not, can someone help me to fix it so that it will stay centered for different monitors, rather than just mine?

http://ffaandsupplies.110mb.com/index.htm

Thankies. ^.^

Natey168
16-08-08, 04:15
'Tis centered on mine.. I even tried it on three different browsers. =\ Maybe the lady herself is off-centered. =o :p

McMurphy
16-08-08, 07:10
On my browsers it is NOT centered... FF and IE..

Maby you should try to put som tables in there...

spikejones
16-08-08, 07:13
try this out for size:
http://mobiletech.no-ip.org/

if the link gives you a 403 forbidden error, let me know - i might have to work out my server permissions.

and the code rearranged and slightly rewritten. same basic issue as last time where the background image was in a non-stylized div and was merely centered on the page, while the other elements were absolutely positioned. with that combination, the elements will only line up properly on the screen size that they were developed on!!

Also of note is that you have a png image as your image map for navigation. IE wont properly support png transparency without additional code - the transparent areas will appear white. So... either convert format to .gif for best support (but lesser quality) or find the proper scripting to fix IE bug.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fancy Feathers Aviary and Supplies</title>
<style type="text/css">
<!--
body {
background-image: url(http://i222.photobucket.com/albums/dd270/JohnsSugar/bground.jpg);
background-repeat: repeat-x;
text-align: center;
padding: 0px;
margin: 0px;
}

#bgimage {
position:absolute;
width:833px;
height:708px;
left:130px;
top:15px;
}

#content1 {
position:absolute;
top:260px;
width:615px;
height:251px;
overflow: auto;
z-index:1;
left:260px;
}

#content2 {
position:absolute;
left:448px;
top:604px;
width:280px;
height:86px;
z-index:1;
}

#img1 {
position:absolute;
left:284px;
top:618px;
width:86px;
height:49px;
z-index:1;
}

#img2 {
position:absolute;
left:820px;
top:625px;
width:51px;
height:36px;
z-index:1;
}

#footer {
position:absolute;
left:437px;
top:708px;
width:303px;
height:12px;
z-index:1;
}

.style1 {
font-family: "Hobo Std";
color: #263398;
}
.style2 {font-family: "Hobo Std"}

.style5 {
color: #FF9900;
font-size: 14px;
}
.style6 {color: #FF9900}
.style7 {color: #5966CB}
.style8 {
font-size: 12px;
color: #5966CB;
}
.style18 { font-family: "Hobo Std";
color: #000000;
font-size: 12px;
}
-->
</style></head>

<body>



<div id="bgimage">
<img src="http://i512.photobucket.com/albums/t322/ffaandsupplies/birdsitebirds2copy.png" width="833" height="708" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="135,88,220,126" href="http://ffaandsupplies.110mb.com/index.htm" />
<area shape="rect" coords="278,86,357,130" href="http://ffaandsupplies.110mb.com/birds.html" />
<area shape="rect" coords="432,87,499,128" href="http://ffaandsupplies.110mb.com/toys.html" />
<area shape="rect" coords="560,86,677,130" href="http://ffaandsupplies.110mb.com/supplies.html" />
<area shape="rect" coords="149,24,652,83" href="http://ffaandsupplies.110mb.com/index.htm" />
</map>
</div>

<div id="content1">
<h2 align="center"><span class="style1">Welcome to Fancy Feathers Aviary and Supplies!</span></h2>
<p align="center" class="style2">This website is the beginning of seeing a dream come true. For over 20 years I have enjoyed everything BIRD! Now, here I am, ready for you to enjoy my handfed baby birds, rescues, rehomed birds, toys, and supplies. I hope you like what you see and come back often for updates!</p>
<p align="center" class="style2">As far as birds are concerned, whether you are looking for a handfed baby, or a mature bird that someone else had to rehome, just email me and I will give you more information. </p>
</div>

<div id="img1">
<div align="center"><img src="http://i512.photobucket.com/albums/t322/ffaandsupplies/tiels.gif" width="61" height="48" /></div>
</div>

<div id="content2">
<div align="center" class="style2"><span class="style7">Fancy Feathers Aviary and Supplies</span> <br />
<span class="style5">FFAandSupplies@aol.com</span><br />
<span class="style6">(501) 353-4574</span><br />
<span class="style8">FFAandSupplies.110mb.com</span><br />
</div>
</div>



<div id="img2">
<div align="center"><img src="http://i512.photobucket.com/albums/t322/ffaandsupplies/bluebirds.gif" width="32" height="32" />
</div>
</div>


<div id="footer">
<div align="center"><span class="style18">Website Designed By: <a href="http://melonie1121.deviantart.com/">Melonie</a></span>
</div>
</div>

</body>
</html>

jamieoliver22
16-08-08, 09:28
It is because you are using absoulte positioning, I have meantioned to you about it before. It will set it so it is a certain amount of pixels from the left, which won't fit correctly if the users resolution isn't the same as yours. All you need to do, is center the div using margin:0px auto; and the text centered by using text-align:center; .

Melonie Tomb Raider
16-08-08, 14:49
Thanks so much everyone! :hug:

And jamie, thanks for the reiteration, I forget these things sometimes. :p

spikejones
16-08-08, 16:53
It is because you are using absoulte positioning, I have meantioned to you about it before. It will set it so it is a certain amount of pixels from the left, which won't fit correctly if the users resolution isn't the same as yours. All you need to do, is center the div using margin:0px auto; and the text centered by using text-align:center; .

not all browsers support the margin:0px auto; style (IE) work around is to use text-align:center for the body in order to align the divs on the center of the page

although i was having issues with using the margin:0px auto tag considering the fact that there are different layers to the page:confused:

jamieoliver22
16-08-08, 17:55
not all browsers support the margin:0px auto; style (IE) work around is to use text-align:center for the body in order to align the divs on the center of the page

I have always used margin:0px auto; (mostly for the main page div container to center the whole website) and it has always displayed fine. IE6+ doesn't have any problems with it from what I have seen.

spikejones
16-08-08, 18:58
I have always used margin:0px auto; (mostly for the main page div container to center the whole website) and it has always displayed fine. IE6+ doesn't have any problems with it from what I have seen.

thats what i thought too, but i loaded a page that I made using only that style and it did not center on IE 5 or 6 - i had to use the text-align:center in my body (or rather page div) the rest is in a separate div called wrapper. see it here:

http://umporchestra.heliohost.org

BTW, have you ever used the firebug extension on Mozilla Firefox? great tool for messing with CSS properties - test them out before you change the actual code!

jamieoliver22
16-08-08, 22:51
thats what i thought too, but i loaded a page that I made using only that style and it did not center on IE 5 or 6 - i had to use the text-align:center in my body (or rather page div) the rest is in a separate div called wrapper. see it here:

http://umporchestra.heliohost.org

BTW, have you ever used the firebug extension on Mozilla Firefox? great tool for messing with CSS properties - test them out before you change the actual code!

Fair enough then, you know what IE is like...

And no, I use the Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60) to do that, it has loads of features for that kind of thing.