Find your solution!

jtn3833 · 01-Nov-2009, 05:07 PM #1

I'm relatively new to CSS and I'm using it to perfectly place a few images in relation to each other using the z-index. I have everything where I want them using absolute and relative code I found and barely understand - but I can't get the entire page to center.

I thought it would be easy to put a "wrapper" div around everything and center that but it doesn't work.

I think it has something to do with the images being taken out of the flow by the absolute and relative positioning code. I need them exactly where they are in relation to each other but I'd like to center the entire thing.

code available upon request.
thanks,
JTN

Eriksrocks · 03-Nov-2009, 12:18 AM #2

Try adding "position: relative" to the wrapper div. If that still doesn't work, you're going to have to try using all relative positioning or finding another method to arrange the images how you would like them.

Code would help.

jtn3833 · 05-Nov-2009, 09:39 AM #3

The "position: relative" didn't work, thanks though.

Here's the HTML:
-------------------------------------------
<div id="wrapper">

<body onload="MM_preloadImages('images/nav/comics2.png','images/nav/games2.png')">
<div id="container-map"><a href="index.html"><img src="images/logo2.png" border="0" class="logo" /></a><img src="images/heros/hero-front.png" border="0" usemap="#Map" class="front" />
<map name="Map" id="Map"><area shape="rect" alt="email us here" coords="225,12,453,30" href="mailto:gerald@bigcitycomix.com" /></map>
<img src="images/heros/hero-back.png" class="back" />
<div class="info-box">

<div align="center">
<table width="695" border="0" cellpadding="10" cellspacing="0">
<tr valign="top">
<td><a href="comix.html" target="_top" onclick="MM_nbGroup('down','group1','Comics','images/nav/comics2.png',1)" onmouseover="MM_nbGroup('over','Comics','images/nav/comics2.png','images/nav/comics2.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav/comics1.png" alt="Comics" name="Comics" width="135" height="35" border="0" id="Comics" onload="" /></a></td>
<td><img src="images/nav/map2.png" alt="map to our location" name="map" width="70" height="35" border="0" id="map" onload="" /></td>
<td><a href="games.html" target="_top" onclick="MM_nbGroup('down','group1','games','images/nav/games2.png',1)" onmouseover="MM_nbGroup('over','games','images/nav/games2.png','images/nav/games2.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav/games1.png" alt="games & tournament info" name="games" width="401" height="35" border="0" id="games" onload="" /></a></td>
</tr>
<tr valign="top">
<td colspan="3"><div align="center"><iframe width="680" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=big+city+comix+%2B6414 5&sll=38.905194,-94.607799&sspn=0.008282,0.013797&gl=us&ie=UTF8&hq=big+city+ comix&hnear=Kansas+City,+MO+64145&ll=38.926297,-94.599323&spn=0.066246,0.110378&z=13&iwloc=A&cid=1421737790 2084214564&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=big+city+comix+%2B64 145&sll=38.905194,-94.607799&sspn=0.008282,0.013797&gl=us&ie=UTF8&hq=big+city+ comix&hnear=Kansas+City,+MO+64145&ll=38.926297,-94.599323&spn=0.066246,0.110378&z=13&iwloc=A&cid=1421737790 2084214564" style="color:#0000FF;text-align:left">View Larger Map</a></small></td>
</tr>
</table>

</div>

</div>
</div>
-------------------------------------------

Here's the CSS:
-------------------------------------------
@charset "utf-8";
/* CSS Document */

body {
font-family:Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
border: 0px;
background-image:url(../images/background/comic-background.jpg);
}

#wrapper {
width: 960px;
margin: 0 auto 0 auto;
position: relative;

}

br.clear {
clear:both;
}

#container {
width: 945px;
height: 600px;
margin: 0 10px 0 10px;
border: 5px solid black;
}

#container-map {
width: 945px;
height: 875px;
margin: 0 10px 0 10px;
border: 5px solid black;
}

.center {
vertical-align: top;
width: 869px;
margin: 0 0 0 0;
}

#hero-back {
position: relative;
z-index: 10;
width: 1024px;
height: 550px;
margin: 40px auto 0px auto;
}

#hero-front {
position: relative;
z-index: 1;
width: 654px;
height: 473px;
margin: 40px auto 0px auto;
}

#front_box {
position:relative;
display:block;
}

img.front {
position: absolute;
top: 200px;
left: 285px;
}

#logo_box {
position:relative;
display: block;
}

img.logo {
position: absolute;
top: 5px;
left: 35px;
}

#back_box {
position:relative;
display: block;
}

img.back {
position: absolute;
top: 115px;
left: 10px;
z-index: -5;
}

.info-box {
background-color:#FFFF00;
width: 700px;
position: absolute;
top: 350px;
left: 135px;
z-index: 50;
border: 5px solid black;
clear: both;
}

#footer {
position: absolute;
left: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 9px;

}
-------------------------------------------

...you can see the site at www.BigCityComix.com

Thanks for your help,
JTN

colinsp · 06-Nov-2009, 01:14 AM #4

Looking at your site it takes an age to load with the way that you have your graphics being loaded. You are also using tables in not the recommended way. This is typical of the way that Dreamweaver creates code of this type.

IMHO your best way forward would be to create a gif image that contains all of your page other than the navigation. Create a centred container div with this graphic as the background and then poosition your navigation dive appropriately within this div. The title and location boxes should be part of your gif image.

If you do this it will give you a faster loading page, lose the tables and allow you to position the nav div easily where you want it.

jtn3833 · 06-Nov-2009, 11:27 AM #5

colinsp - Of course, why didn't I think of making all of the images into one. I was so excited that I finally figured out how to layer images with CSS that it didn't even cross my mind, and it would speed up the page considerably.

My only concerns are:
1- a gif won't give me the image quality I'm looking for along with transparency - maybe I'll make it into a jpg or something.
2- I don't know how to do rollovers with CSS, hence the tables. Can you point out a good website tutorial?

Thanks,
JTN

colinsp · 07-Nov-2009, 01:37 AM #6

If a gif won't do what you want try a png it will be smaller than a jpg you want the image to be ideally under about 60k.

As to menu rollover tutorials there are loads of them out there, here's a couple of url's
http://www.cssplay.co.uk/menus/
http://www.chouselive.co.za/tutorial...useover-00.php
http://www.xentrik.net/css/
http://www.webcredible.co.uk/user-fr...ion-menu.shtml
http://css-tricks.com/video-screencasts/

Have a look at those and I am sure you will crack it. But come back if you have any specific issues.

Eriksrocks · 07-Nov-2009, 02:00 AM #7

Yes, colinsp's idea is better than trying to deal with absolute positioning and tables.

jtn3833 · 09-Nov-2009, 02:56 PM #8

Okay, I've almost got it done and it loads soo much faster. You can see it here.

I currently have 2 problems:

1- Before I used Dreamweaver's Image Mapping to make the email address of an image clickable, but that's no longer an option because it's a background image. I've looked and cannot find a way to put coordinates or something to make a section of background clickable for a mailto tag. My only thought is to put a transparent png or something directly in front of the email address and have that be the mailto button. Is there an easier way?

2- I used the first in the list of tutorials you posted to do css rollovers (thanks for that), so I'm not sure if this is a problem or not but the only way I was able to align the nav buttons horizontally was by using a table. Without the table they stair stepped down and I'm pretty sure it's because of the <p> tag.

Thanks for you help, I really appreciate it,
JTN

colinsp · 10-Nov-2009, 01:28 AM #9

Hey, that's great it loads so much faster and looks just as good as your original.

1: The transparent png is probably the best idea unless someone comes up with a better one.

2: have a look at this video I think that it will help with the rollovers.

jtn3833 · 10-Nov-2009, 10:46 PM **#10**

I haven't worked on the rollovers yet because I had an idea...

Why does the large image need to be a background image? Using CSS I should be able to position the nav bar on top of the heroes image even if it's a real image and not a background. As a 'real' image I would be able to image map it for the email address button, but for some reason it's not working.

as seen here, you need to scroll down to find the nav.

I have the z-index of the nav set to 50, so does z-index only work over a background image?

What is the advantage of having everything as a background image in div's? Does it load faster or is it just so you can z-index things on top of it?

Thanks for your help,
JTN

colinsp · 11-Nov-2009, 01:51 AM **#11**

I have never used an image map so I am not certain but I suspect you are falling foul of the css box model. Your page does seem to take longer to load now you have made this change over how it loaded when it was a background image. If you don't want to go the png route you could make the contact box a separate div with the background all except the email address and then make the email address a mailto: and then position the vav div below it.

Tag Cloud
access audio blue screen boot bsod connection crash dell desktop driver drivers dvd email error excel excel 2003 firefox hard drive hardware hijackthis internet keyboard laptop malware monitor motherboard network networking outlook problem processor recovery router screen slow sound spyware tdlwsp.dll trojan upgrade vba video virus vista vundo windows windows 7 windows vista windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for: