SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Couple of questions about positioning/alignment

    Hi all,

    I have a few problems with my upcoming site in firebird. I have a top/bottom menu, with a background repeated image in the middle. There seems to be a tiny (2-3px) gap between the top image and the middle, but not on the bottom. Can anybody explain this? If you need the link, I'll post it, I Just thought it might be cosnidered advertising, and the fact that it's not open means I don't want it in my signature yet.

    Another problem is I need a way to replace <center> or align="center", other than text-align: center. I have 2 tables and neither of them are centered, even with text-align: center on both the TD it's inside and the table itself. If I put a <center> around the table or an align="center" on the table, it works. My question: what's the way to do this and XHTML 1.1 compliant?

    Regards,
    Someonewhois

  2. #2
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be nice if you'd put a link so we can see your HTML and CSS code.

  3. #3
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, alright, it's nathanwwong.com.. in firebird there's a gap near the top of the menu, and the feedback boxes aren't aligned properly. Thanks for your reply!

    Regards,
    Someonewhois

    P.S. You'll have to look at it in IE and Firebird to get what I mean. Thanks again.

  4. #4
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried making the height a certain size? Like putting <table height="10"> or something ridiculous like that to see if it pushes them together?

  5. #5
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmmm, I'll try that now, never thought of that. Thanks [img]images/smilies/smile.gif[/img] Also the centering bug is a problem.

    Thanks for your help, I appreciate it. [img]images/smilies/smile.gif[/img]

    Edit:

    Nope, didn't work.. Any other ideas

  6. #6
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Replace all the code within td class="left":

    HTML Code:
    <td class="left"><br/>
    <table border="0" cellspacing="0" cellpadding="0">
    <tr><td><img src="topmenu.gif" alt="" /></td>
    </tr>
    <tr style="background-image:url(menumiddle.gif);">
    <td valign="top" class="left"><span class="subheader">Links</span><br/>
    	<a href="index.php" title="View Main Page">Home</a><br/>
    	<a href="faq.php" title="View Frequently Asked Questions">FAQ</a><br/>
    	<a href="skillset.php" title="View Complete Skillset">Skillset</a><br/>
    	<a href="hosting.php" title="Need Hosting?">Hosting</a><br/>
    	<a href="contact.php" title="Contact Me">Contact</a><br/>
    	<a href="examples.php" title="See my Work">Examples</a><br/>
    	<a href="whyme.php" title="Why Choose Me?">Why Nathan</a><br/><br/><br/>
    </td>
    	</tr>
    	<tr style="background-image:url(menumiddle.gif);">
    	<td class="left"><span class="subheader">Feedback</span><br/>
    	<table width="80%" border="0" 
    cellspacing="0" cellpadding="5" class="feedback" 
    onmouseover="this.style.border='#FF0000;'">
    	<tr>
    	<td>
    	Test 3 - Person 3
    	</td>
    	</tr>
    	</table><br/>
    	<table width="80%" border="0" cellspacing="0" cellpadding="5" class="feedback">
    	<tr>
    	<td>
    	Test 2 - Person 2
    	</td>
    </tr>
    </table><br/>
    </td>
    </tr>
    <tr><td><img src="bottommenu.gif" alt="" /></td></tr>
    </table>
    </td>
    With this:

    HTML Code:
    <td class="left"><br/>
    <div style="vertical-align: top;">
    <div
    style="background:
    url(topmenu.gif)
    no-repeat;
    width: 257px; height: 45px;">
    </div>
    <div class="linkBlock">
    <span class="subheader">Links</span>
    	<a href="index.php" title="View Main Page">Home</a>
    <a href="faq.php" title="View Frequently Asked Questions">FAQ</a>
    <a href="skillset.php" title="View Complete Skillset">Skillset</a>
    <a href="hosting.php" title="Need Hosting?">Hosting</a>
    <a href="contact.php" title="Contact Me">Contact</a>
    <a href="examples.php" title="See my Work">Examples</a>
    <a href="whyme.php" title="Why Choose Me?">Why Nathan</a>
    </div>
    <div class="linkBlock">
    <span class="subheader">Feedback</span><br/>
    <div class="feedback" 
    onmouseover="this.style.border='#FF0000';">
    Test 4 - Person 4
    </div><br/>
    <div class="feedback">
    Test 6 - Person 6
    </div><br/>
    </div>
    <img src="bottommenu.gif" alt="" />
    </div>
    </td>
    You didn't need all them nested tables so I took 'em out.
    Now add this to your stylesheet:

    HTML Code:
    .linkBlock {
    background:url(menumiddle.gif) repeat-y;
    }
    
    .linkBlock a {
    display: block;
    }
    And change your feedback class to this:

    HTML Code:
    .feedback {
    text-align: center;
    font: italic small Verdana, Arial, Helvetica, sans-serif;
    border: 1px dashed #000000;
    width: 70%;
    margin: auto;
    padding: 2px;
    }
    That fixes, and cleans up, your left nav. As for the centering issue, that is pretty easy to do.
    Tell me what you want to have centered and I can show you how.

    Hint:
    http://www.google.com/search?q=css+centering

    -xDev
    Last edited by xDev; Nov 5, 2003 at 02:00.

  7. #7
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, right, forgot about google, was tired last night. As for the centered thing: I need the two feedback tables centered in that side. It looks fine in IE, but in Firebird it doesnt' center it. As for the no nested tables, when I get to it, I'll make sure I change that - thanks!


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
  •