1

I have the following HTML table set up which yields the result in the screenshot.

Code:

<table>
    <tr>
        <td align="center" colspan="4">
            <img src="website_title_banner.png" style='width:100%;' alt="nul"/>
        </td>
    </tr>

    <tr style="width:100%;">
        <td>
            <img src="About sign.fw.png" style='width:100%;'/>
        </td>

        <td>
            <img src="gallery sign.fw.png" style='width:100%' />
        </td>
        <td>
            <img src="Products sign.fw.png" style='width:100%' />
        </td>
        <td>
            <img src="Contacts sign.fw.png"  style='width:100%'/>
        </td>
    </tr>
</table>

Scrrenshot current layout

I'd like to have it so the signs are 'nailed' to the striped banner. Given that the signs are all placed in their own table cell in the row, is it possible to make the 2nd row overlap with the first row by a specified pixel distance?

I'm reasonably proficient with HTML (but it has been a long time) but I am unfamiliar with CSS - so if the solution is to use CSS, a step by step implementation would be greatly appreciated (using Dreamweaver).

Thanks in advance!

4
  • 4
    Please don't use tables to create your pages layout. Use divs or the new HTML5 elements. Aug 11, 2014 at 2:12
  • that really doesn't help. perhaps outlining the use of these divs would be more useful?
    – scb998
    Aug 11, 2014 at 3:08
  • Perhaps some basic googling would prove more effective than asking people on StackOverflow. :) Aug 11, 2014 at 3:45
  • thats what i need up doing - after being poked in the right direction by NinoLopez!
    – scb998
    Aug 11, 2014 at 4:42

3 Answers 3

0

Try styling your second row with a negative margin-top. This should make the .png's overlap the row above them. Here's an example based off of your code - http://jsfiddle.net/NinoLopezWeb/myv37cb0/1/

1
  • Folks from the future would appreciate such examples inline, rather than as ephemeral web links. Jun 20, 2019 at 15:48
0

This is not the best way to do it, but if you really want to you can use a negative value in margin-top, for example margin-top: 10px;
Not the cleanest way but it works.

0

quickest way to do this is have a negative margin. You can also make the stripes as the background of the menu.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.