I've got a grid that I am generating on a webpage, with a some styling attached to it. The header has a background image applied to it. When the header is ONE line deep, it looks fine. The second that the header spans two lines (with a line break) it looks like the attachment. I've tried fiddling with the height but I just can't get it to take.
<style>
.Grid {background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; font-family:Calibri; color: #474747;}
.Grid td {
padding: 2px;
border: solid 1px #c1c1c1; }
.Grid th {
padding : 4px 2px;
color: #000000;
background: #363670 url(images/grid-header.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.Grid .alt {
background: #fcfcfc url(images/grid-alt.png) repeat-x top; }
.Grid .pgr {background: #363670 url(images/grid-pgr.png) repeat-x top; }
.Grid .pgr table { margin: 3px 0; }
.Grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.Grid .pgr a { color: Gray; text-decoration: none; }
.Grid .pgr a:hover { color: #000; text-decoration: none; }
</style>
To the .Grid th try adding
background-size: auto 100%;
The first variable is width, which we want whatever the normal behavior is because it's already working, and the second is height and is saying use 100% of available height.
Related
As the title says, I'd like the "background" element to fit the side of the screen (you can see it doesn't go all the way to the right), as well as to go all the way to the bottom of the screen. Can anyone help?
The code can be seen here: codepen
(specifically these elements)
```
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border: 3px solid black;
margin: 0 auto;
}
.text {
margin: 0 30px 0 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
height: auto;
}
.text p {
margin: 5%;
font-weight: bold;
color: #000000;
opacity: 1;
}
```
Setting margin: -20px; on the <header> pulls it out of the page, and with that creating the horizontal scroll bar, by removing the margin: -20px; the header will be placed fully in the document and the scrollbar will disappear.
codepen
Setting margin and padding to 0, then setting background width to 100% seemed to do the trick. Is this the desired result?
* {
margin: 0px;
padding: 0px;
}
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border: 3px solid black;
margin: 0 auto;
width: 100%;
}
.text {
margin: 0 30px 0 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
height: auto;
}
.text p {
margin: 5%;
font-weight: bold;
color: #000000;
opacity: 1;
}
It's happening because you gave border: 3px solid black; in your background class that's why it is not showing correctly.
If you want to use border at top and bottom then you can do like this
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border-top: 3px solid black;
border-bottom: 3px solid black;
margin: 0 auto;
width: 100%;
}
So the conclusion is you have to remove the border from left and right after then you can get the result you want.
Here you can see difference Codepan
Hope this will helps you
I am making a modal view, using bootstrap framework, as shown in the figure , these are two buttons , I want hover effect when , mouse points on, using CSS but it isn't working,
#yesbut,#nobut {
width: auto;
height: auto;
display: inline-block;
padding: 10px 35px;
text-align: center;
background: #2e6c96;
color: #fff;
font-size: 16px;
text-decoration: none;
border: 1px solid #2e6c96;
outline: none;
text-transform: uppercase;
}
#yesbut :hover{
background: #fff;
border: 1px solid #fff;
}
#nobut :hover{
background: #fff;
color: #2e6c96;
border: 1px solid #fff;
}
<div id="yesbut" >YES</div>
<div id="nobut">NO</div>
enter image description here
#yesbut :hover{ /*Remove the space*/
background: #fff;
border: 1px solid #fff;
}
You got error in selectors corrected is:
#yesbut:hover{
background: #fff;
border: 1px solid #fff;
}
without space between #yesbut/#yesno and :hover.
Space mean you are targeting elements inside that particular element e.g. children of #yesbut.
You need to remove the spaces. If you put a space before the pseudo-class it means that you want to select a child of e.g. #yesbut instead of the element itself.
#yesbut,#nobut {
width: auto;
height: auto;
display: inline-block;
padding: 10px 35px;
text-align: center;
background: #2e6c96;
color: #fff;
font-size: 16px;
text-decoration: none;
border: 1px solid #2e6c96;
outline: none;
text-transform: uppercase;
}
#yesbut:hover{
background: #fff;
border: 1px solid #fff;
}
#nobut:hover{
background: #fff;
color: #2e6c96;
border: 1px solid #fff;
}
<div id="yesbut" >YES</div>
<div id="nobut">NO</div>
As you can see, when the div expands I have no option to scroll down and I'm wondering how I would go about fixing this. Here is my css
<style>
#cust_info {
width: 300px;
min-height:350px;
margin: 0 auto;
padding: 1em;
background-color: #fff;
border-radius: 25px;
border: 2px solid #66CCFF;
padding: 20px;
position: fixed;
top: 100px;
left: 40px;
font-family: arial;
}
.more {
display: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff; }
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left; }
a.hideLink {
background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; }
</style>
I gave the div a min height so it would expand without text leaving the area, but when the div expands past the screen I lose most of the div.
Please remove position:fixed from #cust_info id.
Removing that will automatically give a scroll in your page.
For keeping it left align, just give float:left to #cust_info.
I have two buttons, that I would like to have one on top, and one on the button of each other, how ever when I went to see how they looked, both buttons were inside of each other, I Cant seem to find the issue, but here's my code.
CSS
body { font-size: 16px; width: 600px; margin: 25px auto; }
button {
color:white;
display: inline;
margin: 30px;
padding: 7px 35px;
font: 300 150% langdon;
background: transparent;
border: 3px solid black;
cursor: pointer;
}
button:hover {
background: #f7f7f7;
border: 1px solid #8b8b8b;
}
button:active {
background: #2e2e2e;
border: 1px solid black;
color: white;
}
Currently the buttons show side by side: see this fiddle.
If you want the next button on a new line, then use display:block see this fiddle.
I have a vertical menu having an item "Click here to get the scientific name".
on hover it is showing like
I need to get the overflow part after the black background image to be in the next line(i cannot increase the image width at all.). How can I write the style for that.
css:
on hover
{
display: block;
background: url('/../.png') no-repeat 0px 2px #2F2F31;
text-decoration: none;
color:..;
}
This is coming under
<td>
<div id="first">
<ul id="second">
<li>Click here to get the scientific name
And css:
#first {
display: block;
width: 180px;
min-height: 50px;
float: left;
}
ul#second {
display: block;
clear: both;
margin: 50px 0px 12px 0px;
border-bottom: 1px solid
#C8C8C8;
}
ul#second li {
border-top: 1px solid
#C8C8C8;
padding: 0px;
display: block;
}
ul#second li a {
color:
#004C8E;
margin: 4px 0px 4px 0px;
padding: 4px 0px 4px 12px;
display: block;
text-decoration: none;
font-size: 12px;
background: url('/../.png') no-repeat 0px 2px;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background:
transparent;
}
On hover, you should explicitly set the width of the element to equal the width of the image.
FOr this you can use word-wrap:break-word;. Write like this:
p{
word-wrap:break-word;
}