Archive

Archive for the ‘css’ Category

Slightly better looking oliver.doepner.net ?

October 24, 2016 Leave a comment

My resume website http://oliver.doepner.net/ now has a new scaling background image and uses the Open Sans web font. I hope it looks nice. Any feedback is welcome.

Categories: coding, css, doepner.net Tags: ,

Viewport meta tag for better page rank in mobile Google search

April 25, 2015 Leave a comment

Algorithm changes are rolled out to Google’s data centres to let mobile-friendly web pages get higher ranking on Google Search. Some sensationalist news outlets call this “mobilegeddon“. I think it is much ado about very little.

Google provides a mobile-friendly test and at first oliver.doepner.net did not pass.

So I learned about the viewport meta tag and after adding the following to the head section of my html pages they now pass the test:

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0, user-scalable=yes"/>

About the viewport meta tag

180x130_viewport-meta-tag

The “viewport” meta tag is not part of the official HTML standard, but the validator at the W3C will still accept your pages as valid.

The tag was initially introduced by Apple Safari, but is now widely supported by most mobile web browser. As of spring 2015 Microsoft IE for Windows Mobile is the main exception: It requires some vendor-specific CSS.

Non-mobile web browsers typically just ignore the tag, which is fine because the whole “viewport” concept only makes sense for the relatively small screens of mobile devices.

Lacking a standard definition, for now the best specs are the respective web developer pages at Apple, Mozilla and Google.

Responsive accessible web design

Please note: Passing the Google test is nice for your page ratings, but truly “responsive” web design that works well on all browsing devices requires more effort, as this article on html5rocks.com explains quite well.

And of course, all supporters of an open, inclusive web should always ensure the accessibility of their site, for everyone regardless of disability.

Categories: coding, css, doepner.net, html Tags: , , ,

JQuery: Button to cycle through select options

November 9, 2014 Leave a comment

I wanted an html drop-down list to automatically appear as a simple button that changes color on every click as it cycles through the option values of the (hidden) select element.

The code sample is in this jsfiddle. It uses JQuery.

For each relevant select element, it styles the associated label so it looks like a button, hides the select element and handles clicks on the label button by cycling through the select options.

The display text of each option is used as a tooltip (‘title’ attribute) of the button which also serves as a css selector to color the button according to currently selected option.

The beauty of this is that the selected values of the hidden drop-downs can be submitted by regular form submit and that the form is fully functional if JavaScript is turned off.

The button styling requires CSS3, so IE8 is not suitable. I have tested this successfully in Firefox 33 and IE11.

Categories: css, html, jquery Tags: , ,

Simple accordion using CSS3 :target selector (no JavaScript)

March 14, 2013 7 comments

I made a simple “accordion” style UI that consists of several collapsed sections with only the “current” one expanded, using the CSS3 :target selector. I wanted the basic functionality of the JQuery UI accordion, but in a minimalistic way, without any JavaScript.

The :target selector is supported in all modern browsers, including IE9 and IE10, but not in IE8 and earlier.

In a real application with a variable number of accordion sections you would probably generate the HTML for the sections with some sort of iteration. You need to make sure that each section id is a valid unique id on the page and that the href of the link in the section header points to the section id, prefixed by ‘#’.

The minimal sample code is in jsfiddle 1, a version with some more visual style is in jsfiddle 2. For illustration, I am also posting the sample code here (see below).

I used a <div> for the whole accordion, a <fieldset> for each section, a <legend> for the section header and nested <div>…</div> for the section content.

Please note that you can use other HTML tags, as long as you use the CSS classes used in the stylesheet and the same kind of nesting.

HTML code:

<div class="accordion">
  <fieldset class="section" id="id1">
    <legend class="section-header">
      <a href="#id1">Section 1</a>
    </legend>
    <div class="section-content">
      Section 1 content
    </div>
  </fieldset>
  <fieldset class="section" id="id2">
    <legend class="section-header">
      <a href="#id2">Section 2</a>
    </legend>
    <div class="section-content">
      Section 2 content
    </div>
  </fieldset>
</div>

CSS stylesheet code:

.accordion .section {
    margin: 1em;
}
.accordion .section-header a {
    text-decoration: none;
    color: gray;
}
.accordion .section:hover .section-header a {
    color: red;
}
.accordion .section .section-content {
    display: none;
}
.accordion .section:target .section-content {
    display: block;
}
.accordion .section:target {
    border: 2px solid navy;
}
.accordion .section:target .section-header a {
    color: navy;
    cursor: default;
}
.accordion .section-header a:before {
    content:"\25BA\0000a0"
    /* unicode triangle pointing right */
}
.accordion .section:target .section-header a:before {
    content:"\25BC\0000a0"
    /* unicode triangle pointing down */
}
Categories: css, html

Extremely simple one-level drop-down menu using CSS

November 15, 2012 Leave a comment

The CSS below styles an unordered list with nested sub-lists as a horizontal menu with drop-down sub-menus (only one level). I tried to keep the code minimal with no effort for good looks. You can add your own styling as you like.

I have tested this successfully in IE8, IE9 and recent versions of Firefox, Chrome, Safari and Opera. I consider IE6 and IE7 broken beyond repair and basically ignore them.

Please test it in your browser at http://jsfiddle.net/Yk6MS/4/, and let me know about any problems you might find.

Style sheet:

.menu,
.menu ul {
  background-color: tan;
}
.menu > li {
  display: inline-block;
  white-space: nowrap;
}
.menu ul {
  position: absolute;
  display: none;  
}
.menu > li:hover {
  position: relative;
}
.menu > li:hover ul {
  display: block;
}

Example HTML:

<ul class="menu">
  <li>Abra
     <ul>
      <li>Amfdf rt</li>
      <li>Brr zz</li>
     </ul>
  </li>
  <li>Kadabra
     <ul>
      <li>Kala mala</li>
      <li>Hauki dauki</li>
     </ul>
  </li>
  <li>Simsalabim
    <ul>
      <li>Dudel didel</li>
      <li>Dudel döh</li>
      <li>Labedi bap</li>
    </ul>
  </li>
</ul>
Categories: css, html