Im creating a moodle theme and i have a button image that i need to use for my navigation links but cant seem to figure out how to expand and contract the button image to fit the link text
.headingblock {
padding-bottom:1px;
padding-left: 2px;
padding-right: 2px;
padding-top: 1px; /*background: none repeat scroll 0 0 #8d969c;*/
font-size:12px !important;
background: url([[pix:theme|top-nav-link1]]) no-repeat;
}
h2.headingblock {
background-color:#8d969c;
}
.headingblock input[type="button"]{
background-image:url([[pix:theme|search_button_bg3]]) !important;
background-color:#8d969c;
background-color:#fff;
border-radius:0;
padding: 0px 0px 0px 5px;
margin: 0px;
border: none;
height: 20px;
width: 58px;
font-weight:bold;
font-size:13px;
}
Related
I'm having issues with getting this code player in progress to look proper:
http://invigorateme.net/viperbox.html
When I hover over a list item (the list items are the four tabs on top), the background changes, but it doesn't fill the space for the two on the sides. I was trying to learn from another source code, but I just couldn't get the tweaking quite right, and am still having issues.
The Question: How can I make it so when you hover over a list item, the background changes and fits the background?
If you go to my site link, you'll see what I mean when you hover over one of these elements. It simply changes color, but not as I expected.
Here's the relevant CSS behind it, let me know if it's horrendous and what I can do better, I'm still learning:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
border: 2px solid #B7B7B7;
border-radius: 10px;
margin: 0px auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0px auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0px;
padding: 7px 5px 0px 5px;
border-right: 2px solid #B7B7B7;
}
#codetabs li:hover{
background-color: grey;
}
If anyone thinks I might have left out any important code or info, let me know that as well. I didn't believe the HTML was necessary.
Basically your problem is that your list items are all rectangles that are contained in a pill shaped box (id="codetabs"). If you want the background color to fill each button, you're going to need to use some pseudo classes (:first-child and :last-child) to specify border radius values on your first and last li items.
This is the working CSS:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
margin: 0 auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0 auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0;
padding: 7px 5px 0px 5px;
border-width: 2px 2px 2px 0;
border-color: #B7B7B7;
border-style: solid;
}
#codetabs ul :first-child {
border-radius: 10px 0 0 10px;
border-left-width: 2px;
}
#codetabs ul :last-child {
border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
background-color: grey;
}
http://jsfiddle.net/d09xgfzc/1/
I am trying to make a parent div fit it's width to an image displayed. I am having a lot of trouble in doing so, it seems to auto adjust to very large.
Image: http://puu.sh/1vsqA
content is the body part
image is the white box the image is contained in
image img is the actual image inside the box itself.
CSS:
html, body
{
margin:0;
padding:0;
border:0;
height:100%;
width:100%;
}
body
{
background-image: url('./page_bg.gif');
background-repeat: repeat;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
}
#navlinks
{
width: 100%;
height: 28px;
line-height: 28px;
background-color: #000;
color: #FFF;
}
#links
{
list-style-type: none;
float: left;
padding-left: 5px;
margin: auto;
}
#links li
{
float: left;
padding-left: 5px;
padding-right: 5px;
}
#content
{
display: block;
padding: 40px 40px 40px 40px;
}
#image
{
display: inline-block;
border: 1px solid #CCC;
border-color: #CCC #AAA #AAA #CCC;
padding: 3px;
margin-left: auto;
margin-right: auto;
background: #fff;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
max-width: 1107px;
}
#image img
{
}
You could try setting #image to display: inline-block. I could be wrong but I 'think' that's what you're looking for.
Here is a link example: http://jsfiddle.net/RBWYL/
Please try to float:left your parent div
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}
I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle;
}
Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
}
button.enter {
padding:0;
}
You need to mention margin and padding as 0 coz button has the default margin and padding.
Add this below code
a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}
Here is working demo http://jsfiddle.net/6Ygc2/
When I hover over the whole button, I would like it to appear over the whole button. Because the button has a background image, i am not able to do it correctly. The buttons looks like these:
The CSS appears like this:
#tablist{
padding: 0px auto 0px auto;
height: 32px;
}
#tablist li{
display: block;
width: 150px;
height: 35px;
float: left;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
margin: 0px auto 0px auto;
text-align: center;
padding-top: 5px;
cursor: hand;
cursor: pointer;
}
#tablist ul:hover{
background-color: red;
}
.tablink{
text-decoration:none;
}
.locked{
background: url('../img/DashboardButtonsLocked.png') no-repeat;
background-position:5px -85px;
}
.unlocked{
background: url('../img/DashboardButtonsLocked.png') no-repeat;
background-position:4px -2px;
}
How do i correct it? Need some guidance over it.
Try overriding the background property at hover:
#tablist ul:hover{
background: red;
}
Here is a demo : http://jsfiddle.net/taQfU/
Hey i think you should give to #tablist li:hover
As like this
#tablist li:hover{
background-color: red;
}