Latest CSS3 Recipes

div height set with max-height => make contained div takes full height using css

I have a div C which height is set up using max-height. This div contains a div D.

I want the contained div D to have the exact same height (and not more) than the containing div C.

If I use the height property for div C, like here

  • the height of...

Read the entire recipe Recipe added 23 minutes ago

Center a div, partially off-screen

I am looking to center a large div that reaches beyond the screen. This concerns having a large .container div about 1920px wide, with the actual content being centered inside .container in a div with a class of .content, about 1200px wide.

I manage...

Read the entire recipe Recipe added 1 hour, 22 minutes ago

Maintain list dimensions with CSS Transition

I'm trying to create an effect with list items in an unordered list.

Basically, anytime one hovers over the list, the size adjusts 2px in padding. While this properly it is also effecting the overall dimensions of the list item, thus pushing other...

Read the entire recipe Recipe added 2 hours, 25 minutes ago

Center non text within a table

I am trying to figure out a way to center a "rating" within a table, I can figure out how to align text and images but i can not figure out how to align this rating, since its technically not text or an image.

the code looks like below

<td...

Read the entire recipe Recipe added 3 hours, 22 minutes ago

CSS3 media queries not working on Safari on iPod/iPhone

I am developing a responsive design website. The website will be optimized for iPhone and iPod (Both having width 640px).

I am using the following CSS3 media queries:

    @media screen and (max-width: 640px) {
        .display-none-mobile{
       ...

Read the entire recipe Recipe added 4 hours, 23 minutes ago

Change placeholder color in Javascript for Chrome

As said here : Change an HTML5 input's placeholder color with CSS, Chrome doesn't support the CSS property color for input placeholders.

But there is a property named -webkit-input-placeholder. If I put on my CSS...

Read the entire recipe Recipe added 5 hours, 24 minutes ago

Div structure with responsive design

I´m trying to float 3 divs in different order in responsive design. In mobile version is correlative (div 1, div 2, div 3) but in desktop version I want to place the div 3 near the div 1 and the div 2 at bottom of them. I´m triying it with float,...

Read the entire recipe Recipe added 6 hours, 22 minutes ago

CSS wrapping and hiding text within a table

I've searched other answers and none of them seem to produce the desired results I am looking for.

Here is my table: (removed and added rendered HTML at the bottom.)

Currently it isn't wrapping the text so the table looks nice and clean. However I...

Read the entire recipe Recipe added 7 hours, 20 minutes ago

How do I make a div transparent on a white body background?

The background-color of my body is #ffffff. And I have a div that I need is colored but it needs to be transparent or see through. Is it possible to do this using CSS3 or do I have to use images to achieve this?

body {
background-color:...

Read the entire recipe Recipe added 8 hours, 20 minutes ago

Creating a hover div that matches the height and width of base div

So I have a base div and a hover div (will display:block in js on mouseover).

Anyways I'm having the hardest time making the height and width of my hover div match the height and width of my base div.

I think the problem is because of my responsive...

Read the entire recipe Recipe added 9 hours, 20 minutes ago

How to write this styling in latest implementation of CSS3's Flexbox

I figured out how to achieve a style with the 2009 implementation of flexbox, but there are two other implementations. The short-lived 2011 and part of 2012 syntax and then the current and final syntax.

How can I write this code in the current and...

Read the entire recipe Recipe added 10 hours, 25 minutes ago

css button : button horizontal align and size stretch with text size

I'm trying to make a button with a left enter image description here, middle enter image description here (repeating) and right enter image description here background:

<div class="horizontal">
    <div class="myButton">
        <div class="left" ></div>
        <div class="middle" >
            some text
        </div>
       ...

Read the entire recipe Recipe added 11 hours, 19 minutes ago

adding img in paragraph is causing all its adjacent div slightly moved downward

I have set of div on my webpage with following HTML and CSS.

    <style type="text/css">
        .div-set {
            margin: 5px 2px;
        }
            .div-set > .widget:nth-child(3n-1) {
                margin: 20px 32px;
            }

    ...

Read the entire recipe Recipe added 12 hours, 21 minutes ago

How can I add responsive image support on my website using twitter bootstrap?

I am building a website using twitter bootstrap. I am targeting my website for mobile and tab users only.I want images to resize according to different screen sizes. I tried using Adaptive responsive images http://adaptive-images.com/ but its way to...

Read the entire recipe Recipe added 13 hours, 23 minutes ago

Difference between CSS Keywords and Properties?

Someone asked me what CSS Keywords were and I was confused by this question and thought it might be some new feature of CSS3 or LESS, things that I am not really up to date on.

However after googling a bit it seems that CSS Keywords are just CSS...

Read the entire recipe Recipe added 14 hours, 25 minutes ago

CSS margin-top not working

http://anonoz.com/armesh//contact_form/

The above link shows a contact form that I am making. I am trying to make it like the picture in the right. I have to give the text "Try us Today" a margin-top of 20px.

HTML:

<body>

<div...

Read the entire recipe Recipe added 15 hours, 21 minutes ago

Do CSS transformed elements have default z-index?

I've a pretty basic example here, am having a fixed header with other elements which are stacked one after another, single element is transformed using transform: rotate(360deg).

So only the transformed element is getting over the fixed bar when the...

Read the entire recipe Recipe added 16 hours, 26 minutes ago

Is there a way to create a 3D cylinder of the canvas element in CSS?

I'd like to present the canvas as a cylindrical cone, which you can spin like a wheel in both directions. Is this at all possible with JS/CSS3?

Read the entire recipe Recipe added 17 hours, 20 minutes ago

Trying to distribute images evenly with css

Im trying to create a slide of small images and that on each slide the images are evenly distributed horizontally. Found an interesting technique on css-tricks.com and a very straighforward working example but i haven't been able to replicate...

Read the entire recipe Recipe added 18 hours, 25 minutes ago

text-overflow ellipsis does not work with dynamic width

hope someone can help.

I have 3 nested div. Parent, children and children's children.

What i want to accomplish (the motive is not relevant) is that that child gets a relative width depending on the parent's width (a percentage) and the children's...

Read the entire recipe Recipe added 19 hours, 25 minutes ago

Float ::before content without wrapping

Given the following markup:

<blockquote>This is a quote, and it's probably going to 
flow over multiple lines</blockquote>

Is it possible, using only CSS, to add an image to the left and give the entire quote a margin so that it does not wrap...

Read the entire recipe Recipe added 20 hours, 20 minutes ago

css form checkbox styling with checked and after tags

I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, display nothing after it. This is the code I have:

...

Read the entire recipe Recipe added 21 hours, 21 minutes ago

How do I make one element change by hovering over another?

I'm trying to do what many have asked before, but even after trying everything I still can't get the results I want.

I have an image 600px by 1600px, 4 images of 600px by 400px in a vertical line. I want to show 600px by 400px of the image at any...

Read the entire recipe Recipe added 22 hours, 21 minutes ago

positioning circles to align to middle and align with text

http://adamginther.com/

I am having three issues:

  1. I am trying to make it so the circles underneath "I'm also 100% awesome" align to the text while staying aligned to the centre of the page.

  2. I would like the titles "Name, E-mail, and Message" on the...

Read the entire recipe Recipe added 23 hours, 27 minutes ago

Blinking/flickering of website text (text disappearing for moment then reappearing) on iPad and Chrome

If you visit http://www.tekiki.com on the iPad using Chrome, the site renders fine at first, but after a second or two, all text on the page gets hidden and re-appears a few moments later. It is almost like an extended blinking or flickering of the...

Read the entire recipe Recipe added 1 day ago