Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Centering and CSS...

    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.

    HTML

    Code:
    <!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
    Code:
    @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;
    }
    Last edited by l Squid l; 11-27-2008 at 05:11 PM.

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.

    Code:
    #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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Your .css?

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    yes i have a couple of place holder there. hmm it centers only the table only...:???:

  • #5
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    what other way would you suggest to position these images and keep them centered?

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    okay he was asking you to do it like this..

    Code:
    <div id="wrapper">
         <div id="header"></div><!--endofheader-->
         <div id="body">
              <div id="left"></div><!--endofleft-->
              <div id="right"></div><!--endofright-->
         </div><!--endofbody-->
         <div id="footer"></div><!--endoffooter-->
    </div><!--endofwrapper-->
    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..

  • #8
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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:

    Code:
    <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!

  • Users who have thanked Avril for this post:

    l Squid l (11-29-2008)

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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. 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
    Code:
    <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>

  • #10
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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!

  • Users who have thanked Avril for this post:

    l Squid l (11-29-2008)

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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)

  • #12
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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:
    Code:
    #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:
    Code:
    <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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •