I have code blindness, it's like snowblindness, just wth far too much code.
I have a div class dynamically generated,
<div class="even last">
How can I select that with CSS?
div.even last {
background-color:#ffffff;
height:100%;
border-top:1px solid #F5F5F5;
padding:2px;
margin-top:35px;
}
Doesn't seem to work, and I just can't think more..
Thanks :)
When multiple classes are specified with a space, it applies both of those classes to the element.
Therefore if you specify div.even AND/OR div.last it will use them.
You cannot have spaces in a css class name. This should work:
<div class="even_last">
div.even_last {
background-color:#ffffff;
height:100%;
border-top:1px solid #F5F5F5;
padding:2px;
margin-top:35px;
}
Spaces in css mean: the next element contained in the previous one, for example:
<div class="even_last">
<div>
Hello
</div>
World
</div>
div.even_last div {
font-weight:bold;
}
Hello will be bold, while World will not.
Replace the space with a dot and you're right:
div.even.last {
background-color:#ffffff;
height:100%;
border-top:1px solid #F5F5F5;
padding:2px;
margin-top:35px;
}
Name your class like evenlast:
div.evenlast
{
/* styles here */
}
Related
I have a text box that has been hyper-linked and the problem is I'm trying to remove the underline from the hyper-link text.
The text-decoration:none; setting should remove it, but it doesn't seem to work.
How can I remove this underline from the hyperlinked text?
HTML:
<div class = "i6">Test Page</div>
CSS:
.i6 {
height:30px;
width:80px;
position:absolute;
left:1150px;
top:10px;
font-family: Lucida Sans;font-size:15px;
color: #FFFFFF;
background-color:#C1DAD4;
margin:10px;
list-style:none;
text-align:center;
padding-top:0px;
padding-bottom:10px;
padding-right:2px;
padding-left:0px;
text-decoration:none;
}
You need to apply text-decoration:none; to the link itself, not the inner div.
For example, you could give the link itself a class, e.g:
<div class = "i6">Test Page</div>
Then in your CSS, you could target the link itself:
.theLink {
text-decoration:none;
}
Here's a working jsFiddle.
I have the following CSS:
#form1,#form2,#form3,#form5,#form6,#form7,#form8 div{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
For some reason, the last id does not get the style. (ie #form8 does not get the style).
If I switch the css like this (Without changing any html code):
#form1,#form2,#form3,#form5,#form8,#form6,#form7 div{
Now #form7 does not have the style.
Did I code the structure wrongly please? Its very strange
It's probably an HTML markup issue. Can you provide it?
A wild guess is that your code looks like:
<div id="form8">
...
</div>
And the last part of your CSS selector (#form8 div) actually targets a markup like:
<div id="form8">
<div>
...
</div>
</div>
Here's a meta advice: if your selectors list is so long and apparently targets the same type of element (a form), use a class!
.form{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
Seems you are targeting div#form1, div#form2 ... and so on... You can skip writing div for the selector. Try this
#form1, #form2, #form3, #form5, #form6, #form7, #form8 {
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
Or even better ... give all of them a class name like <form class="myform" id="whatever"></form> and use:
.myform {
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
You should just use #form1,#form2,#form3,#form5,#form6,#form7,#form8
#foem8 div refers to the all child divs of the element with this is #foem8
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.
Helllo, I have this html code
<div class="tf">
<img src="images/facebook.png" width="2%" class="tfimg">
</div>
and for the CSS
.tf {
float:right;
margin-right:65px;
margin-top:-30px;
padding:2px;
}
.tfimg {
position:absolute;
z-index:-1;
border:none;
}
to be the image out of the border but I can't click in the image so what's the problem and what's the solution for that ?
Both of your images have the same class assigned to them. You are stacking them on top of each other by not setting them to different positions and the facebook.com one appears on top since it is last in the html. If you want them to appear beside each other you can apply something like the following:
.tftwitter {
position:absolute;
left:0px;
border:none;
}
.tffacebook {
position:absolute;
left: 20px;
border:none;
}
And now assign each image the appropriate class.
try using:
.tf{
display:inline-block;
/* your more code */
}
This question is sparked by a very frustrating problem that I find is a theme throughout my web development.
I have an example of this topic to show, in order to supplement my explanation. I have a header on my site and below that header I want a navigation bar, pretty standard. You can see this at http://www.ethoma.com/testhome.php. The header is the only img tag on the page easy to see. Here is the basic html and css structure to that portion of the page.
<div class="container" onclick="hide();">
<div class="hhshomehead">
<div class="logowrap">
<center>
<img src="/ETPbrand.gif" />
</center>
</div>
<div id="homeopt">
<ul id="homeoptlist">
<li id="homeoptnewpost">
<a class="homeoptanchor" href="/hhsplus_create.php">
New Post
</a>
</li>
</ul>
</div>
</div>
...... more html .....
</div>
And the CSS:
.hhshomehead
{
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px;
background-color:#ffffff;
-moz-box-shadow: 3px 3px 3px #aaa;
-webkit-box-shadow: 3px 3px 3px #aaa;
box-shadow: 3px 3px 3px #aaa;
width:100%;
border-radius:10px;
}
.hhshomebody
{
min-height:75%;
width:100%;
}
.logowrap
{
display:inline;
}
.homeopt
{
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px;
width:100%;
border-radius:10px;
}
.homeoptlist
{
display:inline;
list-style-type:none;
float:left;
margin-top:0px;
margin-bottom:0px;
padding-left:0px;
}
.homeoptanchor
{
text-decoration:none;
color:#1515b5;
padding-bottom:3px;
padding-top:3px;
padding-right:3px;
padding-left:3px;
}
.homeoptanchor:hover
{
text-decoration:underline;
}
I know that the class and id notation doesn't fit right with the CSS and the html. I changed it to display properly in this post. If you look at the resulting code in firebug, you see that the hhshomehead class does seem to contain the logo image, but not the bar below it. I don't know if there is some critical element I am missing, because from my limited experience, if a tag has children, the tag's children should be contained by the parent tag. Thanks to anyone who takes the time to view or answer this question -- everyone here is always very helpful. (Sorry if the code isn't displaying quit right, I have only posted here once before)
On the site you link to the #homeoptlist list is floated, which removes it from the document flow. To have the parent div(s) expand to contain it you need to 'clear' the float, which can be done by applying a 'clearfix' to the parent element. See What methods of ‘clearfix’ can I use?