What is the difference between these two? What difference does it make if we put another div inside the first div?
<div class="blah">
<div class="blahInner>
<img src="pony.jpg">
</div>
</div>
<div class="blah">
<img src="pony.jpg">
</div>
Multiple divs allow you to customise your HTML with different effects based on properties assigned to different CSS attributes. Additionally, the use of multiple divs allow you to add different kinds of CSS and, jS to elements of your HTML page. Rather than have all your CSS within one selector, you can then spread it across multiple divs which allows you or someone else working on your code to easily make sense of it.
You may also want to pair different sets of styling for different parts of the webpage, and having multiple divs will enable you to easily call the same divs and form combinations of the attributes from different selectors. Ultimately, you could just use them as follows,
<div class="art" id="dart">
Text
</div>
OR with multiple divs as shown below.
.dart {
color: white;
}
#art {
background-color: #ADFF2F;
width: 115px;
height: 20px;
}
<div id="art">
<div class="dart">
I am dummy text
</div>
</div>
Essentially, there is no difference and is therefore useless unless you use it in your linked CSS or JavaScript.
The difference is that there is another <div> element for other web languages like CSS or JavaScript to act upon.
It gives the other languages a chance to add special positioning, animations, and styles to the containing <div> element.
I hope this answer was informative.
Let me know if you have any complaints.
As others have pointed out, extra div acts as a sub-category.
Extending to your example, lest's say there are 2 sub classes (blahInner1 & blahInner2) within the class blah. We can easily manipulate font of blahInner2 only.
<div class="blah">
<div class="blahInner1">
<img src="pony.jpg">
This is 1st caption.
</div>
<br/>
<div class="blahInner2">
<img src="pony.jpg">
This is 2nd caption.
</div>
</div>
<style>.blahInner2{color: red;}</style>
Related
So I have a question that might be easy but I could not find anything that works after a lot of searches.
I have this h2 tag which is defined in .aspx. Right below this, I have a div with an id.
<h2>Documents</h2>
<div id="abcdocuments"></div>
I am appending an image before the start of the whole grid which gives me a result like this that there is a heading first. then below I get that image and then below the whole grid
I want the image to be right next to Documents Heading and for some reason, I can't define the img at .aspx It has to be at the class level. Also, I can not move my heading at the class level. Is there any way I can change the styling or something to move the image next to the header?
my html:
<h2>Documents</h2>
<div><img src="../../Images/pincomment.png"
style='width:2%;cursor:pointer;'
/></div>
You can make the heading and the image sit next to each other by making them inline-block.
This snippet is simple because the given HTML is not in its real life context - so the specificity in the CSS does not need added classes, but in the real situation you would of course need to ensure that you had selected the right h2.
h2,
h2+div {
display: inline-block;
}
<h2>Documents</h2>
<div>
<img src="../../Images/pincomment.png" style='width:2%;cursor:pointer;' /></div>
<div class="FDAccordions"></div>
<h2>Lorem ipsum…</h2>
<div style="position:relative;"><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" style="width:2%;top:-3em;left:17em;position:absolute;"/></div>
I've got two pages, one made with div's and CSS, one made with the notorious table.
The CSS Page...
...and the Table page.
At first glance, they're pretty similar. Both sport a 2x2 grid of rounded "buttons", which resize based on the window around them.
Now, put this in the context of a mobile phone. That's right, shrink that result-frame down (horizontally, don't worry about vertical).
Originally, i just had the CSS version, but there's specific browser widths in which text on the left drops down to two lines where text on the right stays at one, as the strings are different lengths. It just so happens that with the actual strings, most phone resolutions cause this annoying situation to occur.
However, the table predictably acts the way I would want it to. The table has a concept of "rows" as well as "columns", so the columns stay aligned and as a cell in one row gets taller, so do all the rest.
Is there a way to mimic this behavior in CSS? I'm constantly told how bad tables are for accessibility, etc. And I'm a fan of keeping <table> for actual tables of data, not layout.
I know of the adjacent-selector, but I couldn't find a way to say "make your min-height the same as my height, and vice-versa".
Also, obviously this could be done with a script. But unless someone here has a passionately feels that for this problem, javascript > CSS && javascript > Table, let's stick to CSS.
Every sane browser today should support the display: table/table-row/table-cell/... property, which converts your divs to a nice table, but without touching the html markup.
Here is your transformed code:
http://jsfiddle.net/eU6Xe/5/
HTML:
<div id="main">
<div class="row">
<div class="button">
Some text here
</div>
<div class="button">
And more text here
</div>
</div>
<div class="row">
<div class="button">
More Text
</div>
<div class="button">
Lots of text here
</div>
</div>
</div>
CSS:
div #main {
display: table;
width: 100%;
}
div.row {
display: table-row;
}
div.button {
display: table-cell;
}
To be honest both versions are not accessible, and both are equally as annoying to use.
First and foremost: Why aren't you using <button>s or <input type="button">?
It isn't semantically correct for both demos. Tables are not meant to do anything besides hold data. A button should be used for submitting/cancelling/clearing forms. A <div> is that whatchamacallit you keep in your junk drawer, that you use for a last resort.
Table Method
There is no way to make the table accessible. It will be always bee seen as a table, but since this is being incorrectly used, the WAI-ARIA role of presentation needs to be used. However this will tell assistive technology to ignore the fact it is a table, thus chunking the words together. The only way to make the cells clickable, is via an onClick, which may be fired automatically depending on the AT and the way you construct the onClick. Thus not allowing the person get past it, and since they won't know it is a table, they can't jump over it.
CSS Method
First the <h2> elements are used incorrectly. <h2> are to denote sections of a page that contribute to page hierarchy, which it makes little sense that a button would be part of the hierarchy. Next, a <div> doesn't recieve focus by default. Third, if you attach an onClick to the <div>, you run into the same issue as above.
Using ARIA, you can make <div>s act like buttons but your code becomes:
<div class="left-col">
<div class="button" tabindex="-1" role="button">
Some text here
</div>
<div class="button" tabindex="-1" role="button">
And more text here
</div>
</div>
OR
<input type="button" value="some text here" />
When writing HTML, what is the industry standard regarding a Container div?
Is it more popular to have a Container id, or use a container class which I add to the divs I wish to inherit the features?
For example:
<body>
<div id="container">
...etc
</div>
</body>
or
<body>
<div id="main" class="container">
...etc
</div>
</body>
I don't know that there is an industry standard. If it's a container, you should have only one so an ID makes sense. You can use classes and IDs however you see fit, the bigger challenge is having cleanly-written, well-stacking rules that apply to the design you're working with.
Edit: Your question just updated -- it'd be better to have id="container" and then class="home", class="about", etc. as needed. This would make for a neater stylesheet and would give you the option of simply overwriting #container rules if you need to.
Setting an id of container would be most appropriate because you should only have one container. Setting the class = container would imply that more than one container existed. Since a container is designed to wrap all of your page content you should only have 1.
Giving an element an id, implies that that element is unique.
In your case, a container div is usually unique and therefore an id would do.
A class is used when you want multiple items to have the same styling.
Giving different items the same id, is a violation to the w3c standards.
I think this is something you should decide for yourself, I've always used the above way.
HTML document can have several containers, all sharing some style and each with some unique style.
So best practice is giving each both class and ID:
<div id="Header" class="container">
...header goes here...
</div>
<div id="Menu" class="container">
...menu goes here...
</div>
<div id="Contents" class="container">
...main contents come here...
</div>
I have the following page structure
<div id ="site-wrapper">
<div id ="banner">
<div id="menu">
<center>Menu Goes Here</center>
</div>
</div>
<div id="content">
<center>Content Goes here</center>
</div>
<div id="sidebar_r">
<center>Right sidebar</center>
<div id="sidebar_top">
Sidebar top
</div>
<div id="sidebar_middle">
Sidebar middle
</div>
<div id="sidebar_bottom">
Sidebar bottom
</div>
</div>
</div>
How do i structure the css . I have used ids for all of the divs is there a better way to do it?
htmldog's css for beginner
Have a look at the html5 spec - http://www.whatwg.org/specs/web-apps/current-work/multipage/
You can make use of elements such as "header", "footer", "nav" and "section". this will reduce the amount of id's you have to set in your css and make your markup more semantic.
also, having lots of css selectors stacked will have a performance hit.
In regard to you question!
an example css structure could be..
#menu center { ... }
#sidebar_r center { ... }
try not to go mad like
#site-wrapper #banner #menu center { ... }
your css parser has more work todo and your css becomes less manageable if you wanted to rename say #site-wrapper to #container.
my rule of thumb is..
use an id if the element is a container or only appears once.
use a class if the element appears more than once such as li's.
make use of tags, i only use an id or a class if its required. you can always add it later.
I would suggest replacing your <center> tags with <span> tags instead, then applying a text-align:center style in your css. As far as structuring your css... it depends how it should look. Can you be more specific?
Download some of these templates and study how they setup their sites layouts:
http://www.freecsstemplates.org/
http://www.templatemonster.com/free-templates.php
ya you can use both ID and Class for css but remember one thing that ID has better specificity than class.So whenever you are using class you can use multiple classes at a time but if you are using ID then you can use one ID.For better CSS after writing your css make it validate through w3c css validator.
To know the css specificity check this link and decide what will be your css.
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
At the simplest, all you need to use is:
#sidebar_r {
float: right;
}
I have a structure of divs inside divs, something like:
<div>
<div>
<div class='a'>Hello</div>
<div class='a'>Stack</div>
<div>Overflow</div>
</div>
<div>
<div>You</div>
<div class='b'>Are</div>
<div class='b'>The Best</div>
</div>
<div>
<div>Have</div>
<div class='b'>a nice</div>
<div>Day !!</div>
</div>
</div>
I would like all divs with class a to change the background color when one of them is hovered by mouse. The same for all divs with class b: when one of divs with class b is hovered, all divs with class b should change the background color.
Is that possible to implement this behavior without Javascript ?
If the answer is no:Is that possible if known that all divs with class a are consecutive divs in the same level (i.e. siblings) ?
I can add also other classes to divs, if needed.
You can get it "half working" in the simpler case where there are no container <div>s:
<div>
<div class='a'>Hello</div>
<div class='a'>Stack</div>
<div>Overflow</div>
<div class='b'>Are</div>
<div class='b'>The Best</div>
<div>Have</div>
<div class='b'>a nice</div>
<div>Day !!</div>
</div>
Then you could use the general sibling combinator, with the unfortunate caveat that it only works for elements that come after the element described on the left-hand side. So, for example, if you hovered over the <div> containing "The Best", only that and the "a nice" <div> would have a changed background:
div.b:hover, div.b:hover ~ div.b {
background-color:#CCCCCC;
}
I wasn't able to come up with a way that would fully take care of your scenario through CSS alone, though. I'm leaning towards what the others have said about it not being possible (even in the simplified case) right now.
i can't think of any solution, except there are css-parent-selectors (and, as far as myself and google know, those don't exist). if there would be things like that, you could do something like selecting the top parent af the hovered element and then select all elements of your class within that top-element (would look like .a < parent < parent < parent .a{ /*styles*/ }) - but, as said, this selectors don't exists, so the answer to you question is: no
No. Not without Javascript. CSS selectors are meant to apply styles to each element that matches the selector individually, so by design this won't happen.
Source
http://www.w3.org/TR/CSS2/selector.html#selector-syntax