I am working on removing tables from my site, and just learning the div tricks involved. My home page currently has a centered table nested in another table. Removing the outer table was a bit tricky for someone just learning non-table methods, but it's done.
My problem is, the inner table is super-easy to center ("margin:0 auto" in the CSS), but its div equivalent is not. The div will center if I specify an absolute width (such as 640px), but since I'm designing with the user's font size (not something I specify), I don't know how wide it will actually be for a given user.
I've simplified the home page and have it online (test.html and HoH.css Here is an overview image of test.html.
Sorry for all the links. But with a floaty thing inside another floaty thing, I don't know what is relevant. The file test.html contains 63 lines of formatted HTML. The 640px hr is there for reference only; it will not be part of the final page.
PS: I'm removing the tables because when I asked for site reviews, the first comment almost everyone had was, "get rid of the damn tables".
Probably you shouldn't worry about users font size because all modern browsers zoom whole page, not only font size, and everybody will be happy with your fixed width.
Also you can use EM values instead of PX, 1em = font size in px. You can change 640px to 40em if you have 16px font size. If someone have for example twice bigger font, he will get twice wider block.
And if you want css-solution for unknown width block centering, you can use inline-block and text-align:center: http://jsfiddle.net/rBc4T/
use CSS and jQuery -
css -
#divID{ left:50%;}
jQuery -
(function(){
var marginLeft = $('#divID').width();
$('#divID').css('marginLeft','-'+ marginLeft /2 +'px');
});
Related
I have an image that represents my email address. I want that this image has the same height as font height or line height. So I tried this:
img.address { height: 1em; width: auto }
<p>My e-mail address is <img class="address" height="15" width="149" src="address.png" alt="[]" />.</p>
It seems to work for Chrome on desktop, but for Chrome on smartphone image is much smaller than the font. I don't understand why? Is there any remedy for that?
NOTE: since this method works for desktop browser, the question could be rephrased like this: why is in smartphone browsers the height of the font not 1em and how can one obtain the height of the font?
EDIT: I added few commands around the image to put it into the context.
The default font-size for a webpage is 16px (reference) where no more setting is applied on document. You didn't set any font size to your html or body or paragraphs and so:
the browser renders image by default font-size (16px) because there
is no more setting to control images size.
Text of webpage may not use default 16px for many other overriding settings as well as android initial settings, accessibility options, mobile friendly standards to render texts etc.
So you have to define your desired font size for entire document and then the texts and images height will have same reference.
Finally if you dont want to set initial font size, a javascript trick is to calculate the height of rendered lines and set it as image height. For example I suggest to extract first word from text and put it into a temporary div and after calculating the height of that div, set it as image height:
var myhtml=$('#imageId').parent().text();
var mywords=myhtml.split(" ");
var fisrtWord=mywords[0];
$(body).append('<div id="tempdiv">' + firstword + '</div>');
$('#imageId').height($('#tempdiv').heigh());
$('#tempdiv').remove();
Final note: the height of lines is about 1.5 times taller than the characters height. So you may reduce the calculated height by 1.5 to have better result.
Actually it is the image that is too small on the mobile. Also, 1em is
supposed to be the font height. This is what makes this problem really
mysterious.
Well not really. font-size: 16px; does not equal to height: 16px;. line-height: 16px; will not either, it actually "just" adds space on top and bottom of the chars. The font-size actually is the width of the widest character in the alphabet (I think it actually measure the letter M). So the thing you are trying to do won't work. Then there is the fact that you would have to cut the image exactly with no space, meaning there is a possible error source there. You would have to try to set the height manually by measure and compare in different viewports. If you give me a hint of what you are trying to do with a screen or something I could possibly present you a other solution. Is there a reason why you want to use a image for your email and not a regular html?
Now I know there are similar questions posted, but I'm looking for a solution for pixel perfection.
Sandbox: http://jsfiddle.net/unqc4a0f/1/
Problem trying to solve:
Attempted code:
.mi{float:left; width:150px;height:200px;padding-right:10px;/*margin-top:3px;*/}
.mt{float:left; width:400px;margin:0;}
In the past I've used the padding/margin hacks to push the image or the text objects down a few pixels to make them visually align at the top edge. And by visually I mean that I know that the fonts have a size and line height, but even taking that into account, the height of the actual font characters may include some space. This you can see in my example above. I've also —based on other threads here —tried using line-height, and although that did achieve pixel perfect alignment, it mangled the the vertical line spacing of the entire paragraph.
My question essentially is whether to continue using the padding/margin hacks or is there a more 'legit' solution. I ask this in regards to building layouts that are responsive and then having no issues with uniform layouts.
Thanks in advance.
Realize it's an old question but...
In CSS one can use a ::before element add a negative margin-top value to it.
Specifically, I wanted to share this Interactive Text-Crop tool I found that helps create a SASS mixin for this purpose.
The gist in this tool is that you remove the capital height from the (font-size * line-height) and then divide by two. But that is a simplification of how your font may or may not be structured.
In reality - There is no "pixel-perfect" answer because when it comes down to it, the physical structure of fonts doesn't always match their font-size and different font-families at the same font-sizes can still look taller or shorter.
Instead of float use a display:table; layout for a perfect inline placement and vertical alignment.
It only requires that you wrap them within an element...
Updated JSFiddle
.wrapper {
display: table;
}
.mi{width:200px;height:200px;display: table-cell;}
.mt{display: table-cell;vertical-align:middle;}
<div class="wrapper">
<img src="http://www.thehollywoodnews.com/wp-content/uploads/2839335-morgan_freeman_wallpaper_4_normal.jpg" class="mi">
<p class="mt">Join me in San Diego at the Global Event for Data-Driven Engagement Marketers. DMA is doing great work to protect marketers around the world, come and hear from leading marketers how DMA is enabling them to NOT MARKET ALONE</p>
</div>
The space is supposed to be there it normally comes from line height which is something you need. If you font size is 14px and you reduce the linee-height to 11px you see the gap will vanish from the top, but the text will look very cramped..
Sometimes to get pixel perfect you have to just tweak like you have with the margin on the image..
Currently I have some large text on a page, and layout works fine for short text (~12-14 chars in length), but any more than that will overflow or wrap. This is undesirable, so I'd like the size to be reduced to fit the whole text.
I've looked into JS solutions like FitText and BigText, but they depend on a fixed width. Since I'm using Bootstrap, I don't have fixed widths.
Okay: http://tf2reputation.com/profile.php?id=76561197960947673
Not okay: http://tf2reputation.com/profile.php?id=76561198054504781
I'v also considered setting white-space: nowrap or truncating, but I'd prefer to show all the text, but smaller, if possible.
FitText does work with a fluid width.
From the github page :
Make sure your container has a width!
display: inline elements don't have a width. Use display: block OR display: inline-block+ a > specified width (i.e. width: 100%).
Bold is mine for emphasis.
Looking on the homepage for FitText also reveals that there are no fixed width units in sight.
I should also mention that there is not a native CSS technique to achieve this. The closest thing would possibly be viewport relative lengths but that doesnt solve your problem.
My additional opinion (danger beware) :
In my experience when you are confronted with a problem like this, its because you may be looking at things a little wrong from the design side, And if you require Javascript for your layout to stay intact, I do think that needs to be reconsidered. Nursing a design along is usually better than banging it into place with a crowbar.
End Opinion
You could try an iterative approach using javascript.
Put the contents into a span with white-space: nowrap.
If span is the span within, you can do something like this:
var maxWidth = span.parentNode.clientWidth;
var currentFont = parseInt(window.getComputedStyle(span).fontSize); // or max font size
while(span.offsetWidth > maxWidth) {
currentFont--;
span.style.fontSize = currentFont + "px";
}
This will continually decrement the font until the span fits within its parent.
If the allocated width changes as you resize the window, you may need to run this on window resize.
I'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.
for this site:
http://yoursdproperty.com/
do you see how there some extra white space all the way at the top?
how would i expand that image to get rid of that space?
The weird thing is that the flash file that runs the header images has already been changed by me to be the width of the page. Something in the CSS though makes it the old size of 940 wide.
please note that im only interested in making adjustments to the css or html, not flash or javascript
You need to change the width on the embed tag in the html
<embed height="250" width="1050" wmode="transparent" quality="high" name="topheader" id="topheader" src="/templates/pjo_joomlaforall/images/header.swf" type="application/x-shockwave-flash">
and then remove width:940 from div #at-flashheader
The Question (is this correct?):
How do I make the Flash movie extend to the full width of the page (instead of 940px)?
How do I cause the Flash movie to reside at the top of its parent element - and thereby at the head of the page?
The above should be done without modifying Javascript or Flash.
The Answer:
Part 1:
It seems that you are using FlashObject in order to embed the flash.
FlashObject accepts several arguments, the 3rd and 4th of which represent the width and height attributes of the element.
As long as those attributes are set they will override ANY other CSS classes you apply.
To change the width to 100%, you must change that 940 to 1040, or possibly to '100%'.
<script type="text/javascript">
var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", '100%', 250, 7);
fo.addParam("wmode", "transparent");
fo.write("flashcontent");
</script>
While this may count as using Javascript, it is the only solution that could work.
Part 2:
The actual swf you are dealing with is 240px wide and 200px tall.
The part of the flash file which is 'image' is only 50px tall, and is in the vertical center of the swf.
There is no way to use CSS to enlarge that 50px center within the SWF.
What you can do is use CSS enlarge the swf so that the height of the center matches your needs, and then some more CSS to crop off the top and bottom whitespace.
Place the embed tag inside an element whose overflow is hidden, and apply a negative top margin (or negative position) to the embed equal to the whitespace you wish to crop.
<style type="text/css">
#at-flashheader{
overflow:hidden
}
#flashcontent{
margin-top:-40px;
}
</style>
<div id="at-flashheader"><div id="flashcontent"></div></div>
'Course, this won't really work if the width of the swf is a percentage, as the height of the whitespace wont be constant.
If you set the width to a constant such as 1040px, you can set the negative top margin accordingly.
As an aside:
You really should be doing this with Mootools or JQuery instead of Flash.
Case in point - I have Flashblock on my browser, and had to jump through hoops just to see what you were talking about. Had I been on my iPhone, jumping through hoops wouldn't have helped.
Add margin-top:-45px to class at-flashheader
Your flash movie needs to be 960 x 250 in order for it to be the full width and length of that space (it will be behind the broker's picture, right?).
Position it at left:0; and top:0; and you're straight.
Not an answer to your question, but why is this in Flash in the first place? As far as I can see, the only effect this has is that the header remains blank when you turn off JavaScript.
I'd say a few points:
Make it a javascript image fading gallery. It's less processor intensive and more likely to work on all platforms as well as being easier to get working.
This may be a bit much, but chaing the site width to 960px (see www.960.gs) will make it fit better within browser windows of people running at 1024x768 (still a common resolution) without horizontal scrollbars.
do it with actionscript in the flash, by using the stage width and stage height variables. if you don't have the flash source, wrap the swf into an new swf around so the new swf scales up the nested swf.
You would have to do what Emily says, to make the Flash fill the header area.
In your case, you would change the width of the object/embed tag in the FlashObject call:
var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", "1050", "250", "7");
But you would still have white space at the top, because the swf file (or rather the images in the swf file) has that built in, as far as I can tell. You would have to edit the Flash to get rid of the white space.