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;
}
Related
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>
I think I cannot do that one in CSS, but wanted to see whether someone would have such a solution...
I have a div with the page content, a div which can be in several different location in the HTML, and a set of paragraphs. The CSS would have to place the second div between two paragraphs.
There is a sample HTML:
<div id="to-be-placed">Move Me</div>
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
Say we want to place the "#to-be-placed" div after the 3rd paragraph, is there a way to do that in CSS? I can reference the 3rd paragraph as so:
content.p:nth-child(3)
But I really don't see a way to tell CSS to move my DIV to that location...
Note: the #to-be-placed div could be inside the #content div, at the beginning or at the end.
P.S. Please, don't come up with hard coded sizes and positions. That won't work.
P.S. Just in case you get all excited about jQuery. I know how to do it with jQuery. So no, I don't need you to give me such an answer. (see How to add div tag in-between two paragraphs when wrapped inside main div using jquery for those who wonder.)
This cannot be done using CSS, as CSS does not provide any mechanism for moving elements in HTML, only for styling existing elements and adding new content through the use of pseudoelements. The best you're going to get is a solution that uses JavaScript or jQuery.
If you only want to add styled text content, you can add that using the ::after pseudo-element in CSS, but it does not support HTML, only plain text:
p:nth-child(2)::after {
content: "- Added content";
}
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
You can't do that exactly, but a possible workaround would be to define the div as the ::after element on the 3rd p element. This technically puts the div inside the p, but it might do what you're looking for.
p:nth-child(3)::after {
content: "Move Me";
display: block;
}
Here's a fiddle: https://jsfiddle.net/me5su05f/1/
Short answer: No you cannot do that. CSS (Cascading Style Sheet) is designed for styling. It is not designed to be used to manipulate DOM elements. JavaScript on the other hand is built for doing that. So if you happen to be wanting to use CSS for manipulating your DOM then you might want to re-think your approach to the solution.
I have 2 divs. The first div contains a large sentence. And in the end of this sentence I want to put a word, that is situated in the second div.
But I always get the next line. Here is my example
<div class="container">
<div class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </div>
<div class="content2">snippets</div>
</div>
And I want to get this
JsFiddle
Please do not use div's for content. Change the parent Container to a p-tag (<p>) and the following divs (in this case <div class="content1"> and <div class="content2">) to span-tags (). Their are by default display:inline;.
If it's just content-text without special styling, remove any tags and let it inside the parent p-tag.
I would recommend using the following code:
<p class="container">
Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web <span class="content2">snippets</span>
</p>
Based on your Screenshots, this would fit as a more appropriate solution. Hower as the other Suggested already, you cann still change the CSS if you cannot change the HTML for some reason.
Div is by default a block element. If you want inline elements you should (in theory) use spans.
For example:
<div class="container">
<span class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </span >
<span class="content2">snippets</span >
</div>
Now, if you cannot change that for some reasons you probably will have to change that specific div's css 'display' property to 'inline', though I'd actually recommend against it.
You have to change display from inline-block to inline.
.content1, .content2 {
display: inline;
}
Fiddle: http://jsfiddle.net/4utsx65f/2/
use
.container div{
display:inline;
}
Or use inline elements, like spans instead of divs
Use display:inline for your inner divs: http://jsfiddle.net/4utsx65f/3/
I Guess the second word snippet should be in span as per the requirement.
<div class="container">
<div class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web
snippets
check this fiddle Fiddle
make a Css file in your Assets ..
define a class with any name .withen the defination write.
.divOnSameLine{
display:inline;
float:left;
}
make sure to refer the css file in your Document.
then add the class name
<div class="divleft divOnSameLine">Something</div>
<div class="divright divOnSameLine">Something 2</div>
Add 'display: inline-block;' to the content1 and content2 classes in your CSS, or set the value inline:
<div class="container">
<div class="content1" style="display:inline-block;'>Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </div>
<div class="content2" style="display:inline-block;'>snippets</div>
In HTML, how do I prevent this "linebreak" when using the <div> tag?
Example:
<div class="menu"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
Visual example:
How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu
NOTE: Pretend that 'apple' is inside its own invincible maroon box.
When using <span> instead of <div>, you need to get rid of the line breaks (<br>).
If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:
<div class="menu" style="float:left;"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
It sounds like you have two block elements that you would like to display side by side?
Have you tried using the "display: inline-block;" property in your css yet?
You can change your CSS to include the following;
div.menu, div.apple {
float:left;
display:inline-block;
}
You might also need to set the width of each to less than 50%.
<div class="menu"><br><br>menu<span class="youtube"><br><br>youtube</div>
I am using Yii-bootstrap extension and I am having some styling problem because bootstrap css files affect the main content of the page.
My main content is a map done with OpenLayers so I am having several problems with styles mixing between them. I have tried to do a css file more general, as I have seen they recomend on the web,for applying different styles but as they are two "automatic" libraries is a hard work to try to guess how they work and the classes they use.
Is there any way to disable a css file for a concrete div?
you can create a class for that div and reset the values you have changed for general divs.
Nothing that I'm aware of, no.
The only way I can see is..
<div class="outer">
<div class="inner" >
Inner Content
</div>
</div>
You could do something like..
.outer{
}
.outer .inner{
/* override the specific styles you need here */
}