Block Help

[mickjav]

I have this block I'm working on here: Toyah Forum

Once I'm happy with the 7 images I'll have them put together into 1

My problem is I'm using the class="dropmenu" But want to have the navigations buttons cantered under the images, I've tried another <div class="centertext"> but can't seem to get it the way I want.

Thanks in advace for your assistance.

Code Select Expand

<div class="centertext">
    <img src="https://www.databasedreams.co.uk/images/Toyah_gl4_100.jpg" alt="Toyah Icon" width="80" height="100" /><img src="https://www.databasedreams.co.uk/images/toyah-80s5_100.jpg" alt="Toyah Icon" width="73" height="100" /><img src="https://www.databasedreams.co.uk/charts/gallery/thumb_1-060421184039.png" alt="Toyah Icon" width="106" height="100" /><img src="https://www.databasedreams.co.uk/images/Toyah_1.JPG" alt="Toyah Icon" width="170" height="100" /><img src="https://www.databasedreams.co.uk/images/Toyah_2.jpg" alt="Toyah Icon" width="80" height="100" /><img src="https://www.databasedreams.co.uk/images/Toyah_Anthem_100.jpg" alt="Toyah Icon" width="70" height="100" /><img src="https://www.databasedreams.co.uk/images/toyah-Changeling_100.jpg" alt="Toyah Icon" width="70" height="100" />
</div>
<div id="main_toyah">
<ul id="menu_nav" class="dropmenu">
<li><a class="firstlevel" href="toyah-wilcox/"><span class="firstlevel"><img src="https://cdn.smfboards.com/caf/images/menu_icons/house.png" alt="Gallery" align="absMiddle" />&nbsp;Toyah Home</a></span></li>
<li><a class="firstlevel" href="toyah-wilcox/"><span class="firstlevel"><img src="https://cdn.smfboards.com/caf/images/menu_icons/comment.png" alt="Forum" align="absMiddle" />&nbsp;Forum</a></span></li>
<li><a class="firstlevel" href="index.php?action=gallery;cat=20"><span class="firstlevel"><img src="https://cdn.smfboards.com/caf/images/menu_icons/photo.png" alt="Gallery" align="absMiddle" />&nbsp;Gallery</a></span></li>
<li><a class="firstlevel" href="index.php?action=links;cat=5"><span class="firstlevel"><img src="https://www.databasedreams.co.uk/charts/styles/databasedreams/files/7366_Links.png" alt="Links" align="absMiddle" />&nbsp;Links</a></span></li>
</ul>
</div>

Updated code

[Antechinus]

You had your span and anchor tags mixed up. It's always best to code with sane indentation, so you can see what is going on. Also, you cannot reuse element ID's on the same page (causes validation errors, etc) so I changed the ID on the dropmenu ul.

And don't use align="absMiddle". I don't know where you found that, but it's not valid code and won't do anything useful.

Anyway, this should work for markup:

Code Select Expand

<div class="centertext">
    <img src="https://www.databasedreams.co.uk/images/Toyah_gl4_100.jpg" alt="Toyah Icon" width="80" height="100" />
    <img src="https://www.databasedreams.co.uk/images/toyah-80s5_100.jpg" alt="Toyah Icon" width="73" height="100" />
    <img src="https://www.databasedreams.co.uk/charts/gallery/thumb_1-060421184039.png" alt="Toyah Icon" width="106" height="100" />
    <img src="https://www.databasedreams.co.uk/images/Toyah_1.JPG" alt="Toyah Icon" width="170" height="100" />
    <img src="https://www.databasedreams.co.uk/images/Toyah_2.jpg" alt="Toyah Icon" width="80" height="100" />
    <img src="https://www.databasedreams.co.uk/images/Toyah_Anthem_100.jpg" alt="Toyah Icon" width="70" height="100" />
    <img src="https://www.databasedreams.co.uk/images/toyah-Changeling_100.jpg" alt="Toyah Icon" width="70" height="100" />
</div>
<div id="main_toyah">
    <ul id="toyah_nav" class="dropmenu">
        <li>
            <a class="firstlevel" href="toyah-wilcox/">
                <span class="firstlevel">
                    <img src="https://cdn.smfboards.com/caf/images/menu_icons/house.png" alt="Gallery" /> Toyah Home
                </span>
            </a>
        </li>
        <li>
            <a class="firstlevel" href="toyah-wilcox/">
                <span class="firstlevel">
                    <img src="https://cdn.smfboards.com/caf/images/menu_icons/comment.png" alt="Forum" /> Forum
                </span>
            </a>
        </li>
        <li>
            <a class="firstlevel" href="index.php?action=gallery;cat=20">
                <span class="firstlevel">
                    <img src="https://cdn.smfboards.com/caf/images/menu_icons/photo.png" alt="Gallery" /> Gallery
                </span>
            </a>
        </li>
        <li>
            <a class="firstlevel" href="index.php?action=links;cat=5">
                <span class="firstlevel">
                    <img src="https://www.databasedreams.co.uk/charts/styles/databasedreams/files/7366_Links.png" alt="Links" /Links
                </span>
            </a>
        </li>
    </ul>
</div>
For CSS:

Code Select Expand

#toyah_nav {
    text-align: center;
}
#toyah_nav > li {
    float: none;
    display: inline-block;
    text-align: start;
}
Should do it.

[mickjav]

Thanks But the current alignment has grown on me so going to leave as is but will all it to the css as I do use that menu on other blocks and pages thanks.

P.S. Can't find mark complete option?