|
HTML - Transition: Html --> Css = Hard?
I know a lot of the normies here are probably getting tired of my posts. If so, let me know. This just seems to be the one stop place for most of the questions I have that dal with web page design.
Anyways, if anyone read past the first paragraph, I have yet another question. Is the transition from HTML to CSS hard? The HTML book I am studying (which I just NOW found out is from 2003... ) teaches me a lot that I didn't know before and has really got me going with HTML more than any other book. It's teaching me HTML 4 and I realize there is now an HTML 5. The author even mentions that some of the tags it uses are deprecated (the book will later go on into CSS to replace those tags). Is it confusing to switch out tags like that when moving to CSS? I'm the kind of person who likes to stay up-to-date with stuff and HTML & CSS I want to be up to par on for sure. Am I going to have to learn HTML 4, then HTML5, then CSS since I'm pretty much just starting out? Sorry for all the questions. Just really curious and need to know ahead of time. Not that I would quit learning if it was a long process, it's just how I am . Any responses would be appreciated! Similar TutorialsCan you please help me with this problem. The HTML you are already given (has 2 unordered lists and both of them are in seperate divs) and I have to style them up with CSS with what the assignment wants. So far what I have is this: ul#menu { float: left; width: 6em; list-style-type: none; margin: 0; padding: 0; background-color: #aac; border-right: thick solid #44a; border-left: thick solid #ccf; } div#main { margin-left: 7em; } Now the thing is, it's looking alright so far, but there are some problems and things I don't know how to fix. Firstly with the border right and border left things and background color on my unordered list, the left and right borders aren't big enough and the middle part is too big. I want to change this but keep my list items (the middle and 2 borders) the same overall length as I have them now, just to switch proportions. Also, in the example of the finished product, the list items have a small white space between eachother as to seperate them.. kind of like they are in their own seperate rectangular boxes with borders each on top of eachother, how can I do this? Thanks for your time! Hope you can help! HI, Can anybody recommend a gadget for Previewing / Thumbnailing HTML templates on my hard drive. I have lots of index.html pages in different folders and I'm looking for a way to flick through them, rather than having to go in and open the files individually. All I want is to have my image placed in the center of my web page... Every code I try doesn't work. The image is either at the top of the page or it doesn't stay in the center at different resolutions. Can someone help me? Hello, I came accross these lines of code on some random webpage, and since I hadn't seen them before, I decided to experiment with them: Code: <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"> <meta http-equiv="Site-Enter" content="blendTrans(Duration=1.0)"> The thing is, it is a code placed in the <head> to give fading transitions between pages, and this validates as HTML, so it must be a legal way of doing it. However, it only works in IE and not in any other browser I have tried. So I guess my question is, does anyone else have any experience with this? Is this an IE only piece of code that just happens to validate? I want to open a new page from an existing one. I'm using javascript but the result is a bit clunky. I'd appreciate any ideas. The first page is at: http://www.primrosehillca.org.uk/act...intro_new.html (This page is all .SWF, I can send the html code if required.) And the next page is: http://www.primrosehillca.org.uk/activities.html Hi everyone, first post. I'm happy to have found an active forum for HTML related questions. I have a pretty simple and short HTML document I'm working on. The effect I'm looking to test out is a page turning effect. Using some examples I found on Apples Safari learning pages I put this together. It does work in Safari, it should work in Chrome, and it will not work in IE or Firefox. The question is: Why doesn't this work in Chrome? I'm using Chrome 16.0. The animation works but it flickers during the animation. This must be related to the backface-visibility css rule I have in place but I cannot figure out how or why it's messed up. Here is the code I'm working with. It's complete and you should be able to create a new html document, paste it in and open it with Safari (working) or Chrome (not working right). NOTE: this will not work in IE or Firefox as far as I know. Thanks for any help or advice anyone can offer! HTML Code: <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.Box {
position: absolute;
width: 500px;
height: 500px;
top: 10px;
right: 20px;
background-color: pink;
-webkit-perspective: 1000;
}
.Box .card {
position: absolute;
left: 10px;
top: 10px;
width: 480px;
height: 480px;
}
.card {
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.5s;
-webkit-transform-origin: 0 50%;
}
.card.flipped {
-webkit-transform: rotateY(-180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
width: 100%;
height: 100%;
}
.front {
}
.back {
-webkit-transform: rotateY(180deg);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var Card = $(".card");
$(".card").on('click', function () { Card.toggleClass('flipped'); });
});
</script>
</head>
<body>
<div class="Box">
<div class='card'>
<img class="face back" src='http://i.space.com/images/i/5974/i02/050207_planet_compare_02.jpg?1294095654'
alt="Image" />
<img class="face front" src='http://mygimptutorial.com/preview/the-ultimate-gimp-planet-tutorial-preview-all.jpg'
alt="Image" />
</div>
</div>
</body>
</html>
Its sort of a personal issue but i'll explain it as best i can... I'm not a nice person, I'm the type of person who wont back off and cant stand being told what i am. I feel like such a ......, If someone does something against me, they are going to regret it... i want to know how i can deal with things in a better way, and how i can stop being a total A$$hole. I need to get over the lone wolf crap as well, i automatically reject new places and people that i have to adapt to...I've already made myself out to be the biggest f@g in school...I don't totally disagree with myself here though, because most of the fools just follow each other around like sheep and i don't want to be like that. I don't want to hear anything about Councillors or Psychiatrists because i want to turn the other cheek on my own...I just need a little pointer to get started. ========== Hello! I just want some help to figure out how to get a picture to appear next to another picture, by changing the html code. Can someone help me? Guess it goes really fast for someone who knows these things. A quick response is highly appreciated! Thanks! / Hedvig Here's the code: <!-- Facebook Badge START --><a href="http://www.facebook.com/hedvig.lindahl" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Hedvig Lindahl">Hedvig Lindahl</a><br /><a href="http://www.facebook.com/hedvig.lindahl" target="_TOP" title="Hedvig Lindahl"><img src="http://badge.facebook.com/badge/86010192783.4320.1327210997.png" width="120" height="180" style="border: 0px;" /></a><a href="http://www.facebook.com/keepitandplayit" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Keep It and Play It">Keep It and Play It</a><br /><a href="http://www.facebook.com/keepitandplayit" target="_TOP" title="Keep It and Play It"><img src="http://badge.facebook.com/badge/164904078384.4257.46510960.png" width="120" height="155" style="border: 0px;" /></a><br /><!-- Facebook Badge END --> I would like to build this type of widget but without the trulia logos and taking them to the trulia site, i would like to be able to use my idx system to search properties http://www.trulia.com/tools/searchbox/#code_block Hi there, I have just made a program that i need a register form on, so the hard part is.. When people download the program there are a Read me.txt file with the program, in that read me file i want to put a code, and that code i want to use for my security code in the register form. Like: If the Read me.txt Code is: 44456 then i need to make a textbox then i want them to write that code online on the register form. and if the Read me.txt code is wrong when they try to register, then they need to try again. Can anyone help me?? i need the script... PLEASE HELP ME! Here is an example: I'm looking for a way to have a link to a hard drive - that works both with a Windows machine (not running Resin), and a Unix (Macintosh) machine. Obviously I can't hard code file:///C:/htmldocs/home_page.html and have it work on a system without a C: drive. Hello, Im interested in obtaining a template for an ebay listing. Something that is very well done so that I can use it and change the Headers and buttons etc etc.... Anyone have experience with this? Hi, I've been working on this page for quite a while: http://www.mymusiclair.com/supporter It displays correctly in Chrome, IE, and FF on my hard drive, but once i upload it it displays wrong in everything except IE. I used FrontPage 2003 to make it... any suggestions? Thanks, Vicky hi team, just wondering what code i would require to make a text box with a search button next to it and having the following characteristics... * input can be any letter/number (say for eg: 5555) * onclick sends parent window to www.website.com/5555 thus whatever you enter into the box sends you to a website address with the text box entry at the end. this is for an internal webpage at our small business. cheers and any tips appreciated!! Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! A really good article by Lisa Herrod was posted on A List Apart this week... If you thought that you'd covered all accessibility angles with your graphical design - read this and find out how to cater for members of the Deaf community. My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case 2 Fiddler Home Page Author: Date: 2-16-2011 Filename: home.htm Supporting files: fiddler.jpg --> <title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title> </head> <body> <div> <img src="fiddler.jpg" alt="Fiddler on the Roof" /> <hr /> <a href="home2.htm"><img src="home.jpg" alt="home" /></a> <a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a> <a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a> <a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a> <a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a> <br /> <a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a> <a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a> <a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a> <a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a> <a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a> <a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a> </div> <hr /> <div> <img src="slide1.jpg" alt="slide1" /> </div> <blockquote> <p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p> </blockquote> </body> </html> I just upgraded all my .HTML pages to .PHP . But now I noticed that when my pages pull up in the search engines like Google, Yahoo, and MSN. They still show the old .HTML links?? When they click on the webpages from the search engines results you get error 404 page cannot be found. How can I update the search engines or add code to my page so the search engines will reflect the new .PHP pages. Also it's been over a good week since I've update to .PHP Thank you all in advanced!! Hi, so I'm trying to make this e-mail newsletter. It's entirely images, tables and text. So no javascript, just plain stuff. I tried attaching it as a signiture file and I had trouble sending it. It also didn't come out right. I'm trying to avoid using a software. Its basically just a block of HTML I need to show up as the only content in an email. If you just put HTML into a email text field, it just shows the HTML code in the email as text. Any ideas? Hi everyone, I've been searching around the web trying to find out how I can send using Outlook a html and text email newsletter automatically. I am quite happy creating html only newsletters, and text ones for that matter, but I have been digging and believe that by using multi-part code I can send to both and the recipients email client "allows" whichever version to be displayed - does this sound right? I'm hoping to simply create the html with the relevent mime references and boundaries (dont know what they are but have seen them on enough Google'd pages to know that they mean something!) and then copy and paste into Outlook - the newsletter is only going out to a few people at a time. Any suggestions or advice would be very greatly appreciated. Regards Allan |
|||||||