|
HTML - Html5 Css3 Mobiles Compatibility Tables
Hey all
1st post here as I am wanting to learn some things rather than pay someone a couple of dollars to fix a problem I have in regards to tables and a page I am about to use and that the fact that I put 3 tables on it and would like to discuss the html5 css3 fix so tables are not used. Here is a post I made earlier elsewhere which has been there most of the day without a reply > OK first let me say I do SEO and I made a thread on DP RE this same thing, that quite honestly 4 posts in has gone **** up and is about as much use to anyone finding it as a lot of the other crud is that gets found for searches and doesn't answer any questions. So let us address that here with this thread please and stuff er that other place. Like many I am always learning and over the past few months I have been adding little one page 5 card mobile friendly additions to my sites with browser "if" meta info for mobile browsers. Well 2 days ago I got a new domain name to add to my TM characters and it is quite an important domain (well to me at least), namely tted.com So I found a nice HTML5 CSS3 page template that was free to use and started to add things to it. It is just one page. The funny thing is though that presently that is all I need for a whole site. So I started working on the page/site as I said and in order to display cartoon strips (3 rows of four captions) I started to add 3 tables. 3 tables of four columns and 3 rows. Yes I am learning I know tables are old hat I and others ned to learn the work arounds. I am not sure how to get the CSS right and work this so the page remains HTML5 and CSS3 which is how it started. I am sure I am not the only person with this problem in regards to tables on their site neding CSS updates. So I posted on DP hoping to discuss this with the idea being that it would turn into a helpful discussion on turning table based pages (well pages with tables used to display things) into CCS based alternatives, how wrong I was - we will now find a Goldfish of a thread going nowhere about as helpful as a kick in the head. So can we address that here on XXXXXXXXX? I would like to discuss the in's and outs of how we get tables replaced by CSS3 & HTML5 So let's be clear We know the page I am referring to when found was HTML5 and by adding three tables on the page I made the present page non HTML5 and non handheld device friendly. That is to to say from what I can see b4 I put the tables in the page looks to be designed to work in handhelds (jeez it's html5 for gawds sake it ought to be). That is clear OK!! What I would now like to do is discuss this. The object of the exercise is to learn. To learn that tables are not mobile friendly (we get that - so has Joe Soap and John Doe reading this 1 year later now). So tables are not mobile friendly so how do we fix that is the obvious next question. With CSS is the answer. Now this is where we turn this thread into a useful thread where we discuss this tables and CSS factor and the issues or it turns into yet another Goldfish thread clogging up the search results of the super dooper super highway internet web thingy. (Humour is allowed Yes?) So anyone into HTML5 and CSS3 want to discuss here wiht me how we fix the tables issue? This will be useful for me to learn and fix the page before I reproduce it to build the rest of the site. It will be useful for future readers finding it in the SERPS and it will be useful to the forum here to have a useful page that gets found for the relevant search terms (I put them in the thread title I am not daft). More people finding things means more traffic more traffic might mean more members. So anyone up for a decent discussion on this and want to make this thread a useful resource at the same time? If not and this is likely to end up a load of old crud blogging up search results I kindly request a mod just deletes this and I will look for somewhere else to discuss these things. So anyone up for a proper discussion on HTML5 CSS3 and tables and how they (tables) are not mobile friendly and to make this a proper useful thread to discuss how we address this and make the page I have mobile friendly. I could just as easy go and pay someone $2 on that other forum to fix it btw but I would like to learn myself and at the same time discuss it so others can also learn to. Similar TutorialsHey Guys! Both kids are now in school and I need to brush up on my skills so I can get back to work! What is the best Free HTML5/CSS3 editor? I'd love something that does a split screen (half code/half visual) And for when I'm back to work ...... What is the Best HTML5/CSS3 editor ever? I can't believe it's been over a year since I last logged in! Hi, I have recently downloaded a web template and have been editing it in Dreamweaver CS4. I created a web menu via an application I bought online and intergrated that into the webpage. It displays out of line in Dreamweaver however appreas to work fine (everything in line) in IE 7. I do not know where I am going worng with my toolbar / web menu and what I need to change for compatibility. It is written in java but I suspect its some dodgy html code that has be written by me. The website is www.ritzphoto.net/newsite/ css Code: body {
margin: 0px;
padding: 0px;
background: #242323;
text-align: justify;
font: 13px Arial, Helvetica, sans-serif;
color: #444444;
}
h1, h2, h3 {
margin-top: 0px;
font-weight: normal;
color: #FFFFFF;
}
h1 {
font-size: 2.4em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
p, ol, ul {
margin-bottom: 1.8em;
line-height: 160%;
}
a {
color: #000000;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a img {
border: none;
}
#wrapper {
width: 900px;
margin: 0 auto;
border: 10px solid #FFFFFF;
}
/* Header */
#header {
width: 900px;
height: 150px;
margin: 0px auto;
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Logo */
#logo {
float: left;
padding-left: 20px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
font-weight: normal;
color: #FFFFFF;
}
#logo h1 {
padding: 25px 0px 0px 0px;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0px;
padding: 49px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin: 0px;
}
#menu a {
display: block;
width: auto;
padding: 6px 20px;
}
#menu a:hover {
text-decoration: underline;
}
#menu .active {
background: #404040;
}
#menu .active a {
background: url(images/img02.gif) no-repeat 100% -40px;
}
/* AWM */
#awmAnchor-menu {
width: 900px;
padding: 10px 0px 0px 0px;
background: #FFFFFF;
margin: 0px auto;
}
/* Page */
#page {
width: 900px;
margin: 0px auto;
padding: 10px 0px 0px 0px;
background: #FFFFFF;
}
#header-pic {
background: url(images/img05.jpg) no-repeat left top;
width: 900px;
height: 210px;
}
/* Content */
#content {
float: right;
width: 570px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
background: #444444 url(images/img02.jpg) no-repeat left 50%;
padding: 7px 25px;
font-size: 1.4em;
}
.post .title h1 {
}
.post .entry {
padding: 0 20px;
}
.post .meta {
font-weight: bold;
padding-left: 20px;
}
.post .byline {
margin: 0px;
padding-left: 20px;
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
}
#sidebar-bgtop {
}
#sidebar-bgbtm {
background: url(images/img03.jpg) no-repeat left bottom;
}
#sidebar-content {
background: url(images/img01.jpg) repeat-y left top;
}
#sidebar ul {
padding: 0px 0 5px 0;
margin: 0px;
list-style: none;
}
#sidebar li li {
margin-left: 20px;
margin-right: 20px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
#sidebar li ul {
margin-bottom: 1.8em;
list-style: none;
}
#sidebar h2 {
background: #444444 url(images/img02.jpg) no-repeat left 50%;
padding: 7px 25px;
font-size: 1.4em;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Search */
#search {
}
#search form {
margin-bottom: 1.8em;
padding: 0px;
}
#search fieldset {
margin-left: 20px;
padding: 0px;
border: none;
}
#search #s {
width: 160px;
}
/* Footer */
#footer {
clear: both;
width: 900px;
height: 50px;
margin: 0px auto 30px auto;
color: #FFFFFF;
}
#footer p {
margin: 0px;
padding: 19px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: smaller;
}
#footer a {
color: #FFFFFF;
}
Cheers, Dave Hi guys, I know how to make a mobile site. I know how to make a desktop site. However, how do i setup a desktop site to automatically redirect to a sub folder if viewed on a mobile. This is a great example but looking at the source code i just cant work it out: http://bluebells-restaurant.co.uk/ and http://bluebells-restaurant.co.uk/m Thank in advance guys. hi everyone, Can anyone provide me canvas tutorials? I am keep to update more knowledge on html5 and its tags. If you can provide me related information. Thankyou. Heya peeps. I have a problem I'm trying to overcome as shown below (From another thread): I'm in the process of building a website where audio can be purchased and downloaded. I want each file to allow a preview, but would rather the preview occur on the same page, rather than load up a blank page with a quicktime plugin splodged in the middle. Is there a way of doing it? All I want is a basic play/pause/stop button. To control a piece of sound. It seems that I may be able to achieve this using HTML 5, but I'm worried that people won't be able to read it with there browsers. Am I mistaken? Thanks Hey folks, I have a background in traditional enterprise software, and I am trying to gain expertise on newer technologies. I will greatly appreciate, if you could help me understand, when to use HTML5, when to use Flash and when to use Silverlight. If you could point to some tools etc that will be helpful. Thanks for your help I was quite surprised to discover that a lot browsers are already starting to support HTML5... While the support isn't comprehensive, and it isn't universal - it does seem to at least work reasonably well - at least for those elements that are not tied to media: http://www.brucelawson.co.uk/2009/re...ml-5-wai-aria/ I'm already thinking about making use of HTML5 in new projects... I quite like the idea of <header> and other elements. Greetings, Can some one explain me the difference between HTML4 and HTML5? what is the content management system, and what are the benefits of CMS? Do you heard the word Joomla? i have to draw ball on canvas in html 5 depending on the input given by user in a textbox. ex: if a user enter 5 in a textfield, 5 ball should draw on canvas. Hi, Im tryin to use html5 video so my video can be watched by most browsers and cell phone OSs. Having an issue. the link working in Safari (on win) but not in FireFox http://beerdiaries.com/html5/html5.html any idea why? thanks Hi, I am doing my final year project and am comparing two technologies (HTML5 -JavaScript and Flash -ActionScript). It would be greatly appreciated if you could take a few minutes to answer my survey: http://www.surveymonkey.com/s/CLVC23Z Thank You i heard somewhere this is a war.. can I ask (not to familiar with html5) what about html5 encroaches on flash? what new elements/features? If it does compensate i know Jobbs will be pushing the hell out of it (html5) Hi all, I have a web site that has some html tags and it works fine in Chrome and Firefox, however in IE8 and IE9 it just won't load any resources (stylesheets and javascript) and it gets completely broken. Does anyone know what the problem is? The doctype and html tag are declared as following: Code: <!DOCTYPE html> <html lang="en"> and the content type: Code: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Hi, new to the forums here. I made this website from a free template and I'm very happy with it. In IE8 it looks like garbage though, and I'm wondering if anyone can tell me how to change the code to get it to render somewhat well. (perfection not required) I would gladly paypal someone some cash that can help me out. URL: www.sharpeyeproductions.com I would like to get the tables below the main graphics fixed. The other pages on the site seem to render acceptably in IE8. Thanks for helping out a newbie everybody. Ok. So I'm trying to create an HTML music player (local purposes) using Perl. I want to use CSS so it can be easily "themed" and I am stuck on using Perl since the second main purpose of this is for me to get some practice. It has to use HTML 5 for ogg vorbis purposes (that's what all my music is)... The Issue - Can't have a form action specifically scripted to run in a <DIV> tag. Was going to use frames <form action="foo.cgi" target="someFrame"> but frames aren't supported in HTML 5. What are my other options? I'm using mass perl scripts (basically every link/button click) so I don't want to parse the whole page every freaking time. Once again... I know Perl isn't necessarily meant for this nor the best option but I'm practicing Perl so I HAVE to use Perl and I HAVE to use HTML 5 for ogg support. Any takers? Preferably I just want to use HTML and Perl... but some JS could be used if it is only other option. I seem to have run into a problem trying to locally load web applications offline. I think what I need to accomplish this is a .manifest file. I cant seem to get it to work though. I have the manifest file, I have it load in the html tag, and I think I have the .htaccess file set up correctly. If somebody could point me in the right direction it would be appreciated. I have a client I did an website for, the homepage has an Adobe Edge animation and it works fine except of course for non HTML5 browsers like IE8. So I was looking for a solution like a user agent where when the site is accessed by a non HTML 5 browser the div tag on the page where the edge animation is would be replaced with a .jpg I have looked at HTML boilerplate which I think could do this but I'm not a coder so if someone can point me in the right direction here I would appreciate it. Ralph Dee Hello, I wonder if it is possible or it will be possible to make the webcam (Audio/Video) streaming with her website as a webcam chat without Flash or Silverlight but with HTML5 or perhaps JavaScript. Or will it always must pass through Flash or Silverlight to make a webcam chat Thanks in advance I'm having trouble getting a table to stay within its containing DIV. No matter what I do, I can't reduce the widths of the cells to make it fit. All cells are the same width, and using the width attribute to adjust them (either in the table or the td tags) doesn't help. Any suggestions? I'm willing to use DIV's to format the data, but it is tabular data and I think the table is still the best way to display it. Thanks Jason Hi, I am researching HTML5 vs Plug-in based browser software, namely Flash. I have developed a simple website with both technologies and a short survey. The survey is at the following URL- http://www.obiter-training.com/research All contributions are anonymous and no personal data is collected. Thank you for your help! |
|||||||