Increase DOM element or use http request instead - html

I want to know which is best method for fast loading website.
I know,
more http requests, slow will be the website
more DOM element, slow will be the website
Now,
I am confuse in following methods:
First, i used extra div element to show drop-shadow effect like this
<div style="height:100px;width:100px;border:1px solid #eee">
<div style="height:100px;width:100px;border:1px solid #ccc">
<div style="height:100px;width:100px;border:1px solid #aaa">
<div style="height:98px;width:98px;border:1px solid #999">
<div style="height:96px;width:96px;border:1px solid #777">
hello world
</div>
</div>
</div>
</div>
</div>
Second, i used background image to show drop shadow effect like this
<div style="background-image=url(drop-showdow.png)">
hello world
</div>
More http-request and more more dom element is not good for optimized website. What to do? and WHY?

Why not just use CSS?
box-shadow: 0 0 5px 3px #777;
For something like this, which adds appearance rather than being a required feature, just use plain CSS. If people are still using old enough browsers that don't support it, tough break for them. The Internet as a whole cannot advance if we spend every day worrying about people still in the Stone Age.

Related

Is it better to use a div or style content elements when dividing a section on the page? [duplicate]

This question already has answers here:
Are empty divs bad?
(6 answers)
Closed 3 years ago.
We were in a code review and were looking at the following mark up that essentially had a border to split up some content above with the title below:
<div class="divider"></div>
<h3>Title</h3>
We were told that this is super bad practice and that instead you should style the h3 element with a border top to avoid divitis. Is this true? I understand not wanting to fill your markup with tons and tons of divs, however, in this instance I don't see much of a problem. Also, in this instance, to get the same design there was more lines of css needed on the h3 than the original divider class. So although you save markup, you are not saving styles. Another option is to wrap the h3 in the div so there is no empty markup. In the end I feel as though it is just preference?
Thoughts?
Depending on your page layout. In general, an blank element does not cause divitis:
<div class="divider"></div>
<h3>Title</h3>
so that in many front-end frameworks these types of elements are embedded by system by default.
finally, It depends on the structure of your page and the purpose of the pages and software.
This can be seen from different angles:
If your design is such that you use dividers in addition to the titles elsewhere, it is best to use the following structure, as this will keep your hand open:
<hr class="divider">
<h3>Title</h3>
But if these dividers are limited to titles only and not used elsewhere, you can use a structure like this:
<h3 class="border-top"></h3>
<h5 class="border-bottom"></h5>
and
.border-top {
border-top: 1px solid black;
}
.border-bottom {
border-bottom: 1px solid black;
}
Using something like this is a Bad Practice and I strongly believe in that.
HTML already has a built-in horizontal divider called <hr/> (short for "horizontal rule"). Bootstrap styles it like this:
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
You Can customize it and use it wherever you want according to your needs.
This really depends on if you are using a CSS framework / library and if you will be working with a team. You need to write understandable and predictable code that the rest of the team will be able to pick up and work on. If <div class="divider"></div> is the standard way per the framework then I would continue to use that.
I also would not consider this "divitis" as that usually refers to a large number of nested <div> elements. Such as
<div class="foo">
<div class="bar">
<div class="baz">
etc...
EDIT: As others have mentioned, which I should have included, is that in cases other than where a framework and / or team are involved, it is generally considered bad practice to not use the spec element. In this case <hr />

Paint lines over img streaming mjpeg

I'm trying a simple test using html5. I have a tag which is connected to a streaming from a camera Axis IP:
<img id="stream" class="coveredImage" style="height: 323px;width: 646px;" src="http://192.168.2.65/mjpg/video.mjpg">
I see the streaming in the html page. Now I want to paint (lines, rectangles, whatever...) over this element. My doubt is how to do that and if is posible to do it. I think I need a element to put overlay the but I'm not sure about this. So I pleased if anyone could help me.
Thanks!
I would do something like this, with simple css:
#stream{
padding-top:10px;
border-top:1px solid #000;
}
and control it with padding

Create two divisions in a section

I want to create a two box of white background in which one box consists of user login and other box with professional login.
I dont know the policy of section and div's, I tried alot but I am not getting it right
EDIT:I want to make the design responsive
html code:
<section class=wrapper-box>
<div class="001">
<!--<i class="material-icons md-48 md-light">person_outline</i>-->
</div>
<div class="002">
</div>
</section>
I want to make something like this :
How do I create two such filled boxes?
A class name should not start with a digit. A quick test shows that those names are actually problematic: while the divs themselves don't suffer, styles applied to them via .001 and .002 are not rendered.
So the solution is to give them class names starting with a letter.
Example:
.C001 {
border: 2px solid #BBB;
display: inline-block;
margin: 1em;
width:100px; height:100px;
}
.002 {
border: 2px solid #BBB;
display: inline-block;
margin: 1em;
width:100px; height:100px;
}
<section class=wrapper-box>
<div class="C001">
<!--<i class="material-icons md-48 md-light">person_outline</i>-->
one
</div>
<div class="002">
two
</div>
</section>
As you can see, only the div where I put a C in front of the class actually gets the styles.
Edit:
The W3C page on CSS selectors says,
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")
so apparently, other than changing the class names, the other solution is to write the css selector like this: \30 01
In addition, another quick and dirty test shows that you can also write [class~='001'] for a selector.
I can't really recommend those methods though. Too hacky. Best stick with starting with a letter.

How can I make rounded corners on non-CSS3 browsers?

I know that I have to use images in this case, one per corner.
For example if I need a solid blue 4px border with 8px border radius around a given element,
and I have designed four images accordingly,
top-left-corner.png
top-right-corner.png
bottom-left-corner.png
bottom-right-corner.png
How should I implement this, if possible without using a table?
Have you tried http://css3pie.com/about/ ? You don't have to use images in such a case...
I would not use the css workarounds/hacks others have suggested here, I would keep to using images. Yes it's more fiddly to set up but it is cross-browser and robust. I have tried a number of these css workarounds and have found them to be unpredictable at best. They might work fine on some IE installs, but not on others (e.g completely crashing the browser). And worse we were unable to isolate why it worked fine on some installs, and not on others (and this is for the same IE version).
I would either: live without curved corners on IE, or use images. You can use nested divs:
<div class="top-left">
<div class="top-right">
<div class="bottom-left">
<div class="bottom-right">
... content ...
</div>
</div>
<div>
</div>
and in css you set the appropriated background-image for each class, something like this:
div.top-left { background: url('/top-left-corner.png') left top no-repeat; }
and set the border style for one of the divs too, e.g:
border: 4px solid #f00;
There are so many links to this on google, just type rounded corners css and you should find something to help. Older techniques involved using something like a set of b tags above and below the box you want to round off and stting the margins to produce the radius you need, but it gets a bit involved and there are better antialiased solutions available.
If you allow tables and some code, you can do it without images and easily switch colors:
http://spruce.flint.umich.edu/~jalarie/jaa_kcm.htm

IE6 - text is hidden with no reason?

For a veeery long time I've had this problem but always I managed to avoid it somehow (by removing elements or changing order) and now here it is again and I have no idea how to get rid of it. First, it appeared in my admin panel, but only few users acces that so it's not big problem (nobody uses IE6), but now this problem is appearing on my index page of portal and I must get rid of it because 15% of portal visitors are IE6 visitors.
Here's LINK to test version of portal:
If you open this page in IE6 you can see that second news (titled: Test one) doesn't have any text, only image. Well, if you make mouseover on that image you will see that there is some text. This problem occurs only when I enter paragraf whose height isn't bigger that image's height. If I enter same image but with some more text this show/hide problem disappears. I hope someone knows why is this happening because this problem has been torturing me for few years but I never figured out what is the main cause of this problem and how to avoid it.
Any help is welcome!
Ile
EDIT:
Here is solution for this problem:
http://www.positioniseverything.net/explorer/peekaboo.html
Well, It's easiest to make copy paste from page where it's detailed explained:
HTML code:
<!--********** Start of demo ***********-->
<div id="floatholder">
<div id="float">
<br />
<span> Float
<br /><br />
test link
</span>
</div>
This is bare text. Test link
<div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div id="clear">Clearing div</div> <!--******* Note: a cleared <br> will not prevent bug *******-->
<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered. Test link</div>
</div>
<!--********** End of demo ***********-->
And here is screenshoot from IE6
Fixes:
The fixes:
Finally, this bug will be triggered
even if div#float preceeds
div#floatholder, provided that this
external float actually touches the
clearing div within div#floatholder!
There are three ways we know to
prevent this bug.
Keep the clearing div from touching the float, or avoid using a
background on div#floatholder. Not
exactly ideal.
Give both div#floatholder and div#float 'position: relative'. Be
sure to fully test this method.
Give div#floatholder hasLayout (now the preferred method)
We suggest using a conditional comment
to feed a hasLayout fix to IE6 and
below only. Further details helpful to
this method may be found in the Zoom
Fix page.
Thanks to Simon Willison for the
timely screenshot.
This bug is called Peekaboo, and here is detail explanation of everything:
http://www.positioniseverything.net/explorer/peekaboo.html
Although, I have to admit that for me it worked when I set all these 3 steps. After first two it didn't work, but after I added display: inline to floating div it worked.
Can you please post (the bare minimum example) the code here, so that we can reference it long after your server's copy goes away (... just like now)? Otherwise, this question will serve no one as a reference or learning tool.