css
I have a div and I need to get a small background image into the vertical center of that DIV using CSS.
Can anyone help please?
Thanks.
for vertically center
#con {
background: url (image.jpg) no-repeat left center;
}
for horizontally center
#con {
background: url (image.jpg) no-repeat center top;
}
#somediv {
background: url (image.jpg) no-repeat 50% 50%;
}
the 50% centers it horizontally and vertically.. alternatively you can use center center
I have a Phusion install, configured with Rails 3.0.10 and Apache 2, and assets like CSS and Javascript are apparently being served, but not utilized by the browser.
So for instance when I hit the root url, the page renders, but CSS and javascripts are not used by the browser. I see GET requests coming through for each asset in the access logs.
I can visit those assets directly in my browser, going to stylesheets/application.css?1313636333 I see the correct application.css
I dont
I'd like to have on my page a div which is centered and has a certain width, but which extends beyond that width if required by the content. I am doing this with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Note: I'm using Google Chrome
Currently I have this test page
http://www.evecakes.com/doodles/canvas_size_issue.htm
It should draw a rectangle right below the mouse cursor, but there are some really weird scaling issues which is causing it to draw at a varying offset. I think it's because the canvas coordinate space is not increasing along with its html size. Is there a way to increase that coordinate space size?
Here's the javascript function
$('#mapc').mousemove(function (event)
I have jquery issue, Kindly see my jquery code:
$(document).ready(function(){
$(".toggle_container").show();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
My .toggle_container is shown always its good, But I want to close it first time, when page
All the documentation I can find suggests that almost standards mode differs from standards mode only in the way images in table cells are aligned.
This question : http://stackoverflow.com/questions/1414748/internet-explorer-8-and-checkbox-css-problem, however indicates that the rendering in IE8 and Opera changed between the two modes, based on how checkboxes are interpreted. Certainly there are neither tables nor images on that page.
So, does anyone know of other differences between
I am trying to implement the CSS sticky footer on the following page:
http://www.tuhdoo.com/test/index.htm
As you can see it works to a point but there is a 20px overhang at the bottom of the screen that causes scrolling (firefox).
Can anyone help please?
I was following this tutorial:
http://css-tricks.com/snippets/css/sticky-footer/
I think the issue is caused by the padding-top:20px on your body element. Try moving it to your body > #container > header element
So what I need is for the footer to print at the bottom of each page (when it is printed on paper, not printed on screen, thats easy)...
I am using tables, I know tables are bad, I typically do not use them, but this is a special case: (I am using a C# webBrowser control, and just using HTML to format a document to print).
It works fine, except for the footer on the LAST page printed...the first pages it is sitting at the bottom, because the page content pushes it to the bottom, but
I couldn't find anything on Google, I hope anyone has an answer!
When I touch an element which can receive focus such as an map shape or a "same-page" <a> on IPad I can see a black semi-opaque layer above the element.
I just want to define MY behaviour of focus or equivalent on these elements, but I didn't find how to disable this layer!
Is there possible??
Thanks in advance!
You can use
-webkit-tap-highlight-color:<css-color>
There is already an article on
I created a CellList in my entry point. Now I want to style it.( Changing the color of selected cell from blue to dark black )
In my knowledge, I only need to override the style of cellList, choose the selected one and change the background color (and then save inside the module.css)
So this is what I came with.
@sprite .cellListSelectedItem {
/*gwt-image: 'cellListSelectedBackground';*/
/*BEFORE : background-color: #628cd5;*/
background-color: #2D2D2D;
color: white;
height:
In my pages I often use custom fonts with the Raphaël .print with
the .getFont. for SVG text, and the CSS3 @font-face (with Font
Squirrel kits) for normal text.
Is maybe possible to automatically register a font from the @font-face
property, without create a JSON with Cufon?
I saw that in Font Squirrel kit there's the format('svg') used for old
iPhone/iPad ("This is an XML format required by iOS devices before
version 4.2.") maybe it could be useful also for desktop...
Thank you
I have the following script:
http://jsfiddle.net/oshirowanen/59MWq/11/
How do i align the menu to the right instead of to the left?
Assuming I understand correctly - that you want the dropdown button and the dropdown menu on the RHS of the screen, then it looks like you need float: right; in .navigation, and right: 0; in .dropdown
This is because your dropdown is absolutely positioned; an alternative solution is to put float: right; on both classes, and clear: right; on