|
CSS - Google Maps And Css
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! Similar Tutorialshttp://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. 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 Howdy, I am working on a particular project that requires a single image to have several clickable links. I assume an image map is best for this however i am just wondering how compaitible one is and also, how do i do it? Thanks Hello. I'm a first time poster and also still wet behind the ears as far as CSS goes. I would like to know if there is a way to insert image map coordinates into a style sheet so I do not have to repeat those image map coordinates on each html page. Here's my sample that I'm working with: URL So I have one image (which I know I have to put on the html page, because CSS only allows background images), and then all these hotspots on the image that form the map + coordinates. If there is a way to put all those coordinates over into an external style sheet, I'll be ... ecstatic. If there's not a way, then I'll abandon this idea and move on! Much thanks in advance, san antone rose How can I best place Image maps with CSS? It seems the text placement command works, but I don't know whether that's the best way. Here's a test page I threw together which uses this command to place the image map: http://www.gamexplain.com/test2.htm So is there a better way? How should I format the command? Thanks! Hi guys I have been reading about sprites and CSS. The fact you can load an image that contains all the state the image can have on hovers is excactly what i am looking for. also the fact that you can do it without javascript makes it even better. But i have a problem that i need to create a menu, where the text turn blue on hover. Here it is (danish text): As far as I know, I need to map all areas the with polygon to make the links work. And then apply sprite functionality. But I haven't seen any 'sprites and maps' tutorials, so I am beginning to think that it cant be done with CSS. But before I give up, I would like to ask you if it can be done, and maybe give me some tutorial link or suggestions. I have tried to do some tutorials, so I think I have the basic idea. Thanks in advance Hi, I have tried my hand at creating a box to set a fake image map over a background image, without luck. (But, I'm a total dork using css. Absolute beginner.) I have been trying the instructions he http://www.position-relative.com/tutorials/tute1_css_bg_image.php However, my background image is set into the body css spec, though I have only tag styles + the body's background image set using css. The rest of my page is tables, so I am wondering if I need to set the background image [for my whole page] using the .box1 spec shown on the tutorial at the link above? And if not, I don't know where / how to use the "#box-link {" noted in this tutorial. Or, if there is a different way to set the links on my css body spec'd background image... ? My background image css spec: Code: body {background-image:url("images/Header.jpg");
background-repeat:no-repeat;
background-position:top;
}
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 -->
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! 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??? 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; 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. 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 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? Are there any? I am using the 'body:nth-of-type' hack at the moment and it is the one error when i validate my css. Any help much appreciated! I triedThis one aswell but again the css won't validate. I know there must be more i haven't tried but i was wondering if someone would be so kind and save me the effort of finding one that validates?? p.s. i am new at this... be kind!! Hi, If you check this site out with Google Chrome or Safari, you'll see (just below the header) the mid-section is offset to the right. http://www.ergopro.com/ I noticed if I remove the "Icons" div everything is okay, but I need it there. I tried adjusting it, but no dice. Any ideers? Much thanks in advance. Could somebody give me some kind of hint how to do this. Appreciate your help, chris 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 |
|||||||