Currently I'm having a solution, but I'm almost certain that there's a better solution out there. Basically I'm having a block-element and want to align some of the text at the beginning of my block and some at the end.
Here's a little jsfiddle example
What I'm doing is using float and 2 more block-elements inside to align it:
<div id="block">
<div id="start">1</div>
-
<div id="end">12</div>
</div>
#block {
text-align:center;
background: #000;
color: white;
width:150px;
}
#start {
float:left;
}
#end {
float:right;
}
I have many of those little objects, so my code is bloated with div's. Is there no more lightweight solution for this out there ?
I fiddled a possible answer based on the answer to this question.
http://jsfiddle.net/ScHdJ/2/
Works in all browsers, as far as I can see...
May be you can use CSS :after & :before pseudo classes like this:
HTML:
<div id="block">
hello
**</div>
CSS:**
#block {
text-align:center;
background: #000;
color: white;
width:150px;
overflow:hidden;
}
#block:before{
content:"1";
float:left;
}
#block:after{
content:"12";
float:right;
}
http://jsfiddle.net/ScHdJ/3/
But is not work in IE7 & below.
Related
What I mean to say with this is, if I have a page with two divs, and I want each div to have a separate style, what way would I go about this?
Example:
div{ background: red;} // apply this style to one div.
div{ background: blue;} //apply this style to another div.
I realize it would be possible to just add a class to each div, but what if I expand it? What if I want a whole section of my page with a lot of different attributes to use one part of the stylesheet, and another whole section to use another part?
You can simply prefix the CSS rules with the ID or class of the section. For example:
#section1 h1 {
color: red;
}
#section2 h1 {
color: blue;
}
and basically prefix every rule with either #section1 or #section2 depending on the containing section.
As far as I understand it you want for example every div in your header to be green while every div in your footer is supposed to be red.
#header div{ background-color: green; }
And than
<div id="header">
<div>I'm green</div>
</div>
You can also use more complex selectors to helpt you solve special cases, take this example:
#header div{ background-color: red; }
#header > div{ background-color: green; }
And than
<div id="header">
<div>
I'm green...
<div>...and I'm red</div>
</div>
</div>
Microsoft has a great overview of what selectors are available. There examples are sometimes a little weak but its something.
You can do this:
.firstSectionType div{ background: red;} // apply this style to one div.
.firstSectionType span { color: blue; }
.secondSectionType div{ background: blue;} //apply this style to another div.
.secondSectionType span {color: red; }
Then if your HTML looks like this:
<div class="firstSectionType">
<p><span>Hello</span></p>
<div>This has a red background and <span>this is blue text</span></div>
</div>
<div class="secondSectionType">
<p><span>Hello</span></p>
<div>This has a blue background and <span>this is red text</span></div>
</div>
the divs and spans in the corresponding secions will be formatted accordingly.
The CSS above requires you to repeat .firstSectionType or .secondSectionType in each rule, but a CSS preprocessor like LESS will allow you to rewrite it like:
.firstSectionType
{
div{ background: red;} // apply this style to one div.
span { color: blue; }
}
.secondSectionType
{
div{ background: blue;} //apply this style to another div.
span {color: red; }
}
I have this simple CSS:
.cont div {
margin:10px;
border:1px solid;
}
.mark { /* This get ignored? */
margin:30px;
}
With this markup:
<div class="cont">
<div>a</div>
<div class="mark">b</div>
</div>
I except the div.mark having margin:30px; but at least in Chrome this isn't true because the generic rule .cont div seems to have a higher priority.
Consider I don't want to use !important are there any other way to solve this?
http://jsfiddle.net/xNVRm/
Just make your selector more specific by adding the tag name:
div.mark {
margin:30px;
}
Demo: http://jsfiddle.net/xNVRm/1/
You could also use .cont .mark if you want to avoid using the tag name.
In order to avoid to use the important you need to make your css selector more specific. You can use .cont div.mark. It is more specific than div.mark.
The ".cont div" declaration overrides the ".mark" declaration because it's actually more specific. CSS uses a kind of point system to figure out which rules apply. In your case, ".cont div" specifies both a class and an element inside it, whereas ".mark" only specifies a class.
For the exact rules that should be used by all conforming browsers, see this link: http://www.w3.org/TR/CSS21/cascade.html#specificity
In your case you could fix this by using ".cont .mark" in the second declaration.
Specificity is key to how CSS rules are given a pecking order. Try looking at this article from HTML Dog:
http://www.htmldog.com/guides/cssadvanced/specificity/
You could use div.mark instead, which means any div that has the class of mark, do this.
Looking over this again, I see I wasn't understanding what you were trying to do. I think I see now.
You are is saying - ANY div inside of anything with class .cont will have 10px margin. It's more specific then .mark. .mark is 30px - BUT it's a div that is inside of .cont - so it's 10px. It reads right to left - that is a good way to think about it and check specificity.
I have come to think of things with a more object oriented approach. What do you think about this approach?
HTML
<div class="container section01">
<div class="block a">a</div>
<div class="block b">b</div>
</div>
CSS
.container {
width: 100%;
float: left;
border: 1px solid red;
}
.container .block {
/* you can style these site wide */
}
.section01 .block {
border:1px solid black;
padding:10px;
margin-bottom: 1em;
}
.section01 .block:last-of-type {
margin-bottom: 0;
}
.section01 .a {
background-color: red;
}
.section01 .b {
background-color: lightblue;
}
SASS would make this much easier.
a jsFiddle of this example
a CODEPEN of this on a larger scale
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
in my navigation bar i have this code.
<div id="aboutnav"><a class="hl" href="#"><h2>about\a</h2></a></div>
all the div does in the case is put the text in position and in the a.hl it's -
a.hl{
background-color:#000;
text-decoraction:none;
color:#fff;
}
the text is the right colour, it is in the correct position but there is no background colour.
This is because in HTML4/XHTML you can't nest hx elements into a! Try using this instead:
<div id="aboutnav"><h2><a class="hl" href="#">about\a</a></h2></div>
I think you would need to update your css in a similar way:
a.hl{
display:block;
background-color:#000;
text-decoraction:none;
color:#fff;
}
Your style is probably being overridden by another style for h2. Try:
a.h1 h2{
background-color: #000;
}
You should write the HTML like this
<div id="aboutnav">
<h2>
<a class="hl" href="#">about</a>
</h2>
</div>
And then style it like so
#aboutnav h2 {
background-color:#000;
}
#aboutnav h2 a {
text-decoration:none;
color:#fff;
}
Example: http://jsfiddle.net/jasongennaro/rbxBL/
Fyi... you had text-decoration misspelled.
Also, you really don't need the class for the a when the HTML is done this way.
I'm having problems with SharePoint and CSS. I'm creating a page with a supposedly simple image tab that has hover effect. It's done entirely in CSS. Here's the CSS snippet (hosted in a separate CSS file):
div.activelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.activelayer:hover {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.inactivelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer:hover {
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
cursor: text;
}
#innertab .alink {
margin-top:18px;
text-align:center;
margin-left:0px;
}
#innertab a.tablink {
color: #ffffff;
text-align: center;
}
#innertab a.tablink:hover {
text-decoration: none;
color: #ffffff;
text-align: center;
}
/* IDs */
#menu1 {
z-index:10;
}
#menu2 {
z-index:9;
}
#menu3 {
z-index:8;
}
#menu4 {
z-index:7;
}
#menu5 {
z-index:6;
}
In the aspx page, I have this:
<div id="innerTab" class="" style="width: 1000px; height: 72px;">
<div id="menu1" class="selectedlayer" style="margin-left:0px">
<div class="alink">
Menu Item 1
</div>
</div>
<div id="menu2" class="activelayer">
<div class="alink">
Menu Item 2
</div>
</div>
<div id="menu3" class="activelayer">
<div class="alink">
Menu Item 3
</div>
</div>
<div id="menu4" class="activelayer">
<div class="alink">
Menu Item 4
</div>
</div>
<div id="menu5" class="inactivelayer">
<div class="alink">
Menu Item 5
</div>
</div>
</div>
The problem I'm experiencing is this: It doesn't work when I placed this in SharePoint when viewed in IE.
I first tested this code in a normal HTML page and it worked like a charm in IE. When I transferred the codes in SharePoint (it's in a page template), it didn't work. So, I viewed the SharePoint test page in Chrome, and it works there, but for some truly bizarre reason, it's not working for IE. I haven't tested in in other browsers, and I don't really plan to because the page I'm working on is an intranet site, and our company uses IE (officially, though some of us insist on using either Chrome or FireFox) so IE compatibility is my only priority.
Is there something that I missed in the code? Please help :(
Oh, BTW, I'm coding in MOSS2007 and the HTML codes are being used in a Page Template. My IE version is IE8. Not sure if these info are relevant to the problem I'm having, though :(
thanks,
Poch
Sharepoint's stylesheets are overriding yours, so you have to make your selectors stronger. Open up the developer tools (hit f12), select "Trace Styles" above the right pane. Select your element that isn't getting it's styles applied and examine who's styles are. Then just copy that selector and make yours a little bit stronger. For example you may see:
margin-top: 0px;
#innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px
You'd just change your selector to this:
.someClass .someOtherClass #someId #innertab a.alink
Your selector is now stronger and will be applied.
Try adding !important, like so:
div.activelayer {
margin-left:-30px!important;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
text-align:center!important;
height:55px!important;
width:200px!important;
display:inline-block!important;
position:relative!important;
float:left!important;
}
I had a similar issue with this a few weeks back. I couldn't find an exact resource that said it, but through trial and error I was able to find that I could only apply CSS Psuedo classes (Like :hover and :active) to <a> tags within SharePoint when browsing in IE. The code you posted above has :hover / :active on <div> tags.
I was able to get a working solution by using image sprites, styling the anchor tags, and nesting the image sprite within the <a> tags with the following HTML and CSS:
HTML
<ul id="wheel" class="wheel"><li>
<img src="images1/design.png"></li>
</ul>
CSS
.wheel li a, .wheel li a:visited{
width: 50px;
height: 50px;
overflow: hidden;
}
.wheel li img
{
position: relative;
display: block;
}
.wheel a:hover img{
left: -51px;
}
.wheel a:active img{
left: -102px;
}
On the off chance you haven't solved this issue, hope this helps!