Div under div css not working - html

I am trying following code for executing one alignment of boxes in right side with two adjacent box in row, please check below code why that main DIV class list_right css in not executing.
Fiddle link.
<style>
.list_right {
float:right;
padding:40px 5px 0px 0px;
width:37%;
position:relative;
}
.part_1 {
width:50%;
float:left;
line-height: 1.7;
}
.logos {
float: left;
width:160px;
margin-left:0px;
margin-bottom:8px;
padding-left: 45px;
padding-top: 1px;
padding-bottom: 3px;
text-decoration: none;
font-family:'Volkhov', arial;
font-size: 19px;
letter-spacing: 1.3px;
line-height: 2.14;
color: #6d6e71;
border: 1px solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border-color: #41c7ee;
behavior: url(/css/pie/PIE.htc);
}
.logos:hover {
border-color: #6d6e71;
background-color: #41c7ee !important;
color: #ffffff !important;
text-decoration: none !important;
}
.site_1 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
.site_2 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
</style>
<div class="list_right">
<div class="part_1">
Sites
</div>
<div class="part_1">
Sites
</div>
<div class="d_hidden">
</div>
<div class="clear_both">
</div>

Seems to me (from your code) that you are not closing the list_right tag. Close it and it should work properly... try to indent your code, make it look more clean, so that in the future you will be able to see the problems yourself.

You have <style> tags in your css in your original fiddle link which demonstrates the problem your were having.
Delete them, they shouldn't be there.
That's what's interfering with the list_right class.
FIDDLE

Related

Left padding overwritten on overflow?

I got a textfield that expands when I start typing text, and indicates that it is OK since it has text - otherwise it's red, indicating it has not been filled out. I need left padding on this in all states, but when I write too much text and the text starts scrolling, the padding is ignored. Is there any way to fix this? I made a fiddle: https://jsfiddle.net/o1r9dp2L/1/
<div class="container"><div contentEditable=true id="test" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="Placeholder"></div></div>
CSS:
.container{
overflow: hidden;
margin:0px;
height:24px;
}
#test:not([value=""]) {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:0px;
padding-left:36px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
/*background-repeat: repeat-x 100% 100%;*/
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#000;
outline:0;
}
#test {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}
#test:empty {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}
The reason that there is a blank space to the left of the field is that I also have a checkbox there that can be used instead, that expands to cover the textfield and looks exactly the same. So either you fill in information, or you check the box to the left.
One way is to make the tick icon to have same white background color, so that it covers any overflowed text on the left. I also significantly reduced the size of the style code.
jsFiddle
body {
background: #fff;
}
.container {
position: relative;
margin: 20px 0;
}
.input {
cursor: text;
width: 100px;
display: inline-block;
vertical-align: top;
overflow: auto;
font-family: Quicksand, sans-serif;
font-size: 14px;
line-height: normal;
white-space: nowrap;
outline: 0;
border-radius: 3px;
border: 1px solid #999;
padding: 4px 10px;
box-sizing: border-box;
overflow: hidden;
}
.input:not(:empty) {
color: #000;
width: 130px;
right: 0;
padding-left: 24px;
}
.input:not(:empty):before {
content: "";
position: absolute;
left: 1px;
top: 1px;
bottom: 1px;
width: 22px;
border-radius: 3px;
background: #fff url(https://i.stack.imgur.com/A45oq.png) center / 70% no-repeat;
}
.input:empty {
background: pink;
color: red;
position: relative;
right: -24px;
}
.input:empty:before {
content: attr(data-placeholder);
}
<div class="container">
<div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>
<div class="container">
<div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>
Edit: The below is meant to show you that the padding is not being overwritten on overflow. What is happening is that the padding is increasing the width of the element and the background image is just that - a background. To get around this, you can use a psuedo element to allow that background image to go over text. The text is still there, but it is underneath the image.
If I were you, I would check out the following tutorial on bootstrap's input groups. It may be helpful for you to see how bootstrap does this. You can then use JavaScript to change the image or HTML structure based on the input's state.
The problem is that the checkmark image was being used as a background image within the div. There is no way to make a background image go over text.
However, you can use a psuedo element for this.
jsfiddle
I've edited the image in Photoshop to have a transparent background, and then converted to a base64 URL (so I didn't have to host the image).
The psuedo element uses two background images, the reddish background underneath the green checkmark. This psuedo element is positioned absolutely and therefore goes over the text as desired.
#test:not([value=""]):before {
content: '';
position: fixed;
top: 13px;
left: 9px;
display: inline-block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAABvElEQVQ4jZ2UQUgbQRSGPxMkG1QapaKVXAwVFCQKkqCIi4cGPEixWBFEpELAUqQX9VDEXFQQcUEkekoPxVNBsZQiSopQzUENoqJFxNaStBAPqe7FuBDDeBKiZKPsD+8w88//zYM3TA46EkLoWXcU2Z3vf//nV08QyTVT92FQ96AQ4uGKLne8XPRtWxd9Qv5x+lsIgelRbWRS6q9jfm9TDoILUy0zjeVdgHHg2c6X7r4k/SAx6Xw1UmNmyzjwcrdB+RcvB3AWtsW8DpRbyxBwf2elfRbewHMm3VW9ElwZB6phORDX7ACt9paQnMdquq0PTCUtqnpVpKWwpm9HjkKej9CJqZJBZ/Hw/Zgu0L88NlW2NvG/NrhxEUlRAYB24ArE1CKAbnvrV7fE+qOBTU9sagkQTXy39KyfrGhgVQ9DHgXeYarEW12gZMrpAmvktxOfCyUFIHyx4PAfxxIb8bNxAE9JczhTd1mBYL10y17lkwU/aPh+BhhKAJTirXo2rZfKPmVzcayj7sW31xCEa6IA+fV4bCwZAwKUNq2O2p+GbpcDZdVz6e/uvnL0jLu/TdKiqVqeZpawFeSeZ7v/BqqSqeSPBBXnAAAAAElFTkSuQmCC'), url(http://i65.tinypic.com/1z3xah4.png);
background-repeat: no-repeat, repeat-x;
height: 15px;
width: 25px;
}
I've also removed the other instance of the background image.
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
Update:
To handle the case where the text is then cleared, I've added the following:
#test:empty:before {
content: '';
background-image: none;
width: 0;
position: static;
}

Button with an icon inside it

I want to know how to add a small icon in this button aligned on left with the text
<a class="button" href="#">button</a>
.button { padding: 15px 15px;
background: #000;
border-radius: 3px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;}
JSfiddle
Add a span to your text and put a background aligned to the left for this span.
<a class="button" href="#"><span>button</span></a>
.button span {
background:url('http://www.freesmileys.org/smileys/smiley-laughing002.gif') no-repeat;
padding-left: 20px;}
Fiddle -> http://jsfiddle.net/fg3tK/6/
If I understand your question correctly, here is the example - http://jsfiddle.net/u2py3/
.button {
border: 1px solid #563d7c;
border-radius: 5px;
color: white;
padding: 5px 10px 5px 25px;
background-image:
url(https://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6);
background-position-y: 465px;
background-position-x: 5px;
background-color: #563d7c;
}
Wouldn't this do it?
<a class="button" href="#"><img src="xxx"/>button</a>
Or are you looking for somthing more complicated?
It's a pretty common practice to add padding-left to your button, and position a background to fill that gap that's created.
.button {
background: #666 url('https://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6') 5px -188px no-repeat;
border-radius: 3px;
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 10px 15px 10px 40px; /*Add some left padding*/
text-transform: uppercase;
}
Here's a FIDDLE
.button {
background: #000 url('https://cdn1.iconfinder.com/data/icons/iconslandtransport/PNG/24x24/CabrioletRed.png') 5px 45% no-repeat;
padding: 15px 15px 15px 35px;
border-radius: 3px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
In case that you have multiple buttons and you want different image for each use :nth-child() pseudo class to target each button e.g.
.button:nth-child(2) {
background: red url( ... ) 5px 45% no-repeat;
}
.button:nth-child(3) {
background: blue url( ... ) 5px 45% no-repeat;
}
...

CSS Styling Issues

Code:
<style>
.RoundButton
{
text-align: center;
text-decoration: none;
font-size: 34px;
width: 70px;
height: 40px;
background-color: #ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #000000;
padding: 5px;
}
.RoundButton:link {color: #000000;}
.RoundButton:visited {color: #000000;}
.RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
.RoundButton:active {color: #000000; border: 5px solid #0000ff;}
</style>
Then I have some HTML:
<center><div class="RoundButton">Hi</div></center>
When I view it it shows the default link colors, but the round button changing color
works. I looked on W3Schools, and their example looks like mine, but works. Help?
Please make your question more specific. What is the issue on your styling?
Then change the .RoundButton:hover to a:hover {} to what ever you like.
The HTML:
<div class="RoundButton">Hi</div>
The CSS
.RoundButton
{
text-align: center;
text-decoration: none;
font-size: 34px;
width: 70px;
height: 40px;
background-color: #ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #000000;
padding: 5px;
margin:0 auto;
}
.RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
.RoundButton:active {color: #000000; border: 5px solid #0000ff;}
a:link {color: #000000;}
a:visited {color: #000000;}
The fiddle.
I centered the div using margin:0 auto instead of the <center> tag, and adjusted the CSS.

Adding background image to button using CSS

I am trying to add a background image to a button (or link with the same class) which already has a background color.
Here is the jsfiddle: http://jsfiddle.net/BNvke/
The button looks great by itself, but I am trying to make it so that if I add a certain class, the padding will be adjusted and a background image will be displayed, however the image does not show. Here is the CSS/HTML:
.button {
padding: 10px;
margin-right: 8px;
margin-bottom: 10px;
font-family: Arial, Tahoma, Verdana, FreeSans, sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
display: inline-block;
white-space: nowrap;
line-height: 1em;
position: relative;
outline: none;
overflow: visible;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 1px 1px 2px 0 #CCCCCC;
-moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
-webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
}
.button_blue {
border: 1px solid #305875;
color: #FBFBFB;
background-color: #3D6E97;
}
.button_blue:hover {
color: #FBFBFB;
opacity: 0.9;
filter: alpha(opacity=90);
}
.button_about {
background-image: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
padding-left: 35px;
padding-right: 15px;
}​
<p><a class="button button_blue">Without Background</a></p>
<p><a class="button button_blue button_about">With Background</a></p>​
How can I get that background image to show?
see http://jsfiddle.net/BNvke/1/
just change
background-image url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
with
background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
and move up the last rule so the rule about background-color defined for .button_blue can be applied on cascade
.button {
background: url(http://i47.tinypic.com/2ni0ahd.png);
background-repeat: 3px 5px no-repeat;
}

css different link styles

I am trying to get different 's to look differently, depending on the context. For example, in my html I have
<li> Home </li>
<li> Types of Insurance </li>
<li> Insurance Basics </li>
<li> Customer Center </li>
<li> About </li>
and in my css I have
.navlink : link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink : hover
{
background-color:#ADD8E6;
}
.navlink : visited
{
background-color:#ADD8E6;
}
But this is not working (the links appear unstylized). How would I fix this?
There must be no space before or after the :.
You need to get rid of the space before and after the colon (:).
You can also minimize your code by doing this:
.navlink {
// styling for unclicked link
}
.navlink:hover, .navlink:visited {
// styling for hover/visited state
}
I'm combining hover and visited because the only change you've made is the color, and it's the same for both.
Demo.
#nav{
float: left;
display: block;
font-size: 16px;
/*font-weight: bold;*/
font-family: 'Georgia', serif;
}
#nav>li{
display: block;
float: left;
line-height: 36px;
padding-right: 10px;
margin-left: 3px;
margin-right: 3px;
background: url(../img/nav-bullet.png) no-repeat center right;
}
#nav li>a:first-letter {
font-family: 'YataghanRegular', 'Georgia', serif;
font-size: 20px;
}
#nav li>a{ /* Parent Menu without hover*/
text-decoration: none;
color: #000000;
/*color: #CC3700; 606060*/
padding: 0px 10px 0px 10px;
display: block;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#nav li:last-child{
background: none;
}
#nav>li:hover>a,
#nav>li.current-menu-item>a{/* Parent menu color with hover */
/*color: #eee;
background: #363636;*/
color:#000000;
background: #cce4ff ;
/*font-size: 12px;*/
/*background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));
background: -moz-linear-gradient(top, #000000, #353535);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0);*/
/*text-shadow: 0 -1px rgba(0, 0, 0, 0.7);*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
box-shadow: 0px 1px 2px rgba(0,0,0,.5);
}
Try This..