select child links in a div problem - html

I have always had a problem with selecting child links in a div but now I have decided to ask you guys what am I missing here!
I try this:
#navigation a:link {
text-decoration: none;
color: red;
}
<div id="navigation">
<a href="#">
<h1>home</h1>
</a>
<a href="#">
<h1>new</h1>
</a>
<a href="#">
<h1>contact</h1>
</a>
</div>
but it doesnt work! the links get some default settings from the browser or something like that!

try removing the :link,
also you should try to only have 1 h1 title per page for SEO reasons.

You've probably clicked on those links so they're no longer a:link but now a:visited. Just get rid of the pseudo-class:
#navigation a { ... }

Related

Using CSS to Highlight Current Page

I want to highlight current page by using CSS, but somehow it doesn't work. Please take a look at my code below.
HTML
<body id="home">
<div id="mainNav">
<a href="/Dashboard/Index" id="navIndex">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span>
</div>
</a>
<a href="/samples/register/" id="navRegister">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span>
</div> </a>
<a href="/samples/search/">
.........
</div>
CSS
body#/samples/register a#navRegister .textStyle {
background-color:red !important
}
The syntax is wrong. Use this way:
body a#navRegister[href="/samples/register"] .textStyle {
background-color:red !important
}
Yours is a worst example of having div inside <a>, which is similar to having a bottle inside some water, not water inside bottle, which is right one.
Take your body ID, in this case #home and combine it with the id on the home nave element, in this case #navIndex:
#home #navIndex .textStyle {
background-color: red;
}
Then you can add a selector for each of your pages to catch the current page in the nav with css alone:
#home #navIndex .textStyle,
#register #navRegister .textStyle {
background-color: red;
}
Drop the !important it's only necessary in a couple of edge cases in css and should be avoided (I appreciate one of those edge cases is just trying to definitely make a selector show some visible effect, which may well be what you're doing with the posted css).
You'd also benefit from using classes instead of ids as css selectors.
Caveat:
It's probably better to render this in the html server side as the server can use the request URL to decide which nav item is current. That way you can just add a selected-nav-text class to your current nav span and your css becomes:
.selected-nav-text {
background-color: red;
}
This is simpler, you can write logic once server side to calculate the current nav and css once to highlight it, then when you change your nav the functionality will come instantly.

How do I add two buttons side by side that are made up of an image?

I am trying to figure out how exactly to add two buttons side by side. The button will be an image that the user clicks and it then goes to the URL. I tried adding a class in CSS with an inline display and added html calling that class on a button with an extra style tag added to it. It is not displaying the button though.
I am unsure how else to do it without adding the style tag directly in the html code if I needed the buttons side by side. That is the only way I know how to di it with display: inline;.
Here is how I am doing it:
CSS
.storebtns {
display: inline;
}
HTML
<a class="storebtns" href="http://www.google.com" style="background-image: url(/img/btn.png);"></a>
I might not be understanding the question correctly, but if you want two buttons to be side by side and have an image background, try:
<a class="storebtns" href="#"></a>
and:
.storebtns {
padding:100%;
background:url("IMAGE_PATH_HERE");
}
This might work better, not sure if its feasible for you.
.storebtns
{
float:left;
width:100px;
}
<a class="storebtns" href="http://www.google.com">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSUZXG8Fd-auKjn_fLKsFtHMIarXLlcnDoTAvV86PSxmJFLwYgzJQ" width="100"/>
</a>
<a class="storebtns" href="http://www.stackoverflow.com">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSHUhwMHx9nciceUQQ5X5Id7pK9pFeAXPRVc0BhunO5zt49OvNiag" width="100" />
</a>
here is a working example Here
This might work better, not sure if its feasible for you.
<a class="storebtns" href="http://www.google.com">
<img src="/img/btn.png" />
</a>
Try adding the buttons using ul, floating it and adding background images with css.
http://jsfiddle.net/nxEd5/
<body>
<h1>Click on a kitty.</p>
<div id="buttons">
<ul>
<li>Button1</li>
<li>Button2</li>
</ul>
</div><!--end buttons-->
</body>
Here is the CSS:
ul li{
float:left;
list-style-type:none;
}
ul li a{
padding:40px;
text-decoration:none;
text-indent:-9999px;
background:url(img.jpg) no-repeat;
opacity:0.5;
display:inline-block;
}
ul li a:hover{
opacity:1.0;
}

Having trouble styling a span within an anchor tag in IE6 CSS

The company I work for still uses IE6 therefore I am required to make sure that my site works in IE6 browsers. I'm having trouble styling due to the constraints of the code design done through SharePoint 2007.
When you hover over a non-active tab, the text should change color from blue to orange.
<div class="webpartBody">
<div class="tabsWrapper">
<a class="quickLinkTabs activeTab" href="#">
<span class="tab0">Clinical</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab1">Business Services</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab2">Employees</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab3">Projects</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab4">Web Links</span>
</a>
</div>
<!-- links -->
</div>
jQuery is utilized to create classes for the quickLinkTabs so that the firstTab and lastTab are labeled as such and that the tab that is currently selected is the activeTab.
Using just this code outside of the SharePoint environment, I apply the following CSS to achieve the effect I'm looking for.
.quickLinkTabs:hover
{
color: #ff6600;
}
.quickLinkTabs span:hover
{
color: #ff6600;
}
As soon as I apply this to the development environment and try this on SharePoint generated code, it no longer works. I cannot figure out what the hindrance is - is it SharePoint? is it my CSS?
There is no purpose for the SPAN to be there in the first place. You should adjust the styling of the A-tag to perform the same functionality.
then use:
.tabsWrapper a { .... }
.tabsWrapper a:hover { ... }

Li display inline within a div that has max width

<div class="actions-wrapper">
<ul>
<li>
<a class="" href="#answer-form">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action1
</a>
</li>
<li>
<a class="" href="">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action2
</a>
</li>
</ul>
</div>
Hello, I have the previous code.
My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the containing the icon to be separated from its text within the same li.
In my css i have the following :
.actions-wrapper ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
.actions-wrapper ul li { display:inline; margin-right: 12px;padding:3px 0;}
I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.
Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/
In this example the "Another action" is not on the same line of its icon.
If i add the white-space : nowrap; it wont work anymore in IE6
does adding the text-alignment to the ul achieve what you want?
.actions-wrapper ul {
text-align: right;
}
Updated after new information
changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;
Updated fiddle (with hack included) : here
By looking at your markup, seems you want the icon and the text to make the same action.
Why not use css to add the icon next to the text, like so:
<li>
<a href="#answer-form" id="icon-label">
Action1
</a>
</li>
With the CSS:
#icon-label {
background: transparent url(path/to/image) no-repeat x y;
}
You can do this by removing all the whitespace from between the anchors, and separating them with a .
I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.

View all link within <h1></h1>, need to set style on it, to make link small

I am trying to make the "view all" link to the right of each h1 header to be smaller.
.view-all a:link,
.view-all a:visited {
text-size:.5em;
}
<h1>Student Activities <span class="view-all">
<a href="/student_activities/calendar/" title="view all">
view all</a></span></h1>
Any help is appreciated as to what I am doing wrong.
All of this is within <div class="content-body"></div>
If there is a better way of doing this, let me know.
Thanks.
Try font-size instead.
The property is font-size, not text-size.
.view-all a:link,
.view-all a:visited {
font-size:.5em;
}
<h1>Student Activities <span class="view-all">
<a href="/student_activities/calendar/" title="view all">
view all</a></span></h1>
6 of 1, 1/2 dozen on the other I suppose -- but you could fake the <h1> tag with a <span> and then put the link next to it in its own <span>
.veiew-all
{
font-size:18pt;
}
<div class="content-body">
<span class="view-all">Sutdent activities</span>
<a class="link" href="/student_activities/calendar">view all</a>
</div>
somehow this seems cleaner to me. if it sucks, someone tell me why.