How do I specifically assign a style to a child (the top black header from the image)
I've tried something like
.noo-topbar > .container > a
and
.noo-topbar .container a
but nothing's changed...
view from Google Chrome
try this
.noo-topbar .container > ul li a
Read about css combinators:
http://www.w3schools.com/css/css_combinators.asp
if you still have trouble i'd suggest applying an id to it, like #specialElement, and styling it directly.
Related
I'm learning CSS and busy with an example that I cannot figure out.
I want to have the background of my element 'active' in the color green.
The element is a link in a navigation menu.
This is the HTML content of the element
And here is the CSS
Could you please let me know, what i did wrong so i can learn from it?
Thanks a lot!
The problem is that you are setting background of li element but the a tag is over it. so use this instead:
li.active a{
background-color:#00CC33;
color:blue;
border-color:#00CC33;
}
If you are using a class like you are you need to use .active instead of #active. Using # indicates an id not a class.
I want to change this Div to increase the margin-bottom to 15px. I've done it in the Inspect element, but I have no idea how to make it change on the wordpress site I'm working on.
Here is the Div and the styles in the inspect element. As you can see I've already set margin-bottom to 15px. I guess the problem I'm having is I'm not sure what to call (The div or the class) and I dont know how to.
I've tried .vc_column-inner vc_custom_1453133443161{style} and #vc_column-inner vc_custom_1453133443161{style} but neither worked.
media="all"
#site #content div > :last-child, #site #content aside > :last-child, #site #content article > :last-child, #site #content div > p:last-of-type {
margin-bottom: 15px;
}
<div class="vc_column-inner vc_custom_1453133443161">
Thanks
.vc_column-inner.vc_custom_1453133443161 {margin-bottom: 15px;}
You're missing the second (dot) on the vc_custom, this is a separate class.
When you're targeting an element with multiple classes each class should proceed directly after one another
.vc_column-inner.vc_custom_1453133443161
No space between the classes or you'll be targeting another element.
Open up wordpress admin area. Then navigate to appearance >> editor. Then select the theme on the top right. This will list all the files, you will have to find the css files and add the statement you have to it. Use
.vc_column-inner{margin-bottom:15px!important}
Remember to check the results in your browser and inspect element. You would have to alter it accordingly if it does not work.
Sorry, probably not the best title ever. I'm having trouble with a few things in my code that I'm using to practice html/css.
h1:hover is responding whenever I hover my cursor over anything at the same height as the h1 heading.
I'm also having trouble linking it. See the code below.
<h1>Bing</h1>
I'd also like to know how to target specific things in the HTML code via CSS. For example if I import an image in HTML using IMG how would I edit just that image in CSS?
Thank you.
H1 is a block element, so it spans across total width of the page. To limit this effect, you must apply it a fixed width, or "display:inline-block;"
For the second question, the right code is:
<h1>Bing</h1>
First, h1 by default spans the entire width of the page. Try changing it to an inline-block element like so:
h1 {
display:inline-block;
}
Second, you need to put the a tag inside of your h1 tag and put the text inside of the a in order for it to function as a link.
<h1>Bing</h1>
Third, in order to target specific img elements, you can assign them a class or and id and target the desired one. For example:
HTML
<img id="myImage" src="whatever.jpg"/>
CSS
#myImage {
width: 250px;
}
Your anchor should be inside your h1, then you can apply any hover changes to the anchor:
HTML:
<h1>Bing</h1>
CSS:
h1 > a:hover {
color:#F00;
}
I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
I've inherited a large project that already has a large markup base coupled with a short deadline, so a complete rewrite is out of the question. As such, I have an issue that needs to be resolved ASAP:
(Forgive my cryptic shorthand in advance)
I have a header that contains an UL and a DIV.
div id="header"
ul id="nav"
<a li />
<a li />
<a li />
/ul
div id="promotion"
p
/div
/div
I want the background-image (ie., the entire DIV) to be a link, so I added this to the markup:
div id="header"
a id="overlay"
...
And the CSS for that reads something like this (not the exact CSS, I don't have access to the file while I'm at home):
a#overlay {display: block; width: xxx, height: xxx, z-index: -1
Now here's the kicker: the UL and the other DIV need to be positioned above "overlay," because they have their own links in them. This works in FF3 and IE8, but not IE6/IE7. I'm looking for a generic solution to this problem that is compatible in IE6/IE7 (and dropping IE6 is not an option, this is a BIG client)
Any suggestions? Here it is in simple terms: header --> link overlay --> ul with links --> other elements on top of link overlay
You could use JavaScript to attach a click handler to that background instead of relying on a link.
document.getElementById('overlay').onclick = function() {
window.location = 'http://www.google.com/';
}
IE6/7 does not respect the z-index stacking context as you'd expect. Have you tried setting a higher index on the child elements of the parent anchor?
Here's the generic solution I came up with after reading the link Tate Johnson provided.
I tested it and can confirm that it works in IE5.5/6/7/8, FF3, Chrome and Safari.
I was overlooking the fact that you need to declare the position of each element if you're going to use z-index. Setting everything to position: relative (except for the link, which is set to position: absolute) did the trick.