Trying to get a logo onto a website. Eventually use it as a link to the main page. But it wont even show up when I use css. It does link when I use HTML So i know its not the image. CSS is in its own folder, and Image is in its own folder. So I dont think i have the url incorrect.
CSS
.logo {
background-image: url(../images/logo.png);
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
width: 1000px;
height: 100px;
}
HTML
<body>
<div class="logo">
</div>
</body>
Feel like Ive tried everything.
HERE IS THE ANSWER
css
.logo {
background: url(../images/logo.png) ;
background-size: 200px 200px;
width: 200px;
height:200px;
}
Try changing background-image to background and adding quotation marks.
.logo{
background: url('../images/logo.png');
Related
I made a webpage with a sticky header that works fine on a desktop but not so well on mobile. For example, on an iPhone, if you turn your phone on to landscape mode, safari's tool bar will cover my sticky header. Similarly opening a link to my page on instagram will result in the same issue (instagram header will cover mine).
Heres's the HTML
<div id="container">
<div id="infotab-mobile">
<div id=rosemenu>
<div id="rose">
<img class="inforose" id= "roseimg" src="images/rose.png">
</div>
</div>
</div>
and the CSS:
#infotab-mobile{
display: initial;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
position: fixed;
z-index: 999;
}
#rosemenu{
position: fixed;
width: 100%;
height: 20%;
display: inline-block;
}
#rose{
position: relative;
width: 100%;
vertical-align: top;
text-align: center;
background: rgba(232, 232, 232, 0.96);
padding-top: 2%;
padding-bottom: 2%;
}
#roseimg{
margin: 0 auto;
text-align: center;
display: -webkit-box;
}
I've also noticed that using -webkit-overflow-scrolling: touch; disables an ios feature that allows you to scroll to the top of a web page by taping the safari tool bar. Has anyone discovered any work arounds?
As you can see
, there is a 1px border around the widget. It only appears on iOS. I can see the CSS that's causing this in the inspector:
.widget {
...
border: 1px solid #e5e5e5;
...
}
This is the iframe:
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/307068209&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" scrolling="0" frameborder="0"></iframe>
I know CSS can't effect elements coming from a different domain in an iframe, but client says it looks bad. Is there something that I might be doing to cause this to appear? If not, is there a way I can remove this?
You could hide/clip the outermost 1px of the entire iframe, but that may or may not have a desirable effect. http://codepen.io/anon/pen/evKLMr
div {
overflow: hidden;
width:398px;
height:198px;
}
iframe {
position: relative;
top:-1px;
left:-1px;
width: 400px;
height: 200px;
}
I ended up taking advice from this post:
CSS: Inset shadow by parenting div over iframe
And added this bad boy:
.iframe-wrapper:before{
position: absolute;
content: '';
top: 0;
left: 0;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .4) inset;
z-index: 1;
width: 100%;
height: 100%;
}
Which hides the border well enough
It should be
frameborder="no"
rather than
frameborder="0"
Should I be able to use EL in css to access an img in the resources folder of a jsf 2 app? It does not seems to be working. In my css I've below:
.sectionDivider {
background-image: "#{resource['default:img/dashes.png']}";
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
When I access the page thru the browser, the background-image is not showing. When I view the CSS using browser Developer tools, the CSS looks like below (The background-image is missing):
.sectionDivider {
WIDTH: 100%; BACKGROUND-REPEAT: repeat-x; BACKGROUND-POSITION: center 50%; HEIGHT: 1px; OVERFLOW: hidden
}
I found the problem. I forgot to put url() in the background-image style. I changed to do below and it is working now:
.sectionDivider {
background-image: url('#{resource['default:img/dashes.png']}');
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
Simply put the question is - is there a way to align link text within an action link vertically?
I need to make a button-looking Html.ActionLink control.
There is a reasonably good example at Html.ActionLink as a button or an image, not a link
I have implemented this approach, however, I need not just an "image" button,
but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.
Here is what I have (Razor):
#Html.ActionLink(#commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { #class = "commiteeButton" })
and CSS:
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
}
The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically).
I do not know how to center link text vertically, so that it can be located right in the center of an image.
Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?
<a class="nonunderlinedlink" href="#Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
<div class="commiteeButton">
<p class="pstyle">#commitee.Name</p>
</div>
</a>
Try the following changes in your css
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}
Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.
Thank you all for your quick reply!
I know it's a bit late but you could also use line-height: 50px; to center your text vertically