CSS view in grid or table

Hi Guys I need help displaying layout in CSS. Here is i want the layout to display like. Here is what i have so far in CSS but can't get the menu zone to fully expand down height. Any suggestions? i'm using display grid as layout. .page{ display: gri

Columns in RWD grid view (CSS Responsive)

I am learning CSS and have come across to this lesson in W3school. I am struggling to understand what are the purposes of having so many column classes in grid view: .... .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} ...... And

change the background image is not responsive

so i'm trying to change background-image using css transition, i have a problem which is that the img is not responsive this way can any one help me come up with a way it would be 100% height and width? .container{ width:100%; height:600px; } .contai

Circle with three different border colors

I have this CSS for a circle with one border color: .circle { border: 6px solid #ffd511; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; width: 30px; height: 18px; line-height: 20px; padding: 12

CSS3 Hover background image does not work in mozilla

I have implement the CSS3 in my application, if when I hover the li tag at the time the span tag image will be change with transition property. it was working good in chrome, but unfortunatly this effect(transition) is not working properly in firefox

Cross browser compatibility HTML5 & amp; CSS3

This may not be a question related to programming but I am still asking this since I am banging my head a lot on this issue. I am finding a lot of HTML5 & CSS3 features useful for my website designing. But as usual (like all developers) I am confused

RotateY () text is blurry / pixelated

I've rotated and perspective-3d an element with text. The text is really low fidelity. Is there any way to improve it? Really simple example code: <h1 style = "transform: perspective(150px) rotateY(-45deg);width:150px;"> This is text </

Make internal div 100% body width

I want the child div width to be 100% of the body. CSS #container { position:relative; width:400px; height:100px; margin:0 auto; background:red; } #inner { width:100%; height:30px; background:blue; } HTML <div id="container"> <div id=&q

CSS logo changes position when text length increases

This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and

How to get the current year using css?

I was appending copyright message to web page while printing, i have used following code @media print { .page:after { content: "© 2013 Copyright message"; font-size: 14px; position: absolute; } } Is there any default way to get the current year

CSS3 simple donut table

What I'm trying to do is create a simple donut chart. I'm currently using CSS(3) only but I don't know if it's possible without javascript. What I have so far: http://jsfiddle.net/aBP5Q/ HTML: <div class="donut-container" style="backgrou

Grow a css / arrow triangle when its parent div is resized

This is my css triangle. When the parent container -which has a height percentage setting- is resized then the triangle should resize too. How must change the below definition that this could work? If it does not work with common CSS I am also open f

HTML responsive font size for mobile devices

I have an application that runs on Android and IOS. The application has some WebView components that displays HTML From what I found there are "em" and "viewport" units as well as "@media" in css. I'm new to HTML5 and CSS3, c

CSS3 FlexBox does not display correctly in Firefox 22

For some reason a project I'm working on in Firefox 22 won't display correctly. In works fine in webkit browsers (tested in Opera 15 and Chrome 27; Safari won't support the updated spec until 7.0). Everything is just grouped together in rows, so my f

CSS Transformer Translate to the center of the window

I have a list of elements and upon a specific action, i'd like to apply the css-transform translate to move it into the center of the window. I know css-transform is used to relatively move an element, but I was wondering whether it is possible to an

Mouse rollover issues and jquery problem

I have a problem with jquery effects on few blocks. Mouseenter and mouseleave work only on the first div block while on all others it doesn't. Here is the JS: $(document).ready(function() { $('#mainbox').mouseenter( function () { $('#infobox').fadeIn

line height problem with & lt; li & gt; child elements

I am having an issue with line-height on a list item. In a nutshell, we have a line-height assigned to the body, which the <li> obviously inherits. If I put a <span> inside the list item and specify a font-size that's smaller than the standard

CSS webkit scrollbar show / hide

I'm using -webkit-scrollbar and what I want to happen is the scrollbar hidden on page load, and it stays hidden until you hover over the container div it is attached to. When you are hovering over a scrollable area, it would appear. I tried adding :h

CSS speech bubble with Box Shadow

Creating a DIV that uses CSS to draw a triangle to the left. Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code. Is this possible? Or am I better off using border-image for this? (Top: Before Shadow, Midd

Firefox webfonts do not load

I'm having an issue with webfonts only in Firefox, all other browsers (including IE) work perfectly. My issues is that the webfonts won't load at all. I've looked at this possible solution, editing the htaccess file (http://www.fontsquirrel.com/blog/