I think the ideal is to use CSS purely for the layout and presentation, and HTML for the content. But let's say, the company wants to change a "Related articles" box from the bottom of the page to the top of the page. In such case, won't using CSS alone be not an ideal solution, but is better to alter the HTML as well? So as things are right now, HTML still takes a role in the page layout and presentation? Thanks.
Things still appear in the same order as they are in the html - it's not as restrictive as that as we can use absolute and relative positions, but those are undesirable - it's better to use to dom flow to handle placement, and that means yes, you should move the node in the html.
As Jason said, CSS is for styling the content, the content itself and its order is defined by the data (html), as order is necessary for the context of information, so it lies firmly in the 'data' part of what we do rather than the 'display'
EDIT:
I should say this: If you want your data to be totally independent of the display, you should consider defining your pages as xml only and using xsl to define the layout. xsl combines with css to completely abstract the display away from the data.
It does on two levels:
Firstly, the order of elements is still important. CSS floats are used a lot for layout but they also require elements to be in a certain order to get things in the right place. For example, lets say you have two buttons:
<input type="button" value="Click Me">
<input type="button" value="No, Click Me!">
These are next to each other. Lets say someone asks you to move the second button to the far right. This is how you do it:
<input type="button" value="No, Click Me!" style="float: right">
<input type="button" value="Click Me">
If you don't do this, the second (floated) button will appear below the other.
The second way HTML is still important is that there are still things that you need HTML tables for that can't be done in pure CSS at all, in a browser-compatible way (meaning IE6 support generally) or easily. This isn't something the pure CSS zealots like to hear but, like it or not, in the real world it's still true.
This is especially true with HTML emails. If you thought browser support for CSS was bad, mail program support is so much worse. Generally speaking you avoid CSS altogether with HTML emails and just pretend like its still 1999.
HTML still defines the hierarchy for elements.
HTML divides your page in logical sections. CSS then applies a certain look/feel/style to those sections.
If you want to change your page layout to include a section inside another one, you have no choice but to modify your HTML because HTML has a role on page layout.
You can actually move blocks around using nothing but CSS. The compromise always boils down to how good your CSS skills are and how much compatibility with older browsers you're after or care about. There are limits to what CSS can do, so yes, HTML definitely still has a role to play.
it is possible to change the "source order" of divs or use css to change positions. But if its more practical to just change the html, then there's no other way round it. At the end of the day, if its more important content then the source should reflect it for semantic reasons.
Related
I need to create a website and I would like to increase the size of the buttons because it looks really really bad.
I'm not allowed to use any form of CSS or JavaScript for this project and the solutions I found so far all use CSS.
I've tried inserting the buttons into a table but that didn't do anything to help me and all the solutions I found on the internet either don't work or use CSS
You can use header elements like <h1>, <h2> etc. Semantically it may not be very 'clean' to use in this way (you are not creating headers as one would do in e.g. a publication), but I'm afraid there's not much else.
<button>Standard size</button><br />
<br />
<button><h1>Using h1</h1></button>
<button><h2>Using h2</h2></button>
<button><h3>Using h3</h3></button>
<button><h4>Using h4</h4></button>
I don't think it's the case but I'm still taking the shot: Is there such a thing as a non-hierarchical tag in HTML (for markup independent of content structure).
For instance, something like:
<div class="thingy" id="thing">
blabla<n-htag>bla
</div>
<div class="thingy" id="thing2">
John Dodelidoo</n-htag>
</div>
EDIT: I'm realizing now what you're asking is that you want a tag where you can group multiple tags together but being completely unrelated to the HTML structure (e.x. you could start it in the middle of one element and end it in the middle of another that is completely isolated). Because of the way XML is structured, you cannot; it is completely based on hierarchy (as far as I can tell).
For archival purposes, the original answer is below.
If I understand what you're asking, the closest thing we have to that (as far as I can remember) is <span>: while it doesn't change the visual appearance of the page, it allows you to group elements. (And obviously, while you aren't REQUIRED to indent it, you can).
At work we had a situation in which a client required a web front for one of our products. None of use are web developers but since I was finishing up on my previous project I volunteered to give it a base.
I have spent the last week or so reading up on best practices and asp.net web forms. Based on requirements we settled on HTML 4 / ASP.NET / CSS 2.1. The customer is going to use the latest browsers so I got to concentrate on nice clean layout.
I have been working on samples using the 960.gs system and I am finding it pretty handy to lay out content without too much trouble, but, I have a major issue.
With all of the tutorials I have seen, they tend to stop or become quite vague as soon the inner most content layout is reached.
Is there any best practices here? or is there any tutorials regarding laying out the inner most content.
What I am talking about for instance is laying out the following:
<div id="question_1" >
<asp:Label runat="server">Question 1</asp:Label>
<asp:Label runat="server" >What is the name of the guy from the other thing?</asp:Label>
<asp:RadioButton runat="server" Text="Yes"></asp:RadioButton>
<asp:RadioButton runat="server" Text="No"></asp:RadioButton>
<asp:DropDownList runat="server"></asp:DropDownList>
</div>
The above html represents a fictional question object. This would be on a list of questions page, much like a survey. Currently, because I can't find the info I am pretty much using css to absolutely position the elements since, because I am using a grid system, I know the width of the box that this div is contained in.
EDIT: By absolutely positioned I mean within the containing element not the page as a whole... Just to clear that up.
From a form layout perspective there are two things to consider: usability and accessibility. Usability defines things like labels going on the left, fields on the right. The exception in this case being with radio buttons and check boxes when the label goes on the right.
Accessibility, defines that each field should have a label tag; fields should be logically grouped etc.
The RNIB have a collection of articles on web design which touch on accessibility and usability. Personally I think they are a great place to start.
EDIT:
Meat & veg answer: The ideal coders (should) try and achieve to style the form but maintain the flow, i.e. ensure that labels for text fields are styled to appear to the left but appear before the field in the HTML.
So, yes it is good practice to:
Wrap each label/field pair in a div, allowing you to clear/position this separate to other pairings.
Make the label display:block with a fixed width and float:left
Don't forget to add required * - I usually use a span within the label so I can control the style of the required * separately.
Use <fieldset> tags to group and style sets of label/field pairings
Unless you are trying to create a highly stylized form, avoid absolutely positioning anything you don't have to. I find that as soon as I absolutely position one thing, I have to absolutely position others for consistency so you should always first try and find a solution which allows elements to control the position of subsequent elements
I know developers who still use tables to arrange their forms. Is this bad? Yes, but it works and for a temporary solution or small, rarely used form this might be an appropriate trade-off.
Scott on Writing has a nice article on basic form styling. This guys is awesome and knows what he is talking about.
And also there are jQuery tools for creating nicer more responsive controls:
jQuery UI
Multi select
This is the first time i am properly coding in HTML,CSS. in my code i have used whole lot of div's to position and also to put the content in place. i am not sure if i am coding the right way. i have loads of contents too in a single page. here is the link to my code i have used.
http://jsfiddle.net/32ShZ/
can you please suggest. is it really bad in structure and shape?
Absolutely not. You don't want to go overboard though (it's called "div soup" when you do). If you find that a div has no purpose but to hold a background image, or to clear a float, etc that means you've done something wrong. By using wrappers (e.g. 3 levels deep of div tags for a content area that has some backgrounds, etc is OK), you can properly achieve any layout that you need without resorting to "div soup". Take a look at http://www.digitalperfections.net/ for an example of good (x)HTML with a lot of div tags.
To further expand, and answer the question about your code specifically, I noticed one thing right off the bat: <div id="divider"></div> - this is bad because you're using this div purely for non-semantic purposes (for decoration only).
The general principle is use as less HTML for layout as possible. And try to give Style to your page with the help of CSS. So if a minimum number of divs can achieve your task, you should go for it. This helps to make page lighter and maintainable. But yes how small structure (HTML) you can have in your page depends on your experience and design.
Basically, having multiple forms in a row isn't possible so far as I've seen.
LastUpdate
Given the situation with phones and
the unpredictable nature of how most
the browsers render the page, I think
I have to go with multiple buttons per
form. Not super happy with this since
it feels like a WebForms hack for MVC
but it makes the most sense for the
situation. Making a complexish ui for
mobile devices is tough in WebForms,
looks to be harder in MVC.
Something I've been reintroduced to is the idea of having multiple forms per page so that you can have buttons post to different controllers. Problem is that turns out a form is a block element so that it's not possible to get to button next to each other. (Why they are block elements I'd like to know.)
Now here's the main problem, this is a site that was build to be viewable on most phones with a browser. It also has a lot of buttons due to buttons being a lot easier to click with touch phones like iPhones. Floating may not (Not completely ruled out) be an option as floating isn't very predictable on phones. Inline sometimes works sometimes not with browsers as I've seen.
This is sort of a large problem from a design standpoint and I'm hoping there's some kind of MVC method for creating a magical button that would work.
Clarification:
I think the best way to put this is I'm using some buttons as links. In the WebForms version, there were a few of the buttons that basically just redirected. So with that in mind:
Say I have three buttons but all three will need to post to different pages. This would suggest 3 different forms. Unfortunately that would also mean all three buttons would now appear as block elements. (Even though that's it's the form causing this.) Maybe I should be asking if in MVC there is a way to post back to the same controller to redirect from there? Redirect I've done, so that's not a big deal. Posting to a controller and evalutating a button based on it's value I haven't, but that almost seems like trying to recreated WebForms functionality of postback.
Example http://www.eythere.com/images/eythere.jpg
From that image, the top three buttons are merely postbacks to redirets.
UPDATE:
Have attempted tables and floating divs. Tables don't work well with small phones like Razors since they tend to ignore TDs and just make on big vertical column.
Tried floating divs like thus:
<div >
<form >
<input type="submit" style="float:left;"/>
</form>
<form>
<input type="submit" style="float:left;"/>
</form>
<form>
<input type="submit" style="float:left;"/>
</form>
</div>
Problem is it shows the buttons in two rows (That's fine) but the two buttons in the same row aren't aligned vertically. The second one is off by a little bit. Almost to the point that it looks like a Final Four bracket.
May have to go with the multiple buttons to a form thing. This seems to contradict the MVC design but I don't see another way around this.
When you post a form, the name attribute of the button used to post it is sent as a form value. Give each button a name, and then check the Form collection (or an Asp.Net MVC intermediary) for the button's name.
if(!String.IsNullOrEmpty(Request.Form["myButtonName"])) {
//myButtonName has been pressed.
}
EDIT:
Problem is that turns out a form is a block element so that it's not possible to get to button next to each other. (Why they are block elements I'd like to know.)
Forms are block elements because if they were inline elements it would be invalid to nest tags like p and div inside of them (both of which are handy in constructing forms).
If I understand what you are asking, then sorry there is no such function. You would have to find or create your own method that would identify the client and then output the correct HTML code and CSS to accommodate that device. It may be better to find a solution on the user side of the code. You could maybe use display:inline; to forge the button to act like an inline element no matter what. It should work in all major browsers (http://www.quirksmode.org/css/display.html), and this this probably includes the iPhone browser because it is safari based.
It would probably help if you could explain a bit more about how you want the stuff to interact. That said, no law says a form can only have one submit button, and, when submitted it is possible to figure out which button is clicked--the name/value (text) of the button appear in the posted data. Exactly how to handle that really goes to what needs to happen and how you want to architect it, but you can definitely give a form multiple buttons.
--UPDATE--
Thanks for the clairifications. I think your best bet would be to use normal links and style them a bit:
a.button { display: block; width: 100px; float: left; }
They should be nice big clickable things in iTouches and in other more modern mobiles and degrade nicely in older mobile stuff as there really ain't nothing that can do HTML that doesn't support links.
this might solve your problem
another solution: if you can use javascript, make a DIV and a onclick action on it
like what Jeff did here on SO with the [Votes] | [Answers] | [Views] "button" on the home page on the left side of every question
Use css to style anchor links like buttons. That way you get rid of the useless forms and maintain affordability and clickability.
I haven't tried this so I can't say if it will work or not, but could you not just set the forms on the page to "display:inline"?
If you are not collecting data from the user, than they just look like simple links.
HTML buttons don't have to be inside forms. You can have a button with a javascript onclick handler that does whatever you want, like setting a form's action and submit it, or load a new document.
<input type="button" value="Home"
onclick="location.href='/index.php'" />
<input type="button" value="Rooms"
onclick="var f=document.getElementById('myform');f.submit()" />
<input type="button" value="Create"
onclick="var f=document.getElementById('myform');f.action='/create.php';f.submit()" />
Those buttons can then be styled in any way.
If your form isn't collecting data, then all your buttons can behave like the "Home" button in my example.