Table Cells Instead of Floats

Hi - this started here:

but it’s been a while so am re-opening it. I’m trying to get two floats in one line by using table cells instead of floats here:

.boxtwo {display:table; width:100%; table-layout:fixed;}
.boxlft .boxrgt {display:table-cell}
@media screen and (max-width:728px)
    {.boxtwo, .boxlft, .boxrgt {display:block;}}

and it ended up in two lines! I tried “display:inline” but that made no diff.

I’m trying to get the logo and icons to display in one line on laptop
and for the icons to drop below the logo in iphone.

Also is there any way I can give an “alt” text to the icons? So when the Envelope icon is hovered over, it says “Email Me”

Does anyone know why fontawesome icons don’t display in firefox? I tried the .htaccess fix a google search said to do, added this but it makes no diff:

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"

thanks for your kind help :slight_smile: - Val

Discourse uses fontawesome, and it’s displaying fine on Firefox for me. Do you have a link to a problem page?

Did you mean:

.boxlft, .boxrgt {display:table-cell}

Note the comma.

You will also need to add the vertical-alignment to the table cells as the default is baseline for css table cells and you probably want top (vertical-align:top).

You could add a titlew attribute to the span.


<span class="icon fa-stack fa fa-envelope" title="Email Me"></span>

Shows in my Firefox. If it doesn’t in yours:
Check the setting in Preferences > Content > Advanced: Allow pages to use their own fonts. If unchecked, font icons will not show.

Hi - fontawesome icons are displaying now - I forgot that I have to shut down after changing the .htaccess! I’m not sure if that code I added to htaccess is what made the diff. Will play with it. Thank you!

Oh I get so upset when I bother you with a silly comma! I apologize.
Many thanks for the align + title in span. It’s working beautifully :slight_smile:

Now I’m off to download + tackle flexnav which is the best menu I could find

Although my first choice would be to create my own lovely css tabs like this:

which flows into 2 lines in tablet, and menu icon in phone, and responds to touch. The css is too complex for me! Can you perhaps see how Delicious does it?

Its basically css and mesia queries and a jqery toggle.

It’s similar to this one of mine but without the dropdown.

Hi Paul - thanks million! Your menu is so cool. I was resizing screen and watching it switch betw tabs + menu icon. I’m guessing it’s ok for me to use it with the same credit I had in my old (still in use till this new theme is done!) sexy dropdowns:

/* MENU - code from Paul @* /

  1. Is there a reason you used media=“screen, projection” which google tells me is only for computer + bigger screens?

  2. You say “implement click menu for mobile” but when I tested it on iphone it responds to touch. Is the click for kindle?

  3. Am I right in thinking I have to keep it an ID and can use it only once on a page? Your html switches betw ID’s & classes so that’s why it seems I can use it only once. Is there any way to display it twice at both the top and bottom of the page? (I think with old dropdowns, I had to keep it ID because of the script in <head> - <!--js 4 dropup btmnav IE6 + b4-->)

I like Delicious’s whitish-hover, and shadow between each menu item, and round corners. I’ll try insert that into your code. Which’ll probably take me a week to figure out haha! I wish I had x-ray vision into css like you have.

I notice their css repeatedly uses moz- and webkit- for things like border-radius and box-shadow. Do I really need to bother? Surely most browser versions now will recognize these commands? I’m trying to keep the css lean and mean. Here in Africa bandwidth is so expensive.

I love their - color: rgba(255, 255, 255, 1) or .2 etc - to get varying shades for hover or border, rather than define specific colors. Never seen that before!

I can’t understand why they’re defining color twice:

background: #b1bf55 url('images/green-bg.png') top left repeat-x;

but I’m going to ignore that and use just #.

thank you! - Val

It’s just a way to catch all screen displays. Screen is all devices with a screen and projection covers things like large tvs which may have been assigned to projection. It;s probably not an issue at all but just something I do. Screen isn’t just computer it is laptops and mobiles as well as they all have screen displays.

Click in the sense as opposed to hover. You click a link and you touch a link to activate it. On mobile there is no hover but some devices do assume a first touch is a sort of hover although you lose a lot of functionality if you try to make a menu work like this.

Using the jquery click event then touch devices will perform those actions on touch automatically. Hover menus are bad for mobile but f you make them work with a click then you know that they will work with touch.

You should be able to change the menu to classes and I believe the plugin works with multiple instances but refer to the superclick documentation for more info. I tend to use ids for structural items but these days most people just use classes and avoid specificity issues.

That’s just customisation and although it can be awkward it is a matter of finding the right items to style and seeing what you can do. There is no magic trick but experience does help :smile:

I wouldn’t bother with prefixed for border-radius or box-shadow as all modern browsers support them. You can always check on caniuse for browser support and then make your decision. If nearly everyone supports the feature then drop the prefix if its only a decoration such as box-shadow or border-radius.

I use rgba all the time. The last digit defines the opacity between 0 and 1.

Because if the image was missing (or blocked) the element would have no background colour and sometimes you want something rather than nothing.

gosh thanks million! Now I’m off to the races with my menu, wish me luck & hold thumbs… I’m so grateful you’re here and I don’t have to use flexnav because I really don’t like plugins if I can avoid them.

Oh dear, one last question, if screen covers large tv’s, then should I have the max-width of 728?

.boxlft, .boxrgt {display:table-cell}
@media screen and (max-width:728px)

Shouldn’t I rather delete that @media?

Also in your example for an image in Images for different screen widths, you gave me:

.banner img{width:100%;height:auto;}

which “is for responsiveness, to make the same image stretch or compress along with the view window.”

BUT what if the screen is below 300px (eg they invent a new pda smaller than iphone) or bigger than 728 (eg tv) - see - then does that mean they won’t see the image?

Basically I’m having only two kinds of rows in my theme - one where there’s two table cells side-by-side (eg for logo + social media icons) and one where there’s only one “cell” stretching right across the screen - which could have an image in it, or a subscribe form, or testimonials, or Disqus/Facebook comments, etc.

I’m wondering if I’m doing the right thing making the one-cell row a banner (relabeled “box” in my css, so I have .box and .boxtwo). Should I also make .box/.banner a table cell? and if so, what should I add to this to do that?

.box {display:table; width:100%; table-layout:fixed;}

It needs to scale images, but it also needs to be a container for text.

thank you!

or should I have two “one-cell” divs? One for images and one for text?

I’m not sure what you are asking as you don’t show what’s inside your media query? max-width:728px refers to viewports that are smaller than 728px. You would put styles in there for small windows although the 728px should be based on your design and not some imaginary device. You use media queries at the point the design looks awkward which can be done simply on the desktop by opening and closing the browser window.

You have to draw the limit somewhere as there is no way to have a site fit less than 300px without reverting to simple text. Very old phones used to have 240px screensize but nobody can use them efficiently. If you think that you need to support smaller devices then you can adjust the dimensions to suit or hide images for less than 300px but that would be extra work for no return. If smaller devices get invented (like the apple watch) then a different approach is going to be needed anyway as you can’t display websites in 100px x 100px.

Usually the max-width on the image is stop it getting too big as you don’t want images just to keep getting bigger and bigger depending of the viewport width otherwise you end up with massive images. You just need to set sensible limits that work with the design in hand.

If you don’t need horizontal alignment of more than one element then there’s no need for table-cell, floats or display table. You only use those properties when you want something side by side.

Unlike html tables the css display table properties have no colspan or rowspan so you can’t do that with css.

You can put your images in a a div of their own and give that div a percentage width to satisfy the criteria for your design. The img can then remain at width:100% height:auto;

Hi Paul - oh!! I should’ve realized you don’t need a cell if it’s only one element! And I just need a div to scale images up + down which is .box/.banner

max-width:728px refers to viewports that are smaller than 728px.

Thank you! I don’t know what’s inside my media query :slight_smile: but anyway I’m trusting those two boxes – the banner box and the 2-cells box – will display ok on TV’s with that “max-width:728px” in both.

I uploaded your menu exactly as is. I can’t see anything I’ve left out (except #outer) yet on your menu it gives dropdown in hamburger, and in mine it doesn’t.

Do I have to call it hamburger? Is that standard term? I’m vegetarian…

P.S. I used that neat opacity thing on the social media icons.

Is this perhaps the problem?

<script src="dropdown/js/superclick.js"></script>

I need superclick.js?

Yes you need the Superclick.js from my demo as well as the jquery library.

You also need the initialisation script and menu toggle that was at the bottom of the page.

<!-- initialise dropdown menu --> 
				var example = $('#nav').superclick({
<!-- implement click menu for mobile --> 
jQuery(document).ready(function() {
		$("#header").on( "click", ".mobile-menu", function() {
	 		var myNav = $('#navwrap');

Hi Paul - thank you! I downloaded superclick.js but it’s still not working.

  1. I had the initialisation script and menu toggle - but in menu.php - do they need to be right at the bottom of the page in footer.php? Say the last thing just before:

    <?php wp_footer(); ?>

    </ body>

  2. chrome says “superclick is not a function” - do they mean this:

    var example = $(‘#nav’).superclick({

is there something I must add to my functions.php? But my non-wordpress pages don’t have a functions.php. Many of them are still in <table>s from 1998!

  1. I’m looking for <ul class="sub"> in the css so I can delete that space between menu item and submenu item but I can’t find it? Please can you tell me what’s making that space? It displays on your original page as only a tiny gap.

I’m so grateful for your help.

thanks! - Val

Hi Paul - please can you tell me how to automatically open the sub when they hover as at:

without reader having to click on a down-arrow? I also like the way it kinda unfolds - doesn’t display all menu items instantly at the same time.

thanks! - Val

I believe they are using the superfish plugin rather than the superclick one I am using.

I don’t like hover menus as they are hard for the user to navigate especially if they have shaky hand or some other motor disorder that makes precision mouse control difficult.

Hi Paul - thank you! Then I’ll stick to the click and not hover. Did you see my other message above?

thank you!