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.
Related
I want to make navigation at the same level as h1 text and make it not movable and resizable. For now navigation is acting like random RWD, going below my h1 text, then changing display from left->right to top->bottom. I was trying to set ul position to static/absolute/fixed, nothing seems to work as I'd like.
JsFiddle example: https://jsfiddle.net/26tx3t3p/1/.
HTML:
<header>
<h1 class="logo"> myexamplesite</h1>
<nav class="primary">
<ul>
<li>info1/</li>
<li>info2/</li>
<li>info3</li>
</ul>
</nav>
</header>
CSS:
.logo{
font-size:36px;
font-weight:bold;
float: left;
display:inline-block;
}
a{
text-decoration:none;
}
.primary ul{
float:right;
display:inline-block;
}
.primary ul li{
float:left;
font-size:18px;
padding:10px 15px 0 0;
}
How to make navigation to be set at beggining position, after resizing window ??
Is there a way to do it, without putting stiff margin/width values ??
Do you mean something like that https://jsfiddle.net/26tx3t3p/3/
i added these css
header {
position:relative;
}
nav {
position:absolute;
right:0;
}
I have this (simplified) css for the select element to get rid of the browser-specific appearance
.select{
display:inline-block;
position:relative;
}
.select:after{
position:absolute;
bottom:0;right:0;
content:'\2193';
}
select{
appearance:none; (-moz and -webkit too)
width:100%;
height:100%;
}
(Best seen in http://jsfiddle.net/kwpke3xh/)
body{
background:#eef;
font-family:sans-serif;
}
.select{
display:inline-block;
background-color:#fff;
border-radius:.5em;
border:.1rem solid #000;
color:#013;
width:8em;
height:1.5em;
vertical-align:middle;
position:relative;
}
.select:after{
position:absolute;
bottom:.15em;top:.15em;right:.5rem;
content:'\2193';
}
select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
font:inherit;
border:none;
background-color:transparent;
color:inherit;
width:100%;
height:100%;
padding:0 .5em;
}
<span class="select">
<select>
<option>A</option>
<option>B</option>
</select>
</span>
It looks good, aside from Firefox still showing the arrow (as described Firefox 30.0 - -moz-appearance: none not working)
The only technical problem is that when I click on the select element, it shows the option elements, but if I click directly on the arrow, it does not.
Is there a way to avoid this?
The simplest CSS solution would be to add pointer-events: none to the pseudo element. In doing so, you can click through the element because mouse events are removed.
Updated Example
.select:after {
position:absolute;
bottom:.15em;
top:.15em;
right:.5rem;
content:'\2193';
pointer-events: none;
}
(Just take browser support for the property into consideration.)
I'm having trouble with a search box. There are two main issues that I'm having. Firstly, I have tried to create a search bar within a navigation bar and the search bar doesnt match the other elements within the navigation bar.
As you can see, the padding does not match the other elements and the size of the box is off by a couple of pixels.
Secondly, the search box looks fine when the page is maximised (besides the problems mentioned above). However, when the page is not maximised, it does this:
I know these are probably rookie errors and the code is probably sloppy but I'm a university student and this is my first HTML project. I am using XHTML 1.0 Transitional and CSS 2.0 as we arent allowed to use CSS3 or HTML 5 or any scripting languages. If someone could help me out, I'd greatly appreciate it!
This is the HTML code:
<div id="nav_bar">
<div id="inner_nav_bar">
<ul>
<li>home</li>
<li>phones</li>
<li>order</li>
<li>faq's</li>
<li>contact us</li>
<li id="search">Search: <input type="text" /> <input type="submit" value="Go!"></li>
</ul>
</div>
</div>
This is my CSS code:
#inner_nav_bar
{
text-align:center;
}
#nav_bar ul
{
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li
{
display: inline;
}
#nav_bar a:link,a:visited
{
display:inline-block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:4px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#search
{
display:inline-block;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:5px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#nav_bar a:hover,a:active
{
background-color:#7A991A;
}
In your CSS, you're treating the #search list item very different from the other list items.
I changed many of the lines in the CSS around, so that most of the properties are now in li and don't have to be repeated in the other elements.
One problem was the a elements in the other list items, that had vertical padding. I replaced that with line-height.
#inner_nav_bar {
text-align:center;
}
#nav_bar ul {
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li {
text-transform:uppercase;
display: inline-block;
white-space:nowrap;
color:#FFFFFF;
background-color:#27c645;
border:3px solid #0d6e1f;
text-align:center;
font-weight:bold;
line-height:1.66;
}
#nav_bar a {
display:inline-block;
width:120px;
color:#FFFFFF;
text-decoration:none;
padding:0 4px;
}
#search {
padding:0 4px;
}
#search input {margin:0;}
#nav_bar a:hover, #nav_bar a:focus, #nav_bar a:active {
background-color:#7A991A;
}
Another problem was the size of the input element. The only way I could get that right with any kind of browser consistency was to increase the line height. If that is not acceptable, you may have to set the height on the list items explicitly, and add overflow:hidden.
See result in jsFiddle.
PS you also had other errors: One input didn't end with />, which is mandatory for XHTML. And you had #nav_bar a:link,a:visited, which did not do what you wanted; you should hae written #nav_bar a:link, #nav_bar a:visited otherwise the style would have applied to all visited links, not just the ones in #nav_bar.
I have a small problem with my webpage. I have a combobox and I've written a CSS class for it. It works fine except in IE7. Can anybody give me a solution for that?
This is my CSS:
.textbox_short{
float:left;
width:150px;
padding:3px;
margin-left:10px;
/*margin-bottom:5px;*/
margin-top:5px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#666;
border:1px solid #F90;
}
And my HTML:
<select name="drop_country" class="textbox_short" id="drop_country">
</select>
IE<8 does not give padding and border to SELECT elements. Try to wrap SELECT inside a DIV or SPAN Follow this link
IE6/IE7 css border on select element
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 */
}