You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div’s height and width to shift the center towards the middle of the div. Thus, provided a <!DOCTYPE html> (standards mode), this … Read more
You can implement your OTF font using @font-face like: @font-face { font-family: GraublauWeb; src: url(“path/GraublauWeb.otf”) format(“opentype”); } @font-face { font-family: GraublauWeb; font-weight: bold; src: url(“path/GraublauWebBold.otf”) format(“opentype”); } // Edit: OTF now works in most browsers, see comments However if you want to support a wide variety of browsers i would recommend you to switch to … Read more
Theory Looking at current implementation of the pinterest site (it might change in the future), when you open the overlay a noscroll class is applied to the body element and overflow: hidden is set, thus body is no longer scrollable. The overlay (created on-the-fly or already inside the page and made visible via display: block, … Read more
You can use calc: height: calc(100% – 18px); Note that some old browsers don’t support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required: /* Firefox */ height: -moz-calc(100% – 18px); /* WebKit */ height: -webkit-calc(100% – 18px); /* Opera */ height: -o-calc(100% – 18px); /* Standard */ height: … Read more
Below are 4 different methods of mine: In each example the texts are freely-editable to illustrate how the content would render in different scenarios. 1) Flexbox body{ height:100vh; margin:0; } header{ min-height:50px; background:lightcyan; } footer{ min-height:50px; background:PapayaWhip; } /* Trick */ body{ display:flex; flex-direction:column; } footer{ margin-top:auto; } <body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> … Read more
This could be done via CSS: <style type=”text/css”> @font-face { font-family: “My Custom Font”; src: url(http://www.example.org/mycustomfont.ttf) format(“truetype”); } p.customfont { font-family: “My Custom Font”, Verdana, Tahoma; } </style> <p class=”customfont”>Hello world!</p> It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).
text-overflow:ellipsis; only works when the following are true: The element’s width must be constrained in px (pixels). Width in % (percentage) won’t work. The element must have overflow:hidden and white-space:nowrap set. The reason you’re having problems here is because the width of your a element isn’t constrained. You do have a width setting, but because … Read more
That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification. Use this instead: img.center { display: block; margin: 0 auto; } <div style=”border: 1px solid black;”> <img class=”center” src =”https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a”> </div>
Floats are okay, but problematic with IE 6 & 7. I’d prefer using the following on the inner div: margin-left: auto; margin-right: 0; See the IE Double Margin Bug for clarification on why.
On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value ‘static’ will prevent closing the modal. As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc. If you opening the modal by js use: $(‘#myModal’).modal({backdrop: ‘static’, keyboard: … Read more