What are /r/HTML's favorite Products & Services?
From 3.5 billion Reddit comments

Used Dreamweaver when I first started to code. One of my buddies told me to try Sublime Text and I've never looked back. It's clean, fast and has a ton of plugins/tools that allow for expansion. I think you'll find that a lot of people in the WebDev subs will agree as well. http://www.sublimetext.com/

HTML is a document markup language to layout the structure of a document. The center element does nothing for document structure and is presentation only. Presentation is the domain of CSS.

It's a separation of concerns. It's not "deprecated". It's obsolete! That it's been marked as "obsolete" in HTML5 means browser vendors are also free to remove it at any time, making it break your page without notice.

While not nearly as feature-heavy as Dreamweaver, I recommend Sublime Text (free). It has syntax highlighting, code completion, and multiple/split views. Also, there are plenty of plug-ins via Sublime Text's Package Manager that can add functionality, though I haven't looked for any for HTML specifically.

By doing it.

http://www.codecademy.com/ is great! Watch Youtube videos. Get a book on html and read through it.

Practice, practice, practice!

And when you get stuck, come here to ask specific questions.

Video support in email is tricky. Check this out: https://mailchimp.com/help/limitations-of-html-email/

iframes aren't supported, which is what you're trying to do.

Instead some rendering clients support the use of HTML5 video, but things like Outlook will not. Typically people use a fall back to a static image when the rendering client doesn't support video.

1) jsfiddle! http://jsfiddle.net/ There are other similar sites.

2) I wouldn't teach anyone using tools that auto completed essential things. A student must learn to close their own tags before they should move on to tools that do that for them.

I only have a minute, so I apologize for the quick reply.

I don't know a library off the top of my head, but I know some exist that are purpose built to allow formatted html input.

Have you thought about maybe just using JSFiddle? It's almost exactly what you are looking for, but in my opinion maybe better for teaching because it may prevent bad habits from forming. It is simple enough for your beginning students, but is a tool that used in professional environments as well.

JSFiddle has four panes, ones for HTML, Javascript, CSS, and another to preview the results.

Pretty broad question, hard to give you an answer, maybe try some cool CSS animations?

https://www.mockplus.com/blog/post/best-animated-websites

Hate. Simply because it's bloated. Yeah, there are probably some nice features that come in handy, but the majority of them I will never use.

I much prefer Sublime Text 2; it's lightweight, cross-platform, and pretty inexpensive. Also there are oodles of customizations and addon packages.

You can target the li via:

#Sales{ color:#333; }

Or the link via:

#Sales a { color:#333; }

Considering that these are some of the simplest selectors in css I would suggest that you do a short online course in CSS: http://www.codecademy.com/courses/css-coding-with-style/0/1 these would give you the basics on top of which you can build your skills. Good luck.

Depending on what browsers you'd like to support, you have two options:

CSS viewport units
Javascript

CSS viewport units has decent support right now (check this table for more info) and is quite simple so I'd recommend going with that unless you need to support older browsers.

Here are the units:

vw = viewport width
vh = viewport height
vmin = vw or vh (whichever is smaller)
vmax = vw or vh (whichever is larger)

Viewport units works in percentages, e.g. 1vw = 1% of viewport width, 5vh = 5% of viewport height.

Here's a JSFiddle with example usage.

Hope that helps!

Sweet baby Jesus, Sublime Text 2 is a fantastic piece of software. It's "nag-ware," so it will occasionally prompt you to purchase it, but it's fully functional apart from that.

Just have them email their code to you? It's simple text, anyway...

HTML is a markup language, not a scripting language. If I am understanding your goal correctly, you would need to use something like javascript. Data attributes are actually intended to work with js and css, so you can extend data association without disregarding semantics. (helpful reading)

To clarify: you want to populate an href value with whatever data-*, e.g. data-sw-material-swatch-id? Something like this? I realize you cannot update the first block, but I just did a really quick example to be sure I understand your goal.

If that is indeed your goal, the example should help you get started. It relies on an ID to exist within the first block of code, so if adding that is not possible, you will need to try another method of identifying and grabbing the data you want.

Hope this helps a bit.

You only have one function.

You then call that function whenever you need it:

randomQuestion('sports'); will execute the code with the topic 'sports'. randomQuestion('movies'); will execute the code with the topic 'movies'.

This should work for all topics that are in your object.

The basic idea of a function is this: You can call a function by writing the name of the function with () behind it. Inside these parenthesis you can hand information over to the function. This information, called parameters or attributes, is the input. Then the function can do something based on that input. It can either change something directly (in our case the function would change the website) or it can generate a new value from the old ones and output this new value using return.

Functions are great because you only have to write them once but you can use them for different values again and again.

I've updated your fiddle. http://jsfiddle.net/n81mxe5k/4/

The following lines currently start the process:

$(document).ready(function(){ randomQuestion('sports'); })

This code simply starts the function when the page loads. You could also now create buttons for each topic, however. One button labelled 'sports' could call randomQuestion('sports'); and one labelled 'movies' could call randomQuestion('movies');

I've added a line that resets the time so that the countdown is a full 10 seconds every time you want a new question:

$('#timer').text(time);

I've also added the random question, the countdown and the answer display into the function so that you can call everything with one function call.

-edit-

I would strongly suggest you take some basic lessons on JavaScript. for example on http://www.codecademy.com/tracks/javascript

I feel that you are currently struggling more with this than you have to. Some introduction lessons will help you greatly.

For 15, I think it's impressive that you hand-coded it all, but it needs a lot of work. The concept works, however I'd definitely work on the overall design of it.

The header/logo isn't great. The typography needs work, all of it. Play with fonts, and a general rule of thumb is to only use two or three different fonts. The glow affect/text shadow is really awful, but that's just my opinion.

I do like the idea of the Nerd Fun Servers, I like the background of it, I don't love the typeface and the red border is harsh to look at.

White backgrounds for the textboxes should either be opaque and padded or taken away all together.

Finally, the navigation bar needs work. The bar should stretched be out or off to the side and listed down. Play with design and learn your aesthetic, be simple, and keep learning! I only glanced over it but the coding looks pretty good for a beginner.

I don't know what you're using to learn, but I really liked working with codecademy. Also, it might be too early, but I find this this really helpful when I get frustrated with html and css

TL;DR Work on design. keep going, you're doing great.

edit. just realized nerd 3 fun servers is the free server. disregard.

You could take a look at the web development courses at Udacity: https://www.udacity.com/courses#!/web-development

(Don't be put off by the fee. By clicking on "access course materials" you can do every course for free. The fee is for people who want a certificate and/or need coaching.)

Do you want them all in the same image size? Or any height and always with 5px padding?

You might like this here:

https://codepen.io/dudleystorey/pen/eAqzk

Make your screen smaller to see the effect better.

Use Sublime Text 2 instead. It's free.

This is coming from a Mac user who replaced Espresso, Textmate, Coda, and BBEdit with it. It is the best text editor I have ever used and it's cross-platform.

I'm not sure if I get the question right.

What you are trying to to is :

click on the link
run example.py in the "background" without changing page
Give the control back to the user when the script is done

Is that correct ?

EDIT: Let's assume yes :p

I think what you are looking for is AJAX

Ajax let's you send and get data from the server without having to reload the page.

I've created a small preview of what your code http://jsfiddle.net/BM2wq/2/, let me know if that's what you had in mind

I would suggest to read a good book about html, or do some quick training: http://www.codecademy.com This will get you started.

Also, I would suggest to take a look at some frameworks; Twitter Bootstrap or Zurb foundation. Those frameworks will help you create a responsive website.. Lots of help can be found in the docs from both of the frameworks.

Hope this helps, and happy coding!

This is NOT recommended with jQuery, you can achieve this with css unless you would like to do it with fancy effects and such as in your example. (disable javascript and the whole website won't load)

Tutorials:

here
here

When programming gets more complex it is a best practice to always 'separate concerns'. This usually means keeping functional things away from visual things. In HTML/CSS the functional part is the markup and the stylesheet the visual.

Also, once you have more than one web page, you have to duplicate all your CSS on each page if you want to keep your styles consistent. I've recently started using SCSS and have a separate SCSS file for each 'module' of a site I am building (one for the main styles, one for the sidebar etc.) I then use gulp to process all the SCSS files into one and include that.

what /u/dmgctrl said!

Version control FTW. There's a tutorial on Git here: https://try.github.io/levels/1/challenges/1

There's also tools like https://www.sourcetreeapp.com/ (free) that make it easier to work with source control if you don't like the command line.

Also, don't listen to anyone that comes here to complain about the quality of w3schools... Most of the complaints are from 10 years ago =D

Codecademy also has some great guided lessons: http://www.codecademy.com/

You'll need javascript for that. Give the div an id, then run the following:

var sbdiv = document.getElementById("yourid"); sbdiv.scrollTop = sbdiv.scrollHeight;

http://jsfiddle.net/xz567d72/9/

Does this solve your problem? I also cleaned up some unnecessary code. All you had to to to center it was make a div and set it to style="text-align:center;" Not to mention, that if you don't know it already you should learn CSS, so you don't have to do those <font> tags and other stuff like that.

Because many sites are dynamic and rely on events which fire after the DOM is finished loading.

Here is an example: http://jsfiddle.net/k31x96z7/ Click on the blue div and a new red div will appear. Now view the source code - you will not see the red div in the source code. You'll see the jquery for it, but not the html code. Why? Because the event occurred after the DOM was loaded.

Also, I assume you mean the rendered page's source code because the actual code for Tumblr uses tumblr specific template tags. It's just all that code and querying is executed before or as the DOM loads. :)

Note there may be other reasons (e.g. relative paths instead of absolute paths), but the above is a common reason that may not very obvious at first glance. I hope this helps a bit.

Here's what you need to do to solve those three problems:

Set the width of the first cell on each row on the table. This will make the second cell in each row start at the same spot in each table. For html5, you should use the css syntax (style = "width:120px").
On your header cell (th) set the colspan property to 2. This will extend the line all the way across the row, just as if you were merging two cells on Excel.
On your CSS, set the color for element a to rgb: (5,99,193).

You can see it all here: http://jsfiddle.net/nancystodd/hrjqkxzk/28/

The name of the textarea in your HTML is comments but in PHP you try to access $_POST['message'], the other example uses the correct comments array key. $_POST['comments']

Also the From and Reply-To headers can be passed in the fourth parameter in the mail function. Example here: http://php.net/manual/en/function.mail.php#example-3865

(edit: thanks Eagle2710, yes it is the fourth parameter)

p.alignright a{

float: right; display:inline; color: black; font-family: Twentieth Century, Century Gothic, Futura LT, Calibri, Arial, sans-serif; font-size: 12px; text-decoration: none; margin-top: 4EM; margin-right: 0.5EM; }

Use- margin-top: 4EM;

Here is the jfiddle (note, i added a margin between the links to make it look better. Remove or edit it how you like "margin-right: 0.5EM;") http://jsfiddle.net/co2eqx80/14/

If you need anymore help feel free to pm me :)

Ok, so I edited a little bit of your code, he is my updated jsfiddle of what you had, http://jsfiddle.net/Vb9En/

when working with relative positioned items, you use margin, and so what I did was added

margin: 0 auto; width: 100%;

to center it on the page, then I made it the full width of the page, then for the image I added

.headpic>img { width: 100%; }

so that the img doesn't overflow the bounds of .headpic

hope this helped.

(Did you see the sidebar here pointing you to http://jsfiddle.net/ ?)

Put the code from the .html the HTML field on jsfiddle, and the code from the .css the CSS field on jsfiddle. Hit the Save button at the top, the URL in the addressbar will change, copy and paste that link here.

A link the newspaper's website itself would probably help too, but since it's for your job I'm not sure if you can give it?

Exactly this. I've tossed together a quick Codepen (though the code may be a bit rough since I was somewhat rushing to get the concept done) to give a rough idea of one way one might accomplish this.

https://codepen.io/anon/pen/oydeXq

I want to help you, but I can't make heads-or-tails of the cut-n-paste you supplied... PLEASE set-up a minimal html/css example in codepen that shows the problem... and then supply a link.

I learnt through a mixture of Codecademy (which has already been mentioned) and a book called HTML & CSS: Design and Build websites by Jon Duckett (this links to the UK amazon). I think Codecademy misses a few (non-vital) things out, so a secondary source would definitely be worth while; whether that's Duckett's book or not.

That's a tough question. There is a reason that image's default display is inline. Setting the font size seems a bit "hacky" to me personally.

There's a reason images, span, and a few other elements are display: inline by default. Because it's expected they might show up "in line" with text or other items in a parent element that are being aligned or centered somehow.

But generally, I feel like most people want everything to be display:block, until they need to inline something in text, or want to center things. But nowadays there's better ways to center things with margins, floats, flexbox, css grids(soon), etc..

A lot of times it has to do with being able to align something horizontally or vertically. But that's also not really an issue these days. If you're not working on legacy code, or some software that needs to comply with an old Internet Explorer version etc.. I would say:

Forget these hacky things. Display block what isn't already default when you need to use it in block fashion, and if you want to align things, look at flexbox. I already use flexbox in production and the support is good

You mentioned "tables". Unless you're trying to become an email designer, abandon the course you're taking and find one that focuses on modern web design (i.e. divs and css). Tables are for displaying data - think Excel. They're not for layouts.

This guide really helped me understand things when I first started learning: http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/#a1

Take a look here - quick and dirty: http://jsfiddle.net/Gv8wd/

The content is centered using the 'wrapper' div. If you look at the CSS you'll see 'wrapper' has a width defined, and its margin is set to 30px auto. This centers the div horizontally and adds 30px margin to the top and bottom of the container.

The maincontent div and sidebar div then sit within the wrapper. Floats are then used to make the sidebar element appear on the right side of the main content, both positioned inside of the wrapper.

Your teacher told you to make the the layout with a table? That just makes me want to cry. Depending on your relationship with her, you might want to mention it. I recomend using the links I provided, since they are considered the official source.

>Colspan is what is causing the problem, however, I have no idea/way to fix it.

From some dinking around, the error is from the outter table. I think you're missing a </tr> somewhere. The price list table was really irking me, so you can see a HTML5 solution at http://jsfiddle.net/dUasu/. It does throw an error. An error free one is at: http://jsfiddle.net/dUasu/2/ which uses non-inline CSS, which I don't know if you've been taught that yet.

A quick tip, you might want to look at using codepen.io or jsfiddle instead of posting a huge block of code. It makes it easier and faster to take a look and offer advice or solutions.

Actually it's pretty simple. You just create an input for each item you want, with a data attribute with the price. Always remember that you must validate server side.

Demo

The CSS is for styling and the JS is for scripting, there should be a .html file, you can use the search feature on most modern text editors like NP++ to find the text

You should really read about SEO.

Your title could be a little better: https://moz.com/learn/seo/title-tag

sitemap.xml is missing: http://playlifeapp.com/sitemap.xml

and your site has 8 h1 tags, images without alt...

You could read some more about Aria too for buttons, links and video to make accessible...

So you're looking for a place to host your own website for free? Github pages is a good start, plus you can learn to use git (or not).

Alternatively, there are lots of places over on /r/webhosting that offer various free packages.

I can't offer advise concerning the server, but some of your problems seem to stem from javascript. During my first visit, everything was scrambled and bits of the accordion menu were displayed unstiled. Only after reloading the page did the accordion menu work.

Apart from that, the layout seems to have some issues in general. Maybe using a layout framework would help.

Judging from your screenshot, the layout should be easy to realize using Bootstrap.

If you find it hard to use Bootstrap directly, this short course might help: https://www.udacity.com/course/ud304 You can either look at all three lessons or jump directly to lessen 3, which introduces Bootstrap. Personally, I found that lesson 2 helped with understanding how such frameworks work in general. (By clicking on "Access Course Materials" you can see all the course videos for free. The payment is only for people who want a certificate.)

For this you could use JavaScript, and for that the question might be better asked in r/learnjavascript.

This strategy is employed for templating your HTML so that it can be embroidered by JavaScript later.

It's usually done by writing your template HTML in a <script type="text/template"> tag, then accessing the contents of that tag via the DOM in JS. Often, the HTML is augmented with preprocessor directives for the JS templating engine, e.g. Handlebars, which make stuff a lot easier to code, but can look really confusing.

Edit, example taken from Handlebars homepage:

... then, later, in JavaScriptLand...

var source = $("#entry-template").html(); var template = Handlebars.compile(source); Edit #2: "Need" is a strong word.

No, it won't. Or shouldn't, according to the standard:

> The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.

source: w3.org

Firstly, what's your source for legend being deprecated? See http://www.w3.org/TR/html5/forms.html#the-legend-element

Secondly, fieldset is nothing like form: form describes a form in its entirety, whereas fieldset defines part of a form that makes sense on its own, or, "a set of fields".

For example, a registration form may have some inputs for name, email, etc. then some fields for payment details and a few more for notification preferences. These may be defined as three fieldsets in the form so, semantically, they stand on their own as discrete sections of the broader form.

Tables can contain a caption element. While the base description refers to the caption simply as being the title for the table, the example on the w3 site show it being used for a more full description.

Looks like others have helped solve this problem. But, it looks like you're using arcane tags and attributes (at least you didn't use <blink> ;P). It's a lengthy read, but take a look at W3 Recommendations for HTML4 for more current standards. And, for even more current HTML standards(?), see their HTML5 page. Hopefully by using current standards, your instructor won't accuse you of witchcraft and apostasy of abandoning ancient HTML standards he seems to hold dear. Hopefully instead, he'll even give you extra credit.

Hello!

HTML is the first language to learn when getting into webdesign or development (building websites).

*You will definitely want to watch this video series: *

http://net.tutsplus.com/sessions/web-design-from-scratch/

Free domains don't give you any control, as you don't actually own them, they're just subdomains of a domain someone else owns. If you're genuinely interested in setting up a website, I'd highly recommend getting your own domain (they're only about $12).

I'd suggest getting your domain, setting up Surge, which will give you free hosting, and putting up a basic "hello world" page. For example:

<!DOCTYPE html> <html> <head> <title>Hello world</title> </head> <body> <h1>/u/dejavu669</h1> <p>Welcome to my website...</p> </body> </html>

This way, you're covered against domain squatting, no one else can buy your domain, and you have a playground to mess around with.

They are called image sliders or image carousel. They also go by a few other names.

A couple of links for you:

http://www.jssor.com/

http://www.sitepoint.com/web-foundations/making-simple-image-slider-html-css-jquery/

Dynamic Drive, wow the nostalgia.

Andy's response is great. Just to add some info to this post here is what browsers support :hover

http://caniuse.com/#search=%3Ahover

and opacity styling support:

http://css-tricks.com/snippets/css/cross-browser-opacity/

For the cursor you can use the css cursor property with a url() and for the YouTube videos you can put an onclick event on the buttons with the following snippet of code to navigate to the video “location.href = ‘url to go to’” if you want an example I made a site you can go to Code Site

David. Awesome site. Very simple. Have you thought about using a "mobile first" approach? I was looking at your code and playing with the developer tools and the page looks a little wonky in mobile view when emulated. Remember this is just my two cents. I would if you haven't already look at TreeHouse. They are GREAT and they are who I am currently taking classes from and they teach this concept.

Hi Melon,

when changing the class of the button from red to green you're not actually changing the colour. If you add the red class back and right click -> inspect element, you can see all the styles listed in your browser.

Example with firefox inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector

This is how I would write your code.

Couple notes:

Try to think in terms of elements, not pages, e.g. topnav: does it suppose at the top? Can it be just nav? How will you style it to be separate element, not a part of this one page?
As /u/ellenbrook said, classes are strictly better than IDs. You can never reuse an ID, but you can always reuse a class.
Sometimes it makes sense to have a utility class: not an element by itslef, rather a mixin, like a class that removes default styles (bullet points, margins, padding) from list elements.
More often than not it pays off to combine rules for several elements if they are repeated (see #articles, #tips, #team, #contribute in your original code). Just try not to over-combine elements, think if the element will work by itself without the styles you are going to extract. (In this case the code actually tells that these things are one element and should look the same.)
Magic numbers are a bad sign. If you notice yourself using something like 0.1% to fix something you don't understand — take a break and/or talk to a colleague, because there's a more fundamental problem at hand and you need to fix that first, not put bandages over it.

Couple WTFs:

If you want to use a negative margin, you probably need to, once agian, take a break. In most cases you are just hacking on top of underlying problem with your layout.
You don't need position: relative; unless it's absolutely needed. You don't need to set 100% width on block elements, such as <div>s, they are 100% by default. It doesn't do any harm, but it doesn't provide any real benefit either. Try to keep your code clean, without unnecessary rules.

Note that I applied box-sizing: border-box;, because in my experience it makes things easier to lay out. If you take it out, most of other rules will need to be adjusted. For more information, see links in the linked JS Bin.

Try putting divs inside a container and position them inside that container. I'm using translate function on transform property (before the rotate function) because I think it's cleaner than adjusting absolute positioning.

Your going to want to look into using css floats if you want a dual column layout. And if you're using floats you will eventually run into issues with parent divs not stretching to fit them. This is because once you float a div it removes it from the document flow. So you will need a css Clearfix class to assign to the parent divs.

Heres something i threw together quick. http://jsfiddle.net/BryIsAZombie/HH4s7/21/

Heres a Clearfix http://nicolasgallagher.com/micro-clearfix-hack/

Read up on the stuff so you understand whats going on.

Three things to check:

When you are in TextEdit, hit command + shift + T to convert the document to a true plain text document.
Make sure it really overwrote the extension. Click on the document in Finder, hit command + I, and look at the "Name & Extension" area - make sure "hide extension" is not checked.
Make sure Fetch is uploading in the correct Format (usually automatic works okay).

If you continue to have problems, use a different text editor. TextEdit isn't really the greatest choice for editing html documents anyways. I personally favor SublimeText, but there are a lot of great choices out there.

Hope this helps a bit.

No offence or anything but If I were you I'd seriously consider learning how to code stuff like this in PHP by hand (check out Sublime Text editor: http://www.sublimetext.com/) rather than relying on software like Dreamweaver to put the pieces together like that... Sure it may have seemed like it was very helpful and a good idea to use DW at first, but when things break you end up in the sad situation you are in right now, when it was not really that much more complicated to do the same thing by hand, without being dependant on any piece of software!

For example, let's say you have the same footer in all your pages... All you need to do really is to save the code of your footer in a single file named something such as "footer.inc.php", and then in all your pages (supposing you're using PHP), you make sure it's inserted this way:

Some HTML or text here or whatever  <?php insert('footer.inc.php'); ?>

</body> </html>

All you need to do is insert this type of short line of code everywhere you want stuff to repeat itself without having to edit pages one by one (you just edit "footer.inc.php" once and it updates everywhere)... It really isn't very hard to do and this way you don't need to depend on third-party software such as Dreamweaver or Frontpage etc...

BTW I also used Dreamweaver for many years but after similar things happened to me, I decided to ditch it and code everything by myself without depending on it. Not only I don't have these problems anymore but I'm a much better coder now and I better understand how my pages are built etc. For stuff needing Javascript, rather than trying to get DW to generate the code for me, I now use jQuery which makes it much easier to create your own scripts which you will actually understand!

You can use Gmail's link system: https://mail.google.com/mail/?view=cm&fs=1&[email protected]&su=SUBJECT&body=BODY&[email protected]

After a bit of research, i think that this link will be your best bet of solving it. it has several options (flex is what i would recommend, I'm at work otherwise i'd try and use it within your files) but vh is also an option.

let me know if you can get something to work!

Just FYI: display: inline; does work if you want the elements to be in one continuous line. You just have to put display: inline; on both the ul and a (like so). Of course, if you want the a and ul on opposite ends, then the solution from /u/Neaoxas is the best choice.

Yes, that's possible, with a little javascript. Use jquery's mousemove event handler, which returns the x and y coordinates of the cursor when you move the mouse, then set the image's position to those coordinates:

http://jsfiddle.net/57h77ycL/

If you want it to appear to the left of the cursor, so it appears to be following the cursor, change the x value to be pos.pageX - imgwidthinpixels

I think understand what your asking, is the device name and the code going to be in the form? if so you could just use the GET method in an HTML form like in this fiddle I made. Then in the target page you could then process the info.

I put the target="_blank" so it opens in a new tab, that way you can see the URL in your browser and see if that is what you want. If it is, you can use that and there is more on forms here

try setting to display:block; and also you might want to check if it's inheriting some line-spacing it shouldn't have.

but yeah, a screenshot doesn't really help much! The culprit could be somewhere completely different. Maybe something as simple as the body having a padding-bottom

Why don't you put the source up on http://jsfiddle.net/ to give us a better picture?

edit: dyslexia

The solution (warning, jQuery): jsfiddle

The problems:

1) You gave multiple elements the same id attribute which is bad for HTML.

2) You were trying to access the selected option via the option id which was wrong.

3) You had no event listener to listen for the change of option, Javascript only runs once when the page loads. So you have to listen for a "change" event on the select box.

I hope this helps.

My solution. I kept pretty much all your code, although I wouldn't layout the page this way. But that's OK, you're just beginning!

You wanted a height of 50px on your gray nav items. Keeping that in mind, I shrunk the height of each to 30px, but added a 10px padding all around the text.

That's 10px x 2 sides (top and bottom) + 30px = 50px height. That effectively vertically centers it. Or at least looks really close to it. Might be off a few pixels the more I look at it, at least on my screen.

To center the nav bar, I just added up the combined widths of those four nav items plus the shopping cart image. That was 530px. So I created a new #nav selector and set the width to 530px and then set the margin, on all sides, to auto. Using something like

margin: 0 auto;

on block level elements (such as a div) is a common way to horizontally center block level elements, with the width property defined.

Well, not necessarily related to your problem, but you can't have two IDs on an element like that. IDs are unique identifiers and should only be applied once to a single element. You're kind of abusing the :target pseudo class here. You don't need to target open and close, you just need to remove the target for the element to go back to its original state.

You also cannot animate the display property of an element (with CSS). You can animate the opacity but not hide the element.

Here's a reworked JS fiddle of your code http://jsfiddle.net/ccd73qLp/17/ I added transition-delay attributes too, because your post title is suggesting that you want to delay this animation.

Hey it works! Good job.

Just a heads-up: the <font> and <center> tag are deprecated. They obviously work, for backwards compatibility, but it's no longer good practice to use.

CSS would be used for horizontal centering. See this JSfiddle example I put together: http://jsfiddle.net/3d3tq5kw/1/

Keep it up!

Did you copy/paste this from your original code? Using value= should work like this:

see here: http://jsfiddle.net/86xk6nn9/

(It actually doesn't matter in which order you place the attributes, the value= could appear anywhere inside(!) the input tag)

But at least what you posted here uses the wrong type of quotes behind type="text”. The second quote is something out of word or similar text processor. The HTML interpreter will not know what to use with this character.

Add text-align: center; to .location in your css file. I tried this and it works. The reason is because your "location divs" are children inside of the div's content and wrapper which have their own css ruling by default due to the element itself, not css. This means that you are organizing the three location divs rather than it's text. By saying float left you are saying you want the three divs to be forced left inside the content div. The white space around the location div's is it's padding, which is where you control the text. By using text-align: center; to .location you are saying that the text should be centered within the padding.

Here is the updated version: http://jsfiddle.net/Fizzy/4k0qyqf5/

A couple other things: You seem to be forgetting the closing </p> tags in the location div's, unless you're using the p tag just to get the paragraph, but it's bad practice to not close each tag. Which goes for elements like <br> which have no closing tag like <br></br>. Instead, it uses <br/>. While <br> works perfectly fine, not using <br/> may generate errors in various programs in which it would say that you didn't close every tag. To use images on jsfiddle, upload the image to a site like imgur.com, and get the direct link and use <img src='ImgurDirectLinkHere' alt='Image'/> Finally, for jsfiddle purposes, I removed the head and added http://fonts.googleapis.com/css?family=Montserrat:400,700 to the external resources tab. If you want to copy the code that I made, make sure to add back your original head, doctype, html tags. I only removed it to get rid of the petty alert.

Hope this helped! (P.S. I'm a student too)

I did a quick once over on it and the first thing I noticed is that you're not using any HTML 5 elements. To be more efficient in regards to screen readers and Google reading the site you might want to do that. I have attached a jsfoddle to show you what i mean.

http://jsfiddle.net/3rj7067q/1/

Other than that, I'd probably avoid using IDs and use classes instead. An ID is more of one off instance of something. You're going to have multiple headers, multiple bodies, etc (on different pages) so I'd use a class instead. But that's personal preference. More on that here: http://css-tricks.com/the-difference-between-id-and-class/

Other than that it looks pretty efficient from an HTML stand point. Good job.

Assuming the filenames are numbered sequentially, it's easy enough to do in jquery - https://codepen.io/guerresinge/pen/QZWLzP?editors=1010

Obviously the files don't actually exist there, but you can see it requesting them in the javascript console.

If the file naming convention is different, you'd probably have to pop all of the file names into an array and iterate through that, but it's still easy enough - the attr('src') part is the important bit for setting the source of the iframe.

as /u/RandyHoward said, you just add a class on scroll in javascript - here's an example using jQuery - https://codepen.io/guerresinge/pen/xavqNZ?editors=1111

It's because they're floating.

Think of it this way: When you make it floating, it becomes a little 'frame' that everything wraps around. You have the page, and you stuck a postage stamp on the page. you can write to the left and right of that postage stamp, or all around it, whatever.

That's what float does. It lets you move stuff around for style, and the browser figures out the rest.

What you're looking for is not float, but text-align.

I cleaned up your code a bit to what i think you were going for, and tossed it up on codepen (minus images, of course) for you to take a gander at.

EDIT: I think you wanted that celtic symbol as your background? Maybe? I did a quick SVG trace, and base64 encode of it, and put it in as the background image, as well.

Post your code on codepen - that way we can see exactly what it is you're doing.

Also, I cobbled this together a little while back for another user here - it uses the coinmarketcap API - https://codepen.io/guerresinge/pen/zRjaYR?editors=0010

I whipped up a quick codepen that might shed some light on what you're after. There's a random image button, a state variable for the current image, and buttons to go up and down, complete with checks to make sure the images wrap around the end of the array to the beginning.

Hope this helps!

Your ul element has a 20px padding to the left as it is a list element. Add

.underneath-nav {

padding: 0;

}

to your css and they will centrally align. See: https://codepen.io/Sectarian/pen/aaoGGE

CodePen or something similar will likely get you a quicker response cause users won't have to get your markup into a browser first.

Hope this helps!

Don't worry about asking questions. :-)

1) Yes, you write the HTML without any "style stuff". 2) Then you write the CSS on a separate document. 3) A style sheet is the file where you select one or more elements to add styles to. Example of a CSS rule:

table { width: 600px; margin-left: auto; margin-right: auto; border-collapse: collapse;}

4) It should not be a part of the same document that you wrote the HTML in, but it could be. It's generally bad practice to have CSS rules inside an HTML file.

Now I suggest that you take the free courses (it has Google+ login!) at Codecademy. It seems like you would benefit from this. Personal side note: I've had my progress saved from approx. 1 or two years ago!

W3Schools is great as a reference site. It tells you how elements work and can help with CSS syntax. It also has a tutorial which I've not tried out!

I'm certainly not experienced with HTML/CSS but I've explored them for some time. I own two books written by Jon Duckett one of which I really enjoyed ("HTML & CSS" and "Javascript & jQuery", haven't completed the latter). Anyways, let me know how it goes!

EDIT: corrections

Versuch dich mal am FreeCodeCamp. Ein Schritt auf den nächsten, und wenn du das Gefühl hast, gerade etwas Nützliches für deine Webseite gelernt zu haben, wende es dort an. Und so weiter. Sobald du ein prinzipielles Verständnis hast, wie die Dinge funktionieren, geht alles viel einfacher und zielgerichteter. Das braucht nur Zeit – stress dich nicht.

Lies dir am besten zu allem, was du nicht verstehst - wie flexbox und display (und gerade die zwei sind ziemlich essenziell) - die jeweiligen MDN Seiten an. Minimum das Intro, die möglichen Parameter/Eigenschaften und das Standard Beispiel. Dann hast du einen guten Überblick über die Funktionen.

Tipp; Merken kannst du dir eh nicht alles. Aber am Ende weißt du, was es gibt und was nicht, und dann kannst du danach googeln. Ich hab z.B. die Woche googeln müssen, wie ein CSS style Tag im head auszusehen hat. Und ich hab dutzende Seiten aufgebaut.

Für SEO brauchst du praktisch kein JS-Wissen. Deine Seite sollte semantisch aufgebaut sein, was du ja schon machst mit den nav-, main- und footer-Elementen z.B., nur eine h1 pro Seite, sich wiederholende Keywords usw. Aber da hilft Dir Google sicherlich weiter als ich. Gerade der SEO Sektor ist leider total überflutet was Informationen angeht. Ist im letzten Jahrzehnt ein ziemliches Buzzword gewesen. Kümmer dich erstmal um Grundwissen und den Aufbau der Seite(n). SEO kommt dann später.

Um Google Analytics einzubinden, kopierst du einen script-Tag in deinen head. Mehr nicht. Also chill mit Javascript noch bissl – so wichtig ist das nicht.

Unterm Strich:

FreeCodeCamp
Google jedes Wort, welches du nicht verstehst.

Well you could have a look at include(), but it's PHP. Another way would be to use Javascript, but keep in mind that people with stuff like NoScript won't be able to see the menu.

You're right. I should have given it an alt tag, but since it wasn't an example of <div> vs semantic HTML, I omitted it.

As far as the <h1> though, I disagree.

I see logos inside of <h1> tags every now and then and it seems antithetic to the purpose of heading tags.

If I should aim to have ONE <h1> tag on my page, then it should serve as a heading and should be the heading that most importantly reflects the page's content and intentions, such as a page title or headline.

A logo and company name may be the most important content on the homepage, but for most pages on a site, it isn't. What distinguishes this page from other pages? Why should this page appear in Search? What role does this page serve? If my <h1> tag doesn't surround content which answers these questions, then I feel I've made a mistake.

I found a thread that agrees with me after looking at a couple that didn't, so I guess this isn't a settled matter.

Nice! Looks good to me, too. That's weird. I haven't used mod_cache on apache, but it looks complicated. I wonder if it was an actual cache problem or if the server was just hung serving old files or something? I rarely have to restart apache, usually only when I make a conf change that requires it.

Those are all added to the page using javascript after the page loads. To scrape it, you would need to execute the js first.
This stackoverflow answer should help.

Do you realize that to edit a template you need to know HTML and not just that right? You said they did not teach you that and that you are having problem following videos. Unfortunately this no easy task under your status.

There are options like WebFlow where you dont need to know how to code anything and you can start with a template and edit things to your liking.

Give that a try

Sorry about that. Here you go: http://jsfiddle.net/9xqvoq6s/

However, it turns out that the issue was in the CSS, actually. See my edit to the OP for more details.

~~On a related note, any idea why one windows 7 PC with IE10 would view the page that this code generates in IE10 standards mode, but another windows 7 PC with IE10 would view the same page in IE7 compatibility mode? I cannot for the life of me figure out why that would be.~~

Thank you very much for your assistance.

Edit: Nevermind, that was the stupid "always view intranet sites in compatibility mode" option!!

Yes, you see the problem lies in mixing up relative and absolute measures. With 100% you tell the css rendering engine to make the element '100% the width of the parent element'. you then specify the nested div to be 980px, which might overflow the parent container.

I'd solve this by using only relative measures, or absolute measures with a dynamic margin. I'm not sure what you want exactly.

I'll post the jsfiddles in a sec.

Edit 1: You might want to use border box, which saves an aweful lot of trouble for calculating dimensions.
Edit 2: jsFiddle I changed everything to relative dimensions, hope it helps

I'm not completely sure, but I added the css and javascript links to the left, under "external resources", and removed the title/body tags.

Now the dropdown seems to work: http://jsfiddle.net/6610ppcu/1/

I was bored, so I wrote the PHP too. It's pretty simple, have a look:

http://snippi.com/raw/7eck0uy

It makes an AJAX request to itself so you only need one file, and you can then perform any of the actions you need to and return the response.

~~I wrote a basic jQuery script which takes a keyboard input, converts it to the character string, and makes an AJAX GET request (?key=xyz) to a specified file, and logs the response (JSON is expected).~~

~~http://jsfiddle.net/SCbSL/~~

It's best not to rely on div align="center" or text-align: center to center your div. Do this instead:

Your header div has a width of 960px defined. Instead of putting that in the header, put it in it's parent div (the div before). Then give the parent div margin: 0 auto; The 0 is the top and bottom margin, the auto tells it that left and right margin should be equal distance. This automatically centers it horizontally on the page.

So your first div (the parent div) will go from:

To:

And now it should look how you want it to... and you should be able to add a border as well. Here is your code updated with the above: http://jsfiddle.net/7N5PY/1/

If you're going to continue learning CSS, definitely take some time to learn how to do external styles. It will make your code cleaner, maintenance of your code easier, and knowing how to read a proper CSS document and associate IDs and classes will make tutorials easier to understand. EDIT: luminancedesign's jsfiddle is a really good example of how your code would look much cleaner with external styles.

Hope that helps. Good luck with your project! :)

thats because the logo was an sgv. oops

anyways the previos one will work if you set another image, but centered I think this does the trick all browsers

edit: flash object has some styling that isn't necessarily needed.

Fell free to remove the unnecessary styles in the div > /#centered

" border" and "margin"

No need to be sorry, I love helping people, and also it helps me practice my web skillset and gives me some inspiration.

https://codepen.io/nickalcantara/pen/bjWNXL?editors=1100

Since you're using floats, here's how I would suggest fixing it. I've added notes throughout the css that should be sufficient to point you in the right direction.

OK, how about a demo? I'm not going to claim to have used best practices or anything, HTML/CSS isn't a primary skill on my current job, so this was a combination of old skills and a little reading and cut and paste from the examples. For the most part, I'm just accepting the defaults for the flex properties, whereas you might want to set a few things explicitly, like splitting the top flex into two 50% containers, rather than letting them flow so that they achieve equal height.

Nothing you've said strikes me as an incorrect practice, so I think you're on the right track.

I've created a really quick codepen that just gets the basic layout out of the way: https://codepen.io/MathiasaurusRex/pen/NMZLxg

I've really enjoyed being able to use the following flexbox combo as it allows some extremely quick layouts that need "content on left / content on right" :

nav { display: flex; justify-content: space-between; }

If you need to include a hamburger navigation on smaller breakpoints I would do something simple like hide the <ul> on mobile and include a <button>Click to reveal menu</button> tag that an individual can click and display the <ul> and the corresponding list items.

One item that I would like to call out is that you should also make sure that your hamburger menu button has some sort of corresponding text so that individuals who use assistive technology know that it's a button that opens more of the menu.

Hope this helps!

https://codepen.io/nonimpressed/pen/YLPNGK?editors=1100#

If you place the content in appropriate containers you can use flexbox to help. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

My solution is just a quick example and isn't perfect, but I recommend reading up on flexbox.

And I told you in my first message to put everything on CodePen, right? Again, people are trying to explain to you how you can help us help you, but you're ignoring us. Good luck.

The CSS in your Logincss.css might impact this. We don't know until we see what's in it!

https://codepen.io/anon/pen/dmBrYO

It should work now. CSS reads properties in a given order. Look up CSS specificity.

basically it reads inline CSS properties first, followed by your external css properties. In your case your inlince fill attribute was given the higher importance. Therefore your external fill attribute got ignored.

If you put both of them into the css file (like in the given codepen), then the :hover gains the higher specificty over the lone element.

You're most likely going to be using JavaScript and some sort of server-side programming language like Java, Perl, Php etc. to store the data and run complex functions. To learn these languages, I recommend using CodeAcademy, it's what I used to learn JavaScript and php.

This is a really advanced project, and basic knowledge of HTML and CSS are the baby steps towards creating the program you mentioned. If you're serious about this, make sure you're ready to invest many hours in learning a programming language, as they are vastly different from markup.

What are /r/HTML's favorite Products & Services? From 3.5 billion Reddit comments

The most popular Products mentioned in /r/HTML:

The most popular Services mentioned in /r/HTML:

jsFiddle

CodePen

Bootstrap

freeCodeCamp

Codecademy

Can I use

GitHub Pages

JS Bin

Sublime Text

HTML

Atom

Visual Studio Code

PHP

Notepad++

W3Schools

The most popular Android Apps mentioned in /r/HTML:

5E Spellbook

The most popular reviews in /r/HTML:

What are /r/HTML's favorite Products & Services?
From 3.5 billion Reddit comments