I am trying to make a tabbed interface so that there is no line underneath the selected tab, regardless of the font size of the text inside the tab, and using only CSS2. I added a bottom border but am not sure how to remove the bottom border underneath the selected tab. If I try a negative margin it simply adds a space between the bottom border and the tabs. I could try using an image to create the bottom border instead of using the bottom-border CSS feature; however, I'm trying to avoid this. Any ideas?
http://jsfiddle.net/yet5uehy/
HTML:
<body>
<div id="tabs">
<ul>
<li><span>Tab1</span></li>
<li id="selected"><span>Tab2</span></li>
<li><span>Tab3</span></li>
</ul>
</div>
</body>
CSS:
body {
/* Centers and adjusts length of the line that is
separating the tabs from the rest of the page */
margin-left: auto;
margin-right: auto;
width: 98%;
}
#tabs {
float: left;
width:100%;
font: 12px Arial;
/* Adds line separating tabs from rest of page */
border-bottom-style: solid;
border-bottom-color: #cccccc;
border-bottom-width: 1px;
}
#tabs ul {
list-style: none;
margin: 0;
/* Adds padding on sides of the entire tabbed bar */
padding:5px 5px;
}
#tabs ul li {
float:left;
background-image: url('righttab.jpg');
background-repeat: no-repeat;
background-position: right top;
/* Adds space between each tab */
margin:0px 3px;
padding:0;
}
#tabs ul li a {
display: block;
float:left;
text-decoration: none;
color: #000000;
background-image: url('lefttab.jpg');
background-repeat: no-repeat;
background-position: left top;
/* Adds padding on sides of hyperlink area
to reveal curved edges of tab */
padding:0px 3px;
margin:0px;
}
#tabs ul li a span {
float: left;
background-image: url('midtab.jpg');
background-repeat: repeat-x;
background-position: center top;
/* Adds padding between the tab text
and the edges of the tab */
padding:3px 5px;
margin:0px;
}
/* Formatting for selected tab */
#tabs li#selected {
background-image: url('right-selected.jpg');
background-repeat: no-repeat;
background-position: right top;
}
#tabs li#selected a {
display:block;
font-weight: bold;
background-image: url('left-selected.jpg');
background-repeat: no-repeat;
background-position: left top;
}
#tabs li#selected a span {
background-image: url('mid-selected.jpg');
background-repeat: repeat-x;
background-position: center top;
}
Here you go: http://jsfiddle.net/th8bucda/
I modified the end of your css for the selected item:
#tabs li#selected a {
display:block;
font-weight: bold;
background-image: url('http://s10.postimg.org/kberhjcr9/left_selected.gif');
background-repeat: no-repeat;
background-position: left top;
**border-bottom-style: solid;
border-bottom-color: #fff;
border-bottom-width: 5px;
margin-bottom:-5px;**
I created a fiddle with what I guess can help you in the right direction. Because I have no clue how your images look like, this fiddle is without images.
The only modified CSS is:
#tabs li#selected {
background-image: url('right-selected.jpg');
background-repeat: no-repeat;
background-position: right top;
/* added: */
background-color: #ffffff;
height:21px; // one pixel more then original tab
position: relative;
margin-top:-1px;
top:1px; // position tab over bottom border
}
See fiddle: http://jsfiddle.net/hf5th1wz/
Related
I have an input that is positioned inside of a div. When I set the div background color it also changes the input background color. The input has a background image, so I can't simply set the background color for the input.
Thus, I need a way to change the background color of the input that is inside of the div while keeping the background image of the div.
CSS:
#searchDiv{
background:#606060;
position:relative;
}
#topSearch{
font: 40px Segoe UI Light;
width:94%;
height:60px;
text-indent: 62px;
background:white;
background: url('search_icon.png');
background-repeat: no-repeat;
background-position: left;
background-size: 60px;
margin: 10px 3% 10px 3%;
}
HTML:
<div id="searchDiv">
<input type="search" id="topSearch"></input>
</div>
Change the input's style like this:
#topSearch {
font: 40px Segoe UI Light;;
width:94%;
height:60px;
text-indent: 62px;
background-color:white;
background-image: url('search_icon.png');
background-repeat: no-repeat;
background-position: left;
background-size: 60px;
margin: 10px 3% 10px 3%;
}
add an !important to your input background color
#topSearch{
font: 40px Segoe UI Light;;
width:94%;
height:60px;
text-indent: 62px;
background:white !important;
background: url('search_icon.png');
background-repeat: no-repeat;
background-position: left;
background-size: 60px;
margin: 10px 3% 10px 3%;
}
try background: #fff url('search_icon.png') no-repeat center left;
or if you declare multiple backgrounds as shown in your code, comma separate them
In your css for #TopSearch you have the 'background' attribute twice. It will always read the last one. So even thought you are setting it to white you are overwriting it with the very next line for the image.
Change
background: white;
to
background-color: white;
And change
background: url('search_icon.png');
to
background-image: url('search_icon.png');
I am applying search icon in every input textbox.
My problem comes with icon when there is some value in it.
you can see it here-
Fiddle
When I am doing focus in, then the search icon goes hidden, But how do I manage so it keeps hiding this icon when there is some value in it?
css-
.input-search {
background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
}
.input-search:focus {
background-image:none;
}
I could do It with jQuery easily, but is there any way of doing it with CSS only?
I've updated your fiddle, you can try it out!
http://jsfiddle.net/X7k2B/6/
HTML:
<input
type="text"
id="myInput"
placeholder="Some Fallback Text" >
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
background-position: 0 50%;
background-repeat: no-repeat;
}
This looks like a good option
<style>
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
http://jsfiddle.net/s6G57/
So in your case it would look like this
<style>
.input-search:invalid {
background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
}
.input-search:valid {
background: #fff;
}
</style>
then just add required to your input
How can I put text and image in a same line, like centered to image?
I tried some method, like vertical-align:middle; display: inline; but not working... where is my mistake?
Now:
my css code:
<style>
.entryDetailX {
float: right;
background: #2B587A;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
font-weight: bold;
color: #FFF;
padding: 6px;
}
.date {
float: right;
font-size: 9px;
padding-top: 1px;
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) top left no-repeat;
padding-left: 20px;
margin-right: 10px;
}
.nick {
float: right;
margin-right: 20px;
color: #cc9900;
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) top left no-repeat;
padding-left: 20px;
}
</style>
HTML:
<div class="entryDetailX">
<span class="date">18.01.2011 00:50:55</span>
<a class="nick">phantasm</a>
</div>
Thanks
You just need to Add the
background-position:left center;
Check on Fiddle
The images are background images and you need to set their position in the background css property. So, instead of top you can set center.
.date {
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left center no-repeat;
}
.nick {
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left center no-repeat;
}
If the above doesn't work, you can set how low the image to be in pixels. So, if you want the images to be 8px lower you can set
.date {
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left 8px no-repeat;
}
.nick {
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left 8px no-repeat;
}
There is a property, named background-position, to decide the background position. It takes two values, one for horizontal and one for vertical position. It could take center for both values.
When you write the following line of code, you set the background-position using the shorthand background. You explicitly ask to align the background is the top left corner.
background: <background-image> <background-position> <background-repeat>;
background: url() top left no-repeat;
You should write this code to vertically center your background image:
background: url() center left no-repeat;
You can play with this property on this jsfiddle.
Cheers,
Thomas.
I have a list of nav items that I want to eventually be able to swipe through so I've created an unordered list which initially has a width of 1000% for testing and the links are positioned inline-block. This works well if there are enough links to fill the whole width of the page but if there is only a few links they get stuck to the left of the nav, ideally what I would like to do is have these centered. Ive tried adding text-align: center to the nav but this centers the links in the 1000% wide space and not the 100% page width. Can anyone recommend a solution as I thought this may be achievable with just CSS
JS Fiddle (with just a few links): http://jsfiddle.net/HS4VE/
CSS
nav {
padding: 10px 0;
overflow: hidden;
text-align: center;
border: 1px solid #cccccc;
border-left: 0;
border-right: 0;
}
nav li {
display: inline-block;
vertical-align: middle;
zoom: 1;
margin-right: -4px;
position: relative;
}
nav a {
color: white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #454545), color-stop(100%, #363636));
background-image: -webkit-linear-gradient(#454545, #363636);
background-image: -moz-linear-gradient(#454545, #363636);
background-image: -o-linear-gradient(#454545, #363636);
background-image: linear-gradient(#454545, #363636);
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 0 15px;
width: 186px;
display: block;
border-right: 1px solid white;
text-align: center;
}
nav a.is-active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fe57ae), to(#fe329b));
background-image: -webkit-linear-gradient(#fe57ae, #fe329b);
background-image: -moz-linear-gradient(#fe57ae, #fe329b);
background-image: -o-linear-gradient(#fe57ae, #fe329b);
background-image: linear-gradient(#fe57ae, #fe329b);
}
.inner {
width: 1000%;
}
Use this:
.inner {
white-space:nowrap;
max-width: 1000%;
}
Demo: http://jsfiddle.net/HS4VE/3/
I am trying to build a navigation menu using nested lists, however whenever I set a height for the li's it breaks the lists and the sub menus lay over the final li, I have link to what I mean,
Nested List Example
How can I fix my code so I achieve something similar to the following?
List item
List item
Sub List item
Sub List item
Sub List item
Sub List item
List item
Change your CSS to this.
.seconday_nav {
width: 95px;
float: left;
margin: 32px 0px 0px 0px;
}
ul.subnav {
margin-left: 60px;
}
.seconday_nav ul.subnav li {
width: 93px;
text-align: right;
padding: 10px 0px;
border: 1px solid green;
display: block;
height: 25px;
}
.seconday_nav ul li a, .seconday_nav ul.subnav li a {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
display: block;
width: 100%;
height: 100%;
padding: 0px 10px 0px 10px;
}
What I did, is put a margin-left of 60 only on your sub navigation. This now pushes that UL out from the left and gives it the appearance your looking for.
Several problems here:
.seconday_nav {
width: 95px;
float: left;
margin: 32px 0px 0px 0px; }
.seconday_nav ul li, .seconday_nav ul.subnav li {
width: 93px;
text-align: right;
padding: 10px 0px;
border: 1px solid green;
display: block;
height: 25px; } /* PROBLEM 1 */
.seconday_nav ul li a, .seconday_nav ul.subnav li a {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
display: block;
width: 100%; /* PROBLEM 2 */
height: 100%;
padding: 0px 10px 0px 10px; }
Problem 1: you are giving height of 25px to element which contains all sublist items .seconday_nav ul li affects li that contains subnav.
Problem 2.: You are giving padding to element which width is declared to 100% which always gives 100% of parent + padding so it overflows parent. Since you already give a elements display: block there is no need to give them 100% width, only height.
That should help you start solve your problem :)