SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need suggestions on how I could accomplish this

    I am trying to redo my site using XHTML, but I run into a problem early on. I used two tables, one on top of each other, to get the layout to work. To use CSS, I tried finding 3 column liquid tempates and copying the 3 columns again to make the one on top of the other effect, but it's not working. There is always a gap somewhere, even when I set everything to margin and padding: 0px.

    This is the HTML of what I want to redo. I didn't think it would be this hard:
    HTML Code:
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
     	 <tr>
     	<td width="1%"><img src="http://www.ceetus.com/images/redviva.gif"></td>
     	<td width="98%" bgcolor="#BA0606">&nbsp;</td>
     	<td width="1%"><img src="http://www.ceetus.com/images/redlogo.gif"></td>
     	 </tr>
        </table>
     
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
     
     	 <tr>
     	<td width="1%"><img src="http://www.ceetus.com/images/redmic1.gif"></td>
     	<td width="99%" background="http://www.ceetus.com/images/redmicbg.gif"></td>
     	 </tr>
     
     	 <tr>
     	<td colspan="2" align="left"><img src="http://www.ceetus.com/images/redmic2.gif"></td>
     	 </tr>
        </table>
    Is there an easy way to have a left and right image with the middle expanding to fit perfectly between the images and then have the same thing underneath that, but have the images be different sizes?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sjaguar13
    Is there an easy way to have a left and right image with the middle expanding to fit perfectly between the images and then have the same thing underneath that, but have the images be different sizes?
    I'm afraid that makes no sense to me. How many columns is there? Is the layout fixed of fluid?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    How many columns is there? Is the layout fixed of fluid?
    3 and 2. Fluid.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sjaguar13
    3 and 2.
    What do you mean 3 and 2? It's either one or the other. Or are you doing two different layouts. If so, pick one to work on first and then we'll go from there.

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sjaguar13
    Is there an easy way to have a left and right image with the middle expanding to fit perfectly between the images and then have the same thing underneath that, but have the images be different sizes?
    The reliable way to have an image expand is to use background-repeat which may not give you the results you are after.

    As for the rest of your post, I don't really follow what you are trying to do. First you mention tables and then a fluid css 3 coloumn <div ?> layout....

    An example of what you are trying to do would be best and probably get you more help. Can you post a link to what you are trying to do.

    Nadia

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I posted the HTML code with absolulte paths to the images so you could see what I have. The HTML code uses tables, but I want it to change it so it's all valid XHTML.

    Tyssen, please look at the HTML code I posted. It shows what I want to do. You can see there are two tables, one on top of the other. The top table has 3 columns and the bottom one has 2. That's where the 3 and 2 come from. Also, you can see it is a fluid design just by looking at the code.

    Nadia, I mention tables because that's the design I have. It's done using tables and I posted the code. I want to change it to an XHTML layout, that's why I mention the 3 columns CSS layouts.

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sjaguar13
    The top table has 3 columns and the bottom one has 2. That's where the 3 and 2 come from.
    Well that's where I was getting confused. Thinking in CSS and not tables, when I looked at your design I saw a two-column layout with a header - I wasn't thinking of the header in terms of columns so when you said 3 columns I didn't really know what you wanted.
    So, your layout would be this:

    <div id="header">
    <img microphone>
    <img logo>
    </div>
    <div id="left"></div>
    <div id="right"></div>

    The cord of the microphone would be the background-image for the header.
    The microphone image in the header would be in the HTML and would be positioned with margins. Your header would need to be a certain height so that the bg image matched up with the mic image.
    The logo image would be floated right.
    Your left column would be floated left with a width.
    Your right column would have a margin-left wider than the left column - no float or width on this column.
    The bottom part of the microphone image would be set as a bg image of the left column.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I came up with:
    HTML Code:
    <head>
      <style>
       #header {
    	 background-color: red;
    	 height: 79px;
       }
    
       #header2 {
    	 width: 100%;
    	 height: 40px;
       }
    
       img {
    	 padding: 0xp;
    	 margin: 0px;
      </style>
    </head>
    
    
    <body>
    <div id="header"><img src="http://www.ceetus.com/images/redviva.gif" style="float: left;"><img src="http://www.ceetus.com/images/redlogo.gif" style="float: right;"></div>
    <div id="header2"><span style="float: left; width: 208px;"><img src="http://www.ceetus.com/images/redmic1.gif"></span><span style="background-image: url('http://www.ceetus.com/images/redmicbg.gif'); margin: 0 0 0 208px; float: right;"></span></div>
    </body>
    The problem is with the mic cord background. I cannot make it the full header2 background because it doesn't line up. I need the background to start right when the mic image ends. I cannot get the span with the background to show up at all, unless I tell it the width, but I just want it to fill in the rest of the screen. How do I get it to expand to fit the screen?

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <style>
       #header {
    	 height: 125px;
    	 background: red url('http://www.ceetus.com/images/redmicbg.gif') repeat-x bottom left;
       }
      </style>
    </head>
    
    
    <body>
    <div id="header">
    <img src="http://www.ceetus.com/images/redlogo.gif" style="float: right;">
    <img src="http://www.ceetus.com/images/redviva.gif">
    </div>
    
    </body>
    Also, you need to reslice redviva.gif so that it includes the part of the image that meets up with the mic cord (ie it should be deeper).

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see this working out. I should probably just stick with the tables because at least I know everything works like it should. Thanks anyway.


Bookmarks

Posting Permissions

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