We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 25883
    • 128 Posts
    Hi -- here is a page I am having trouble with:

    http://intrigue.websitewelcome.com/~mm/


    I would like to get the logo (on the top left) to be floating, so that the entire header doesn’t expand to the height of the logo.


    The header area is a chunk that is this:

    <div style="margin: 20px; margin-top: 40px; margin-bottom: 30px;" >
    <table width="100%"><tr><td width="20%">
    {{logo}}

    </td>


    <td width="60%">

    <div class="slogan">[*headerCenter*]</div>


    </td>

    <td width="20%">

    [*headerRight*]

    </td></tr></table>
    </div>


    <div id="tswcsstabs">

    <table width="670px" align="center">

    <ul>
    <li><a href="[~1~]">Home</a></li>
    <li><a href="[~4~]">Why Mannequin Market</a></li>
    <li><a href="[~5~]">Frequently Asked Questions</a></li>
    <li><a href="[~1~]">Mannequin Resources</a></li>
    <li><a class="foxycart" href="{{foxyURL}}/cart?cart=view">View Cart</a></li>
    </ul>

    </table>
    </div>
    </div>


    The whole homepage is this:

    {{sitewideHead}}
    <body>

    <div class="bottom">
    <div class="colmask">

    {{sitewideHeader}}
    <div class="colmid">
    <div class="colleft">
    <div class="col1">
    {{homepageTable}}
    [*content*]
    </div>
    <div class="col2">
    {{leftSidebar}}
    </div>
    <div class="col3">
    {{rightSidebar}}
    </div>
    </div>
    </div>
    </div>
    <div class="footer">
    {{sitewideFooter}}
    </div>
    </div>
    </body>

      • 8461
      • 205 Posts
      Hi cfn,

      I think you have a number of issues to tackle, but first I will start with what you want to achieve. As I understand it you have a logo which has a given hight and you dont want the content to the right of this to have the height of the logo applied to it.

      My take on this is that the whole header area should ideally be a div, that is an container for the elements in the header that would be positioned relative. The logo itself is a image that would be in this container but positioned absolute so that is it taken out of the normal flow and thus will not force its container to expand. (Ps I know if its floated the containe will not expend, however in IE6 it still will)The tagline, can be placed inside the header container (the div) and then positioned relative as could other elements. They could also be floated and margins used as an alternative.

      However, depending on your experience with CSS, what I am suggesting above may or may not make sense. I did notice you have tables, inline code and a fair few errors in your HTML. This is causing different rendering issues in different browsers.

      If you run the CSS and HTML validators on your page this will help highlight some of the problems.

      Personally, I would draw out the main design blocks on a piece of paper, then consider what CSS rules will apply. Your will be much better using  ID’s and classes and an external style sheet so future changes are easier. Your issues are not with Modx, but I suspect with you CSS/XHTML skills and if I am right, you would benefit from visiting any of the many CSS learning sites.

      In summary you need to fix your code and ideally loose the in-line styles, tables and get rid of the errors in the HTML.

      hope that  helps you a bit

      David
        • 25883
        • 128 Posts
        Thanks David. That’s good advice. and good ideas for what to work on over the long-term. thanks again-

        John