Printable Version of Topic

Posted by: Neoed Nov 30 2016, 03:04 PM

I'm hoping to get a little help with how to place something at the right spot on my webpage.

I'm trying to get this iframe box (currently empty) where the red box is on this image:

https://www.dropbox.com/s/ct525ahdkb1k7sr/htmlexample.png?dl=0

and my current CSS setting is:

iframe {float: right; width: 10; margin-right: 4em}

What would be the best way to get that set up correctly?

Posted by: pandy Nov 30 2016, 04:31 PM

And float doesn't work?

What is the best way depends on a lot of things, what else you have besides the float. We need to see the actual page. Can you link to it? If not paste the HTML and CSS in here.

Posted by: Neoed Nov 30 2016, 10:57 PM

Just using float has it to the far side of the page, here is the files:

 yoga.css ( 3.74k ) Number of downloads: 671
 index.html ( 2.47k ) Number of downloads: 1049


I just need it to the right of the number/address and above the footer.

Posted by: pandy Nov 30 2016, 11:21 PM

Doesn't look like the image. The menu text is enormeous and basically covers everything.

But apart from that, you need to clear the float. A float doesn't take up any space so it doesn't make its container, MAIN, expand to make room for it. That's why it hangs out from it. You can see that it does if you give MAIN a background color.

You can find different ways to clear floats here.
http://css-discuss.incutio.com/wiki/Clearing_Space

The simplest even if not the most fancy method is tho place and empty DIV last in MAIN and style it with clear: right (or both). That makes the empty DIV to came after the float. MAIN must contain the DIV so it also contains the float.

And remove those BR tags. To create space use margin or padding if needed, not BR.

Posted by: Neoed Dec 1 2016, 12:41 AM

QUOTE(pandy @ Dec 1 2016, 12:21 AM)

Posted by: pandy Dec 1 2016, 01:13 PM

It's the 'font-size-adjust: 3'. Fact is it is not supported by Chrome and that's why it looks good in that brower.
http://caniuse.com/#feat=font-size-adjust

I haven't looked into font-size-adjust much but as I understand it the value is the aspect ratio you want the type to have, regardless of what font is used. 3 is a huge value. All fonts have an aspect ratio close to 0.5
http://webdesign.about.com/od/fonts/a/font-aspect-ratio-table.htm

The aspect ratio is more about the shape the characters. The relationship between the height and the x-height. If we take the letter 'b' as an example, the height of its protruding 'stomach' part is the x-height. I guess what you really want is to make the text a little larger in the menu. A relative font size is a better choice for that. You can use font-size-adjust in addition to that, but with a reasonable value. I guess the huge value forced the font size to be larger, since the x-height can't very well be larger than the height.

As I understand it this is how font-size-adjust is meant to be used. Verdana has a large aspect ratio, that's why it's so readable even at smaller sizer. Times New Roman has a small aspect ratio and is a squiggly font that's harder to read especially when it's small, right?

So we can make Times have the same aspect ratio as Verdana. The two first lines below will show Times and Verdana at their native aspect ratios. The third line shows Times with Verdana's aspect ratio.