I have a sticky footer bar thanks to the folks at cssstickyfooter which holds a disclaimer. I wanted to put a facebook like button on the right hand side... so I created a table with the below code for the footer.
#footer {
position: relative;
margin-top: -60px;
height: 60px;
clear:both;
background-color: #000;
text-align: center;
color: #999;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
and the html as
<div id="footer">
<table width="100%">
<tr>
<td width="85%">
<p>© 2011 somecompany<br />
Image © 2011 by somebig company</p>
</td>
<td width="15%">
<p>like goes here</p>
</td>
</tr>
</table>
</div>
This (obviously) aligns the the text, but it aligns it to the cell that it is in. Is there anyway to align the disclaimer text to the center of the whole page and keep the like button to the right?
I have thought about just putting the like button in its own table and have that floating there... but I'm not sure.
Theres a jsfiddle example over at http://jsfiddle.net/Gnznn/
Thanks!
Marked as homework so I can get an explaination
I have a feeling there is a cleaner* way to do this, but this at least works and does not use tables for layout. Note, I put the styles in an attribute so you could see what I was doing easier, but you should put that in your declarations in relevant classes.
<div id="footer">
<div style="width: 15%; height: 1px; float: left;"></div>
<div style="width: 70%; float: left;">
<p>© 2011 somecompany<br />Image © 2011 by somebig company</p>
</div>
<div style="width: 15%; float: right;">
<p>like goes here</p>
</div>
</div>
http://jsfiddle.net/Gnznn/3/
* In other words, using position: relative or position: absolute with right: 0 and z-index: 5000 (or something).
Related
I made a HTML email layout using table, the design is working fine in my machine but when I put the code to test in putsmail the footer moves to the left when I view the mail in the dekstop.
It should come like this:
Its coming like this:
My HTML code:
<!--Footer-->
<table class="footer">
<tr>
<td style="padding: 50px;background-color: #f7f7f7">
<table width="100%">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</table>
</td>
</tr>
</table>
My CSS code:
.footer{
align-content: center;
width: max-content;
position: relative;
}
Thank You in advance
It’s safer to use inline CSS for email templates, I also don’t think any email clients supports the align-content property or even max-content on width. Maybe try it like this:
<table width="100%">
<tr width="100%">
<td style="padding: 50px;background-color:#f7f7f7">
<div style="margin-left:auto;margin-right:auto;">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</div>
</td>
</tr>
</table>
Note that I'm using width inline there, and added a div in the inner td to align to the center.
Change the width: max-content; to width: 100%; and it should work.
You can read more about how "max-content" works here
Use width: 100% for the table.
How do I align the text as in the picture below?
<div id="contact-info">
<div id="contact-list">
<div id="adresa">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</div
<div id="telefon"></div>
<div id="mail"></div>
</div>
</div>
#contact-info
{
width:300px;
height:300px;
background:url(images/BODY-CONTACT.png);
position:absolute;
right:0;
}
How can I solve this problem?
Fail to fix it as I want
www.avocat.dac-proiect.ro/wp
Generally, you should use div to nesting elements, in order to align them in a decent way. Also pay attention to the display:blockorinline. You could read more in W3C docs. My touch to this problem is as follow:
<div id="adresa">
<div id="addPadding" style="
padding: 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="
float: right;
display: inline;
width: 80%;
">
<p style="text-align:left;">Calea Dorobantilor,nr.74,</p>
<p style="text-align:left;">bl.Y9,SC.2,Ap.25,<br>Cluj-Napoca,400609,
<br>Romania</p>
</div>
</div>
</div>
I used 2<div>, one wrap the two <p> and the other one wrap the <img>and the new '' (or you can just simply add padding on the <div id="adresa">).
it will get a more similar layout result to your mockup, I wish I could took screen shot for you.
you just need to fix the text-align:left and margin on <p>tag to finish your job.
NOTE: This is NOT the whole solution. I just gave you an idea about what approach should be used.
This is so simple ... For this you need to make <p> and <img> position: absolute;. like below
.centered {
position: absolute;
right: 12px;
top: 110px;
}
and add class to ps and img like
<p class="centered">....</p>
<img class="centered" src="...." />
Try this using different top and right values for each p and `img.
Although the CSS purists would tell you not to, I would just add a table
<table>
<tr>
<td>
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;">
</td>
<td valign="top">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</td>
</tr>
</table>
How can i right-align text as below. I want product, price and year to be right-aligned.
product Computer
price $1500
year 2013
Currently the html code below gives layout as shown
product Computer
price $1500
year 2013
<div style="clear: both;display: block;">
<p style="float: left">
<strong>product</strong>
</p>
<p style="float: left">
<span>Computer</span>
</p>
</div>
<div style="clear: both;display: block;">
<p style="float: left">
<strong>price</strong>
</p>
<p style="float: left">
<span>$1500</span>
</p>
</div>
<div style="clear: both;display: block;">
<p style="float: left">
<strong>year</strong>
</p>
<p style="float: left">
<span>2013</span>
</p>
</div>
try display: inline-block, does wonders
Try aligning the left-floated words with text-align:right;.
Give the <p> tags some width and margin to your last child element inside the <div>. Then assign text-align: right to your first child element. It should look something like this jsFiddle example.
I would solve it using inline-block elements instead of floating ones. To stick a little to your markup you could do:
HTML
<div class="row">
<span>product</span>
<span>computer</span>
</div>
<div class="row">
<span>price</span>
<span>$1500</span>
</div>
CSS
div.row > span {
display: inline-block;
width: 100px;
text-align: right;
margin: 0 20px 0 0;
}
div.row > span:last-child {
width: 200px;
text-align: left;
}
Demo
Try before buy
As a note: You might think of using another element for your content:
A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.
If your data is actually tabular, you can use a <table>-element instead. You can also go with some markup like I did, or you can even use a definition list <dl> or an unsorted list <ul>.
Edit
As requested in the comments. Here's a version using a table:
HTML
<table>
<tbody>
<tr>
<td>Product</td>
<td>Computer</td>
</tr>
<tr>
<td>Price</td>
<td>1500 USD</td>
</tr>
</tbody>
</table>
CSS
table {
width: 350px;
}
table > tbody > tr > td:first-child {
width: 100px;
padding: 0 50px 0 0;
text-align: right;
}
Demo
Try before buy
I'm having a small issue here, I've made a jsfiddle for you guys to play with it: http://jsfiddle.net/darkguy2008/NQUz8/
The problem I have is that when there is unavoidable long content, the header and footer don't stretch to it, but to the maximum browser window.
I need to find a way to make it stretch, I've had an idea of having the header and footer be part of the content div instead, but if the content is shorter than the browser window they wouldn't stretch to 100% width of the browser window and that's what I don't want.
Also, the title/subtitle of the page can be longer than the content so that wouldn't help either :/
I would love to change the design, but it's for a report website, I can't put it with a margin: 0 auto; because the idea isn't to center the website or to make the reports a fixed width (because they can't, either).
The idea is also to avoid JS. I know I can fix the widths using JQuery, but the project can also be used by external clients so we can't enforce them to use JS. Weird I know but I've seen cases where the stupid sysadmins block JS and we can't do much about it, except to make it work.
I can use HTML5 and CSS3, so if there's a way to do it with those two technologies it would be great :)
Any ideas are welcome!
HTML:
<header>
<div class="wrap">
<table border="0">
<tr>
<td rowspan="2">
<img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" />
</td>
<td>
<h1>title 1 lololol</h1>
</td>
</tr>
<tr>
<td>
<h2>subtitle omgomgomgomgomg</h2>
</td>
</tr>
</table>
</div>
<div id="menu">menu goes here omg</div>
</header>
<div>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div>
<footer>
<div class="wrap">
<p>Footer goes here o.o"</p>
</div>
</footer>
CSS:
/*********************/
/** RESET */
/*********************/
*
{
padding: 0;
margin: 0;
/*border: 0;*/
font-family: Arial;
}
/*********************/
/** Main CSS */
/*********************/
body
{
font-family: Arial;
font-size: 10pt;
}
.wrap
{
position: relative;
margin: 0 0;
width: 640px;
}
header, footer
{
background: #0f6;
float:left;
min-width:100%;
}
#menu
{
min-width: 100%;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
th, td { padding: 0; }
table { border-collapse:collapse; border-spacing: 0; }
Basically you have to include the content and the footer inside your "header" element so your content will make it grow.
HTML
<div>
<header>
<div class="wrap">
<table border="0">
<tr>
<td rowspan="2">
<img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" />
</td>
<td>
<h1>title 1 lololol</h1>
</td>
</tr>
<tr>
<td>
<h2>subtitle omgomgomgomgomg</h2>
</td>
</tr>
</table>
</div>
<div id="menu">menu goes here omg</div>
<div class="content">contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div>
<footer>
<div class="wrap">
<p>Footer goes here o.o"</p>
</div>
</footer>
</header>
</div>
Modifications in CSS:
.content
{
background: #FFFFFF;
}
Here is a working fiddle:
Fiddle
As in the last post, use the word-wrap here and set your width to whatever you want it to. I set it for you at 100% but it only goes to whatever the largest width you have. http://jsfiddle.net/NQUz8/2/
<div style="word-wrap:break-word; width="100%;">content here</div>
I would use some type of css class or id if you can. I just used style here to show you how it works.
I have HTML like this:
<div style="float: left; font-family: arial; padding-top: 40px; width: 655px; ">
<div style="float: left;">
<img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none;" />
</div>
<div style="float: left; ">
<p>
<h1>mobile business plan, <br />
business ideas, fundraising<br /> and marketing apps
</h1> <!-- font-size: 200%; -->
</p>
</div>
<div style="clear:both;"></div>
And it looks like this. Here is a test page:
http://problemio.com/index_test.php
The blue B is supposed to be on the same line with the text. But possibly because the original image size is very big, it is getting screwed up in size.
Here is the css for the img:
img#above_fold_img
{
width: 30%;
height: 30%;
}
Would anyone know how to make the image and text appear on the same line?
Thanks!
You need to specify a width for both of the child <div>s. According to Chrome DevTools, the first <div> (with the child image) is 512px wide. width: 30%; on img#above_fold_img uses 30% of its parent div.Example:
<div style="float: left; width: 256px; height: 256px; margin: 0">
<img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none; width: 256px; height: 256px" />
</div>
<div style="float: left; width: 393px; margin: 0; margin-left: 5px">
<p>
<h1>mobile business plan, <br />
business ideas, fundraising<br /> and marketing apps
</h1> <!-- font-size: 200%; -->
</p>
</div>
I kept all styles inline in my example, but using CSS is better. Also, the 'b' image is 512x512px. If you can shrink it, you will reduce load times.
I think just giving an answer helps but op wanted to know why as well..
You should declare a width on the image that contains the #above_fold_img so that the div takes on the same width that way you can do this
<div style="float: left; font-family: arial; padding-top: 40px; width: 655px;">
<div style="float: left;margin-right:20px">
<img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" width="154">
</div>
<div style="float: left;">
<p></p>
<h1>mobile business plan, <br>
business ideas, fundraising<br> and marketing apps
</h1> <!-- font-size: 200%; -->
<p></p>
</div>
<div style="clear:both;"></div>
</div>
Also you should try not to use <p></p> as spaces but use <br/> to do that
Change your div to have a width of 30% and the image to have a width of 100% or 90% for astetic reasons, so:
<div style="float: left; font-family: arial; padding-top: 40px; width: 655px;">
<div style="float: left; width: 30%;">
<img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none;" />
</div>
and CSS:
img#above_fold_img
{
width: 100%;
height: 100%;
}