I have the top bar of my page set up as follows: Home | Contact Us etc..
It lies within a p tag inside a div id.
How would i go about setting up the :hover css on each link without having to separate them into different classes such as how I have them at the moment. Is it possible?
I don't think i used the correct css because i couldn't position them correctly without having to use different padding parameters for each class which makes the spacing look inaccurate.
via codepen: http://codepen.io/Hafkamp/pen/jabmE
html:
<div id="topinfo">
<div class="home"><p>Home |</p></div>
<div class="about"><p>About |</p></div>
<div class="contactUs"><p>Contact Us |</p></div>
<div class="map"><p>Map |</p></div>
</div><!--/topinfo tag-->
css:
.home p{padding-right:250px;}
#topbar .home p:hover{color:rgba(255,255,255,1)}
Is there an easier way to do this that is not so tedious. This method also causes the divider to have the hover effect which is not desirable.
The best way of defining menus in a page is to use "ul" and "li" tags. But if you still want to use with tag you have to use it this way:
`Home
About
contact
.home_link, .about_link, .contact_link{color: red;}
.home_link:hover, .about_link:hover, .contact_link:hover {color: blue;}`
I would give them all the same class, say topitem, and use a rule like this:
.topitem:hover p {
color:rgba(255,255,255,1);
cursor:pointer;
}
Although really, I would get rid of the interior <p> tag and reduce the selector to .topitem:hover – the text is already wrapped in a <div>, so why wrap it again? (But see Zinnia's note about the convention of using <ul> and <li> instead of nested <div>s.)
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
I want to edit the "p" content which is inside the content div on my shopping cart page.
As the content div appears on every page, I don't wish to just go for "content + p"
Is there an attribute I can use that will "select all p tags in the div above cart-module"
<div class="content">
<p>The content I want to edit<./p>
<div class="cart-module">
<div class="cart-total">
Also, is there a problem with attribute rules slowing down the pages?
If the structure is always as you describe in you question then you can go with the first child selector:
.content > p:first-child {
background-color: red;
}
wich will get the p inside the content only if it is in the first place inside of it.
Regarding your second question, it will always depend on how and how many attributes you use on each page. The attribute selectors are slower than the ids or classes, because the latter are indexed by the browsers, just for this reason. Anyway, if you don't use them massively surely you won't notice the difference.
Of course, if you have access to modify the html structure the easiest would be to add a class to the p tags you want to select...
It's not possible with pure CSS.
If you want to style "all p tags in the div above cart-module", do some JQuery instead.
First, define a piece of CSS:
.my-custom-css {
color: chucknorris;
}
Then use JQuery prevAll()
$(".cart-module").prevAll().addClass("my-custom-css");
// Or do something with p tag
$(".cart-module").prevAll().find("p").addClass("my-custom-css");
// Edit content
$(".cart-module").prevAll().find("p").text("Thank God It's Friday");
Oh you want to modify something like structure or content of those "all p tags in the div above cart-module", just do the same with prevAll().
I have three elements that I am trying to layout horizontally. Currently, I have the following HTML:
<div>
<h1>h1. Heading</h1>
<h1 class="subheader">subheader</h1>
<h1><small>segment header</small></h1>
</div>
When I run this, I see something like the following:
h1. Heading
subheader
segment header
However, I'd really like to get things laid out like the following:
h1. Heading subheader segment header
How do I setup this up via CSS in my root DIV?
Thank you
LIVE DEMO
Add a class to your DIV
<div class="align_H1">
and do:
.align_H1 h1{
display:inline;
}
So the trick is to display:inline; your <h1> elements, cause by default they are display:block; level elements.
Think about inline like on the content positioning flow,
while on block as for layout
Are you familiar with inline vs block elements? It sounds like what you want is
H1 {display:inline}
That said, it's usually not a great idea to break an element's default style when you might want its normal behaviour somewhere else. Instead, maybe give them a class, as per #Roko's answer.
CSS tricks has a handy reference on how to use the display property http://css-tricks.com/almanac/properties/d/display/
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.
I've got a DIV I want to hide, but I cannot give it a specific ID... actually I cannot change the text of the DIV, since it is retrieved from a database, but I can add some html before it AND I know the exact text content of the DIV.
It's something like:
<div class="this_div">content_of_this_div</div>
So, I thought that maybe looking for the specific content, then taking the div and incapsulating it in a hidden div could work... or something similar... any idea?
thanks
If you can insert other HTML around it then you can use another div to hide it
Using CSS and HTML
.hidden { display: none; }
...
<div class="hidden"><div class="this_div">content_of_this_div</div></div>
Using HTML and Inline CSS
<div style="display: none;"><div class="this_div">content_of_this_div</div></div>
Wrap it in your own div would seem most sensible.
<div id="mydiv">
<div class="this_div">content_of_this_div</div>
</div>
then hide your div:
document.getElementById("mydiv").style.display="none";
Or, use jQuery. If that is only instance of class, you could do
$(".this_div").hide();
If you just want to be able to select it without giving it a specific id, you can do a number of things. Make an empty div with an id before, then use the direct sibling selector:
#divid+div {}
or use many other css selectors to accomplish same
But I do reccomend the aforementioned external div technique over this