CSS - How Do You Make A Square Google Gadget Box In Css?
Could somebody give me some kind of hint how to do this.
Appreciate your help, chris Similar TutorialsIt's the effect where you click on a link or a button and a new bit of content appears, pushing down everything below it. Clicking it again makes that content disappear and all the original text move back up. Google uses it in a number of places, notably at the bottom of any search result. At the very bottom, below the "Goooogle" page number thing, there's a little plus sign to the left of "Add a result". Clicking that makes new content appear. I see it in a lot of places and I love the effect! I don't know if its Ajax or CSS or whatever, so I don't know how to properly search for a tutorial, but could anyone point me in the right direction? Hi, I was trying to display a small colored square using <table> tag. It worked fine on the screen but when I do print preview, the square shows up as white. I used both: <table width="15" height="15" style="border: 1px solid #000; background:#00cc00"> ... </tabel> and <table width="15" height="15" style="border: 1px solid #000"> <tr><td bgcolor="00cc00"></td></tr> </table> but none works. Can someone tell me why this does not get printed? Is there a CSS method to create this that would print? Hello All, Is it possible to include square brackets in CSS classes? And if so, how can you reference them in CSS, since square brackets in CSS definitions are for attributes? Code: <div class="foo[bar]" cool="yes"></div> How would I reference this element in CSS? I'm beginning to suspect that this just isn't possible without javascript, but I'm throwing it out here just in-case I get lucky. Basically, what I want is a square-div that is no more than 90% of the window-height or 90% of the window-width, and will scale to fit the smaller of the two sizes. So, say the viewable area of the page is 800 x 600, the div would scale to be 540 by 540. If the size were 400 x 500, then it would be 360 by 360. I know that of course it's trivial to do with fixed-width divs by specifying a size in pixels, but is there any-way to do it for anything else? Images work nicely, as they will try to remain at the same aspect-ratio when stretched. I'm trying to make a nice simple interface composed of a few large, elements, that is able to scale seamlessly from desktop to mobile screen-sizes. Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? Hello, I have recently intergrated Google Maps (via its API) onto my site, but have a little problem, the balloon pop-ups can not seem to contain the text in its entirety: Example 1 I am sure this relates to something which is incorrect with my CSS (possibly padding) but at present I can't get anything to work. The problem persists in Firefox, Opera and IE (although IE crashes when this page has loaded!). Any ideas guys? Thanks, Saj PS - Click the red balloon to see what I'm on about! I am trying to use this font for my text: http://www.google.com/webfonts/specimen/Droid+Sans I have tried using: font-family: 'Droid Sans', Arial, Helvetica, sans-serif; but it doesn't work. Any ideas? Thanks! http://nj-asap.com/directions.php I am trying to change the font on the directions part of this page, but nothing seems to effect it. Here is the table: Code: <table border="1px" align="center" cellpadding="0" cellspacing="0" bordercolor="#6A9EB4" bgcolor="#BFD6DF" class="content"> <tr><td align="center"><strong>Directions</strong></td> <td align="center"><strong>Map</strong></td></tr> <tr> <td valign="top" bgcolor="#FFFFFF"><div class="maps" id="directions" style="width: 280px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;"></div></td> <td valign="top" bgcolor="#FFFFFF"><div class="maps" id="map_canvas" style="width: 340px; height: 400px; margin:5px; border: 1px solid #000000;"></div></td> </tr> </table> I have tried setting the class on the table tag, the tr tag, and the td tag. Currently it is on the div tag, I have even tried putting the font-size on the style of the div tag, but nothing seems to change it. I also tried setting the font size in the body tag. example, look in middle of page (blank space) it is supposed to be in the middle, but instead there is a blank space. no, the ad is not new, over 3 months old. i changed something and forget what (a while ago), now i just noticed this. heres the code: php Code: Original - php Code $i = 0; $gamesperpage = 50; $adplaced = false; // display game boxes $a = 2; foreach ($games as $game) { display_gamebox('float='.$a.'&display=rating', $game); if($a == 2) $a = 1; else $a++; if(!$adplaced && $i >= count($games)/2 && $a == 2) { echo ' <div class="clearboth clearafter aligncenter"> <script type="text/javascript"> <!--google_ad_client = "pub-5687621631516277"; /* 468x60, created 3/18/08 */ google_ad_slot = "1797650152"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>'; $adplaced = true; } $i++; } // end of foreach game echo " <div class='clearboth'><hr></div> "; $i = 0; here is a pic of my page and where I wanna put the ad code http://img155.imageshack.us/my.php?image=untitled7ko.gif here is the required adcode for hosting Code: <script type="text/javascript"><!-- google_ad_client = "pub-8531861944410416"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text"; google_ad_channel ="2267135732"; google_color_border = "660000"; google_color_bg = "7D2626"; google_color_link = "FFFFFF"; google_color_url = "DAA520"; google_color_text = "BDB76B"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> here is my overall header Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}"> <head> <script type="text/javascript"><!-- google_ad_client = "pub-8531861944410416"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text"; google_ad_channel ="2267135732"; google_color_border = "660000"; google_color_bg = "7D2626"; google_color_link = "FFFFFF"; google_color_url = "DAA520"; google_color_text = "BDB76B"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}"> <meta http-equiv="Content-Style-Type" content="text/css"> {META} {NAV_LINpt> <title>{SITENAME} :: {PAGE_TITLE}</title> <link rel="stylesheet" href="templates/AcidTech/{T_HEAD_STYLESHEET}" type="text/css"> <script language="javascript" type="text/javascript" src="templates/AcidTech/scripts.js"></script> <script language="javascript" type="text/javascript" src="templates/AcidTech/formStyle.js"></script> <link rel="icon" href="templates/AcidTech/images/favicon.ico" /> <!-- BEGIN switch_enable_pm_popup --> <script language="Javascript" type="text/javascript"> <!-- if ( {PRIVATE_MESSAGE_NEW_FLAG} ) { /* window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); */ } //--> </script> <!-- END switch_enable_pm_popup --> </head> <body> <a name="top"></a> <img id="formStyleTestImage" src="templates/AcidTech/images/spacer.gif" /> <table width="{T_BODY_BACKGROUND}" cellspacing="0" cellpadding="0" border="0" align="center" id="maintable"> <tr> <td valign="top" class="content-row"><table border="0" width="100%" cellspacing="0" cellpadding="0" id="logotable"> <tr> <td align="center" class="logorow1"><div class="logorow2"><a href="{U_INDEX}"><img src="templates/AcidTech/images/logo_mid.gif" height="88" alt="{L_INDEX}" /></a></div></td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="buttonstable"> <tr> <td align="center" valign="middle" width="100%" id="header-buttons"> <!-- BEGIN switch_user_logged_out --> <a href="{U_REGISTER}">{L_REGISTER}</a> • <!-- END switch_user_logged_out --> <!-- BEGIN switch_user_logged_in --> <a href="{U_PROFILE}">{L_PROFILE}</a> • <a href="{U_PRIVATEMSGS}">{L_PRIVATEMSGS}</a> • <!-- END switch_user_logged_in --> <a href="{U_SEARCH}">{L_SEARCH}</a> • <a href="{U_FAQ}">{L_FAQ}</a> • <a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a> • <a href="{U_GROUP_CP}">{L_USERGROUPS}</a> • <a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a> </td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="content"> <tr> <td class="content" valign="top"> <!-- BEGIN switch_user_logged_in --> <center><div class="pm-{PRIVMSG_IMG}"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></div></center> <!-- END switch_user_logged_in --> hi, my site is http://thetuningzone.com.ar/ the thing is that when i visit the site from my pc it looks OK, but in googles cache it does not... google page and it google finds all pages similar so it does not show them what is the mather??? Hi, my site looks good in all browsers, PC and Mac, except Google Chrome. Here's the site:site Do I need to write a CSS exception for Google Chrome? thanks Anyone know how to design a search bar like this? If there's a better forum for this question, let me know. does google index links and content on display:none?? cos we do menus mostly with a div have display:none element. Does google crawls and indexs this elemented items divs or things? I'm using the default theme in WordPress and I want to keep the double arrow (>>) for bullet lists that come by default but I need to style those out in some instances. This is the code that brings it in. Code: .entry ul li:before { content: "\00BB \0020"; } Now, here's a case where I'm trying to remove any list style: Code: .entry .BioInfo ul li:before { content:none; } This works in Firefox and IE8 but not much else. How can I override the default in browsers like Chrome and output no list styling? Hey guys, would you please tell me why I get an error on my web page? Here is the error. Thanks I'm trying to create a page layout for a Bing Maps application using css and html. I'd like to create a layout similar to http://maps.google.com I have a bar at the very top of the page 25px high, a header 90px high, a left column 270px wide and the rest of the page, or the right column is the Bing Map. Currently, the map fills the width to the edge of the page as I'd like it to, however, I can't get the height to do the same. I have to set a px height for the div containing the map, which is fine, but when viewed in a different browser or with different screen resolution, the scroll bar appears and you have to scroll down to see the full map. Does anyone have any idea how google's managed to have the map height equal to the window height minus the header, etc? I hope this makes sense. Many thanks Okay, so the google toolbar overwrites everything on the client display. External CSS, internal CSS, inline styles, doesn't matter. The only work-around I've found is using: Code: input .theEmail { background-color: #fff !important; } ... <input type="text" class="theEmail" /> However, if the user has set their CSS rules to display inputs' background in black and text in white, they won't be able to read their input on that form (white on white). So, I'll have to add Code: input .theEmail { background-color: #fff !important; color: #333 !important; } ... <input type="text" class="theEmail" /> Now, no matter what, the inputs that are classed as theEmail will be white with dark dark grey font. Is there a downside to this I'm not seeing? I know !important isn't meant for this usage, but I really don't want users to know they can use google's autofill and this is the only way I've found how. Is this the only method aside from javascript? In Internet Explorer googleadsense does weird things with my forumlayout, the banner will make my table with more width. You can see it on http://www.helpen.be/forum.php As you can see when you collapse the part with the banner it works like it has to be but i like to get it work also when the banner is visible. Thx for the help! Hi everyone, I wasn't sure if I could do this with CSS or if I'd need to do something in my PHP to get this working. If it's not CSS, please could the mods move this to the PHP forum. So here's my problem: I have a site, www.geeknews.co.za, which is an article site that I want google adsense to run in. The problem is that the articles are inserted from the database dynamically, and I don't know how to add the google tags so that it doesn't appear after the article has finished. The page on geeknews.co.za is a static page. Just so you can see what I'm going for. Any ideas on how to do this? Thanks |