HTML form elements not properly aligned - html

After spending hours and hours I turned out to have this form and I just feel hopeless now...I can't figure out what to do or why the spaces are so messed-up and just lost...
http://jsfiddle.net/C7u9P/2/
I posted picture of what I am trying to make it look like and how it currently looks.... T_T
Any help on what to do or whats wrong is appreciated.
The Awesome Form:
My form:

If you want to recreate something it is better to start completely over at times. The generated code from java was certainly too complex to try and convert.
So heres a setup you could start out with:
http://jsfiddle.net/MwnSn/11/
I'll let you do the details yourself, the icons shouldn't be too hard and styling the inputs is possible too ofcourse. Be aware that I made use of the style normalization done by jsfiddle, I recommend using that stylesheet in your own work too. Only really tested in Chrome so you might want to check and debug IE, and it will probably break down when limited in width. Using the proper clearfix would also improve it a little. (overflow:auto to clear floats in that div.)
No tables.

Related

HTML seems to not register me trying to connect an external CSS

I know this question has been asked a ton. Yet I cant get mine to work after spending 2+ hours and downloading debugging software. I cant get my HTML file to link with CSS. One is a pic of HTML with the site I am trying to use. The other is my CSS. Sorry if this is actually an incredibly easy fix. I am student. Thanks for any help.
It seems like you're applying styles to your header element, which doesn't exist in the DOM. Please make sure the target is correct.

Strange HTML and CSS behavior

One of my clients has been encountering this issue when she goes onto the app. I was wondering if anyone had any idea how to get it to show normally? Im not sure if this is a code issue or her computer.
Everything is getting bunched together
Edit: I did not provide the code because it is very lengthy and I feel like there could be another answer that isn't linked to my code since it is only happening to that computer.
There really isn't a lot to go off of this. It could be as simple as changing the width of the input tag which would take almost no time to fix. If you're using bootstrap or some other framework maybe a class name is messed up somewhere in the html. It would be a lot easier to pinpoint what exactly the problem is if there were code to go along with it. Also there could be no problem with the code and could just simply be her machine, but there is still no way to figure that out without looking over it.

Hover over Dropdownlist HTML5 looking for a specific code

I want to make a form with dropdownlists like the ones on the site Nafham.com website exactly (with the headers on hover on first one and multiple columns). Are there any ready scripts for that? Is it possible to do the exact thing in Twitter Bootstrap? I am new to HTML5 so I appreciate any feedback. Thanks.
With reference to your comment above, there is a difference between stealing and gaining inspiration. So far for Off-Topic
When i understand you correctly, you want a dropdown menu with multiple columns. This can be relatively easy done with simple CSS. Learn about basic CSS and try to implent your own version, based on the bootstrap dropdown, if you like.
Correct me if i missed anything.

Can't make line-spacing in DIV like as in TEXTAREA?

I've found that we can use DIV as a TEXTAREA by setting contenteditable='true' and overflow='auto' (or 'scroll') (I don't care about the appearance, just the functionality), but I really can't find the solution with Google search to make it really like a TEXTAREA, the problem is related to line-spacing, when pressing enter key, the next line is too distant from the one before in DIV. When designing with DreamWeaver, if I try editing the DIV's content and pressing enter key and switch to the code window, I can see there are P tags automatically inserted. That's why the lines in DIV are too distant from each other and it can't look fine like in a TEXTAREA. I want to say that it is so ugly and awkward.
Could you please let me know how to suppress that nasty automatic insertion of P tag into DIV's content whenever pressing Enter key? Or could you give me any other solution to make the lines in DIV normal as in TEXTAREA?
Thank you very much!
Your help would be highly appreciated! (I'm just a newbie in Web programming, so please be patient!!! Thankssss!! :))
UPDATE!!!
You may all misunderstood me, when I say I press the Enter key, it is not in code editor like DreamWeaver, It is when I load the page in the browser and try typing as a normal user. That's when I test the page.
Something like this?
#myDiv p{
margin: 0px;
}
I'm not 100% sure that the margin is what is causing the line height issues, you may want to try changing height, padding, etc. until you figure it out.
I tried making a fiddle and I'm not having the same problem, line spacing looks normal to me: http://jsfiddle.net/dFzjT/
Upon closer inspection, Chrome is adding extra divs upon each newline.
Switch to edit in the code view instead of the WYSIWYG HTML editor. Then you will want to type in between the opening and closing div tags:
<div>your text here.</div>
I've found that the strange problem (which might make some of you think I'm noob?, vote down me?) was not the fault of mine, it was the fault of the browser I was using, it was Opera browser. I didn't think it renders the DIV's content that way.
After try using a different browser like Google Chrome, FireFox and it is normal now, like a TEXTAREA as I want.
Thanks!
Here's the thing.
A lot of the answers on here answer the question, but they all miss an important point.
We were all new to this at some point.
So let me give you some advice that I wish I got when I started down this road.
Learn to read the code, and your life will be easier.
It might seem daunting now, but trust in your own ability to learn, and just struggle for a few days. You'll come out on the other end with a headache and a smile.
Write the code, save, and refresh the page in your browser.
This way, you look at it in a browser.
You should also get yourself all the important browsers: Chrome, Firefox, Internet Explorer, Opera & Safari.
Learn to use a localhost server like MAMP / XAMPP / Visual Studio.
This way you can write server-side code; that way you can test, check and tweak - all without having to upload anything.
Most of all, though..
Stay away from the WYSIWYG.
They're all just bad news.
Just write your own code.
:{D

Alignment of images and data change in html webpages

Hello every one i had created a website using dreamweaver in windows7 which worked good in my system.I opened the same html site in another system with operating system windows xp and even in windows 7, but all the alignments of images ,textfields ,buttons and header image,content etc everything has been changed.what might be the problem.Can any one help me in solving this problem.Your answer will be most precious thing to me.Thanks to every one whose going to spend time on reading this question.
Without knowing more details it's hard to properly answer your question. Going to take a shot in the dark about a common issue.
If you did it in Dreamweaver you probably used its interface to drag and drop div elements around to place them in exactly the right positions. The problem with this method is that DW will use positioning relative to your screen size and it might not show up too well on other resolutions.
The solution to this is to make sure you code your containers correctly and not have a look at DW's CSS to fix it.
Without the HTML of your page (post it in pastebin and link it here), can't give a better answer.
Make sure you VALIDATE your code. In my experience using dreaweaver, the doctype declaration and the order of the tags can affect image positioning.
That was because you used different browser. In using Dreamweaver, try to not leave default values. For better debug you should code it with HTML and CSS. Those are not programming languages because they don't need exactly programming knownledge.
A really good HTML lessons at w3c.
A really good CSS lessons at w3c.