I'm trying to create a html template for email and I've encountered several problems (outlook does not handle image resizing etc.). One problem which i'm so far unable to solve is text wrapping within element (table or div) with fixed width.
Here is a simple example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="300px">
<tr>
<td width="300px"">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed turpis nunc. Nulla nec sapien ut ligula sollicitudin vestibulum eleifend a augue. Integer felis nulla, venenatis non consectetur nec, vulputate at enim. Suspendisse potenti. Curabitur sed magna metus. Nullam ut lectus ac arcu malesuada convallis. Ut dictum facilisis augue et semper. Phasellus euismod maximus turpis, at finibus dolor placerat ut. Vestibulum ultrices imperdiet enim, ac pharetra nunc fermentum non.
</td>
</tr>
</table>
</body>
</html>
It renders to a neat little box in browsers and most email clients but outlook ignores the width entirely. Help would be much appreciated.
Wrapping does work, just take the px off of your width attributes. Outlook's really picky.
You have to set your line breaks explicitly with br tags for Outlook. It sucks but it is the only reliable solution.
Related
I seem to have a problem with the AOS (animate-on-scroll) library in my html page. The code works fine, but the issue is that the last div doesn't run its AOS code (fade-right) until the user is scrolling over it within a certain range of pixels, meaning that if my height is set at "100%", the page will just show a blank space where the div is supposed to be. This is because the content of the last div is too short to actually let the user scroll withing said range. Of course, the code runs fine if I extend the height of the html to a specified value that is longer than the height occupied by the elements in the page, but I really would like to avoid that and just allow this last div to appear without having to add space for the user to scroll just a little bit more. I'll leave a snippet for clarification.
html{
height:100%;
}
body{
overflow-x: hidden;
}
h1{
font-size : 90px;
text-align: center;
}
p{
width:50%;
font-size:20px;
text-align:justify;
margin:auto;
padding:20px;
background-color: #3E9AE0;
}
div{
margin-bottom:50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-left" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init({
mirror:false,
});
</script>
</body>
</html>
After a little bit of tampering with the code, I may have found a solution to this specific case. Setting the height for the html tag, in CSS, to the attribute "fit-content" seems to do the trick just fine, for pages that are simply structured such as mine. You may want to try something else if you have positioned your elements in a particular way near the end of the page. Here's the (very brief) code needed for this solution, to type in your CSS file:
html{height:fit-content;}
As a (most likely irrelevant) side-note: this attribute is not supported in Internet Explorer.
I recently enrolled into a web course. Currently learning html5 and css. I have to make 3 webpages; main, about me and hobbies. I've created pretty much they've asked according to the specification they gave me BUT I have one problem; some content does not display where its supposed to be. I've tried position: relative, position: absolute etc and modified the the position of it using bottom: 500px etc but it just doesn't look right. For example, on the code below, that is my 'About me' page. The pictures on the side is not currently aligned properly to the top of the main article. The pictures are besides the main article which is correct but its positioned a bit below. This happens throughout my webpages on tables elements..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link property="stylesheet" rel ="stylesheet" href="cascadingstylesheet.css"/>
<!--[if lt IE 9]>
<script src="hpp://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<ul>
<li>Main</li>
<li>About me</li>
<li>Hobby</li>
</ul>
</nav>
</header>
<hr>
<main>
<!--
Below I have used the article tag and the section tag. The article tag is nested inside
the section tag. This is because section tags are used to group related elements together
and the 3 articles are related since they contain information about me.
I didn't include one article tag because the articles are distinct from one another. E.g. One of the
article contains the types of mototbikes but another article tells the user information about me. !-->
<section title="border" id="aboutArticle">
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p></article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p> </article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p>
<p>This blog was created on
<time datetime="10-10-2015 20:00">
the 10th of October 2015.</time></p>
<section>
<img id="motorbikePic" width="350" alt="Harley Davidson Logo "src="http://media1.santabanta.com/full5/Bikes/Harley%20Davidson/harley- davidson-82a.jpg"></img>
</section>
</article>
</section>
<!--
I have used the aside tag on my About page. Inside the tag there are images containing my
favourite types of cars. I did not include it in the article tag above because it's not necessarily
related to it since I said I like motobikes and not muscle cars.!-->
<aside title="cars">
<h3>My favourite cars:</h3>
<img src="http://gas2.org/wp-content/uploads/2014/07/challenger-hellcat.png" width="300" alt="Dodge Hellcat">
<br>
<img src="http://cartype.com/pics/6596/full/ford_mustang_shelby_gt500_f1_10.jpg" width="300" alt="Ford Shelby GT500">
<br>
<img src="http://www.forodefotos.com/attachments/chevrolet/14617d1289420971- camaro-2010-camaro-2010.jpg" alt="Chevrolet Camero" width="300">
</aside>
</main>
<!--
Footer tag is used at the bottom of the page since it more appropriate to use it at the bottom since
you are given more options such as contacting the web developer, in this case it is me.
!-->
<footer>
<hr>
<p>To get in touch with me you can click below:</p>
Click to email me!
</footer>
</body>
</html>
This is my CSS. My CSS contains some rules for my other pages so I pasted the relevant ones so that it'll be easier for you guys to read. These are the relevant rules for the code above but there may be some rules missing so I will also post the whole of the css if you guys require it.
CSS for the code above:
footer{
position: absolute;
right: 0;
bottom: -250px;
left: 0;
padding: 10px;
text-decoration:none;
}
#aboutArticle{
width:75%;
}
[title^="cars"]{
float:right;
margin: 0 1.5%;
position:relative;
bottom:505px;
}
[title^="bord"]{
border-style: dotted;
border-radius: 10px 30px;
}
body{
background: -webkit-linear-gradient(left, #4B0082, black , #4B0082); /* For Safari 5.1 to 6.0 */
background: linear-gradient(to right, #4B0082 , black, #4B0082); /*standard syntax*/
text-align: center;
padding-bottom:60px;
font-size:20px;
}
Just add one property and remove another property.
Add float:left; to #aboutArticle and remove bottom:505px; from [title^="cars"]
I have two rows for my table. The top row contains some text and the bottom row contains a button. I would always like the button to stay at the bottom of the page and the top row to show scroll bars if the text is more than the space available (say if the browser window is resized).
I have been able to keep the button at the bottom using the following code but when I resize the browser it starts to overlap with the text on top. I have also not been able to get a scroll bar on the top row.
<!DOCTYPE html>
<html>
<head>
<style>
.bottomRow {
position: fixed;
bottom: 0
}
</style>
</head>
<body>
<table>
<tr>
<td> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum felis enim, sit amet laoreet orci imperdiet ac. Etiam viverra suscipit finibus. Donec in lectus sed odio sagittis ultrices ut sed nunc. Ut non ornare dolor. In vel nibh vestibulum, tincidunt eros eu, fermentum nunc. Integer non fermentum purus, non molestie lorem. Nunc sit amet dapibus tortor. Aliquam non felis commodo, mollis nibh non, pharetra mauris. Suspendisse nisi libero, maximus a vulputate a, condimentum et massa. Integer quis feugiat mi. In sit amet ante sed nisi facilisis commodo. Cras porttitor cursus diam in tincidunt. Phasellus nec varius dui, eget luctus mi </p> </td>
</tr>
<tr>
<td class="bottomRow"> <button>OK</button> </td>
</tr>
</table>
</body>
</html>
Can someone please let me know how to solve these issues? If there is a better way to achieve the same effects without using table I am fine with that as well.
Thanks,
There is no such thing as a scroll bar for a table cell. You would need to trick the scroll bar into displaying by having a fixed height div inside the cell with overflow-y set to scroll. Then all of your content goes inside the div.
<tr>
<td> <div style='height:200px;overflow-y:scroll;'> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum felis enim, sit amet laoreet orci imperdiet ac. Etiam viverra suscipit finibus. Donec in lectus sed odio sagittis ultrices ut sed nunc. Ut non ornare dolor. In vel nibh vestibulum, tincidunt eros eu, fermentum nunc. Integer non fermentum purus, non molestie lorem. Nunc sit amet dapibus tortor. Aliquam non felis commodo, mollis nibh non, pharetra mauris. Suspendisse nisi libero, maximus a vulputate a, condimentum et massa. Integer quis feugiat mi. In sit amet ante sed nisi facilisis commodo. Cras porttitor cursus diam in tincidunt. Phasellus nec varius dui, eget luctus mi </p> </div> </td>
</tr>
I am not sure why you are having problems keeping your button at the bottom? Can you elaborate on this a little more? What is happening to your button?
I am currently working on designing my website, and I would like to be able to resize/zoom the webpage without messing up the flow of the elements of the website. I am aware that the correct use of % signs solves most of the flow problem, and it seems like it does with everything except text. If I have a simple menu like in the jsfiddle below. The width of the menu div lets say is %30. I would like the text in the menu container to scale to size without wrapping around or entering a new line, which I cant seem to avoid. The same problem remains in the paragraph below. Is there a way to achieve this?
<html>
<head>
<title>Scalable</title>
</head>
<body>
<div style="height:800px; border:1px solid green; width:900px; margin-left:auto; margin-right:auto; " >
<img src="http://files.prof-web-diego.webnode.pt/200000028-04da905d3d/Oxford_Silhouette_Web_Banner.jpg" style="width:50%; height:auto;"/>
<div style="float:right; width:30%; border:2px solid blue; font-size:11px;">
<a href="#">Home<a> |
<a href="#">Store<a> |
<a href="#">Contact<a> |
<a href="#">About<a> |
<a href="#">Pictures<a> |
<a href="#">Entertainment<a> |
</div>
<div style="border:1px solid #ddd; width:65%;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula velit in lectus dapibus porta. Sed pulvinar ultrices ipsum vitae gravida. Vestibulum at metus dolor. Nunc pulvinar nisl nec libero sodales faucibus. Quisque tincidunt risus vitae risus tempor viverra. Vestibulum interdum eros in tellus blandit vulputate. Suspendisse eget ante purus, sit amet semper purus. Nam lacinia magna a mi euismod sit amet rhoncus dolor congue. Mauris pharetra laoreet accumsan. Ut quis velit ac nisl rutrum varius nec nec orci.
Vestibulum quis tellus neque, a scelerisque est. In varius ante eget purus fringilla in aliquet massa convallis. Vestibulum in scelerisque ligula. Nulla a neque nibh. Maecenas tristique, odio nec scelerisque tincidunt, sem orci tempus nulla, eu tincidunt dolor sapien ut lorem. Donec aliquet, eros nec blandit adipiscing, leo est malesuada nulla, vel adipiscing sem risus quis ante. Proin rutrum ultrices dolor, quis auctor sem feugiat sit amet. Morbi in tellus nisl, et iaculis turpis. Cras ligula velit, pharetra vitae imperdiet nec, commodo quis erat. Aenean iaculis nunc nec nunc dignissim aliquam. In venenatis, orci vitae pretium elementum, lorem lorem sagittis est, a consectetur est lacus accumsan elit. Vestibulum iaculis hendrerit elit, nec vulputate nunc ornare sit amet. Fusce nisi risus, auctor vitae pellentesque ut, pulvinar nec nisi. Aenean nec nunc augue, non imperdiet arcu. Integer interdum orci non diam tristique ut tristique risus adipiscing. Vestibulum tellus orci, lobortis vel sollicitudin vel, gravida sed dui.
Vestibulum eu dui ni
</p>
</div>
</div>
</body>
</html>
jsFiddle
http://jsfiddle.net/6UyYa/
Two approaches you can take:
Use the viewport meta tag to scale the page to the width of the
device (to the extent that browsers support that)
Responsive Design: Use a series of CSS media queries to adapt the content based on the size of the device.
Two versions of Responsive Design:
Change the layout of the page (number of columns and how the content flows on the page) based on the size of the device, and optionally scale some of the content. A good example of this is The Boston Globe.
Leave the layout unchanged and uniformly scale all of the content. #rlemon mentioned a good link for this. I learned it by reading Ethan Marcotte's ebook Responsive Web Design (unfortunately the ebook isn't free). This approach is relatively difficult and it limits your options.
In both versions of Responsive Design, changes to the content are triggered entirely by CSS media queries (rather than by JavaScript). And the HTML doesn't change. Only the styling of the HTML changes.
The first type of Responsive Design appears to be used much more widely than the second type.
For the second type of Responsive Design listed above, a series of media queries for different device sizes sets the base font-size for the body tag in %, and all size units for the content are specified in em or % instead of px (with absolutely no use of px for the content itself). All content is scaled based on whichever media query is used.
Additionally, in the second type of Responsive Design, there's little or no use of background images (at least, in my experience). img tags are used for almost all images, with a special trick for proportionally scaling the img tags via CSS. The following code proportionally scales an image to the full width of its parent container:
<img class="my-image" src="image.png"/> <!-- No width or height attribute -->
.my-image {max-width:100%; width:100%;}
I am trying to create a page as shown in picture. Now only tables are allowed and no css. I am having difficulty in understanding how to achieve as it is in original image. Any help please?
This is what I have written
<html>
<head>
<title>HTML</title>
</head>
<body>
<table height="350" width="773" background="bg.jpg" >
<tr><td><h1 align="right">Welcome to Full Moom Site</h1></td></tr>
<tr><td><h3 align="center">Music Company Full Moon</h3></td></tr>
<tr><td><p align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate, odio ut auctor porta, quam urna convallis leo, ac ultricies felis mi eget mi. Pellentesque consequat nisl et metus tempor sodales. Quisque ultrices metus consectetur sem placerat eget molestie ipsum gravida. Duis scelerisque augue sed sem venenatis id congue mauris vehicula. </p></td></tr>
</table>
</body>
</html>
You won't get me to do the work for you :-) , but I'll offer up this advice. You'll need to slice up your background image into four parts, use colspan and rowspan on your <td> and <tr> tags, and border="0" on the <table> tag to get it to work. Here's an example, including a possible grid for your table layout. You'll need to move your navigation down a little bit; otherwise, you'll need a fifth slice for the left end of the blue arc.