How to position a div in the middle of the screen when the page is bigger than the screen

just add position:fixed and it will keep it in view even if you scroll down. see it at #mydiv { position:fixed; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: … Read more

How to make Twitter bootstrap modal full screen

I achieved this in Bootstrap 3 with the following code: .modal-dialog { width: 100%; height: 100%; margin: 0; padding: 0; } .modal-content { height: auto; min-height: 100%; border-radius: 0; } In general, when you have questions about spacing / padding issues, try right+clicking (or cmd+clicking on mac) the element and select “inspect element” on Chrome … Read more

How to use Apple’s new San Francisco font on a webpage

Apple’s new system font is not publicly exposed. Apple has started abstracting system font names: The motivation for this abstraction is so the operating system can make better choices on which face to use at a given weight. Apple is also working on font features, such as selectable “6″ and “9″ glyphs or non-monospaced numbers. … Read more

How to use the new affix plugin in twitter’s bootstrap 2.1.0?

I was having a similar problem, and I believe I found an improved solution. Don’t bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix(): $(‘#nav’).affix({ offset: { top: $(‘#nav’).offset().top } });​ The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. … Read more

Tools to make CSS sprites? [closed]

Instant Sprite is an in-browser CSS sprite generator I’m working on. It’s really fast, but doesn’t have quite as many features as some of the others. It currently only works in Firefox or Chrome, since it uses JavaScript FileReader and HTML Canvas to generate the sprites inside the web browser without uploads.

Border within border CSS

When the main triangle or arrow is itself created using the CSS borders, it is impossible to add another border to it without using extra elements. The below are a few options. Option 1: Using a bigger size pseudo-element and positioning it behind the parent to produce a border-effect. .arrow-down { position: relative; width: 0; … Read more

Select nth-child across multiple parents

You can’t do that with CSS selectors alone. :nth-child() and sibling combinators are limited to children/siblings sharing the same parent only, as implied by their names, and CSS selectors cannot account for such variations in parent-child structure, nor is there anything like an :nth-grandchild() selector (even :nth-match() from Selectors 4 limits itself to elements sharing … Read more

How to make a column span full width when a second column is not there? (CSS Grid)

Don’t define the columns explicitly with grid-template-columns. Make the columns implicit instead and then use grid-auto-columns to define their widths. This will allow the first column (.content) to consume all space in the row when the second column (.sidebar) doesn’t exist. .grid { display: grid; grid-auto-columns: 1fr 200px; } .content { grid-column: 1; } .sidebar … Read more

Build list of selectors with LESS

As already mentioned your attempt is almost there, it does not work because of variable visibility rules. Notice that each .selector-list iteration defines new @selector-list variable which have higher precedence in the current scope but does not override @selector-list variables for the outer scope (i.e. scopes of the previous .selector-list iterations and above). So when … Read more

How to link a CSS file from HTML file?

Why does linking a CSS file not work? In your example, you only have to change the rel=”Hope this works” to rel=”stylesheet” in order for it to recognize it as a stylesheet, as demonstrated in the following: <link rel=”stylesheet” href=”newcssstyle.css” type=”text/css”> Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet … Read more