Centering and CSS...

l Squid l

11-27-2008, 04:41 PM

http://kumarafoundation.com/index2.html

in FF there's a gap so just disregard that.(Unless you know how to fix that!)

My problem is centering this. I ahve tried text align:center, margin 0 auto + width: (blah blah), and margin left:0 + margin right:0

nothign works...

Any help is appreciated.:thumbsup:

HTML

<!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>Kumara Foundation</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

<body>
<div id="wrapper">
<table width="582" border="0" align="center" cellpadding="0" cellspacing="0" class="fixed">
<tr>
<td colspan="7"><img src="images2/KF_02.png" width="582" height="135" /></td>
</tr>
<tr>
<td width="59"><img src="images2/KF_05.png" /></td>
<td width="82"><img src="images2/KF_06.png" /></td>
<td width="102"><img src="images2/KF_07.png" /></td>
<td width="107"><img src="images2/KF_08.png" /></td>
<td width="72"><img src="images2/KF_09.png" /></td>
<td width="76"><img src="images2/KF_10.png" /></td>
<td width="84"><img src="images2/KF_11.png" /></td>
</tr>
<tr>
<td colspan="7"><img src="images2/KF_12.png" /></td>
</tr>
</table>
<img src="images2/KF_13.png" width="198" height="42" class="arrowBox" />
<img src="images2/KF_14.png" width="384" height="56" class="contentHeader" />
<img src="images2/KF_15.png" width="18" height="152" class="lnLeft" />
<img src="images2/KF_16.png" width="163" height="152" class="lncontent" />
<img src="images2/KF_17.png" class="lnRight" />
<img src="images2/KF_18.png" class="contentDel"/>
<img src="images2/KF_19.png" class="contentRight" />
<img src="images2/KF_21.png" width="364" height="24" class="contentBottom"/>
<img src="images2/KF_20.png" width="198" height="138" class="adspace" />
<img src="images2/KF_22.png" class="footer" />
</div>
</body>
</html>

CSS
@charset "utf-8";
/* CSS Document */

body
{
background-color:#000;
}

#wrapper
{
width: 582px; /* or whatever it is exactly */
margin: 0 auto;
}

.fixed
{
position:absolute;
}

.arrowBox
{
position:absolute;
left:10px;
top:197px;
}

.contentHeader
{
position:absolute;
left:208px;
top:197px;
}

.lnLeft
{
position:absolute;
left:10px;
top:239px;
}

.lncontent
{
position:absolute;
left:28px;
top:239px;
}

.lnRight
{
position:absolute;
left:191px;
top:239px;
}

.contentDel
{
position:absolute;
left:208px;
top:253px;
}

.contentRight
{
position:absolute;
left:572px;
top:253px;
}

.contentBottom
{
position:absolute;
left:208px;
top:505px;
}

.adspace
{
position:absolute;
left:10px;
top:391px;
}

.footer
{
position:absolute;
left:10px;
top:529px;
}

gnomeontherun

11-27-2008, 04:48 PM

If you use auto margins you must define the width of the element. Also a DIV is always a block element, so change your <div> to having the id of "wrapper" for this example.

#wrapper
{
width: 700px; /* or whatever it is exactly */
margin: 0 auto;
}

<div id="wrapper">
everything else
</div>

Then why is everything positioned absolutely? It looks like this is the output of a slicing program, but regardless the layout doesn't have any space for text or anything, you should not have all of those images (perhaps as placeholders for now?) as absolute.

Avril

11-27-2008, 04:51 PM

Your .css?

l Squid l

11-27-2008, 05:02 PM

yes i have a couple of place holder there. hmm it centers only the table only...:???:

gnomeontherun

11-27-2008, 05:21 PM

Because everything else is position: absolute which takes it out of the normal flow of the document. Basically, you have to remove all of that from the CSS, like I said. Then of course your images will likely go haywire, but everything will be centered.

l Squid l

11-28-2008, 04:05 AM

what other way would you suggest to position these images and keep them centered?

jhaycutexp

11-28-2008, 05:09 AM

okay he was asking you to do it like this..

<div id="wrapper">
<div id="header"></div>
<div id="body">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>

just thing of the wrapper as a container like for example.. a water jug.. and your elements or contents as the water...

so to keep the water intact and not spill, you need a container that holds them.. and in that way, once you move the jug/container, the whole content/s or the water moves along with it..

then about the positioning thing you were asking, you will be using floats to position each elements..

hope this helps..

Avril

11-28-2008, 05:43 AM

Oooh! You are going to have a tons of code! Do you have photoshop or another image app? I suggest you combine your images into one each for the left and right panels and using them as background images, then layer text over them.

All your content should be entered between the "wrapper" division, so it will be more logical to give the wrapper a fixed height, then put in all the other divs. Here's a sample. I've given each div a different colour, so you can recognize them:

<html>
<head>
<title>Sample layout</title>
<style type="text/css">
body {margin: 0px; border: 0px; background-color: #000000;}
#wrapper {margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; width: 650px; height: 650px; background-color: #cae5f4;}
#header {width: 650px; height:135px; background-color:#f0f4bb; background-image: url(images/Kf_02.png); background-repeat: no-repeat;}
#navbar {width: 650px; height: 20px; background-color: #c4b8fa;}
#leftpanel {float: left; clear: right; margin: 10px; width:190px; height: 475px; background-color: #d0f5cf;}
#rightpanel {float: right; margin:10px; width: 420px; height: 475px; background-color: #f5d3e9;}

</style>
</head>
<body>
<div id="wrapper">

<div id="header">Your header comes here with a background image.
</div>
<div id="navbar">
Navbar comes here</div>

<div id="leftpanel"> left panel here (with your background images)
</div>

<div id="rightpanel"> right panel here (with your background images)

</div>

</body>
</html>

Good luck!

l Squid l

11-28-2008, 02:21 PM

I have adjusted it as you said, but I could use the navi as BG images because I wanted to be able to link them. I also had to get rid of some parts of the design because the content was very small. Is there another step?(in response to Avril, for IE)this is how it looks now (http://kumarafoundation.com/index3.html). It works in FF THANKS so much, I don't knwo where I'd be wothput this forum and all its helpful members!

Here is the

HTML
<html>
<head>
<title>Sample layout</title>
<style type="text/css">
body {margin: 0px; border: 0px; background-color: #000000; }
#wrapper { margin: 0 auto; width: 582px; height: 600px;}
#header {width: 582px; height:135px; background-image: url(images3/KF_02.png); background-repeat: no-repeat;}
#navbar {width: 582px; height: 29px;}
#navbar2 {width: 582px; height: 19px; background-color:#0F3; background-image:url(images3/KF_12.png);}
#rightpanel { width: 582px; height: 401px; background-image:url(images3/KF_13.png);}
#footer {width:582px; height:15px; background-image:url(images3/KF_14.png);}

</style>
</head>
<body>
<div id="wrapper">

<div id="header"></div>
<div id="navbar"><img src="images2/KF_05.png" width="59" height="29" hspace="0" vspace="0" /><img src="images3/KF_06.png" width="82" height="29" hspace="0" vspace="0" /><img src="images3/KF_07.png" width="102" height="29" hspace="0" vspace="0" /><img src="images3/KF_08.png" width="107" height="29" hspace="0" vspace="0" /><img src="images3/KF_09.png" width="72" height="29" hspace="0" vspace="0" /><img src="images3/KF_10.png" width="76" height="29" hspace="0" vspace="0" /><img src="images3/KF_11.png" width="84" height="29" hspace="0" vspace="0" />
</div>
<div id="navbar2"></div>

<div id="rightpanel">

</div>
<div id="footer">
</div>
</div>

</body>
</html>

Avril

11-28-2008, 08:04 PM

Hi!

Create your navbar links with your image as explained here:
http://manisheriar.com/blog/graphic-nav-bars-one-image

and then nest it in the navbar div.

For IE stylesheets and conditional statements, I hope someone in this forum will give you the method as I work on a Mac and cannot access a PC easily.

Have fun!

l Squid l

11-29-2008, 11:40 PM

Thanks, is there any really things I cant do if I haven't coded as oen images(liek cons fo coding it in separate images)

Avril

11-30-2008, 05:28 PM

If you wish to use a different image for each navbar link, you would have to make each link a separate div (and code each division separately, of course). Try this:

CSS:
#navbar {width: 612px; height: 19px; background-color:#b0bde4; text-align: center;}

#navlink1 {float: left; clear: right; width: 100px; height: 19px;background-image: url(images/linkimage1.jpg); background-color: #a7e7b3; display: inline; border: 1px solid red;}

#navlink2 {float: left; clear: right; width: 100px; height: 19px;background-image: url(images/linkimage2.jpg); background-color: #a7e7b3; display: inline; border: 1px solid red;}

#navlink3 {float: left; clear: right; width: 100px; height: 19px;background-image: url(images/linkimage3.jpg); background-color: #a7e7b3;display: inline;border: 1px solid red;}

#navlink4 {float: left; clear: right; width: 100px; height: 19px;background-image: url(images/linkimage4.jpg); background-color: #a7e7b3;display: inline;border: 1px solid red;}

#navlink5 {float: left; clear: right; width: 100px; height: 19px;background-image: url(images/linkimage5.jpg); background-color: #a7e7b3; display: inline;border: 1px solid red;}

#navlink6 {float: left; clear: right; width: 100px; height: 19px;background-image: url(images/linkimage6.jpg); background-color: #a7e7b3; display: inline;border: 1px solid red;}

.html:
<div id="navbar">

<div id="navlink1">First link</div>
<div id="navlink2">Second link</div>
<div id="navlink3">Third link</div>
<div id="navlink4">Fourth link</div>
<div id="navlink5">Fifth link</div>
<div id="navlink6">Sixth link</div>

</div>

If you look at the code you will see that the navbar background colour is blue, but overlayed with the 6 nested links which here are in green. Each of the links will have its own background image (linkimage). Text can be written on top of the image. Adjust size of the navbar, links and link images to what you require.

Cheers!