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.
Related
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'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.
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.
Moreover, is there a particular practice/way to have a cascading style sheet automatically call a footer div in every instance when <body> or <html> tags are present.
I think you are looking for a page decoration system. There are several, like jsp-decorator. There's also a pretty extensive discussion about JSP page decoration here on SO.
CSS applies style to page elements, it does not insert stuff into pages...
The SiteMesh tutorial might help to understand what page decoration is about...
Jsp templates can be used.
JSP templates to encapsulate Webpage layout and encourage modular design
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.