CSS - Specify Size Of Adsense Ads?
I am new to adsense. I was wondering if I should specify the size of each ad in css (via the div I have around each ad). Or is this unnecessary? (I am not asking if I can change the designated size of the ads in css, but just if I should put in the width and height of the standard ad sizes I have chosen). Any insight would be greatly appreciated. Thanks.
Similar TutorialsHi, I've tried adding AdSense to my site, but it always messes up my page. This seems to happen only in Chrome and in Safari, but it works fine with IE & Firefox Here's a sample page I created to show the problem: http://www.deutsched.com/adsense.php Try displaying it with Chrome & Firefox, and you'll notice the difference I've tried tracking down the source of the error, and it seems to be that part of the CSS file, however I'm not that good at programming, so I'm unsure of how to fix it: Code: #header { position: relative; height: 85px; } Any help would be greatly appreciated. Thanks ! Hello, Im having a particular problem with my website (freemyblackberry). I need to add adsense to my site but have had issues with editing the CSS form. I wish to add 2 120X600 tiles directly beside the main body (on opposite sides of the main body), though when I do so and resize the browser, the ads go under the main body or go to the outside edges. I need to them to stay stationary in regards to the body. Are you able to help me? A copy of the CSS is pasted below: @charset "utf-8"; body { margin:0; padding:0; width:100%; background: #282828 url(images/main_bg.gif) top center no-repeat;} html { padding:0; margin:0;} .main { margin:0 auto; padding:0;} .main1 { margin:0 auto; padding:121012012;} /********** header **********/ .header_resize {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:490px;} .header_resize2 {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:200px;} .header { width:960px; padding:0; margin:0 auto; } .header h2 { font: bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:25px 0 0 0; margin:0; width:370px; float:left;} .header p { width:320px; float:right; font: normal 12px Arial, Helvetica, sans-serif; color:#fff; line-height:1.8em; padding:25px 0 0 0; margin:0;} /* logo */ .logo {padding:0; margin:0; width:148px; float:left;} .logo_text { text-align:right; width:700px; float:right; padding:20px 0 14px 0; margin:0; font: italic 11px Arial, Helvetica, sans-serif; color:#815e67;} .logo_text a { text-decoration:none; color:#815e67;} /*menu*/ .menu_resize {width:410px; background:url(images/menu_bg.gif) top no-repeat; float:right;} .menu { padding:0; margin:0 auto; } .menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left;} .menu ul li { float:left; margin:0; padding:0 5px; border:0;} .menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;} .menu ul li a span { padding:12px 9px; background:none;} .menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right;} .menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left;} .menu ul li a.active { background:url(images/r_menu.gif) no-repeat right;} .menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left;} /* body */ .body_resize { background: url(images/body_bg.gif) top repeat-y; padding:0; width:963px; margin:0 auto;} .body_resize_top { background: url(images/body_top_bg.gif) top no-repeat; margin:0px auto; padding:10px 0px;} .body_resize_top_resize { margin:10px auto; padding:0 10px;} .body_resize_bottom { height:13px; margin:0; padding:0; width:963px; background:url(images/body_bottom_bg.gif) bottom no-repeat;} .body { padding:20px 0; margin:0 auto; background:#e6e6e6; border-top:1px solid #f5f5f5; border-bottom:1px solid #ececec;} .body h2 { font:normal 20px Arial, Helvetica, sans-serif; color:#000; padding:10px 5px; margin:0;} .body h3 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;} .body p { font:normal 12px Arial, Helvetica, sans-serif; color:#000; line-height:1.8em; padding:5px 5px; margin:0;} .body p span { color:#5e5e5e; font: normal 11px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 0; margin:0;} .body p strong { color:#974960;} .body p.small { text-transform:uppercase; font: normal 12px Arial, Helvetica, sans-serif; color:#868686; line-height:1.8em; padding:0 0 0 80px; margin:0;} .body a { color:#141414; text-decoration:none; font: bold 11px Arial, Helvetica, sans-serif;} .body img { float:left; margin:5px 15px 5px 5px; padding:0;} .body img.floated { float:right; margin:5px 20px; padding:0;} .right { width:325px; margin:10px 8px 10px 0; padding:0 10px; float:right;} .left {width:560px; margin:10px 8px 10px 0; padding:0 10px; float:left;} .left_blog {width:250px; margin:10px 8px 10px 0; padding:0 10px; float:left;} .port { background: url(images/port_bg.gif) top repeat-y; padding:0; width:259px; margin:10px 10px 10px 20px; float:left;} .port_top { background: url(images/port_bg_top.gif) top no-repeat; margin:0px auto; padding:10px 0px;} .port_bottom { height:11px; margin:0; padding:0; width:259px; background: url(images/port_bg_bottom.gif) bottom no-repeat;} /* FBG */ .FBG_resize { background: #dcdcdc; margin:0; padding:0; border-top:1px solid #d0d0d0;} .FBG { margin:0 auto; padding:20px 0; width:960px;} .FBG h2 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;} .FBG p { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em; padding:5px 5px; margin:0;} .FBG img { float:left; margin:5px 10px 15px 5px; padding:0;} .FBG .blog { width:290px; float:left; margin:10px 0 10px 15px; padding:5px;} /********** contact form **********/ #contactform { margin:0; padding:5px 10px; } #contactform * { color:#2a2a2a; } #contactform ol { margin:0; padding:0; list-style:none; } #contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; } #contactform li.buttons { margin:5px 0 5px 0; clear:both; } #contactform label { margin:0; width:150px; display:block; padding:10px 0; color:#2a2a2a; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; } #contactform label span { color:#F00; } #contactform input.text { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:5px 2px; height:16px; background:#f9f9f9; float:right; } #contactform textarea { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:2px; background:#f9f9f9; float:right; } #contactform li.buttons input { padding:3px 0 3px 460px; margin:10px 0 0 0; border:0; color:#FFF; float:left; } /*************footer**********/ .footer_resize { width:960px; margin:0 auto; padding:10px 0;} .footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#737373;} .footer a { font:normal 11px Arial, Helvetica, sans-serif; color:#737373; text-decoration:none; padding:5px; margin:0;} .footer p.leftt { text-align:left; width:50%; margin:0; padding:10px 0 0 20px; float:left;} .footer p.rightt { text-align:right; width:30%; margin:0; padding:15px 20px 0 0; float:right;} .footer {padding:0; margin:0 auto; background:#1c1c1c; border-top:1px solid #2a2a2a; } p.clr, .clr { clear:both; padding:0; margin:0; background:none;} li.bg, .bg { float:right; clear:both; border-top:1px solid #e1e1e1; width:100%; padding:0; margin:5px 0; background:none; line-height:0;} /* Slider */ #slider { width:960px; padding:0 0 0 0; margin:0 auto;} div#slideshow { float: left; width: 100%; height: 318px; } .slider-item { width: 100% !important; height: 318px; } .slider_content_inner img { border: none; } .controls-center { width: 960px; margin-left: auto; margin-right: auto; } #slider_controls { float: right; position: relative; background:url(images/pag_bg.gif) no-repeat top center; margin:0; z-index: 1000; width:960px; height:23px;} #slider_controls ul { margin:0 auto; padding:2px 0; width:54px;} #slider_controls ul li { margin: 0; padding: 0; list-style: none; } #slider_controls ul li { float: left; display: block; } #slider_controls ul li a { width: 10px; height: 10px; background:url('images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:2px; margin:2px !important; margin:1px 1px; outline: none; } #slider_controls ul li a:focus { outline: none; } #slider_controls ul li a:hover, #slider_controls ul li a.activeSlide { background:url('images/tabs_1.gif') no-repeat center center; } #leftcontent { position:absolute; margin: 30px auto; width:120px; top:200px; left:300px; background-color:#eee; padding:10px; width:120px; } #rightcontent { position:absolute; margin: 30px auto; width:120px; top:200px; right:300px; background-color:#eee; padding:10px; width:120px; } 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! Hello All, I'm not too savvy with CSS, so please pardon if this seems uber easy. I have started to use Google AdSense on my web pages ( I wish I could show you an example on my website, but I am not allowed to post a URL on the forum), In Firefox, it shows the main content on the left hand side and the Ads on the right hand side in a columnar format, however, there is no word wrapping going on. In Internet Explorer, the AdSense shows at the top right and then below that my content starts. Here is what I have in my HTML in a single TD Cell: [div class="google120rightbanner"] [script type="text/javascript"][!-- google_ad_client = "myAdSenseID"; google_alternate_ad_url = "(Alternate Adsense URL)"; google_ad_width = 120; google_ad_height = 240; google_ad_format = "120x240_as"; google_ad_type = "text"; google_ad_channel = ""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "0000FF"; google_color_text = "000000"; google_color_url = "008000"; //--] [/script] [script type="text/javascript" src="(Javascript URL Location)"] [/script] [/div] [!-- Show my main content --] [div id="ContentPane" runat="server" style="padding-left:2px;"][/div] [!-- End my main content --] [div class="clear"][/div] This is what I have in my CSS: .google120rightbanner [ width: 122px; margin: 15px 10px 5px 10px; float: right; /*allows main content to wrap around the google ad */ /*note: after this we need to use the clear class to clear the float at end of container */ ] .clear [ clear: both; ] NOTE: I have changed the brackets so I can display this message on the forums. Does anyone have any idea what I am doing wrong here in getting the display I want using this CSS? Again, I'm not very savvy about this, so a good explanation would be helpful. Thank you all very much! Mark Gordon Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;} Thanks I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly. I'm using "em" instead of pixels when setting font sizes in CSS. The site has fixed length and width, do I HAVE to allow it to resize itself? New to CSS, but I'm looking for the following: I would like to create this matrix, with say 3/3 fields. Each of these fields will have an image of a particular size. The size for all 9 fields are identical. So something like: ******************************* * * * * * Image 1 * Image 2 * Image 3 * * * * * ******************************* * * * * * Image 4 * Image 5 * Image 6 * * * * * ******************************* * * * * * Image 7 * Image 8 * Image 9 * * * * * ******************************* I defined the matrix using div with the code: .matrixX10 { margin-top: 10%; position: absolute; } .matrixX20 { margin-top: 20%; position: absolute; } .matrixX30 { margin-top: 30%; position: absolute; } .matrixY10 { margin-left: 10%; position: absolute; } .matrixY20 { margin-left: 20%; position: absolute; } .matrixY30 { margin-left: 30%; position: absolute; } I defined each field as in eg: <div class="matrixX10 matrixY10">image 1</div> That actually works, but I would like to define the size of these images. Defining the size of the div does do anything (do I overlook something) and I do not like to, well define all images individually. Do I need to add another class, or am I writing a really messy code? Hello, I have something has follows: <div> ... <table> ... </table> </div> My document font size is 1em. My div font size is 1.4em. What should be the font-size in my table to get back to the 1em of the document? Thanks, Miguel http://www.santeecooperobgyn.com/obgyn I have just begun to design a website and already I have run into bizarre (to me) behavior. In the horizontal navigation bar, when you run your mouse over it, you can see that the inline element is bigger than the block element container because the background color changes, revealing a small 2px or so size difference. Here is the relevant CSS. Code: * { padding: 0px; margin: 0px; } #navbar { list-style-type: none; margin-left: 0px; background-color: #336633; padding: 0em; height: 2em; margin: 0px; font-size: 10pt; } #navbar li { display: inline; float: left; padding: 0.5em; } #navbar li a { color: white; text-decoration: none; text-transform: uppercase; padding-left: 10px; padding-right: 10px; padding-top: 0.5em; padding-bottom: 0.5em; vertical-align: baseline; line-height: 100%; } #navbar li a:hover { background-color: #669966; I have no idea why this happens, unless the inline element content height is actually determined by factors other than the line-height. It seems like the total height should sum to 2em in both cases. Hi, Im trying to code a small portfolio page but im having trouble with the sizing of one of the sections. Here is my page: http://www.zombiemod.com/blog/?cat=1#all Here is my code for the div: Code: #container div { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; } How do I make the Div display this size correctly? Is it possible to define the size of a DIV, by distance to the edges? Please help! I've got two rounded boxes one is contained in the other. If the innerbox grows, the outer box should grow with it. Firefox does a great job and grows with it but IE7 doesn't grow, any help would be greatly appreciated. here's the CSS i've used for IE: Code: /* first rounded box */ /* images are set in the index.php */ /* height and width details */ .rbtop div, .rbtop, .rbbot div, .rbbot { width: 100%; height: 14px; font-size: 1px; } /*.rbroundbox { width: 60em; margin: auto; background-color: #37a5f0;} */ .rbroundbox { position: absolute; top: 15px; width: 800px; margin: 5em 0 0 2em; background-color: #37a5f0; } .rbcontent { margin: 0 14px; min-height: 570px; height: 100%; } /* EOF first rounded box */ /* second rounded box */ /* images are set in the index.php */ /* height and width details */ .rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 { width: 100%; height: 24px; font-size: 1px; } /*.rbroundbox { width: 60em; margin: auto; }*/ .rbroundbox2 { position: absolute; top: 5px; width: 577px; margin: 9.5em 0 0 12em; background-color: #9cd5f0;} .rbcontent2 { margin: 0 14px; min-height: 375px; } /* EOF second rounded box */ here's the html i've used: Code: <body> <div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <div class="rbroundbox2"> <div class="rbtop2"><div></div></div> <div class="rbcontent2"> <p><?=$content?></p> </div><!-- /rbcontent2 --> <div class="rbbot2"><div></div></div> </div><!-- /rbroundbox2 --> </div><!-- /rbcontent --> <div class="rbbot"><div></div></div> </div> <!-- /rbroundbox --> </body> Hello, How large should my css file size be? hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like:
Code: body { background: #FFFFFF; /* for internet explorer */ scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; } a:link,a:active,a:visited { color: #494969; text-decoration: none } a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; } hr { background: transparent; color: #494969; height: 1px; border-width: 0px; } fieldset { margin: 0; padding: 1px; border: 1px solid #494969; } legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; } img { border: 0px; } table { background: transparent; } tr { background: transparent; } td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; } input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; } form { margin: 0px; padding: 0px; } any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller here is a preview with that css file in use : http://www.dbznetwork.net/ Well, the title might be a little oversimplified, but I guess it caught your attention In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable. Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately. Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this? Any help/suggestions/ideas are appreciated... This should be fairly simple, but I can't figure it out right now. I have a list of nav buttons that I have floated so they are inline. When I hover over them, a 4px border appears at the bottom. The problem is, it pushes my content container down on hover. I've tried margins and padding in different places, but can't seem to prevent it from happening. How do you prevent this? Code: #navcontainer { display:inline; } #navlist { margin: 0; padding: 0; padding-bottom:20px; border-bottom: 1px solid #FDC737; float:right; } #navlist ul, #navlist li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navlist li { line-height: 14px; } #navlist a:link, #navlist a:visited { float: left; font-weight: bold; margin: 0 10px 4px 10px; text-decoration: none; color: #fff; } #navlist a:link#current, #navlist a:visited#current, #navlist a:hover { border-bottom: 4px solid #FDC737; padding-bottom: 2px; background: transparent; color: #FDC737; } #navlist a:hover { color: #fdc737; } Code: ----------------------------------------------------- | | H1 |image| | | H2 Inline nav tabs ----------------------------------------------------- Hello. I was wondering how I would go about doing this. I have a div, the left and right side of it is an image that I want the size to be able to be fluctuated, say, if the div goes larger than say 50 px, then it will start repeating and get larger. I have tried to start this already, but I havent had any luck. I also am not having any luck on getting the backgroun image to show. Anyone here know how I would make it to where my left or right side (border-right, border-left) will automatically resize if it is needed to go larger or get my background image to show? It's for a news conent box for my website I am coding, and I need it to go larger than just a set value. Thanks for your help. P.S. this is what I have so far Code: <div style="width:460; height: auto; border-right: url("images/border_right.gif"); border-left: url("images/border_left.gif"); background-image: url("images/content_content.gif"); background-repeat: repeat;"> News content will go here </div> We have > 400 products in our children's boutique in Infant Girl as an example. Right now, you click 1-20, 21-41, etc. to view them by 20. I'd like to give people a way to view all, but here's my problem. I use a horizontal looper asp program to show 3 colms and products and how ever many rows required to show 20. Behind this I use a white CSS box that looks like this. <span class="detailsboxlist"></span> There's nothing in it. I use layers to push it behind the products. How can I now make it dynamically scale to the view all (400+ products) which change all of the time? Thanks!!! Mike |