| SitePoint Sponsor |
Hi people!
I have started to learn html&css and now this dilemma troubles me: em or %?
My web is responsive but I'm not quite sure.
Footer is ok when I maximize but body and header are strange. Hm.
Are those dimensions ok or not?
body {position:absolute;width:auto;max-width:100em;min-width:10em;height:50em;top:0.5em;margin:auto;left:0em;right:0em;}
Pleas, give me direction. I'm trying to make simple web page for hairdresser.
http://frizzaloon.byethost3.com/
Sorry for bad English.
Hi Willomina. Welcome to the forums.
Hm, the page is way too wide for most screens (100em is too much). You basically have a fixed width layout here, apart from the footer, which is nicer, because it stretches/contracts to fit the window.
Firstly, avoid using position: absolute for page layouts. it's deadly, really. Absolute elements don't flow nicely with ther parts of the page, making updates miserable.
% is often better than em, though a combination of them works nicely.
Every browser that I have come across lately has a built in zoom. Use what you feel most comfortable with. Nothing wrong with fixed pixel (px) and absolute positioning. I wouldn't be able to do this without them - www.unitingrhythms.com - change from mobile to standard mode in anything but IE. As most of it is done in CSS, it looks good zoomed in to a very large level, and maybe the colouring is not right, but for accessibilty there is nothing wrong with the size of the site, but it's all done with px and position:absolute.
Relative elements don't flow nicely with ther parts of the page, making transitions miserable.
LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
I'm not sure quite what you're trying to demonstrate with that example, but if I reduce the size of my browser window (Firefox) I lose the right-hand side of the site. There is not even a horizontal scroll bar. Doesn't seem very accessible to me.Originally Posted by Markdidj
If you're a bear made of mohair, ponder on the nature of a mo.
Just to clarify, you know there's absolutly no way to rectify this, or are you just being picky?
Visit it in a decent browser, Firefox is worse than IE. FACT! (And I have loads that test it). That's why the transitions are left out. It's useless at rendering them!
LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
I'm not just being picky. This is a thread about responsive design, so I expect the design to respond to different window sizes.
Firefox seems to be the only browser now that will allow me to zoom text without zooming the whole page. For me, that's an important accessibility issue. So, as far as I'm concerned, it is a decent browser. Readable text is higher up my list of priorities than transitions.
However, we're getting off-topic here and are in danger of hi-jacking the thread. Perhaps this would be best discussed in another thread.
If you're a bear made of mohair, ponder on the nature of a mo.
After reading the OP's question again I've realised I have a bit. Sorry Willomina and TechnoBear, just remember, don't fear fixed pixel designs, there's a lot more you can do with them than using em and %, and they can be made as equally accessible.
LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
It's not. It's not even proper relative layout.
Your layout it's not even relative, you're using a relative measure: em, but the big fixed width on div#header and on a few other divs prevents your design to be elastic.
Using % instead of em would qualify your layout to be called liquid. It would probably be better for your layout, since em is "fixer" then %.
Your still-to-be-worked-on relative layout (em or %) would became responsive the moment you'd start using media queries to adapt the layout to smaller and bigger screen sizes.
"I am the wisest man alive, for I know one thing, and that is that I know nothing."
Posting Permissions
Reply With Quote
Bookmarks