EzDevInfo.com

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

Searching for the ~ character isn't easy. I was looking over some CSS and found this

.check:checked ~ .content {
}

What does it mean?

Is it possible to make a div 50px less than 100% in CSS3? [duplicate]

Is it possible to make a div 50px less than 100% in pure CSS? I want the <div> to be only 50px less than 100%. I don't want any JavaScript.

With CSS, use "..." for overflowed block of multi-lines

with

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

"..." will be shown in the end of the line if overflowed. However, this will be shown only in one line. But I would like it to be shown in multi-lines.

It may looks like:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Multiple NOT selector

Creating simple CSS to apply to all inputs (now with HTML5, there are a lot), except radio and checkbox.

Many people have shown that you can put multiple arguments in :not, but using type doesn't seem to work anyway I try it.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Any ideas?

Why does IE9 switch to compatibility mode on my website?

I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing all CSS includes. On some other website of me it goes just fine.

Also, don't set it manually because then IE9 remembers the user setting and you can't turn it back to automatic (or at least I haven't found how, not even via private browsing and emptying cache)

Anyway. The site where it jumps to compatibility mode: http://alliancesatwar.com/guide/
One where it renders correct: http://geuze.name/basement/ (I can't post more than 1 hyperlink)

Both use the same doctype and all. Those sites have a lot in common(apart from appearance) using the same basic template(encoding, meta tags, doctype and the same javascript)

It would be great if someone has an answer for me! An HTML5 website that renders in IE7-mode is pretty... lame.

How do I create a teardrop in HTML?

How do I create a shape like this to display on a webpage?

I don't want to use images since they would get blurry on scaling

I tried with CSS:

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="tear">
</div>

That turned out really screwed.

And then I tried with SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

It did get the shape, but the bottom part wasn't curved.

Is there a way to create this shape so it can be used in an HTML page?

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

My Question(s)

1. Are any of these methods preferred by a professional web designer?

2. Are any of these methods prefereed by a web browser when drawing the website?

3. Is this all just personal preference?

4. Are there other techniques I'm missing?

Note: Above questions are in regards to designing a multi-column layout

float:left;

http://jsfiddle.net/CDe6a/

This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to clear:both; afterwards. Another con that I just found was the inability to align text vertically.

display:inline;

This seems to correct the problem of the collapsing parent, but adds whitespace.

http://jsfiddle.net/CDe6a/1/

Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html.

http://jsfiddle.net/CDe6a/2/

display:inline-block;

Seems to behave exactly like display:inline;.

http://jsfiddle.net/CDe6a/3/

display:table-cell;

http://jsfiddle.net/CDe6a/4/

Works perfect.

My thoughts:

I'm sure I'm missing a ton of stuff, like certain exceptions that will break the layout but, display:table-cell; seems to work the best, and I think I will start replacing float:left; as I always seem to mess up on clear:both;. I've read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website.

Should I use px or rem value units in my CSS?

I am designing a new website and I want it to be compatible with as much browsers and browser settings as possible. I am trying to decide what unit of measurement I should use for the sizes of my fonts and elements, but am unable to find a conclusive answer.

My question is: should I use px or rem in my CSS?

• So far I know that using px isn't compatible with users who adjust their base font size in their browser.
• I've disregarded ems because they are more of a hassle to maintain, compared to rems, as they cascade.
• Some say that ems are resolution independent and therefore more desirable. But others say that most modern browsers zoom all elements equally anyway, so using px is not a problem.

I'm asking this because there are a lot of different opinions as to what is the most desirable measure of distance in CSS, and I am not sure which is best.

How to add multiple font files for the same font?

I'm looking at the MDC page for the @font-face CSS rule, but I don't get one thing. I have separate files for bold, italic and bold + italic. How can I embed all three files in one @font-face rule? For example, if I have:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

The browser will not know what font to use for bold (because that file is DejaVuSansBold.ttf), so it will default to something I probably don't want. How can I tell the browser all the different variants I have for a certain font?

How can I add a box-shadow on one side of an element?

I need to create a box-shadow on some block element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shadow into an outer one with padding-right and overflow:hidden; so the three other sides of the shadow are not visible.

Is there some better way to achieve this? Like box-shadow-right?

EDIT: My intentions are to create only the vertical part of the shadow. Exactly the same as what repeat-y of the rule background:url(shadow.png) 100% 0% repeat-y would do.

Maintain the aspect ratio of a div with CSS

I want to create a div that can change its width/height as the window's width changes.

Are there any CSS3 rules that would allow the height to change according to the width, while maintaining its aspect ratio?

I know I can do this via JavaScript, but I would prefer using only CSS.

How to add a tooltip to a div

I have a div tag as follows:

<html>
    <head></head>
    <body>
        <div>
            <label>Name</label>
            <input type="text"/>
        </div>
    </body>
</html>

Now I want a simple javascript for displaying a tooltip on :hover the div. Can someone please help me out? The tooltip should also have a fade in/out effect.

vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using margin-top to fix it, but I think this is not a good solution for the responsive design.

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

Imagine a simple unsorted list, with some <li> items nested inside <ul> tags. Now, I have defined the bullets to be square shaped via list-style:square; however, if I set the color of the <li> items, color: #F00; then everything becomes red!

While I ONLY want to set the color of these square bullets. Is there an elegant wat to define only the color of the bullets in CSS without using ANY sprite images nor any cumbersome span tags?

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}

Transitions on the display: property

I'm currently designing a kind of CSS 'mega dropdown' menu - basically a normal CSS-only dropdown menu, but one that contains different types of content.

At the moment, it appears that CSS3 Transitions don't apply to the 'display' property, i.e. you can't do any sort of transition from display: none to display: block (or any combination).

Can anyone think of a way for the second-tier menu from the above example to 'fade in' when someone hovers over one of the top level menu items?

I'm aware that you can use transitions on the visibility: property, but I can't think of a way to utilise that effectively.

I've also tried using height but that just failed miserably.

I'm also aware that it's trivial to achieve this using JavaScript, but I wanted to challenge myself to use just CSS and I think I'm coming up a little short.

All and any suggestions most welcome.