I'm trying to teach myself CSS and have the following markup:
<style type="text/css">
#content { display: block; width: 250px; height: 50px; background-color: #330000; }
/* pink */
#one { height: 25px; width: 25px; background-color: #FFCCCC; float: left; margin: 10px; }
/* hot pink */
#two { height: 25px; width: 25px; background-color: #FF0099; float: left; margin: 10px; }
/* tan */
#three { height: 25px; width: 25px; background-color: #CC9900; float: left; margin: 10px; }
/* aqua blue */
#four { height: 25px; width: 25px; background-color: #33FFFF; float: left; margin: 10px; }
/* yellow */
#five { height: 25px; width: 25px; background-color: #FFFF00; float: right; margin: 10px; }
</style>
</head>
<body>
<div id="content">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
The page is working correctly, but I'm interested in removing the duplicate code within the CSS itself. I.e. have all height, width, float all in one defintion then override the background color for each of the #id values
When I tried:
#content { height: 25px; width: 25px; float: left; margin: 10px }
then put:
#one { background-color: #FFCCCC; }
#five { background-color: #FFFF00; float: right; }
that didn't work.
Basically I'm trying to remove the amount of duplicate markup.
What am I missing?
You have to specify the node after #content:
#content div { SAME RULES }
#one { INDIVIDUAL }
#five { INDIVIDUAL }
or you can do this:
#one, #two, #five { SAME RULES }
#one { INDIVIDUAL }
You can also give each of those divs a class name and do
.divs { SAME RULES }
#one { INDIVIDUAL }
You want:
#content div {
i.e. "All the div elements that descend from the element with the id 'content'"
I recommend giving http://css.maxdesign.com.au/selectutorial/ a read.
You could use classes. Define a base class that contains the common properties:
/* Generic class for all four elements */
div.button { height: 25px; width: 25px; float: left; margin: 10px; }
and then define 1-4 (I'm using classes here as well, as it is the best practice in many cases, but you can carry on using IDs if you want to):
div.one { background-color: #FFCCCC; ... }
div.two { background-color: #FF0099; ... }
and then assign the base class and the specific class:
<div id="one" class="button one"></div>
the "button one" part will let both classes' properties apply to the element.
Here ya go, #content div is what you want. You can go deeper if you needed, ie #content div span a would reference an anchor, nested in a span that's nested in the div that's nested in something with the ID of #content.
http://jsfiddle.net/eDhXs/
#content { display: block; width: 250px; height: 50px; background-color: #330000; }
#content div { height: 25px; width: 25px; float: left; margin: 10px; }
/* pink */
#one { background-color: #FFCCCC; }
/* hot pink */
#two { background-color: #FF0099; }
/* tan */
#three {background-color: #CC9900; }
/* aqua blue */
#four { background-color: #33FFFF; }
/* yellow */
#five { background-color: #FFFF00; }
This is where you would make use of classes. IDs are great for when you have a particular element that is unique to the page. But classes, you can define a set of attributes (even set an attribute more important than another). Furthormore, an element can have more than one class where they can't IDs
So what I would do is this
#pink { background-color: #FFCCCC; }
#hotpink { background-color: #FF0099; }
#tan{ background-color: #CC9900; }
#aquablue { background-color: #33FFFF; }
#yellow { background-color: #FFFF00; }
.box {
height: 25px;
width: 25px;
float: left;
margin: 10px;
}
And specify them in your HTML like this
<div id='pink' class='box'></div>
I like this version the best, because if you ever need to select this element in the DOM explicitly, it would look like
#pink.box {
height: a different height;
}
There are actually three alternative solutions to your problem
First solution
The first one is very close to what you've written yourself except that it should define CSS for any DIV underneath the one with the id="content":
#content div { height: 25px; width: 25px; float: left; margin: 10px }
Second solution
I should point out that this one is probably more common and gives more flexibility especially if you want subDIVs to not have common classes (in your case sizing). This one changes your markup a bit because you can define multiple CSS classes on a single HTML element:
<div>
<div class="content one"></div>
<div class="content two"></div>
<div class="content three"></div>
<div class="content four"></div>
<div class="content five"></div>
</div>
This way your CSS classes change a bit. You have to replace # with a . (dot):
.content { height: 25px; width: 25px; float: left; margin: 10px }
.one { background-color: #FFCCCC; }
...
.five { background-color: #FFFF00; float: right; }
Third solution
This one is very similar to the second one, except that it keeps the IDs of sub DIVs:
<div>
<div id="one" class="content"></div>
<div id="two" class="content"></div>
<div id="three" class="content"></div>
<div id="four" class="content"></div>
<div id="five" class="content"></div>
</div>
And CSS:
.content { height: 25px; width: 25px; float: left; margin: 10px }
#one { background-color: #FFCCCC; }
...
#five { background-color: #FFFF00; float: right; }
You have two options, the first is to use the parent container (in this case the div #content) to set default attributes to each of it's nested divs, to do this you could use code like this:
#content div {
repeat-attributes-here;
}
This will set attributes for every div inside #content.
The second option is to use classes to define the common attributes. The benefit of this is you can still have other divs with different styling options (in case you add something new where you don't want the repeated functionality.
To do this you would do this:
#one {
unique-functionality-here
}
.layout-block {
repeat functionality here
}
Then define the div in the CSS like this:
<div id="one" class="layout-block"></div>
Hope that helps!
Related
I have 3 nav buttons at the top of a page. I set their width to 33% but noticed that the last one didn't fill all the space that it was supposed to, so I set it's width to 34% but it still didn't fix the issue.
If you go to http://shacktown.com and hover over Contact you will see that the right-most area of the button does not turn a lighter gray, and I also noticed that the border-radius attribute doesn't apply itself either.
The 3 .nav items are located inside of a #header item. Here is the respective CSS:
#banner, #header, #content {
margin: 2.5% 15% 2.5% 15%;
}
#header, #content {
border-radius: 0.375em;
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.nav {
height: 2em;
padding-top: 1.0em;
text-align: center;
color: #000000;
font-size: 1.2em;
float: left;
width: 33%;
cursor: pointer;
border-left: 0.1em solid #333333;
}
.nav:hover, .navSelected {
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.navSelected {
cursor: default;
}
.nav:first-of-type {
border-radius: 0.375em 0 0 0.375em;
border-left: none;
}
.nav:last-of-type {
border-radius: 0 0.375em 0.375em 0;
width: 34%;
}
Any idea why it isn't filling up the whole space?
:last-of-type or :first-of-type css selectors are not meant to be working like this. In your case, this selectors will select the last "div" or first "div" in their parents.
So remove this line from html:
<div style="clear: both;"></div>
and change width of the class nav to %33.3
these will do the trick.
Change the rule for .nav to following:
.nav {
height: 2em;
padding: 1em 0 2.5em 0;
text-align: center;
color: #000;
font-size: 1.2em;
float: left;
cursor: pointer;
border-left: 0.1em solid #565656;
width: 33.33%;
box-sizing: border-box;
}
And add a new rule:
.nav:last-of-type:hover {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Remove the whitespace in your markup:
And this is the result you'll get.
there is no selector with only class only
CSS: How to say .class:last-of-type [classes, not elements!]
so you can do
set .nav as display:inline-block and remove clear div so that they are inline
here is the demo
.cont {
font-size: 0px; /* is added to remove whitespace from inline-block */
}
.cont div {
display: inline-block;
font-size: 16px;
}
.cont div:first-of-type,
.float div.test:first-of-type {
background: red;
}
.cont div:last-of-type,
.float div.test:last-of-type {
background: red;
}
.float .test {
float: left;
}
.float .clear {
clear: both;
}
<p>used inline-block instead of float</p>
<div class="cont">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
<p>with class and used float</p>
<div class="float">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="clear"></div>
</div>
i have a number containers that i want aligned. This is the code i have so far: jsfiddle
First of all, when i run this code from my machine, the "day-label" is double the size that it shows on jsfiddle. the next two ("max-points" and "close-points") are stacked on top of each other and are right text to "day-label", this is as i want it.
Now the next three containers i can't seem to get them lined up, the "points-totals" container i want to be like the "day-label" but to the right of the max and close points. then the next two "thirty-points" and "fifty-points" i want next to the totals.
They should all be on the same line but they're not all the same shape.
Does anyone know what i'm talking about or am i confusing the situation?
I think i'll be able to use "top:X" and "left:X" but i wanted to know if there was an easier way to get them all inline with each other? like the first three containers.
Thanks for the help.
This is a mock up of how i want it to look -
How's this jsFiddle example?
HTML
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
</div>
CSS
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float:right;
}
.thirty-points
{
background-color: red;
width: 10%;
float:right;
}
.fifty-points
{
background-color: gold;
width: 10%;
clear:right;
float:right;
}
I'm not 100% sure what you're trying to achieve but you could try to use the float function in CSS, e.g float:lefthere's a link to W3schools page on float http://www.w3schools.com/cssref/pr_class_float.asp or if you just want them centered you could always try <center>
use this : fiddle
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float: left;
}
.thirty-points
{
background-color: red;
width: 10%;
float: left;
}
.fifty-points
{
background-color: gold;
width: 10%;
float: left;
display:inline;
float: left;
}
.clearfix {
clear: both;
}
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
<div class="clearfix"></div>
</div>
Update with prettier code
Also- dude, what you look like you're trying to do is display tabular data
If that is the case, there's nothing wrong with using an actual table-- in fact, NOT doing so would be wrong.
html
<section class="container">
<header>
<h1 class="title">Title</h1>
</header>
<ul class="point-container">
<li class="day"><h1>1<span>st</span></h1></li>
<div class="points">
<li class="max">Max</li>
<li class="close">Close</li>
</div>
<div class="results">
<li class="totals">Total</li>
<li class="thirty-points">30 points</li>
<li class="fifty-points">50</li>
</div>
</div>
</section>
css
// ==================
// base
//
//
html{ font-size: 62.5%; }
body{
font-size: 1.6rem;
font: normal normal 100 1.6rem "Helvetica Neue", sans serif;
background-color: black;
}
.container{
width: 90%;
color: white;
margin: auto;
}
// ==================
// layout
//
//
body,
.container,
.points,
.results,
.point-container{
display: flex;
}
.points,
.container{
flex-flow: column;
}
.results{ flex-flow: row;}
.day,
.results li{
flex: 1;
}
.points,
.results{
flex:3;
}
.results li{
text-align: center;
}
// ==================
// colors
//
//
.title{ background-color: #008001; }
.day{ background-color: #00ff00; }
.max{ background-color: blue; }
.close{ background-color: purple; }
.totals{ background-color: orange; }
.thirty-points{ background-color: red; }
.fifty-points{ background-color: gold; }
I'm trying to write Firefox stylish css (full screen width style) for our StackExchange sites.
In the tagged question list page (eg: https://stackoverflow.com/questions/tagged/java ), the HTML is like the following
<div class='question-summary'>
<div class='statscontainer'>
<div>n votes</div>
<div>n answers</div>
<div>n views</div>
</div>
<div class='summary'>
<h3>Question title</h3>
<div>question excerpt ...</div>
<div>tag1 tag2 tagN </div>
</div>
</div>
The original CSS use fixed width on parent/child 1/child 2
<style>
.question-summary
{
float: left;
width: 730px;
background-color: silver;
}
.statscontainer
{
float: left;
width: 86px;
margin-right: 8px;
background-color: gray;
}
.summary
{
float: left;
width: 635px;
background-color: lightgray;
}
</style>
Now I try to override CSS to let it fit full screen width
.question-summary
{
float: left;
width: 100% !important; /* parent: full screen width */
background-color: silver;
}
.statscontainer
{
float: left;
width: 86px; /* child 1: fixed width */
margin-right: 8px;
background-color: gray;
}
.summary
{
float: left;
/*
width: 80% !important; <--- how to let child 2 has remaining width ?
left: 95px;
right: 0px;
*/
background-color: lightgray;
}
The question is, how to let child 2 has remaining width ? I know when using <table> to control layout, it is pretty easy.
<table style='width:100%'>
<tr>
<td bgcolor='gray' style='width:80px'>fixed width</td>
<td bgcolor='lightgray'>automatically has remaining width</td>
<tr>
</table>
Edit
According both #sandeep and #MrLister 's answers, it should override 3 CSS properties to get this work
.question-summary .summary {
width: auto !important; /* original = width: 735px; */
float: none !important; /* original = float: left; set to 'none' to get the 'overflow' property work */
overflow: hidden !important; /* original = not set, default is visible */
}
You should reset the width to its initial value, which is auto.
Edit:
As you noted though, in order for width:auto to work, you should also reset the float property, otherwise the width won't take up the rest of the available space.
Write like this:
.question-summary
{
background-color: silver;
overflow:hidden;
}
.statscontainer
{
float: left;
width: 86px; /* child 1: fixed width */
margin-right: 8px;
background-color: gray;
}
.summary
{
overflow:hidden;
background-color: lightgray;
}
Check this http://jsfiddle.net/pGu42/
I want to place one DIV (ID eSharing) at the bottom of another DIV (content-primary)
Here is the CSS class for DIV (ID content-primary)
.layout-3 #content-primary {
padding: 0 10px;
width: 502px;
}
#content-primary.article {
padding-bottom: 2.5em;
}
#content-primary {
width: 501px;
}
#content-primary {
clear: left;
float: left;
margin: 12px 0 0;
padding: 0 10px;
width: 500px;
}
Here is the CSS class for DIV ( ID eSharing)
#eSharing {
height: 230px;
margin: 12px 0 0;
overflow: auto;
padding: 0 10px;
position: relative;
}
Screeshot link http://i.stack.imgur.com/bMqXD.png
Screenshot 2
unfortunately, CSS doesn't have the capability to position an item relative to another item in the general case. It seems like the solution may be simple for you though.
You are floating one div and want to place another div right below it?
Why not put both divs inside an outer div, and float the outer div instead? The two inner divs will appear one on top of the other this way.
EDIT: I've kinda spelled it out, but here's an example:
<div id="outer">
<div id="content-primary">Your content</div>
<div id="eSharing">Other content</div>
</div>
and for the CSS, don't float either content-primary or eSharing. Instead, do something like this:
#outer {
clear: left;
float: left;
}
#content-primary {
width: 501px; /* why? */
}
#content-primary {
margin: 12px 0 0;
padding: 0 10px;
width: 500px;
}
#eSharing {
height: 230px;
margin: 12px 0 0;
overflow: auto;
padding: 0 10px;
}
EDIT: Here is another option where you have a main content area "a", sidebar "b", and two adjacent containers below "c" and "d".
Demo: http://jsfiddle.net/L655v/
One more that has a main content area "a", sidebar "b" and a full-sized content area "c" below it...
http://jsfiddle.net/L655v/1/
(trying to mimic what your screen shots may be implying).
Not sure exactly which you're going for but here are several layout options...
Demo: http://jsfiddle.net/aNqak/
Here is the code I used in my fiddle...
HTML...
<div id="a">a</div>
<div id="b">b</div>
<br /><br />
<div id="c">
c
<div id="d">d</div>
</div>
<br /><br />
<div id="e">e</div>
<div id="f">f</div>
CSS...
#a {
background-color: #999;
}
#b {
background-color: #ddd;
}
#c {
background-color: red;
padding: 5px;
}
#d {
background-color: pink;
}
#e {
background-color: blue;
float: left;
width: 75%;
}
#f {
background-color: green;
float: right;
width: 25%;
}
I have a box center, and I want to color that box differently depend on the page. I try this
#center {
margin-top: 2px;
padding: 10px 20px; /* CC padding */
width: 100%;
height: 800px;
color: black;
font-size: 11px;
}
#backgroundRed{
background-color: red;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 240px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
so then I would try this
<div id="containder">
<div id="backgroundRed">
<div id="center" class="column">
abc
</div>
</div>
</div>
however the background of the box does not turn to red, someone explain to me what did I do wrong? btw, I must have class="column"
Maybe what you wanted was this rule?
#backgroundRed div#center {
background-color: red;
}
That means "if div#center is a child of #backgroundRed..."
Your example should make the outer div have a red background.
Try the following code
#backgroundRed{
background-color:red;
overflow:hidden;
}