I have read a lot of criticism on using absolute positioning in HTML. Nevertheless, I am looking to have one simple Open Software tool which will enable me to have a quick HTML page PROTOTYPED with all elements having ABSOLUTE positioning through a drag and drop WYSIWYG mechanism. Typically even a SVG editor would have done and there are plenty of good ones but they do not have HTML form components to be dragged and dropped to give a more realistic HTML proto look-and-feel to a page having Forms. If the prototype is acceptable in presentation, then all the other HTML, CSS, Jquery and other coding continues from there with the absolute positioning in place. The styles generated may be inline or separate, does not matter.
So, you will ask me why not use a real HTML editor in the first place? Well, the problem is that the steps after the prototype is accepted requires absolute positioning of elements only and all the HTML editors I reviewed do not have absolute positioned elements. I do not wish to clutter this question with what and why that is a requirement.
The prototype pages will be developed by not-so-expert HTML coders. Just some basic HTML elements but certainly all Form elements are all that I need.
To summarize:
What is the best FREE HTML WYSIWYG editor that is available on Windows and Linux which can give a drag and drop interface where the underlying HTML code generated has absolute positioned elements.
While on this topic, though this is more of a post-mortem question: What are the biggest downsides, if any, to absolute positioning of elements in HTML?
The question asked earlier by someone: wysiwyg html editor build in html/javascript for position absolute elements does not help either.
That's a lot to ask for from an open source editor. I can only empathize with your plight, as I too am one to expect a lot from my tools. The way I code the web is by hand (IDE / Text Editor... usually geany, Anjuta, or wxDev-C++) or I use a templte if the project needs to be done quickly. Obviously custom layouts and themes are sacrificed for that. The number one reason I code from scratch, no code generators meet my standards.
About absolute positioning in CSS, small screens often struggle to resolve issues like how to display an element that's absolutely 500px right of the left side of the screen when the screen only has a width of 350px... Mobile browsers do funny things as is through in absolute positioning and things are bound to get difficult.
Sorry I couldn't be of more help, happy coding, hope you find a suitable tool.
Related
Front-End dev here, forgive me if this has already been asked before. When coding HTML/CSS from a sketch design is there a way to identify what kind of html element corresponds to the sketch component?
When I export to HTML using Anima or similar, it makes almost everything a <div> element. Some sketch components are self evident, such as links <a>, <images>, <button> etc. When it comes to text for instance, is there any way to tell if it's a <div>, <span>, <p> element, etc etc? Do I just need to use my judgement in this case?
Any guidance on this would be welcome. Thanks!
A good tool to help you import the sketch design file is Desech Studio. This will create a clean html structure, but most likely if you do it manually, it will be slightly better. Elements are also positioned with css grid, not position absolute.
This is a good place to start, otherwise you have to do it manually by looking at how the content can be split into grids, and create the necessary grids. With experience you get the hang of it.
I have used HTML in its basic form, and I mainly work on "server side" (of Enterprise application, mainly based in Java EE).
From what I understand, HTML is the "pages" which we see in an browser (that source code which a GUI developer writes and which a browser renders appropriately).
For example in an HTML tag, we write "h1" element, and the browser displays the text within as bold.
Now why there is any need of css? From what I am aware of, CSS is used to give "style" to a html page. The confusion that I have, doesn't HTML in itself able to give the style? what were the compelling reasons for creation of css?
Can anyone help me understand this in simple words.
The code that you put in your html to style it is actually CSS. HTML actually has some built in CSS. So really, you are using CSS when you do that. Also people like to connect a separate file for CSS in bigger projects. It looks more organized, and it easier to keep track of. It is also easier to code the CSS, because it is less messy and it seems like you have a bit more functionality. In conclusion, the code in the html that you are using to style with, is actually CSS, just built in. Also, I would highly recommend separating your stylesheet and HTML file(the stylesheet is CSS). If you need help, go to codecademy and create an account. Take the HTML and CSS lesson. I found this very useful and is where I learned most of my knowledge. I would highly recommend going to that site also. The site is also free.
I am designing my web in JSF2.0. To keep the web simple and clean, I used tag and inside I used JSF. Each tag has some style="width:--px; height=--px;" associated. Now when JSF content goes more then some extent, the JSF panel gets outside from the layout. There is some layout issue. Should I remove declaration of style attribute from each tag?
Thank you.
When you use an absolute layout (using explicit pixel sizes in every element) and you have dynamic data, you are bound to run into problems sooner or later.
You should think about reworking your layout to something more flexible. A good start might be to have a look at CSS frameworks like Blueprint or YAML to reduce the amount of work you have to put into it.
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.
I want to design my webpage layouts only using div tags. But i'm not good at it. I need to understand the basic techniques to build re-sizable websites.
Can you suggest some good tutorials/ tips to kickstart.
There are not many better frameworks for liquid layouts than http://cssgrid.net/
It isn't so much a tutorial as it is a starting point for pre-designed websites, but works wonders in helping you understand building sites for different screen sizes (all the way down to phones).
Check out this link as well for testing purposes - http://www.resizemybrowser.com/
There are many sites with tutorials which cover this. Here are a few I would recommend you checking out:
http://www.colorplexstudios.com/articles/div_web_design_tutorial/
http://www.mardiros.net/liquid-css-layouts.html
Also try looking for tutorials on fluid/elastic layouts if you want dynamic/resizeable designs using div tags and css.
I know that you're asking how to get started understanding CSS-based layout.
I'd like to point out at this early stage that DIV tags simply serve as containers which have no semantic meaning. While they sometimes help with layout, you can often achieve the same results by thoughtful styling of the HTML elements themselves.
For instance, a UL is a block-level element and CSS treats it exactly the same as a DIV in that respect.
I strive to use a few DIV tags as possible in my layouts, preferring instead to exploit the box model of the HTML elements. This minimizes variables and results in much cleaner, more maintainable code for the future.
As you learn, get in the habit of working without DIVs where possible. You'll understand the HTML and the CSS much better in the long run.