Databases
StackOverflow2013
Postsdbo
PO"chevron" style nav bar in CSS & browser scaling problems
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO"chevron" style nav bar in CSS & browser scaling problems
    primarykey
    data
    text
    <p>I've been experimenting with making a HTML/CSS navigation bar with chevron-shaped list items. I've made my code available here: <a href="https://github.com/twslankard/css-chevron-bar/blob/master/index.html" rel="nofollow noreferrer">https://github.com/twslankard/css-chevron-bar/blob/master/index.html</a></p> <p>Since my question is fairly specific, I'm offering up the code as public domain in the off chance that one of you CSS wizards will help me. :)</p> <p>Now for my question. I've been trying to design the bar so that it scales properly, e.g. when someone modifies the font-size property of <code>ul.chevronbar li</code> or when the user hits <code>Control+</code> or <code>Control-</code> in the browser.</p> <p>I tried using two different CSS resets, both Eric Meyers Reset CSS 2.0 and YUI 3. However, in Firefox the scaling/zooming "mostly" works, and in Chrome it does not work (especially when zooming in). If possible, I'd like some advice on how to get this to work better in Chrome.</p> <p>Here's an image illustrating the issue. Your help is greatly appreciated.</p> <p><img src="https://i.stack.imgur.com/OG6K1.png" alt="enter image description here"></p> <p>EDIT: this is what I ended up with eventually. Pardon the messy CSS. I'll get around to cleaning it up later.</p> <p><a href="https://github.com/twslankard/css-chevron-bar-2" rel="nofollow noreferrer">https://github.com/twslankard/css-chevron-bar-2</a></p> <p>EDIT 2: Another person generously provided their solution to this problem here: <a href="http://jsfiddle.net/pXBTK/3/" rel="nofollow noreferrer">http://jsfiddle.net/pXBTK/3/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTom
    1. USTom
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PO"chevron" style nav bar in CSS & browser scaling problems
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO"chevron" style nav bar in CSS & browser scaling problems
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO"chevron" style nav bar in CSS & browser scaling problems
      1. This table or related slice is empty.
      1. VTUpMod
    1. COTom, it may be just Friday, but I don't see where you are creating the shapes? I assume you are using background images or are you doing it in `content: ' ';`?
      singulars
      1. PO"chevron" style nav bar in CSS & browser scaling problems
      1. USRyan B
    2. COExcellent question, Ryan. I'm actually using the "cssarrow" trick, which uses the border property to create those triangle-like shapes. For example, http://cssarrowplease.com/
      singulars
      1. PO"chevron" style nav bar in CSS & browser scaling problems
      1. USTom
    3. COAnd yes, the content: ' ' is what's creating the extra shapes in conjunction with the borders.
      singulars
      1. PO"chevron" style nav bar in CSS & browser scaling problems
      1. USTom
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload