The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Find the right position
Neoed
post Nov 30 2016, 03:04 PM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 16-September 13
Member No.: 19,741



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/h...xample.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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 30 2016, 04:31 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,096
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post Nov 30 2016, 10:57 PM
Post #3


Newbie
*

Group: Members
Posts: 17
Joined: 16-September 13
Member No.: 19,741



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

Attached File  yoga.css ( 3.74k ) Number of downloads: 378
Attached File  index.html ( 2.47k ) Number of downloads: 592


I just need it to the right of the number/address and above the footer.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 30 2016, 11:21 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,096
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post Dec 1 2016, 12:41 AM
Post #5


Newbie
*

Group: Members
Posts: 17
Joined: 16-September 13
Member No.: 19,741



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

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.


for some reason it only works best in chrome which in anything else it gets oddly big, but thanks for the info.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 1 2016, 01:13 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,096
Joined: 9-August 06
Member No.: 6



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. wink.gif
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...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.

CODE
p          { font-family: 'Times New Roman', serif }
#verdana   { font-family: Verdana, sans-serif }
#adjust    { font-size-adjust: 0.55 }


HTML
<p>T'was brillig and the slithy toves did gyre and gimble in the wabe<p>
<p id="verdana">All mimsy were the borogoves and the mome raths outgrabe.</p>
<p id="adjust">Beware the Jabberwock, my son! The jaws that bite, the claws that catch!</p>


Attached Image

Now, this is of course not how it should be used either. But if you list several replacement fonts for font-family, you can make whatever font shows up have the same aspect ratio as your preferred one.

Dumb example, but I can't be bothered finding suitable fonts.

CODE
selector   { font-family: Verdana, Arial, sans-serif; font-size-adjust: 0.55 }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th December 2018 - 03:47 AM