Wondering if I can substitute different html element tag names and get the original behavior?
For example, could I represent <span/> elements as <s/> and get the same behavior and affordances of <span/>? I am imagining some sort of xslt-esque javascript mapping. Not even sure this is a good idea. I am open to being told this is a bad idea.
Why? I have a big bucket of span tags and would like to reduce my page sizes.
It is a bad idea. Stick to HTML.
I have a big bucket of span tags and would like to reduce my page sizes.
Use HTTP compression. Repeated chunks of content (such as <span and </span>) compress very well.
If you wish to reduce page sizes, I would not be looking at this technique (if it's even possible), instead I would format the source code to remove all unnecessary characters (extra spaces add data to be loaded and increase the doc size). Also, make sure your css is a streamlined as possible for example..
If you have many duplicate classes that have to have unique ids, rather than having:
uniqueclass1{
width:100px;
height:100px;
background:#999;
}
uniqueclass2{
width:100px;
height:100px;
background:#999;
}
You can reduce this to:
uniqueclass1,
uniqueclass2{
width:100px;
height:100px;
background:#999;
}
This will help to reduce the size.
Related
Is it possible to make the table rows to overlap each other, using only css and html?
Please help. The page is here, when the user choose conditional leave, they will prompt with different additional field(s) to fill up. But I just want to know if rows can be set to overlap so the table will not be too long.
http://www.tritech.com.sg/consultants/intranet/leave_application/leave_form/index.php
Yes, it it possible using CSS and HTML to allow elements to overlap, and there are many techniques to do this, however in doing so you will cause the content of those rows to overlap. Unless you actually want to hide you content its not a good space saving technique. It would be better to reduce padding in the rows, and or cells.
Having said that..
tr
{
display:block;
position:absolute;
height:15px;
top:0px;
}
You need to set position to block to stop them acting like table rows, then position either relative or absolute depending on how you need to control them. then set the new top values to match. This style will align all table rows to the top of the table.. Important to note that the cells within the table will no longer be constrained to the element, this means they'll jump out of the table so will have to be hidden using overflow:hidden;
I hope this awnsers your question, but I would urge you to consider a better option than this. If you don't need the content to be displayed setting the elements display:none; Has a better effect and is easier to toggle either inline or as a class.
P.S would be a better example If I had sample code to use.
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.
Though there are many ways of doing this with CSS/JS, is there a way to do this just using HTML?
The reason that I want this is because it makes it much easier to copy.
I do not think it is possible with only HTML.
I want to address this:
The reason that I want this is because it makes it much easier to copy.
First of all, it doesn't.
By separating CSS and HTML you are actually copying less every time you want to duplicate an instance of anything.
For example:
CSS:
img{display:none;}
a:hover + img {display:block; width:100px; height:100px; background:black;}
HTML:
img{display:none;}
a:hover + img {display:block; width:100px; height:100px; background:black;}
Demo
Now if you want another image, just copy and paste the HTML right next to it.
However, the real benefit of separating content and style is the ability to edit once and change everything.
If I had fifty images across three pages on my website and I wanted to add a border to them, I would have to manually go into each page and change every single instance.
With CSS, I can change one line in one file, and they all update.
For this particular problem, however, I would look into a Javascript solution. Ideally image previews wouldn't load unless they are called on, and this is out of the scope of CSS.
This is not possible with just HTML. You need at least CSS or JavaScript, sorry. You might be able to get close with CSS.
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.
I've done quite a bit of googling on this, but I haven't been able to get a straight answer.
In terms of SEO, how bad is it to use images for your headers? The reason for doing this of course would be to be able to display non-standard fonts. I know it is bad to use images in place of headers, but I'm wondering if this sort of syntax would do anything to make it more search engine friendly:
<h1><img src="header.jpg" alt="Level 1 Header" /></h1>
Does it have the same effect as this?:
<h1>Level 1 Header</h1>
I suspect the answer to this is no. I think search engines probably wouldn't like this because you could put any text in the alt attribute without it actually being displayed on the page. So in that case, what is the best way to use images for headers without sacrificing SEO?
One old trick is to put the real text in the <h1> box, but then use CSS to make the text invisible and put your image in the background.
So you'd do something like:
h1 {
color: transparent;
background-image: url(your/cool/image.png);
width:400px; height: 300px;
}
Astute Stackoverflow member K Ivanov points out that it would probably be better to make the text invisible by positioning it way off the page with "text-indent: -5000px" or something.
It is a recognised practise (neither good nor bad) to use text-indent:-9999px; alongside overflow:hidden; for headings.
This offsets the text by a massive amount then uses the overflow to hide it.
That means you can have a nice big description/title in your <header> and have an image with the description/title the way you want it to appear, that way you get the best of both worlds.
A perfect example of this is: http://www.sohtanaka.com/web-design-blog/
The "LatestWord" section is an image, but if you look at the CSS for the section you will see this technique employed.
Another possible solution to the problem of non-standard fonts in headers would be to use the Google Fonts API, assuming that the fonts that they have available fulfill your needs.
You could also take a look at the stylesheets they generate and attempt generating them yourself (assuming that you need to).