HTML - A Couple Of Questions Regarding Html Syntax.
So, I'm redesigning my website to conform with all W3C html/css standards as well as following all the suggested ways of doing it, and thus, I have a question or two I would like some comments on.
1. Say I want a line of text: Filed in Information, Monday 1st. Oct. 2007 And "Filed in" should be red, "information" black and the date light gray. I tried doing <font class="f1">Filed in</font> and then apply the style in the css sheet, but this didn't work. Is this an illegal syntax for HTML? (evidently, as it didn't work) And if it is, what would actually be the best way of doing this? Since <H#> tags create paragraph spacing... 2. To import the css style sheet into my page I have been using <link href="style.css" rel="stylesheet" type="text/css"> But then someone mentioned the @import method. Is there a practical of technical difference to the way I am doing it now? Thanks. Similar TutorialsOn my website http://www.ultdmovies.com. How do I change the height/width of the buttons that say home, contact us, movies, etc.? How can I add a seperate border under the video like the one under the "mission statement" so I can have other things down on the bottom? How can I add a colored border around Mission statement and the stuff below it? aaaaaaaaaaaaaaaa 1.) How to make a login and register form work on a site 2.) I have tons of quiz questions for my site i am building, how do I make it so when they answer if they get the question right they get those points and they will be redirected to the next page or if anyone knows what i have to use to accomplish this Hi, I'm having a couple of problems with the code on the website I am building. I tried uploading the stylesheet and index.htm but it would let me for some reason so here's the links to the problem pages: www.wotwebhosting.com and www.wotwebhosting.com/style.css Anyway, I cannot get the following to work: 1. The drop down menu at the very top is supposed to take the user to the page that has been selected immediately but it does not. 2. (This is a CSS problem) I would like the links at the bottom to be considerably smaller than the links on the left nav-bar. Also, the links do not seem to be responding to any 'text-decoration' command I give them in the css file. There is probably an easy solution to this but I'm very new to css! Also, does anyone like the scrollbar colours or should I leave it as the browser's default colours. Thanks for your help. So I'm fairly new to Web Development, but I know a few other languages (C++, C (of course), and a bit of Java). I've been digging around the web for some information about having permanent pages inside pages, but turned up little result. What I mean by this is having some sort of fixed page, that wont be reloaded upon clicking local links (Home, etc.)... For example, I stream over Justin.tv, and they have an option to embed your stream to a website. I would like to have this stream embedded on a fixed page so that when users click links to surf the site, it wont keep loading and reloading. Also, the stream will always be in view of the user. In a nutshell, I would like to have a header for the navigation links and banner, a fixed sidebar with the embedded stream, and a content part that would show the rest of the content for the site. I hope this isn't too confusing to understand, haha.. I tried to make it as easy to understand as I can, but I don't know all of the fancy web development lingo to simplify it. So, this website has a couple of features that I really like and would like for my website. That website is located here. On the top of the website they have the facebook, twitter, and RSS buttons. How did she get the text to come out when you hover over the buttons? Also, on the top of the right sidebar, she also has a button that says show all categories. How did she make that clickable and pop out like it did? Thanks for your help! Im a very green newbie to html and could use a few pointers. I'm starting with the basics and writing out out the html manually in notepad, and using chrome as the browser to view it. i have a couple of (probably basic) questions which i need help with, so if your not busy any help would be greatly appreciated! 1. how do i use images from my own computer in html? I am currently using images which i have uploaded to dropbox and using the url's as the image source. 2. Im having trouble with image maps. I am trying to use one image to display two links. below is a copy of the code I've written; <img src="https://dl-web.dropbox.com/get/Public/IMG_0016.jpg?w=e566152f" height="250" width="400" usemap="#kyandnod" /> <map name="kyandnod" /> <area shape="rect" coords="0,200,250,0" href="http://3.bp.blogspot.com/_9U8zzj314AU/SUp0H-R3K2I/AAAAAAAAAEE/S2loVa1eX3I/s400/heaven.jpg" /> <area shape="rect" coords="200,400,250,0" href="http://4.bp.blogspot.com/_MDH7QEZTFE8/TE3feptOxXI/AAAAAAAABG8/eapY9eS6m20/s1600/hell.gif" /> </map> the first area shape clinks to the correct link, however the second area shape clicks to another link that is further up the page. I am at a loss as to how to correct this and i cant seem to find the answers in the usual places online. any answers would be of great use and I don't want to move onto the next stage of my html learning until I've nailed this one! thanks 1. Under the picture, there are some tags (funny, meme, comic). When you hover over the tags, they turn white/bright. Is there a way to make this stay white/bright? (http://plustom.tumblr.com/post/18287272359) 2. Under the picture, there are pictures of some people. When you hover over their pictures, they turn white/bright. Is there a way to make this stay white/bright? (http://plustom.tumblr.com/post/18287272359) 3. Under the pictures of the people, there is a link that says "Previous Post". When you hover over it, it gets bold. Is there a way to make this stay unbold? (http://plustom.tumblr.com/post/18287272359) Current HTML code: (Excuse the faces). HTML Code: body {font-family: {font:Text}; font-size: 12px; color: {color:Font}; background-color: {color:Background};} #right {width: 250px; left: 50%; top: 50px; margin-left: -400px; position: absolute; {block:IfFixedSidebar}position: fixed;{/block:IfFixedSidebar} -webkit-transition-duration: .3s;} #right:hover {opacity: 1;} #right a {text-decoration: none;} .title {padding-bottom: 10px; border-bottom: 2px solid {color:Tertiary}; font-size: 14px; display: inline-block; font-weight: bold; margin-bottom: 10px;} a {color: {color:Font};} .link {font-size: 11px; display: inline-block; margin-top: 5px; font-weight: bold;} #center {width: 400px; margin: auto; margin-top: 50px;} #description {margin-bottom: 5px; font-size: 11px; max-width: 200px;} .entry {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid {color:Secondary};} .entry img {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow} !important; max-width: 400px;} .perma {position: absolute; opacity: 0; -webkit-transition-duration: .2s; z-index: 1;} {block:IndexPage}.entry:hover .perma {opacity: 1;}{/block:IndexPage} .permalink {display: inline-block; padding: 10px; background-color: {color:Primary}; color: {color:Primary Font};} .permalink:hover .exclamation {display: inline-block; margin-left: 1px; opacity: 0; -webkit-transition-duration: .2s;} .link:hover .exclamation {opacity: 1;} .text_perma {width: 100px; text-align: right; position: absolute; margin-left: -110px; -webkit-transition-duration: .2s; opacity: 0;} {block:IndexPage}.entry:hover .text_perma {opacity: 1;}{/block:IndexPage} .text_permalink {border-bottom: 1px solid {color:Background}; display: inline-block; -webkit-transition-duration: .2s;} .text_permalink:hover {border-bottom: 1px solid {color:Secondary};} h2 {font-size: 14px;} h2 a {text-decoration: none; border-bottom: 1px solid; -webkit-transition-duration: .2s;} h2 a:hover {border-bottom: 1px solid {color:Background};} .label {margin-right: 10px; font-weight: bold;} .album_art {display: inline-block; margin-right: 10px; float: left;} .album_art img {width: 150px; height: 150px;} .audio {display: inline-block; min-height: 150px; max-width: 207px;} ol.notes {margin-left: -45px; list-style-type: none; width: 400px;} ol.notes a:hover {text-decoration: none;} ol.notes blockquote {margin-top: -3px; margin-left: 0px; padding-left: 13px; padding-top: 5px; border-left: 11px solid {color:Primary}; margin-bottom: 0px;} ol.notes li.note {padding: 5px;} li.note img {margin-right: 10px; width: 11px; height: auto; opacity: .5; -webkit-transition-duration: .3s;} li.note:hover img {opacity: 1;} .entry blockquote {border-left: 2px solid {color:Primary}; padding-left: 10px; margin-left: 25px;} .player {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow};} #tags {margin-bottom: 20px;} #tags a {margin-right: 10px; opacity: .7; text-decoration: none;} #tags a:hover {opacity: 1;} .nav_1 {display: inline-block; width: 50%; margin-bottom: 20px;} .nav_2 {display: inline-block; width: 50%; text-align: right; margin-bottom: 20px;} #nav a {text-decoration: none;} #nav a:hover {font-weight: bold;} .audio_symbol {padding: 7px; background-color: {color:Background}; opacity: .9; border-radius: 100px; position: absolute; margin-top: 7px; margin-left: 7px; font-size: 14px; height: 15px; width: 15px; -webkit-text-stroke: 1px transparent;} {block:IfInfiniteScrolling}.regular_pagination {display: none;}{/block:IfInfiniteScrolling} Hi all, I'm wondering if someone could explain a little about the validation of my site? http://validator.w3.org/check?uri=ht...ctype=Inli ne For one thing, I can't understand why it gives the wrong line in the code for the error, and what is means by the column of the code. Neither of them correspond in any way with my code, that I can see. Also, why is telling me that maginheight, height, etc., are all invalid elements. Finally, will being html 4 compliant help my page rank in any way? im going to start off saying that thanks for helping me with the layout changer, it works awesome, thank u guys for ur patience well i have a site aka spt.byethost7.com i have a few questions - I want when someone clicks a link on my menu i want the site not to move just the middle part which is where i will have the stuff of which the link will represent. for example: http://www.pokenebula.mihopa.net/ click Berry Dex under General, ull see that the page doesnt change just the middle part, can ya tell me please? - Is byethost a good host? - can i get the best free host? if so please tell me thanks for ur time Hi everyone. I am looking to engage someone in conversation about an HTML cut-up excercise I am currently working on. I have some basic HTML and CSS experience from several short evening courses I attended a couple of years ago, built myself a couple of very basic, amateur sites (I am interested in 3d modeling and built myself a couple of portfolio sites to show some of my models), and went as far as to fumble my way through putting together a practice e-commerce site using PHP/mysql/apache. This was all a couple of years ago now and I had thought web design was a thing of my past. But, in a slightly strange turn of recent events I put myself forward for an seo position at a local web dev company, and came away asked if I would be interested in a junior front end developer role. I am eager to take on this challenge, and have been given an html cut-up excercise to do as a barometer of my abilities. Everything I have ever done web wise, has really been from scratch, so this cut-up business is very new to me. I found several videos on youtube which all centred around the slice tool in photoshop, and then saving out the slices as an html and images file, to then fine tune elsewhere, in my case, Dreamweaver. I am conscious though, of not having an image heavy webpage, and also am not happy with the huge and complicated table that Photoshop coded for me as a result of all my slicing. So, does anyone have any experience with Photoshop cut-ups, and ideas to get the best results from the outcome. At the moment, Ive hand coded most of the buttons, so they are no longer images, and added links to them. But I got to a point where all the 1 pixel high 'spacer.gif's' were getting on my nerves that I deleted all of them. Then that left me with a very distorted and empty looking table, so I deleted all the table elements from the code also. So my idea from here is to use divs and absolute positioning to place all the leftover 'necessary' parts, how they look in the original psd image. Does it sound like I am on the right path? I assume there are several methods of going about a cut-up. Could anyone give me some advice? Ben http://plustom.tumblr.com/ This is my current blog and I need some help tweaking it. 1. When you hover over the sidebar title/picture, it turns bright/white. Is there a way to make it stay bright/white without hovering over it? 2. Is there a way to move the sidebar with the title/picture over to the left? 3. When you hover over the picture in the middle, there's a small square box at the top left corner of the picture. It's white when you hover over the picture, but when you hover over the square, it's gray. Is there a way to make the square box stay white all the time? 4. There is a white line under the picture. Is there a way to make it bold similar to the line under "Amnesia"? Current HTML code: (Can't seem to post rest in next post). HTML Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>{Title}</title> <meta name="color:Background" content="#FFFFFF"/> <meta name="color:Font" content="#000"/> <meta name="font:Text" content="Arial"/> <meta name="color:Primary" content="#dcdcdc"/> <meta name="color:Primary Font" content="#fff"/> <meta name="color:Secondary" content="#eee"/> <meta name="color:Tertiary" content="#ccc"/> <meta name="color:Shadow" content="#dcdcdc"/> <meta name="if:Show Caption" content="0"/> <meta name="if:Fixed Sidebar" content="1"/> <meta name="if:Infinite Scrolling" content="0"/> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="toggle.js" type="text/javascript"><!--mce:1--></script> <style type="text/css"> body {font-family: {font:Text}; font-size: 12px; color: {color:Font}; background-color: {color:Background};} #right {width: 250px; left: 50%; top: 50px; margin-left: 220px; position: absolute; {block:IfFixedSidebar}position: fixed;{/block:IfFixedSidebar} opacity: .7; -webkit-transition-duration: .3s;} #right:hover {opacity: 1;} #right a {text-decoration: none;} .title {padding-bottom: 10px; border-bottom: 2px solid {color:Tertiary}; font-size: 14px; display: inline-block; font-weight: bold; margin-bottom: 10px;} a {color: {color:Font};} .link {font-size: 11px; display: inline-block; margin-top: 5px; font-weight: bold;} #center {width: 400px; margin: auto; margin-top: 50px;} #description {margin-bottom: 5px; font-size: 11px; max-width: 200px;} .entry {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid {color:Secondary};} .entry img {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow} !important; max-width: 400px;} .perma {position: absolute; opacity: 0; -webkit-transition-duration: .2s; z-index: 1;} {block:IndexPage}.entry:hover .perma {opacity: 1;}{/block:IndexPage} .permalink {display: inline-block; padding: 10px; background-color: {color:Primary}; color: {color:Primary Font};} .permalink:hover {opacity: .7;} .exclamation {display: inline-block; margin-left: 1px; opacity: 0; -webkit-transition-duration: .2s;} .link:hover .exclamation {opacity: 1;} .text_perma {width: 100px; text-align: right; position: absolute; margin-left: -110px; -webkit-transition-duration: .2s; opacity: 0;} {block:IndexPage}.entry:hover .text_perma {opacity: 1;}{/block:IndexPage} .text_permalink {border-bottom: 1px solid {color:Background}; display: inline-block; -webkit-transition-duration: .2s;} .text_permalink:hover {border-bottom: 1px solid {color:Secondary};} h2 {font-size: 14px;} h2 a {text-decoration: none; border-bottom: 1px solid; -webkit-transition-duration: .2s;} h2 a:hover {border-bottom: 1px solid {color:Background};} .label {margin-right: 10px; font-weight: bold;} .album_art {display: inline-block; margin-right: 10px; float: left;} .album_art img {width: 150px; height: 150px;} .audio {display: inline-block; min-height: 150px; max-width: 207px;} ol.notes {margin-left: -45px; list-style-type: none; width: 400px;} ol.notes a:hover {text-decoration: none;} ol.notes blockquote {margin-top: -3px; margin-left: 0px; padding-left: 13px; padding-top: 5px; border-left: 11px solid {color:Primary}; margin-bottom: 0px;} ol.notes li.note {padding: 5px;} li.note img {margin-right: 10px; width: 11px; height: auto; opacity: .5; -webkit-transition-duration: .3s;} li.note:hover img {opacity: 1;} .entry blockquote {border-left: 2px solid {color:Primary}; padding-left: 10px; margin-left: 25px;} .player {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow};} #tags {margin-bottom: 20px;} #tags a {margin-right: 10px; opacity: .7; text-decoration: none;} #tags a:hover {opacity: 1;} .nav_1 {display: inline-block; width: 50%; margin-bottom: 20px;} .nav_2 {display: inline-block; width: 50%; text-align: right; margin-bottom: 20px;} #nav a {text-decoration: none;} #nav a:hover {font-weight: bold;} .audio_symbol {padding: 7px; background-color: {color:Background}; opacity: .9; border-radius: 100px; position: absolute; margin-top: 7px; margin-left: 7px; font-size: 14px; height: 15px; width: 15px; -webkit-text-stroke: 1px transparent;} {block:IfInfiniteScrolling}.regular_pagination {display: none;}{/block:IfInfiniteScrolling} </style> </head> <body> <div id="right"><div style="display: block;"><div class="title"><a href="/">{Title}</a></div></div> <div id="description">{Description}</div> {block:AskEnabled}<div style="display: block;"><div class="link"></div></div>{/block:AskEnabled} <div style="display: block;"><div class="link"></div></div> <div style="display: block;"></a></div></div> {block:SubmissionsEnabled}<div style="display: block;"></a></div></div>{/block:SubmissionsEnabled} {block:HasPages}{block:Pages}<div style="display: block;"><div class="link"><a href="{URL}">{Label}<div class="exclamation">!</div></a></div></div>{/block:Pages}{/block:HasPages} <div style="display: block;"><div class="link"></a></div></div></div> <div id="center"> could you guys help me answer these questions ... i am just a begginer and dont know a lot of answers...cheers guys and thanks for advance just give your best shot at these questions thank you in advanced 1. Someone wants to load some interview videos on the webpage for the customers to view and download What should he include when linking to them a) type of video b) size of video c)tips for viewing d) all of the above 2. f that is a direct child of an element e a) e-f b) e < f c) e + f d) e>f 3. to accent the division between snowboard types ..use which of the following a) whitespace b)horizontal line c) two sided align d)style 4. to position an element at a specific spot while the rest of the page scrools you use _________ positioning a)relative b) fixed c)static d) absolute 5. what happens when the co-ords of your <ara> tag in an image overlap a) the last tag is used b)the tag used is selected arbitrarily c)the first tag is used d)overlaping tags are ignored 6.by convention if the path and file name are left off the url the browser searches for the file named "index.htm" or "index.html" in the root folder of the web server this file is often the __________page for the Web site a)catalog b)home c)main d)link 7. which style can be used to define a rectangular region througgh which the elements content can be viewed a)region b) clip c)overflow d) rect 8. _______ browsers were incapable of displaying images. a) markup b)text-based c) pda d) graphical I have a table, I have a main header and 2 sub header's, and i want to center the main header to the middle of the table. Can anyone help me? Heres my table: EDIT: WHERES COOTHEAD!! Hello this is my first post i know some things about html but not too many i want to make a site but dont know some thing yet. i dont want to download a template i make it with notepad now. 1)how exactly i can put images at the exact place and there isnt any space between pictures? 2)how i can put pictures on pictures, i want to make a small image that inside there will be links and those links will be small images 3)i want in the middle of site to be some news that will be written in front of an the image for news how i do that. 4)also i want to make a small windows that will saw some picture and those pictures will change every 5 seconds for all these things will i need any other programm or i can do it just with notepad? Okay I'll be very happy of any help I get. So I know something about html- code but not enough. I need to create a site witch has a background image, centered switching page(like example: http://www.oipolloi.com/), and three links: Home, Gallery and Contact. Thanks already. I have gone back from scratch in HTML but this time creating my own tutorial as I go along and have covered a few items before right here on this forum before and now I just can't seem to remember and understand the bleepety-bleep-bleep-BLEEP things no matter how many tutorials I read a million times on the net, so really freaking frustrating, my head is about to explode, sorry got to vent somewhere before I run amok! Ok, [I'm taking a few deep breaths here......], let me start with "linking to a location on the same page", I see the anchors Quote: <a href="#myanchor">Go to anchor</a> <a name="myanchor">My Anchor</a> Using my text here as an example, I want to use the word in the first line "gone" to link directly to the word "million" in the 5th line from the top, how do I do this please? First let me excuse myself for being so un-educated with HTML. Or any language for that matter.. I currently am starting a photography business and since Facebook is a great way to connect, I am in the process of making a professional looking Page via their FBML Tab (the fact that I am coding through facebook shouldn't interfere with my questions). There are two thing I am trying to achieve that I am sure are simple too, but I don't know how. Here goes: Question 1: These boxes are almost literally what I will be doing on my site. There are three images below this text, the first two you see are seamlessly touching horizontally. I need to know how to achieve this vertically also, with not even 1px between a top and bottom image (Here would be about a 2px space if I were to put <br> in my code [or return key]. But If I don't do something, the boxes would stay horizontal) Question 2: This is a mock-up of what the starting page will look like. In the blue box is my question. I hope this ^ made since. And the reason why I mentioned imageshack.us is because I dont have anywhere else to host images, so the code would have to accommodate several completely different image URLs. If any additional info is needed please lmk. I am pretty eager to get to workin on this. - Brandon Hello all. I'm new to these forums. A new free MMO is being launched on June 20, and I have decided to make a nice guild page for the guild me and a friend have made. However, having absolutely no experience whatsoever with coding, I've run into some problems. The site may be viewed he www.maliceadmin.5gbfree.com I have set the site up perfectly the way I want it on my main desktop. Everything is aligned perfectly, no trouble at all. This is on a 19 inch monitor at 1280x960 resolution. However, I was just surfing the web upstairs here on my laptop and decided to check out my site. The text is not aligned properly as it was shown on my main desktop. I'm completely new to coding so please be very detailed in your responses. Does anybody know what the problem might be? Also, I couldn't figure out how to adjust the height of my table. For example, when text reaches the end of the black box, I want it to cut off and have a scrollbar to be scrollable. My final and least important question why the text size and alignment works on Firefox, but not IE. That would be all. Thanks for your time. Hello , I am new in html so i have some questions 1-how i can set value from variable 2-How i can set value from file |