My simple div element is as below:
<div class="avatar">
<img src="http://quickshare.my3gb.com/download/testpic.jpg" />
</div>
(The original image is 216 * 216 pixels)
and my CSS is as follows,
.avatar {
float: right;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: absolute;
}
And the fiddle, http://jsfiddle.net/BMU4Y/2/
The question is, I cannot get the image to fit on the div within which it resides.
Any help would be much appreciated. [I also tried for a jquery image-resizer, but could not find anything that really works :( ]
Kindly note this is for my HTML 5 website being built with C# and MVC 4
The overflow is not needed here. And to make the image fit the div, it should have 100% heigh and width.
.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
position: relative;
}
.avatar img {
width: 100%;
height: 100%;
}
http://jsfiddle.net/BMU4Y/3/
Try this...
.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: relative;
}
.avatar img {
max-width:100%;
height:100%;
}
Just add at .css file
.avatar img{
width:100%;
height:100%;
}
If I'm right in understanding that you want the image to fit within your explicitly sized div, then adding the following to your css will make it work:
.avatar img {
height: 100%;
width: 100%;
}
.avatar
{
float: left;
border: 1px #ccc solid;
overflow: hidden;
width:60px;
height:60px;
}
.avatar img {
width:inherit;
height:inherit
}
.avatar img {
width: 100%;
height: auto;
display: block;
}
You need the image to be in display block and not inline which is by default.
Then give it 100% width (of its parent width), but for the height I've set it in auto. Not 100% because it will stretch it in both dimensions usually with strange results.
Inherit the width and height of div to Image. Add below CSS and it will work like charm.
Fiddle: http://jsfiddle.net/BMU4Y/8/
.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: relative;
}
div.avatar img
{
width:inherit;
height:inherit
}
Related
I want to replace the InputFile's rectangle with 'attach Icon'. I tried to set the URL of the icon to 'background-image' of InputFile but it had no effect.
This only demonstrates how to change the color of InputFile, not exactly what I need.
I use something similar for a colour picker.
<label for="fileinput" class="label-wrapper">
<span class="oi oi-paperclip"></span>
<InputFile id="fileinput" class="custom-input-hide" />
</label>
<style>
.label-wrapper:hover {
cursor: pointer;
}
.custom-input-hide {
width: 0;
height: 0;
overflow: hidden;
}
</style>
BlazorRepl
I think maybe this is what you are looking for.
HTML/Razor code
<div class="file-input-zone">
<InputFile />
</div>
CSS
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: black;
cursor: pointer;
position: relative;
width: 120px;
height: 120px;
background-image: url('paper-clip.png');
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
In the CSS code above, the file paper-clip.png is installed in wwwroot directory.
The button will look like a transparent paper-clip. In the image below, color changes on hover as well.
I have an MVC project, where I have two columns. On the left column, I have a buttons grid, and I want to have it maximum to be two buttons per row. Currently, it is 4 buttons per row and I tried flex: 0 1 50% but that didn't work. Currently, it looks like this:
Here is the code for the buttons view inside the left column and the styles:
Grid.cshtml
<div class="linkContainer">
<div class="linkContainer-grid">
#foreach (var link in Model.Links)
{
<div class="linkContainer-gridItem">
<a class="linkContainer-gridItem-link" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div><i class="icon #link.Icon"></i></div>
}
#link.Label
</a>
</div>
}
</div>
Grid.scss
.linkContainer {
padding: 1rem;
margin-bottom: 2rem;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #dddfe2;
.linkContainer-title {
color: #fff;
background: $colorBrandDarkBlue;
padding: 1rem;
border-radius: 5px;
margin: -.5rem -.5rem 1rem -.5rem;
}
.linkContainer-list {
list-style: none;
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
.linkContainer-item {
position: relative;
.linkContainer-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .75rem .5rem;
color: $colorBrandBlue;
font-weight: 400;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
background-color: transparent;
font-family: "Montserrat",sans-serif;
}
.icon:before {
font-size: 30px;
margin-right: 1rem;
}
}
.linkContainer-item:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px dotted;
opacity: .25;
}
}
.linkContainer-grid {
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
text-align: center;
flex-wrap: wrap;
.linkContainer-gridItem {
flex: 0 1 50%;
padding: 20px 10px;
background-color: $colorBrandBlue;
border-radius: 25px;
align-items: center;
justify-content: center;
width: calc(50% - 20px);
margin: 10px 0;
min-width: 100px;
max-width: 130px;
.linkContainer-gridItem-link {
color: white;
text-decoration: none;
}
.icon {
font-size: 30px;
margin-bottom: 0.25rem;
}
}
}
#media (min-width: 1024px) {
.linkContainer-grid {
justify-content: center;
.linkContainer-gridItem {
margin: 10px;
}
}
}
}
How can I make it two items per row whilst keeping the buttons the same size and alignments?
First of all, if you set a max-width on your .linkContainer-gridItem, it will display all 4 items in a row, because flex box is trying to put as many items as possible in a row, before it has to wrap.
In order to put 2 items per row, the first step is to remove min-width and max-width. In fact, you can remove width as well because you can control it via flex:.
demo: https://jsfiddle.net/davidliang2008/zv5tsrd1/22/
Now in order to display 2 items per row, you need to set the total item width to be 50%. But the property flex-basis: as well as width: is just meant content width. This might be a good time to review the box model: https://www.w3schools.com/css/css_boxmodel.asp
We need to figure out the correct content width so that the total item width, including borders, paddings and margins, would be 50%:
content width = 50% - borders - paddings - margins
On break point less than 1024px, you have 10px padding left and right, so the content width of the item should be
.linkContainer-gridItem {
flex: 0 1 calc(50% - 2*10px);
}
At break point 1024px and up, you have extra 10px margin left and right, so the content width of the item should be
#media (min-width: 1024px) {
.linkContainer-grid {
justify-content: center;
.linkContainer-gridItem {
flex-basis: calc(50% - 2*10px - 2*10px);
margin: 10px;
}
}
}
demo: https://jsfiddle.net/davidliang2008/zv5tsrd1/27/
I have a white space under my website.
http://braulionova-001-site18.atempurl.com/DirectorioMedico.aspx
I check css, break tags.
Some pages are fine but other have this white space under footer page.
Looks like the element .autocomplete_completionListElement has a visibility: hidden with height 200px.
visibility: hidden keeps the element there, with height and width but turns it invisible. Seems like you don't want it there since you tried hiding it. To get rid of it just use display: none.
you have a class in a your css named autocomplete_completionListElement which has a been given a height of 200px. try commenting the height and check as givne below. Hope this helps.
.autocomplete_completionListElement {
visibility: hidden;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
/* height: 200px; */
text-align: left;
list-style-type: none;
}
Hope this helps.
The problem is because of the element with class .autocomplete_completionListElement.
Update your code with the code below. It will work fine.
.autocomplete_completionListElement {
/*visibility: hidden;*/
display: none;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
}
Try to This CSS code..
.footer
{
background:#333333;
color:#848484;
font-size:12px;
font-size:12px;
font-family:Open Sans,sans-serif;
font-weight:bold;
text-align:center;
padding:7px 50px 10px 0px;
vertical-align:middle;
margin-top:10px;
}
I have created a small CSS, which I wanted to use to make my own styled DropDownList. I don't know if there is some sort of incompatibility and I'm still learning CSS and ASP.net, but when I tried my code in an online CSS tester, it worked perfectly.
.select {
padding: 3px;
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #212121, 0 -1px #191919 inset;
background: #333;
color: #fff;
border: none;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
padding-right: 18px;
}
}
label {
position: relative;
}
label:after {
content: '<>';
font: 11px "Consolas", monospace;
color: #fff;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 8px;
top: 2px;
padding: 0 0 2px;
border-bottom: 1px solid #ddd;
position: absolute;
pointer-events: none;
}
label:before {
content: '';
right: 6px;
top: 0px;
width: 20px;
height: 20px;
background: #333;
position: absolute;
pointer-events: none;
display: block;
}
This is my DropDownList:
<asp:DropDownList CssClass="select" id="DropPoke1" Width="80" runat="server" AutoPostBack="true" ViewStateMode="Enabled" EnableViewState="true" OnSelectedIndexChanged="DropPoke1_SelectedIndexChanged" />
Unfortunately, this does not work. Have I done something wrong or is it just not possible?
Edit: After adding the following line to my aspx, it worked:
<link href="CustomDropDown.css" rel="stylesheet" type="text/css" />
This is working fine. Please make sure you have properly included style sheet.
IF you are not calling your element by own created classes, you may need to inspect with chrome (or similar) your html.
calling the css by generic tags as "label" often won't work as a asp:Label use to be translated into an html span, not a html label
I have a FileUpload Control like this
<asp:FileUpload ID="fileuploader" runat="server" />
Now I want to apply css only on the Browse button part
How can I do this?
Styling an input tag with type="file" requires a bit of work, browsers don't behave similarly when you try to style them unfortunately.
There are a few methods of doing so though:
http://www.quirksmode.org/dom/inputfile.html
http://www.appelsiini.net/projects/filestyle
This is possible you can change the FileUpload control using following code.
Step 1: Change FileUpload control with this code on aspx page
<label class="file-upload">
<span><strong>Upload Image</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" >
</asp:FileUpload>
</label>
Step 2: now add below CSS code into your main CSS file
.file-upload {
display: inline-block;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family: Arial;
border: 1px solid #124d77;
background: #007dc1;
color: #fff;
border-radius: 6px;
-moz-border-radius: 6px;
cursor: pointer;
text-shadow: #000 1px 1px 2px;
-webkit-border-radius: 6px;
}
.file-upload:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
background-color: #0061a7;
}
/* The button size */
.file-upload {
height: 30px;
}
.file-upload, .file-upload span {
width: 90px;
}
.file-upload input {
top: 0;
left: 0;
margin: 0;
font-size: 11px;
font-weight: bold;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 12px Tahoma,sans-serif;
text-align: center;
vertical-align: middle;
}
.file-upload span {
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: 5px;
}
It's done.
apparently you cannot style them directly with CSS but you can "hack" a new style into them - read the following article for details
http://www.quirksmode.org/dom/inputfile.html