What is the best way to place/layout the google+1 and facebook Like buttons so they align neatly?
Currently, the first "thing" in my body is this heading, appearing on top of all pages (slightly modified after logging in): (linebreaks added for readability) :
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<g:plusone size="small" href="https://www.apebroker.com/">
</g:plusone>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.apebroker.com%2Findex.php&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</td>
<td align="left"></td><td align="right">It's more fun after you
login
</td>
</tr>
</table>
My problem is that this looks like crap. I know that pages don't need to look exactly the same in every browser, but acceptable ugliness has its limits.
The google button is nicely "vertically centered", while the facebook stuff kind of sticks to the top of the page, 0px down.
See this example:
I tried adding padding:2px; to the style in the facebook iframe, and sure, it came down a bit, but so did the google button too, and the entire heading grew, pushing down the <hr> below.
I obviously don't know much about iframes, but I've managed fine on my own until now.
In my global style sheet I have (amongst other things) this:
body {
margin:0px;
padding:0px;
background-color:#e0e0b0;
color:#302010;
font-family:"Trebuchet MS",Helvetica,Sans-serif;
font-size:100%;
}
And I don't want to change that, as it cascades to all sorts of things that I'm reluctant to break. If you want to check out the complete style sheet and HTML source, an example page can be found here.
Thank you in advance for any hints/suggestions!
How about plus one button, and it's width?
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ru'}
</script>
A problem is that the table cells are sizing themself based on the font size even though there isn't any text in the table.
The "correct" answer is not to use tables for layout.
However, if you explicitly set:
<td align="left" style="font-size: 1px">
then your life will get slightly better as you'll be able to explicitly control the height of each of the cells and position things. At the moment despite you "asking" for a height of 21px, you're getting 26px.
After that the FB button will look nice and you'll need to move the +1 button around.
But, the real answer is not to use tables:
http://www.w3.org/2002/03/csslayout-howto
http://www.hotdesign.com/seybold/
and various others...
I've found a fix for this using to encapsulate both fb:like and g:plus separately, and then setting the style of both to style="vertical-align: top;". See example at http://www.clonearmycustoms.com/
Related
I am trying to create a company-wide email signature. Here is the code for it:
<table style="font-family:verdana, arial, sans-serif; color:#7f7f7f; font-size:12px; line-height:15px">
<tr>
<td><div style="font-size:145px; color:#69cd37; line-height:0px; position:relative; top:-17px; left:7px; margin-left:-20px">●</div></td>
<td>
<b>firstName lastName, </b><i>title</i><br />
<b style="color:#69cd37">Company Name</b><br />
Street, City, State, Zip<br />
<b>office </b>###.###.#### | <b> mobile</b>###.###.####
</td>
</tr>
</table>
When I test this email, it looks great and works fine on most of our HTML enabled emails. The problem lies within "Good for Enterprise" email. Most of the higher-ups use "Good" email on their mobile phones. The signature looks fine and the font sizes are all correct, but it wraps, and it wraps bad.
So to fix it, I've tried everything: table width="500", style="min-width:500px", white-space:nowrap;. These all fix the wrapping problem, but they seem to enlarge the font by double! And there's no explanation to it.
Is there any reason it would be enlarging it? When I send an email with the original version (posted above) and a new version with no wrapping, the original version has correct font size, but the wrapped version's font size is huge. Is the wrapping interacting with the phone screen width?
Put all of your text styling in the <td> tag it is contatined in. In many email clients you have to redeclare in every single <td> that contains text. You don't need it in the <table> tag, just the <td> tags.
If that doesn't work, try -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size-adjust:none;, in the <td> inline style, although that may be a long shot (not sure what/how "Good" works).
If you are still out of luck, try and find a way to view the code as it is rendered (after "Good" does it's thing). This may help debug the cause and might possibly reveal a way to prevent it.
I am building HMTL emails and I use nested tables to layout the email. To change text I apply the styles directly to the < td > tags and this works for the most part across the board. I am noticing though on SOME heavily nested tabled (Greater then 5) the style is being removed completely on Gmail in Internet Explorer, and on Yahoo in various browsers (on a PC). Below is my code:
(This code is ~5 tables deep)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px;font-family:'Century Gothic',Arial, Helvetica, sans-serif; font-size:26px; color:#202020;">The Latest</td>
</tr>
</table>
Has anyone ran into this before or know why they might be stripping the style? It's not only text styles but the padding is also removed on these < td > tags.
I've never had the issue myself, but there is known to be issues with nesting tables too deep. I'm willing to bet that there is a more precise way to layout your email to avoid the issue. Don't be scared to use colspans and rowspans when necessary. Post your code if you like.
I think I may know why this is happening. I've seen issues when using a font-family with quotes throw off the inline CSS. If you move the font-family to the end of your inline styles it may work. See below.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px; font-size:26px; color:#202020; font-family:'Century Gothic',Arial, Helvetica, sans-serif;">The Latest</td>
</tr>
</table>
In case this is useful for anyone: I ran into this problem with a specific <td> that was getting all the inline CSS stripped. After checking it, I found I had an incorrect property declared, like so:
padding-bottom;
Removing that incorrect property resolved the issue.
It seems to me that Gmail somehow validates the css of each element, and strips it all if it finds an error.
Not a direct answer so my apologise, but could you not use CSS instead of HTML tables? You will be able to achieve the same result I would think?
I just tested an html email that works for Gmail.
Generally speaking, I learned that Gmail tends to strip out the whole inline style attribute when you declare font-family, this behavior sometimes happens when:
1) when you declare a custom font using ' or ", es: <span class="small-text" style="font-family:'Titillium Web',Arial,sans-serif;"></span>
2) if don't put spaces between ; , , and : chars, in a font-family declaration.
3) every time you declare 2 <span> with a font-family in the same <td>, Gmail will strip the second's <span> rules
but I don't know what is the general rule, so my solution was: always declare font-family inside a separate tag, at least, in this way you won't lose all the styles.
example:
<span style="color:#8d8c87;display:block;font-size:12px;line-height:120%;text-align:center">
<span style="font-family:'Titillium Web',Arial,sans-serif;">text</span>
</span>
I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I am having a problem, I have my website: yusifmusic.com organized so that the links (Biography, Tour History, etc) are in a drop-down list. HOWEVER, as you can see, once the text goes beyond the left column, it starts to stretch into the left column. One fix was to add a ton of breaks to the code (in between the p and end span tags, near the bottom). However, that adds a lot of blank space to the bottom of the page. I'm sure there must be a better solution. I tried making the table height = 100% with styles, no luck. Would just like this left column table to extend to infinity in height, so that the center text on this webpage will be indented when it is revealed. It's really sloppy looking the way it is right now... How can I do this?
<table bgcolor="#000000" width="200" border="0" align="left" cellpadding="35";>
<tr><td>
<div align="center">
<span style="font-size: 12pt">
<u>Tour Dates:</u><p></span>
<span style="font-size: 8pt">
<P>
2/26 - 50 Mason Social House - San Francisco, CA<br><br>
etc... <br><br>
<p>
</span>
</td></tr>
</table>
<P><br><br><br>
<p>
<div align="center" class="geo">
CONTACT: booking#yusifmusic.com etc etc
<br>
<br>
<script language="javascript">
function toggleBio() {
var ele = document.getElementById("toggleBio");
var text = document.getElementById("displayBio");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "BIOGRAPHY";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
<font size = "4"><center>
<a id="displayBio" href="javascript:toggleBio();">BIOGRAPHY</a> </center></font>
<div id="toggleBio" style="display: none">
<center><b>Yusif!</b></center>
<center><i>Yusif!</i> (self-released)</center>
<center><u>Biography</u></center>
<p>
<p align="left">
"Sometimes our most destructive moments... etc etc<br><br>
I have found personally that dealing with tables to design website layouts is usually painful, and so in general a lot of webdevelopment is moving away from tables and to div tags, classes and stylesheets.
I know this isn't a small immediate fix to your problem, but I think you could easily move a lot of this to Bootstrap.js to fix this problem very quickly and easily.
http://twitter.github.com/bootstrap/scaffolding.html
In particular, you can use the scaffolding to create three "columns" or vertical sections, for which you could insert your existing code into.
The separators would for the bottom section, given that you are using bootstrap properly for the rest of the page would look something like this:
<div class="row">
<div class="span4">...Tour Dates Code...</div>
<div class="span4">...Middle Column Code Contact....Bio....</div>
<div class="span4">...Code for The Red Column...</div>
</div>
Another thing which is probably a quicker fix, is to include the whole of the bottom in one "parent table". You can play around with the cell widths and percentages yourself. Having the code be within a parent table will help the sections retain their form.
<table bgcolor="#000000" width="100%" border="0" >
<tr>
<td>....Insert left table that has bgcolor="#00000" and cellpadding="35" </td>
</tr>
<tr>
<td>...Insert Center Code here....</td>
</tr>
<tr>
<td>...Insert right table that has cellpadding="8" and bgcolor="#550000"...</td>
</tr>
</table>
You can read more about tables here: http://www.w3schools.com/html/html_tables.asp and other places online.
I'd also recommend removing the align tags from within the tables, and managing the width and positioning them from the parent cell container.
I am working on a website(this is my first website as a developer) and I was wondering if someone could help me align these to items next to each other horizontally. I don't know how to code HTML so I am completely unfamiliar with this. For the most part when developing sites I go and make due with what is online to help but this instance I am with your help.
The site is using WordPress and this is going to be a page. With a table from W-P Table reloaded and a Google map.
Here is the code currently:
<p style="text-align: left;">[table id=4 /]<small></small></p><p style="text-align: right;">
<iframe src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Avie's+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&aq=&sll=41.375316,-71.831092&sspn=0.006948,0.016512&vpsrc=0&g=100+Main+Street,+Westerly,+R+02891-2194&ie=UTF8&hq=Avie's+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&hnear=&radius=15000&t=m&ll=41.379063,-71.831102&spn=0.015457,0.027466&z=15&iwloc=lyrftr:m,9024240540147588029,41.375323,-71.831043&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="640" height="480"></iframe>
<small><a style="color: #0000ff; text-align: left;" href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Avie%27s+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&aq=&sll=41.375316,-71.831092&sspn=0.006948,0.016512&vpsrc=0&g=100+Main+Street,+Westerly,+R+02891-2194&ie=UTF8&hq=Avie%27s+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&hnear=&radius=15000&t=m&ll=41.379063,-71.831102&spn=0.015457,0.027466&z=15&iwloc=lyrftr:m,9024240540147588029,41.375323,-71.831043">View Larger Map</a></small></p>
Typically when you want to line something up side by side on a page, you have two options:
The old school way - Use Tables (If you are using a program like Dreamweaver, this should be fairly easy - Insert > Table)
The better way - Using CSS. This may be a little harder for you to deal with since you said you have no experiencing working with HTML and I am presuming CSS.
The CSS way would require you to create a stylesheet with two divisions (divs). Here's an example of some code that would do that:
<style>
#col1{ width:300px; float:left;}
#col2 { width:300px; float: right;}
</style>
The above code would go between your <head></head> tags. Then in the body of your page, you would simply call the two divs:
<div id="col1">YOUR CONTENT</div>
<div id="col2">YOUR CONTENT</div>
I had a similar problem. I tried to use the CSS route but failed. If you are using Wordpress the easiest way would be to place 2 columns in the section you want the division. then place one element in each and then target their HTML codes accordingly.