What is the benefit of not using float:right? - html

I have two divs in my website,one is left side and other is right side.
But client said don't use float:right.So i used margin:left
What is the plus point of not using float:right? margin-left or float:right,
or am I wrong? Please help me.
#left
{
float:left;
width:200px;
}
#right
{
float:right;
width:200px;
}
or
#left
{
float:left;
width:200px;
}
#right
{
margin-left:250px;
width:200px;
}

I imagine it is to do with the order of the markup. In principle, you should write all your markup first, so it makes sense without any css, and then add css rules afterwards.
If you need to move your markup around to satisfy the css conditions, you might be damaging the search-engine-optimisation, accessibility, or readability and clear structure of your code.
If you float something right, sometimes you need to put the element first in the markup, even though it appears visually second.
This is of course speculation, and as Marcus Aurelius wrote about in his book meditations - it is more or less a waste of time trying to understand another person (in this case your client) as you can never truly succeed, only fool yourself into thinking you fully understand them and their motivations. Instead, you should concern yourself with making sure your own motivations, and actions are correct - so make sure you know when and when not ot float things left or right (which you are on the path to doing now), and reveal these truths to your client.

Actually if you use float:left; in the second div than the second div will start after first div immediately.
Like this :- http://tinkerbin.com/FfuvHZw4
And if you use float:rightin the second div than the second div will start after from the right side of the parent div or body.
Like this :- http://tinkerbin.com/EgtjAJA1

Well, nothing wrong using float:right;
Maybe your client have an idea about that. Could be a development issue.

The only possible "plus" I can think of to not using float: right would be the fact that it causes inline elements that are floated right to appear in reverse order (unless the parent element is the one being floated, in which case its children will appear in the correct order). So, if the content (say a list of items) is pulled from the database in a specific order, the ORDER_BY would need to be reversed to get them to appear in the desired order. Likewise with the order of plain HTML elements. They may not want you to use float: right because they don't want to have to refactor other code.
Fiddle: http://jsfiddle.net/nxdD4/1/
That's about the only thing I can think of.

Having ascertained that you will not look stupid for asking, I'd ask your client. Perhaps their reason has other implications you should be aware of, and perhaps Aurelius's reasoning might tie your hands unnecessarily, in the unlikely event that your client is not also thinking in terms of ancient philosophy.
Most likely explanation I can think of is code is more easily updated if the code is in the same order as it is rendered, (although I'd counter that using the correct semantics in your CSS is more important), your code is to appear in a page with other code, or your code is to be generated by a CMS, whose setup/management is simpler if things is in the same sequence, could have been picked up out of context, or some well-meaning forum respondent maybe cited less than relevant sources to them. The Roman emperors never were much good at the touchy feely.

Related

What is the benefit of making a class that just floats in either direction?

I see this being done on websites (ex: http://www.abookapart.com/):
.left {
float: left;
}
<div class="col two left" />
Is the above good practice? I thought it was generally frowned upon to create classes that describe style. If I wanted the above div to float right at a later date I would have to go into the markup and change left to right. No better then adding a style attribute to the element it would seem.
You're right. Most developers avoid class names like "left" or "blue" for that exact reason. Other than the class name, I don't see anything wrong. I would include that float in the "col" class and then just override it with "right" later on if need be.
I've seen it become useful where multiple people are editors for a single website, and you don't give them all full html access.
By setting up classes of styles that they're allowed to use, you can allow them a certain amount of style control without giving them the power to mess everything up.
It's really down to personal/team choice.
I've always preferred this technique as I favor convention over style, I like my concerns separated and I dislike ambiguity.
if I see a div like this:
<div class="clearfix left bordered">
...
</div>
I like the fact that its intent is clearly emphasized and won't make me have to dive into the CSS file to find out what it means.
But based on your example above, if you did go down the more declarative route:
<div class="importantTextDiv">
...
</div>
On the one hand, you have to investigate the CSS file to determine its properties (or run it and inspect the element in your Firebug equivalent) but should you choose to change it, you don't need to make a source change, or change whats emitted from your server side language.
To me, both situations are a pain, but in my experience, changing a div between float:left and float:right is the kind of thing you'd have got finalised before a final deployment anyway.
My answer ? there's no technical reason to prefer one path over another, choose which one feels more comfortable!

How to make elements float all the way to the left again?

I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.
What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.
Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.
Who can help?
Use "display:inline-block" for LI, not "float:left"
I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)
Only table rendering can resize a whole row according to its tallest member's height.
It's the only way I can see to do this without JS or PHP.
use jQuery.
Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.
I hope I am wrong though! :)
(Would love to be able to do this w/ css)

How to display navigation tabs with the desired border? Table, list, something else?

See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?

hovering elements over the links in an arbitrary HTML

I have an arbitrary HTML I am outputting to a page inside of a table, and I need to be able to "layer" elements over all of the links (one per link).
My current solution is to search the HTML for the links (which I have in a separate array from another source), then insert a div with a different z-index and position absolute into the HTML. This works some of the time, and breaks bizarrely other times.
Is there something that I'm missing here? I've seen nice implementations of this on various forums, but they are slightly different in that they usually require interaction from the user to come up, I want mine to be up all of the time.
Long question short, is there an easy way to do this?
Using Javascript (and specifically jQuery), yes.
There are many tooltip libraries out there.
http://plugins.jquery.com/project/tooltips
http://flowplayer.org/tools/tooltip/index.html
http://craigsworks.com/projects/simpletip/
I'd say the top one would suit your needs the best. To enable it to be "always on" you'd set the css element .tooltip as follows:
.tooltip {
display:block; // This replaces the "none" they have in the example, but the line itself isn't necessary
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
Two things come to mind to see if you get getter results. 1) have you tried relative positioning inside the table cells instead of absolute positioning? 2) is your script firing after the table is rendered? If not, be sure it runs after the entire table is rendered.

What's the best way to go from a Photoshop mockup to semantic HTML and CSS?

I generally use a manual process:
Look at the page, figure out the semantic elements, and build the HTML
Slice up the images I think I'll need
Start writing CSS
Tweak and repeat different steps as necessary
Got a better approach, or a tool?
I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:
The page title is a top level heading
Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.
The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.
Section headers are h2, sections within those sections are h3s etc. Stack them up.
Use blockquotes and quotes where possible. Don't just surround it with ".
Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.
<label> your form elements.
Use <acronym>s and <abbr>s where possible, but only in the first instance.
The easiest: always, always give your images some alternate text.
There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.
That's just a few pointers, I'm sure I could think of more.
Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).
Well, when I build a website I tend to try and forget about the design completely while writing the HTML. I do this so I won't end up with any design-specific markup and so I can focus on the semantic meaning of the elements.
Some pointers how to markup things:
menu - use the UL (unordered list) element, since that's exactly what a menu is. an unordered list of choices. example:
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
</ul>
if you'd like an horizontal menu you could do this:
#menu li {
display: block;
float: left;
}
Logo - use a H1 (heading) element for the logo instead of an image.Example:
<div id="header">
<h1>My website</h1>
</div>
And the CSS (same technique can be applied to the menu above if you would like a menu with graphical items):
#header h1 {
display: block;
text-indent: -9999em;
width: 200px;
height: 100px;
background: transparent url(images/logo.png) no-repeat;
}
IDs and classes - use IDs to identify elements that you only have one instance of. Use class for identifying elements that you got several instances of.
Use a textual browser (for instance, lynx). If it makes sense to navigate in this way, you've done good when it comes to accessibility.
I hope this helps :)
I essentially do the same thing Jon does, but here are a few other ideas:
Use Guides in Photoshop (and lock to them). Figure out all of your dimensions for each box/ region ahead of time.
Collect all of your dimensions and color hex values into an info file (I use a txt file) that you can easily reference. This will reduce your alt-tab tax and selecting colors in Photoshop multiple times.
After all my Guides are in place, I slice out the entire website into my images folder, starting with photos and grouped elements, and ending with the various background tiles/images, should they exist. (Tip: Use ctrl-click on the layer preview to select that layer's content).
Notes on using Photoshop:
Use Guides or the Grid.
Use the Notes feature for any pertinent information
Always use Layer Groups for similar elements. We need to be able to turn entire regions off in one click. Put all 'header' content in one Layer Group.
Always name your layers.
You can put each page template in one PSD file and use nested Layer Groups to organize them. This way we don't have to setup all of our guides and notes for each page template on a site.
No shortcuts :) but everybody works slightly differently.
This tutorial that popped up in my feedreader yesterday shows the process from start to finish and might help people who have never done it before but as you are an old hand it's just about streamlining your own methods.
EDIT:
The listapart link certainly is more automated for 'flat' designs where both imageready and fireworks have had pretty good support from day one and it's got better and more semantic with every release but if you have a more complex design it's the twiddly bits that make the design what it is and these have to be done by hand.
I just thought it was worth pointing out that in addition to the excellent advice you've had so far I'd recommend getting a printed version of the design, using a red pen to mark up all the block elements on the design you think you can spot and sitting down with the designer for half an hour and talking through how they envisioned their design working for the use cases that don't fit the static design.
What happens when more text is put in the navigation?
Is this width fixed or fluid?
Is this content pane to the right fixed height or fluid? If it's fluid why did you put a background on it that can't be repeated?
You have a border extending down the page that breaks two otherwise connected elements. Visually it makes sense, but semantically I not can't just use an li to house both those elements. What do you think is more important?
It'll also help you spot potential problems that you might otherwise not have realised were going to be issues until your elbow deep in css.
Not only does it make your job easier after a few times doing it your designer will get a much stronger sense of what is involved in marking up their work - some designers have real trouble comprehending why something they think looks visually very simple will take a few days of css tweaking to make work.
Some of the designers i know, usually uses Illustrator to make the design elements.
This page shows how to do it a little more automated.
Also, get to know the "Layer Comps" feature. I use this for changing button states.
Create layer comps for normal, hover, and active.
In each of these, set up the effects/color overlays and visible layers which belong with that state.
Save for web: go to a different folder for each state, unless it's easier to rename each slice (otherwise your hover button slices will overwrite your regular slices).