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.
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'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.
I need your help, I'm developing a responsive site, and contact page, the form may appear in two or one column.
This should happen in a mobile:
And this on a computer:
Any idea how to build this table? I've tried using just css, however the HTML of each td is this:
<tr>
<td colspan="2" class="single">Telefone</td>
</tr>
<tr>
<td colspan="2" class="single"><input class="input-left" type="text" id="telefone" name="telefone" maxlength="13" autocomplete="off" title="Digite um número de telefone para contato"></td>
</tr>
Any idea?
There are many options that you can consider. The easiest solution, probably, is to have two floating tables of equal width. On wide screens they will float next to each other. On narrow screens they will show one on top of the other.
When you populate these tables, you can add an equal number of rows to them.
Live demo
You can achieve auto text format depending on page size by using column-width property in css.
HTML
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus malesuada, ante a accumsan pretium, lorem magna hendrerit turpis, eu tempor neque dui non est. Quisque suscipit accumsan rutrum. Praesent in nisi nec felis tincidunt interdum. Cras scelerisque justo eget lectus pulvinar feugiat. Aliquam nec volutpat risus. Vivamus dapibus augue felis. Sed quis posuere dui. Donec ultricies nisl eget erat convallis faucibus at sodales metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
CSS
div
{
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
}
PS: If you insist to use tables. Just put the text inside the <td> in a div and apply my above method.
use a plugin like this-responsive tables.
if you want to make custom responsive table you can use media-queries to do it.
i wrote a custom responsive table for a solution check this-table.