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 5 of 5

Thread: Tables/CSS

  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tables/CSS

    Pretty much I have tried a lot of different things to get this to work but nothing seems to be happening.

    I want to have simple Text/Links on top of an image. Normally this would be easy but for some reason its just not working for me.
    There is some extra code that is not needed in both of these im sure. This is due to me messing around trying to get it to work. As I said, I honestly cant figure it out.
    Any help is greatly 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" xml:lang="en">
    
          <head>
    
              <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
              <meta name="author" content="thebrotherhood313@gmail.com" />
    
          <title>Portfolio</title>
    
    <style type="text/css" media="screen" title="Main Stylesheet">@import "style.css";</style>
    
          </head>
    
          <body>
    
    <center><table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td width="800" height="135" colspan="6">
    			<img src="images/spacer.gif" width="800" height="135" alt=""></td>
    	</tr>
    	<tr>
    		<td width="135" height="465" rowspan="5">
    			<img src="images/spacer.gif" width="135" height="465" alt=""></td>
    		<td colspan="3" rowspan="2">
    
                            <img src="images/header.png" width="365" height="90" alt=""></td>
    
    		<td>
    			<img src="images/logo.png" width="165" height="89" alt=""></td>
    		<td width="135" height="465" rowspan="5">
    			<img src="images/spacer.gif" width="135" height="465" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/portfolio_06.png" width="165" height="1" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/content.png" width="340" height="225" alt=""></td>
    		<td>
    			<img src="images/portfolio_08.png" width="1" height="225" alt=""></td>
    		<td colspan="2">
    			<img src="images/bottom-right.jpg" width="189" height="225" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4">
    			<img src="images/footer.png" width="530" height="13" alt=""></td>
    	</tr>
    	<tr>
    		<td width="530" height="137" colspan="4">
    			<img src="images/spacer.gif" width="530" height="137" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="135" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="340" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="24" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="165" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="135" height="1" alt=""></td>
    	</tr>
    </table></center>
    
          </body>
    
          </html>
    CSS:
    Code:
          body {
    
              background: url(images/background.jpg) repeat-x;
    
              text-align: center;
    
              margin: 0px auto;
    
              font-family: arial;
    
              font-size: 11px;
    
          }
    
    
          #container {
    
              width: 530px;
    
              margin: 0px auto;
    
              text-align: left;
    
              padding: 135px;
    
    
          #header {
    
              width: 365px;
    
              background: url(images/header.png)
    
              height: 90px;
    
              padding: 0px;
    
          }
    
    
          #header .header {
    
              background-image: url(images/header.png);
    
              width: 365px;
    
              height: 90px;
    
              color: #FFF
    
          }
    
    
              #header a {
    
                  font-size: 20px;
    
                  font-family: arial;
    
                  color: #000;
    
                  text-decoration: none;
    
              }
    
                  #header a:hover {
    
                      text-decoration: underline;
    
                  }
    
    
          #content {
    
              width: 530px;
    
              background-color: #FFF;
    
              float: center;
    
              margin: 0px auto;
    
          }
    
              #content .header {
    
                  background-color: #FFF;
    
                  width: 325px;
    
                  padding-left: 10px;
     
                  color: #000;
    
              }
    
    
              #content .text {
    
                  background-color: #FFF;
    
                  width: 325px;
    
                  padding-left: 40px;
     
                  color: #bfbfbf;
    
              }
    
    
          #footer {
    
              width: 544px;
    
              background: url(images/footer-bg.jpg) repeat-x;
    
              height: 15px;
    
              padding: 5px;
    
              margin-top: 5px;
    
              color: #bfbfbf;
    
              font-size: 10px;
    
          }
    
          .end {
      
              clear: both;
    
          }
    Right now the background and "content" box are fine. I just need to get text on top of those without the boxes being spread all of the screen.

    Image files are attached. I dont have a test website, I am doing this off of my computer.

    Edit: And if I have to use CSS to move the images around on the page, thats fine. Its just that I couldnt get that working either so I switched to tables. Which apparently arent working either =\
    Attached Files Attached Files
    Last edited by Brotherhood313; 06-06-2007 at 08:19 PM.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    What is usually do to put text on an image is
    1. Position the text to be on top of the image
    2. make the image a background image

    edit:// Just looked at the images (they look nice), I would use divs. and make the images background images.
    Last edited by twodayslate; 06-06-2007 at 08:30 PM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats what I have been trying to do, I cant get it to work since the tables are set up like this.
    I put for example instead of
    Code:
    <img src="images/header.png" width="365" height="90" alt="">
    I would put:
    Code:
    <div id="header">Test</div>
    And because of the tables I believe, it just doesnt want to work for me. I cant figure it out.

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Code:
    <div style="background: url(URL OF IMAGE);">TEXT HERE</div>
    That is what you want correct?

    edit:// If that is not what you want you can do the same thing with the table
    Code:
    <td style="background: url(URL OF IMAGE);">TEXT HERE</td>
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect. Thank you so much

    This problem has been solved. Feel free to close.


  •  

    Posting Permissions

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