I can't find a way to do this
There seems to be padding placed above and below the element, although I have set it zero
https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview
<div>
<button>hello</button>
</div>
<table><tr><td>
<button>hiya</button>
</td></tr></table>
td,
div{
padding: 0;
height: 10em;
border: solid;
}
button {
height: 100%;
width:100%;
border:solid 10px #f00;
}
I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!
Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end
Thanks in advance
ios pic
chrome on win 10 (desired result)
Thebutton, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.
Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:
button
{
height: 100%;
width:100%;
padding:0;
margin:0;
}
<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>
Well, this is embarrassing but it meets W3C requirements.
For one table cell in the row:
td, div
{
padding: 0;
height: 10em;
border: solid;
display:block;
}
button
{
height: 100%;
width:100%;
border:solid 10px #f00;
}
But it doesn't resolve problem that button is replaced element. It is still in container made from <td/> element.
Related
I need help keeping my footer stuck to the bottom, but not overlap the upper elements either. I'm still fairly new/rusty to this since it took me 2 years to find a web job after college, so I haven't kept up as much as I should have.
Anyways,
This is the format of the html I have. I want the "footer" to be stuck at the bottom so when they scroll up from the bottom it stays. But I also don't want it to be pushed up too high to make white space below it.
I've been trying to use a "position: absolute" style for the footer to keep it on the bottom. But I just read somewhere this bumps it out of the regular flow and that's what causes overlapping.
So how can I reformat my styles to allow the footer to stay below, but not overlap?
HTML:
<html>
<header></header>
<body>
<div class="content">
<div class="hd">Content of header</div>
<div class="bd">Content of body</div>
<div class="ft">Content of footer</div>
</div>
</body>
</html>
CSS: (basic parts)
div {
display: block;
}
*, *:before, *:after {
box-sizing: inherit;
}
.hd {
position: static;
flex: 0 0 auto;
}
.bd {
position: relative;
flex: 1 0 auto;
}
.ft {
position: absolute;
bottom: 0px;
flex: 0 0 auto;
}
Just add a margin to the bottom of your body equal to your footer's height.
So if your footer has a height of say, 100px, then you need to add this to your css:
body {
margin-bottom: 100px;
}
I followed the instructions from the link that sweaver2112 suggested, and I had to remove a few duplicate elements and change others, and I finally got the footer to not overlap. Had to use flex to get it to work with the other div elements
.content {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ft {
flex: 0 0 50px;
margin-top: auto;
}
Thank you all for the support!
Link for answer purposed that I used: LINK
I think you might be looking for position: fixed;
Ex:
.footer {
position: fixed;
bottom: 0;
}
This sticks the footer at the bottom of the window regardless of the content so when you scroll the footer will always stay at the bottom. This will however be above the content (overlap), so you need to also apply AndrewL's option to keep the content from going under the footer.
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"
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
I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle
I have been working on building my first CSS site using divs and am having an issue with a button. While I am able to get the button to work on rollover, the link does not respond. Can somebody please advise. Thank you.
HTML:
<div class="wrapArrow">
<div class="arrow" style="cursor: pointer;"><span>home</span></div>
</div><!-- END wrapArrow -->
CSS:
.wrapArrow {
margin: 70px 0 0 0;
padding: 0;
width: 20px;
height: 20px;
float: right;
}
.arrow {
display: block;
width: 20px;
height: 20px;
background-image: url(../images/nav/arrows.gif);
background-repeat: no-repeat;
}
.arrow:hover {
background-position: 0 -20px; }
.arrow span {
display: none; }
Since your <span> is not displayed, your link has no content, so it gets collapsed to a width and height of 0, thus making it unclickable.
Why not just make the anchor itself have the arrow class?
<div class="wrapArrow">
<span>home</span>
</div><!-- END wrapArrow -->
.arrow a is 0 x 0 px
Makes it really hard to click. Believe me I tried.
Try:
.arrow a {
width: 100%;
height: 100%;
display: block;
}
It looks like you need to get rid of
.arrow span {
display: none;
}
Is there any reason that needs to be there? With display set to none you are hiding the clickable element that is necessary for the link to work.