Search Results

Search found 14298 results on 572 pages for 'css float'.

Page 170/572 | < Previous Page | 166 167 168 169 170 171 172 173 174 175 176 177  | Next Page >

  • How do I overlay text on an image who's size is to be set?

    - by Mike
    I am trying to make a bar chart using tables, which I have almost accomplished to my liking. The last step I want is text over my image which represents the bar. Here is the code I have thus far for building my little bar charts: $height = 50; //build length $width = 450; $multi = $brewAvg / 5; $width = $width * $multi; print " <tr > <td > $count. <a href=\"$breweryURL\"> $brewR</a> </td> <td > <img src=\"blueBar.png\" width=\"$width\" height=\"$height\"> </td> </tr> "; And this produces something like this: You can see in the code how I simply calculate the length of the bar based on a breweries rating. What I want to do next is have the rating number show on top of each breweries on the left hand side. How would I go about accomplishing this? Update: I tried a tutorial I read here: http://www.kavoir.com/2009/02/css-text-over-image.html and I changed my code to this: print "<div class=\"overlay\"> "; print " <tr valign=\"middle\" > <td > $count. <a href=\"$breweryURL\"> $brewR</a> </td> <td > <img src=\"blueBar.png\" width=\"$width\" height=\"$height\"> </td> </tr> "; print" <div class=\"text\"> <p> $brewAvg </p> </div> </div> "; And my css I added was this: <style> .overlay { position:relative; float:left; /* optional */ } .overlay .text { position:absolute; top:10px; /* in conjunction with left property, decides the text position */ left:10px; width:300px; /* optional, though better have one */ } </style> And it did put any of the value son top of my images. All the text is in a list above all the bars like this:

    Read the article

  • Function to get the font and calculate the width of the string not working on first instance

    - by user3627265
    I'm trying to calculate the width of the string based on the font style and size. The user will provide the string, the font style and the font size, and then after giving all the data the user will hit the submit button and the function will trigger. Basically this script works but only when the submit button is hit twice or the font is selected twice,. I mean if you selec DNBlock as a font, it will not work for first time, but the second time you hit submit, it will then work. I'm not sure where is the problem here, but when I used the default font style like Arial, times new roman etc it works perfectly fine. Any Idea on this? I suspected that the font style is not being rendered by the script or something. Correct me if I'm wrong. Thanks //Repeat String String.prototype.repeat = function( num ) { return new Array( num + 1 ).join( this ); } //Calculate the width of string String.prototype.textWidth = function() { var fntStyle = document.getElementById("fntStyle").value; if(fntStyle == "1") { var fs = "DNBlock"; } else if(fntStyle == "2") { var fs = "DNBlockDotted"; } else if(fntStyle == "3") { var fs = "DNCursiveClassic"; } else if(fntStyle == "4") { var fs = "DNCursiveDotted"; } else if(fntStyle == "5") { var fs = "FoundationCursiveDots-Regul"; } var f = document.getElementById("fntSize").value.concat('px ', fs), o = $('<div>' + this + '</div>') .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}) .appendTo($('body')), w = o.width(); o.remove(); return w; } //Trigger the event $("#handwriting_gen").submit(function () { var rptNO = parseInt($('#rptNO').val()); $("[name='txtLine[]']").each(function(){ alert(this.value.repeat(rptNO).textWidth()); if(this.value.repeat(rptNO).textWidth() > 1000) { $(this).focus(); $(this).css({"background-color":"#f6d9d4"}).siblings('span.errorMsg').text('Text is too long.'); event.preventDefault(); } }); });

    Read the article

  • Highlighting the current page in rails, only works for some pages

    - by raphael_turtle
    I've used this tutorial to highlight the current page in the menu. I have a pages controller with a few static pages, for the home page I simply have def home @title = 'Home and similar for contact pages etc. Then in my main layout file I have <body class="<%= @title %>"> and this works fine to set the correct css, but how do I set @title for my other controllers where there's more than one action?

    Read the article

  • What is the best way to observe the scroll over an element with overflow set?

    - by Phunky
    It's simple to observe the documents scroll event but I can't seem to find anything relating to the scroll of any other element with css property overflow being set? To get around this myself i've been observing mousemove which only fires while you hold down on the scrollbar but this would need to be teamed with a mouse wheel observe also to get the full effect. Could anyone point me in the right direction for a better way of implementing this?

    Read the article

  • Show progress without using an image

    - by Jon1
    I would like to design a progress bar, without using an image (eg animated gif...). Can this be done with just html css and jquery? trying to be creative here :) Update: the progress percentage cannot be determined, so it has to be a loop

    Read the article

  • Why does an error appear every time I try to open the Ubuntu Software Center? [duplicate]

    - by askubuntu7639
    This question already has an answer here: How do I remove a broken software source? 3 answers There is a glitch on the Ubuntu Software Center and whenever I open it an error appears and it keeps loading and never opens. Why does this happen? I have installed Ubuntu 13.04 on a disk and partitioned it. Please help me and ask for excess information if you need it. If you know of any duplicates please show me them!! This is the output of a question someone asked me. SystemError: E:Type '<!DOCTYPE' is not known on line 1 in source list /etc/apt/sources.list.d/medibuntu.list This next output is the output of cat /etc/apt/sources.list.d/medibuntu.list </div> <div style="float:left;"> <div class="textwidget"><script type="text/javascript"><!-- google_ad_client = "ca-pub-2917661377128354"; /* 160X600 Sidebar UX */ google_ad_slot = "9908287444"; google_ad_width = 160; google_ad_height = 600; //-- Recent Comments <article> <div style="float:left; display:block; margin:0 10px 10px 0; border:1px solid #CCCCCC; padding:3px; width:35px; height:35px;"><img alt='' src='http://0.gravatar.com/avatar/ae5f4503d5f167f1cf62d3e36e8242b6?s=35&amp;d=&amp;r=G' class='avatar avatar-35 photo' height='35' width='35' /></div> <div style="float:left;"> <h4 class="author">Richard Syme</h4> <p class="meta"> <time datetime="2013-09-24" pubdate>September 24, 2013</time> | <a class="permalink" href="http://www.unixmen.com/how-to-customize-you-vlc-hot-keys/#comment-13732">#</a> </p> </div> <div class="content" style="float:left;"><p>I dont have a clear button under the hotkeys. All i want to do is get rid of all hotkeys.</p> </article> <article> <div style="float:left; display:block; margin:0 10px 10px 0; border:1px solid #CCCCCC; padding:3px; width:35px; height:35px;"><img alt='' src='http://1.gravatar.com/avatar/ffabde94437e996a506e31e981bcf8fc?s=35&amp;d=&amp;r=G' class='avatar avatar-35 photo' height='35' width='35' /></div> <div style="float:left;"> <h4 class="author">Abin Thomas Mathew</h4> <p class="meta"> <time datetime="2013-09-24" pubdate>September 24, 2013</time> | <a class="permalink" href="http://www.unixmen.com/install-lamp-server-in-centos-6-4-rhel-6-4/#comment-13727">#</a> </p> </div> <div class="content" style="float:left;"><p>Simple and easy to follow tutorial to install and start of phpMyAdmin. Thank you</p> </article> <article> <div style="float:left; display:block; margin:0 10px 10px 0; border:1px solid #CCCCCC; padding:3px; width:35px; height:35px;"><img alt='' src='http://0.gravatar.com/avatar/499ccc1154e9b8569b87413434220b91?s=35&amp;d=&amp;r=G' class='avatar avatar-35 photo' height='35' width='35' /></div> <div style="float:left;"> <h4 class="author">SK</h4> <p class="meta"> <time datetime="2013-09-24" pubdate>September 24, 2013</time> | <a class="permalink" href="http://www.unixmen.com/munich-giving-ubuntu-linux-cds-citizens/#comment-13725">#</a> </p> </div> <div class="content" style="float:left;"><p>I have Bosslinux and i used it for a while. Now i swiched to Ubuntu 13.04.</p> </article> <article> <div style="float:left; display:block; margin:0 10px 10px 0; border:1px solid #CCCCCC; padding:3px; width:35px; height:35px;"><img alt='' src='http://1.gravatar.com/avatar/3dc2f7140bdd857dcdfe815a6e29aa6b?s=35&amp;d=&amp;r=G' class='avatar avatar-35 photo' height='35' width='35' /></div> <div style="float:left;"> <h4 class="author">Anon</h4> <p class="meta"> <time datetime="2013-09-24" pubdate>September 24, 2013</time> | <a class="permalink" href="http://www.unixmen.com/linus-torvalds-talks-backdoor-linuxcon/#comment-13724">#</a> </p> </div> <div class="content" style="float:left;"><p>Do you know how much extra bloat is in Ubuntu these days? How the hell does anyone really know?</p> </article> <article> <div style="float:left; display:block; margin:0 10px 10px 0; border:1px solid #CCCCCC; padding:3px; width:35px; height:35px;"><img alt='' src='http://1.gravatar.com/avatar/9dd28d1cf5efe754fa58b53c1e6de401?s=35&amp;d=&amp;r=G' class='avatar avatar-35 photo' height='35' width='35' /></div> <div style="float:left;"> <h4 class="author"><a href="http://ambitiousgeeks.blogspot.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-commentauthor','http://ambitiousgeeks.blogspot.com']);" rel='external nofollow' class='url'>Ambition</a></h4> <p class="meta"> <time datetime="2013-09-24" pubdate>September 24, 2013</time> | <a class="permalink" href="http://www.unixmen.com/linus-torvalds-talks-backdoor-linuxcon/#comment-13723">#</a> </p> </div> <div class="content" style="float:left;"><p>True :)</p> </article> </div> <div style="float:left;"> &nbsp;<script type="text/javascript"> window.___gcfg = {lang: 'en-US'}; (function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); <div class="execphpwidget"></div> </div> <div class="module2"> <div class="recentPost"> <h3 class="module-title2">Favorite Links</h3> <ul class='xoxo blogroll'> http://www.iticy.com']);"Cheap Hosting http://www.tuxmachines.org']);"TuxMachines.org http://www.ubuntugeek.com']);"UbuntuGeek.com http://www.stelinuxhost.com']);"Webdesign & SEO </ul> <img src="http://180016988.r.cdn77.net/wp-content/themes/unimax/images/bigLine.jpg" alt="" /> </div> </div> <div align="center" style="min-height:610px;"> <div class="execphpwidget"></div> <div class="textwidget"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://creativecommons.org']);"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" /></a><br />This work by <a xmlns:cc="http://creativecommons.org/ns#" href="unixmen.com" property="cc:attributionName" rel="cc:attributionURL">unixmen.com</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US" >Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License</a>.</div> </div> </div> <!-- #primary .widget-area --> </div> Unixmen Archive Select Month September 2013 August 2013 July 2013 June 2013 May 2013 April 2013 March 2013 February 2013 January 2013 December 2012 November 2012 October 2012 September 2012 August 2012 July 2012 June 2012 May 2012 April 2012 March 2012 February 2012 January 2012 December 2011 November 2011 October 2011 September 2011 August 2011 July 2011 June 2011 May 2011 April 2011 March 2011 February 2011 January 2011 December 2010 November 2010 October 2010 September 2010 August 2010 July 2010 June 2010 May 2010 April 2010 March 2010 February 2010 January 2010 December 2009 November 2009 October 2009 September 2009 August 2009 July 2009 June 2009 May 2009 April 2009 March 2009 February 2009 January 2009 December 2008 Tags Cloudandroid apache browser Centos chrome command line Debian eyecandy Fedora firefox games gaming gnome google karmic koala kde libreoffice Linux linux distribution LinuxMint lucid lynx maverick meerkat mysql news oneiric ocelot openoffice opensource opensuse oracle ppa Precise Pangolin release RHEL security server software themes tools ubuntu unix upgrade virtualbox vlc windows wine Unixmen Twitts Firefox 16, a treat for developers http://t.co/cnd27CzT Ubuntu 12.10 ‘Quantal Quetzal’: Beta 2 Sneak Peek http://t.co/hd4LwDOy Top 5 security Myths about Linux; and their realities http://t.co/zO1LgHST About Us Advertising Sitemap Privacy Contact Us Hire Us Copyright © 2008-2013 Unixmen.com . Maintained by Unixmen . /* */ jQuery(document).on('ready post-load', easy_fancybox_handler ); http://www.w3-edge.com/wordpress-plugins/ Page Caching using apc Database Caching 3/186 queries in 0.035 seconds using apc Content Delivery Network via 180016988.r.cdn77.net Served from: www.unixmen.com @ 2013-09-25 01:38:14 by W3 Total Cache

    Read the article

  • CCSpriteHole in cocos2d 2.0?

    - by rakkarage
    i was using this cocos2d class CCSpriteHole in cocos2d 1.0 fine... http://jpsarda.tumblr.com/post/15779708304/new-cocos2d-iphone-extensions-a-progress-bar-and-a i am trying to convert it to cocos2d 2.0... i got it to compile by changing glVertexPointer to glVertexAttribPointer like in the 2.0 version of CCSpriteScale9 here http://jpsarda.tumblr.com/post/9162433577/scale9grid-for-cocos2d and changing contentSizeInPixels_ to contentSize_... -(id) init { if( (self=[super init]) ) { opacityModifyRGB_ = YES; opacity_ = 255; color_ = colorUnmodified_ = ccWHITE; capSize=capSizeInPixels=CGSizeZero; //Not used blendFunc_.src = CC_BLEND_SRC; blendFunc_.dst = CC_BLEND_DST; // update texture (calls updateBlendFunc) [self setTexture:nil]; // default transform anchor anchorPoint_ = ccp(0.5f, 0.5f); vertexDataCount=24; vertexData = (ccV2F_C4F_T2F*) malloc(vertexDataCount * sizeof(ccV2F_C4F_T2F)); [self setTextureRectInPixels:CGRectZero untrimmedSize:CGSizeZero]; } return self; } -(id) initWithTexture:(CCTexture2D*)texture rect:(CGRect)rect { NSAssert(texture!=nil, @"Invalid texture for sprite"); // IMPORTANT: [self init] and not [super init]; if( (self = [self init]) ) { [self setTexture:texture]; [self setTextureRect:rect]; } return self; } -(id) initWithTexture:(CCTexture2D*)texture { NSAssert(texture!=nil, @"Invalid texture for sprite"); CGRect rect = CGRectZero; rect.size = texture.contentSize; return [self initWithTexture:texture rect:rect]; } -(id) initWithFile:(NSString*)filename { NSAssert(filename!=nil, @"Invalid filename for sprite"); CCTexture2D *texture = [[CCTextureCache sharedTextureCache] addImage: filename]; if( texture ) return [self initWithTexture:texture]; return nil; } +(id)spriteWithFile:(NSString*)f { return [[self alloc] initWithFile:f]; } - (void) dealloc { if (vertexData) free(vertexData); } -(void) updateColor { ccColor4F color4; color4.r=(float)color_.r/255.0f; color4.g=(float)color_.g/255.0f; color4.b=(float)color_.b/255.0f; color4.a=(float)opacity_/255.0f; for (int i=0; i<vertexDataCount; i++) { vertexData[i].colors=color4; } } -(void)updateTextureCoords:(CGRect)rect { CCTexture2D *tex = texture_; if(!tex) return; float atlasWidth = (float)tex.pixelsWide; float atlasHeight = (float)tex.pixelsHigh; float left,right,top,bottom; left = rect.origin.x/atlasWidth; right = left + rect.size.width/atlasWidth; top = rect.origin.y/atlasHeight; bottom = top + rect.size.height/atlasHeight; // // |/|/|/| // CGSize capTexCoordsSize=CGSizeMake(capSizeInPixels.width/atlasWidth, capSizeInPixels.height/atlasHeight); // From left to right //Top band // Left vertexData[0].texCoords=(ccTex2F){left,top}; vertexData[1].texCoords=(ccTex2F){left,top+capTexCoordsSize.height}; vertexData[2].texCoords=(ccTex2F){left+capTexCoordsSize.width,top}; vertexData[3].texCoords=(ccTex2F){left+capTexCoordsSize.width,top+capTexCoordsSize.height}; // Center vertexData[4].texCoords=(ccTex2F){right-capTexCoordsSize.width,top}; vertexData[5].texCoords=(ccTex2F){right-capTexCoordsSize.width,top+capTexCoordsSize.height}; // Right vertexData[6].texCoords=(ccTex2F){right,top}; vertexData[7].texCoords=(ccTex2F){right,top+capTexCoordsSize.height}; //Center band // Left vertexData[8].texCoords=(ccTex2F){left,bottom-capTexCoordsSize.height}; vertexData[9].texCoords=(ccTex2F){left,top+capTexCoordsSize.height}; vertexData[10].texCoords=(ccTex2F){left+capTexCoordsSize.width,bottom-capTexCoordsSize.height}; vertexData[11].texCoords=(ccTex2F){left+capTexCoordsSize.width,top+capTexCoordsSize.height}; // Center vertexData[12].texCoords=(ccTex2F){right-capTexCoordsSize.width,bottom-capTexCoordsSize.height}; vertexData[13].texCoords=(ccTex2F){right-capTexCoordsSize.width,top+capTexCoordsSize.height}; // Right vertexData[14].texCoords=(ccTex2F){right,bottom-capTexCoordsSize.height}; vertexData[15].texCoords=(ccTex2F){right,top+capTexCoordsSize.height}; //Bottom band //Left vertexData[16].texCoords=(ccTex2F){left,bottom}; vertexData[17].texCoords=(ccTex2F){left,bottom-capTexCoordsSize.height}; vertexData[18].texCoords=(ccTex2F){left+capTexCoordsSize.width,bottom}; vertexData[19].texCoords=(ccTex2F){left+capTexCoordsSize.width,bottom-capTexCoordsSize.height}; // Center vertexData[20].texCoords=(ccTex2F){right-capTexCoordsSize.width,bottom}; vertexData[21].texCoords=(ccTex2F){right-capTexCoordsSize.width,bottom-capTexCoordsSize.height}; // Right vertexData[22].texCoords=(ccTex2F){right,bottom}; vertexData[23].texCoords=(ccTex2F){right,bottom-capTexCoordsSize.height}; } -(void) updateVertices { float left=0; //-spriteSizeInPixels.width*0.5f; float right=left+contentSize_.width; float bottom=0; //-spriteSizeInPixels.height*0.5f; float top=bottom+contentSize_.height; float holeLeft=holeRect.origin.x*CC_CONTENT_SCALE_FACTOR(); float holeRight=holeLeft+holeRect.size.width*CC_CONTENT_SCALE_FACTOR(); float holeBottom=holeRect.origin.y*CC_CONTENT_SCALE_FACTOR(); float holeTop=holeBottom+holeRect.size.height*CC_CONTENT_SCALE_FACTOR(); // // |/|/|/| // // From left to right //Top band // Left vertexData[0].vertices=(ccVertex2F){left,top}; vertexData[1].vertices=(ccVertex2F){left,holeTop}; vertexData[2].vertices=(ccVertex2F){holeLeft,top}; vertexData[3].vertices=(ccVertex2F){holeLeft,holeTop}; // Center vertexData[4].vertices=(ccVertex2F){holeRight,top}; vertexData[5].vertices=(ccVertex2F){holeRight,holeTop}; // Right vertexData[6].vertices=(ccVertex2F){right,top}; vertexData[7].vertices=(ccVertex2F){right,holeTop}; //Center band // Left vertexData[8].vertices=(ccVertex2F){left,holeBottom}; vertexData[9].vertices=(ccVertex2F){left,holeTop}; vertexData[10].vertices=(ccVertex2F){holeLeft,holeBottom}; vertexData[11].vertices=(ccVertex2F){holeLeft,holeTop}; // Center vertexData[12].vertices=(ccVertex2F){holeRight,holeBottom}; vertexData[13].vertices=(ccVertex2F){holeRight,holeTop}; // Right vertexData[14].vertices=(ccVertex2F){right,holeBottom}; vertexData[15].vertices=(ccVertex2F){right,holeTop}; //Bottom band //Left vertexData[16].vertices=(ccVertex2F){left,bottom}; vertexData[17].vertices=(ccVertex2F){left,holeBottom}; vertexData[18].vertices=(ccVertex2F){holeLeft,bottom}; vertexData[19].vertices=(ccVertex2F){holeLeft,holeBottom}; // Center vertexData[20].vertices=(ccVertex2F){holeRight,bottom}; vertexData[21].vertices=(ccVertex2F){holeRight,holeBottom}; // Right vertexData[22].vertices=(ccVertex2F){right,bottom}; vertexData[23].vertices=(ccVertex2F){right,holeBottom}; } -(void) setHole:(CGRect)r inRect:(CGRect)totalSurface { holeRect=r; self.contentSize=totalSurface.size; holeRect.origin=ccpSub(holeRect.origin,totalSurface.origin); CGPoint holeCenter=ccp(holeRect.origin.x+holeRect.size.width*0.5f,holeRect.origin.y+holeRect.size.height*0.5f); self.anchorPoint=ccp(holeCenter.x/contentSize_.width,holeCenter.y/contentSize_.height); //[self updateTextureCoords:rectInPixels_]; [self updateVertices]; [self updateColor]; } -(void) draw { BOOL newBlend = NO; if( blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST ) { newBlend = YES; glBlendFunc( blendFunc_.src, blendFunc_.dst ); } glBindTexture(GL_TEXTURE_2D, [texture_ name]); glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[0].vertices); glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[0].texCoords); glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[0].colors); glDrawArrays(GL_TRIANGLE_STRIP, 0, 8); glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[8].vertices); glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[8].texCoords); glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[8].colors); glDrawArrays(GL_TRIANGLE_STRIP, 0, 8); glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[16].vertices); glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[16].texCoords); glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[16].colors); glDrawArrays(GL_TRIANGLE_STRIP, 0, 8); if( newBlend ) glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST); } -(void)setTextureRectInPixels:(CGRect)rect untrimmedSize:(CGSize)untrimmedSize { rectInPixels_ = rect; rect_ = CC_RECT_PIXELS_TO_POINTS( rect ); //[self setContentSizeInPixels:untrimmedSize]; [self updateTextureCoords:rectInPixels_]; } -(void)setTextureRect:(CGRect)rect { CGRect rectInPixels = CC_RECT_POINTS_TO_PIXELS( rect ); [self setTextureRectInPixels:rectInPixels untrimmedSize:rectInPixels.size]; } // // RGBA protocol // #pragma mark CCSpriteHole - RGBA protocol -(GLubyte) opacity { return opacity_; } -(void) setOpacity:(GLubyte) anOpacity { opacity_ = anOpacity; // special opacity for premultiplied textures if( opacityModifyRGB_ ) [self setColor: (opacityModifyRGB_ ? colorUnmodified_ : color_ )]; [self updateColor]; } - (ccColor3B) color { if(opacityModifyRGB_){ return colorUnmodified_; } return color_; } -(void) setColor:(ccColor3B)color3 { color_ = colorUnmodified_ = color3; if( opacityModifyRGB_ ){ color_.r = color3.r * opacity_/255; color_.g = color3.g * opacity_/255; color_.b = color3.b * opacity_/255; } [self updateColor]; } -(void) setOpacityModifyRGB:(BOOL)modify { ccColor3B oldColor = self.color; opacityModifyRGB_ = modify; self.color = oldColor; } -(BOOL) doesOpacityModifyRGB { return opacityModifyRGB_; } #pragma mark CCSpriteHole - CocosNodeTexture protocol -(void) updateBlendFunc { if( !texture_ || ! [texture_ hasPremultipliedAlpha] ) { blendFunc_.src = GL_SRC_ALPHA; blendFunc_.dst = GL_ONE_MINUS_SRC_ALPHA; [self setOpacityModifyRGB:NO]; } else { blendFunc_.src = CC_BLEND_SRC; blendFunc_.dst = CC_BLEND_DST; [self setOpacityModifyRGB:YES]; } } -(void) setTexture:(CCTexture2D*)texture { // accept texture==nil as argument NSAssert( !texture || [texture isKindOfClass:[CCTexture2D class]], @"setTexture expects a CCTexture2D. Invalid argument"); texture_ = texture; [self updateBlendFunc]; } -(CCTexture2D*) texture { return texture_; } @end but now positioning and scaling seem to not work? and it starts in the wrong position... but changing the opacity still works. so i was wondering if anyone can see why my 2.0 version is not working? or if maybe there is a better way to do a sprite hole with cocos2d/opengl 2.0? shaders? thanks

    Read the article

  • Modifying a HTML page to fix several "bugs" add a function to next/previous on a option dropdown

    - by Dennis Sylvian
    SOF, I've got a few problems plaguing me at the moment and am wondering if anyone could assist me with them. I'm trying to get Next Class | Previous Class to act as buttons so that when Next Class is clicked it will go to the next item in the dropdown list and for previous it would go to back one. There used to be a scroll bar that allowed me to scroll the main window left and right, it's missing because (I think it was to do with the scroll left and scroll right function) The footer at the bottom doesn't show correctly on mobile devices; for some reason it appears completely differently to as it does on a computer. The "bar" practically and the Scroll Left and Scroll buttons don't appear at all on mobile devices. The scroll left button is unable to be clicked for some reason, I'm unsure what I've done wrong. Refreshing the page resets the horizontal scroll position to far left (I'm pretty sure this relates to the scroll bar) I want to also find a way so that on mobile devices the the header will not show the placeholder image, however I can't work out what CSS media tag(s) I should be using. Latest: http://jsfiddle.net/pwv7u/ Smaller HTML <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DATA DATA DATA DATA DATA DATA DATA DATA</title> <style type="text/css"> <!-- @import url("nstyle.css"); --> </style> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function() { for (var i=0;i<($("table").children().length);i++){ if(readCookie(i)) $($($("table").children()[i]).children()[(readCookie(i))]).toggleClass('selected').siblings().removeClass('selected'); } $("tr").click(function(){ $(this).toggleClass('selected').siblings().removeClass('selected'); if(readCookie($(this).parent().index())){ if(readCookie($(this).parent().index())==$(this).index()) eraseCookie($(this).parent().index()); else{ eraseCookie($(this).parent().index()); createCookie($(this).parent().index(),$(this).index(),1); } } else createCookie($(this).parent().index(),$(this).index(),1); }); // gather CLASS info var selector = $('.class-selector').on('change', function(){ var id = this.value; if (id!==''){ scrollToAnchor(id); } }); $('a[id^="CLASS"]').each(function(){ var id = this.id, option = $('<option>',{ value: this.id, text:this.id }); selector.append(option); }); function scrollToAnchor(aid) { var aTag = $("a[id='" + aid + "']"); $('html,body').animate({ scrollTop: aTag.offset().top - 80 }, 1); } $("a.TOPJS").click(function () { scrollToAnchor('TOP'); }); $("a.KEYJS").click(function () { scrollToAnchor('KEY'); }); $("a.def").click(function () { $('#container').animate({ "scrollLeft": "-=204" }, 200); }); $("a.abc").click(function () { $("#container").animate({ "scrollLeft": "+=204" }, 200); }); function createCookie(name,value,days) { var expires; if (days) { var date = new Date(); date.setMilliseconds(0); date.setSeconds(0); date.setMinutes(0); date.setHours(0); date.setDate(date.getDate()+days); expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } }); </script> </head> <body> <div id="header_container"> <div id="header"> <a href="http://site.x/" target="_blank"><img src="http://placehold.it/300x80"></a> <select class="class-selector"> <option value="">-select class-</option> </select> <div class="classcycler"> <a href="#TOP"><font color=#EFEFEF>Next Class</font></a> <font color=red>|</font> <a href="#TOP"><font color=#EFEFEF>Previous Class</font></a> </div> <div id="header1"> Semi-Transparent Image <a href="#TOP"><font color=#EFEFEF>Up to Top</font></a> | <a href="#KEY"><font color=#EFEFEF>Down to Key</font></a> </div> </div> </div> <a id="TOP"></a> <div id="container"> <table id="gradient-style"> <tbody> <thead> <tr> <th scope="col"><a id="CLASS1"></a>Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class<br>Test 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class Data 1</th> <th scope="col">Class 1<br>Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1<br>Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1 Class 1</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> (data text)</th> <th scope="col">title text</th> <th scope="col">text</th> <th scope="col">text</th> <th scope="col">title text</th> <th scope="col">title text</th> </tr> </thead> <tr class="ft3"><td>testing data</td><td>testing data</td><td>test</td><td>class b</td><td>test4</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left"></div></td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><tr> <tr class="f3"><td>test</td><td>test</td><td>test</td><td>class a</td><td>test2</td><td><div align="left"> </div></td><td><div align="left"></div></td><td><div align="left"></div></td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><tr> <thead> <tr> <th scope="col"><a id="CLASS2"></a>Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class<br>Test 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class Data 2</th> <th scope="col">Class 2<br>Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2<br>Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2 Class 2</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> (data text)</th> <th scope="col">title text</th> <th scope="col">text</th> <th scope="col">text</th> <th scope="col">title text</th> <th scope="col">title text</th> </tr> </thead> <tr class="ft3"><td>testing data</td><td>testing data</td><td>test</td><td>class f</td><td>test2</td><td><div align="left">data</div></td><td><div align="left"></div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><tr> <tr><td>test</td><td>testing data</td><td>test</td><td>class f</td><td>test4</td><td><div align="left">data</div></td><td><div align="left"></div></td><td><div align="left"></div></td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><tr> <tr class="f3"><td>test</td><td>testing data</td><td>testing data</td><td>class d</td><td>test5</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><tr> <tr><td>testing data</td><td>test</td><td>test</td><td>class f</td><td>test5</td><td><div align="left"></div></td><td><div align="left"></div></td><td><div align="left">data</div></td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><tr> <tr class="f2"><td>test</td><td>test</td><td>testing data</td><td>class a</td><td>test1</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><tr> </tbody> <tfoot> <tr> <th class="alt" colspan="34" scope="col"><a id="KEY"></a><img src="http://placehold.it/300x50"></th> </tr> <tr> <td colspan="34"><em><b>DATA DATA</b> - DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA </em></td> </tr> <tr> <td class="alt" colspan="34"><em><b>DAT DATA</b> - DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA </em></td> </tr> </tfoot> </table> </div> <div id="footer_container"> <div id="footer"> <a href="http://site.x/" target="_blank"><img src="http://placehold.it/300x80"></a> <div class="footleft"> <a class="def" href="javascript: void(0);"><font color="#EFEFEF">Scroll Left</font></a> </div> <div id="footer1"> <font color="darkblue">Semi-Transparent Image</font> <i>Copyright &copy; 2013 <a href="http://site.x/" target="_blank" style="text-decoration: none"><font color=#ADD8E6>site</font></a>.</i> </div> <div id="footer2"> <i>All Rights Reserved.</i> </div> <div class="footright"> <a class="abc" href="javascript: void(0);"><font color="#EFEFEF">Scroll Right</font></a> </div> </div> </div> </body> </html> CSS gradient-style * { white-space: nowrap; } #header .class-selector { top: 10px; left: 20px; position: fixed; } #header .classcycler { top: 45px; left: 20px; position: fixed; font-size:20px; } body { line-height: 1.6em; background-color: #535353; overflow-x: scroll; } #gradient-style { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin: 0px; width: 100%; text-align: center; border-collapse: collapse; } #gradient-style th { font-size: 13px; font-weight: normal; line-height:250%; padding-left: 5px; padding-right: 5px; background: #535353 url('table-images/gradhead.png') repeat-x; border-top: 1px solid #fff; border-bottom: 1px solid #fff; color: #ffffff; } #gradient-style th.alt { font-family: "Times New Roman", Serif; text-align: left; padding: 10px; font-size: 26px; } #gradient-style td { padding-left: 5px; padding-right: 5px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; color: #00000; border-top: 1px solid #fff; background: #FFF url('table-images/gradback.png') repeat-x; } #gradient-style tr.ft3 td { color: #00000; background: #99cde7 url('table-images/gradoverallstudent.png') repeat-x; font-weight: bold; } #gradient-style tr.f1 td { color: #00000; background: #99cde7 url('table-images/gradbeststudent.png') repeat-x; } #gradient-style tr.f2 td { color: #00000; background: #b7e2b6 url('table-images/gradmostattentedstudent.png') repeat-x; } #gradient-style tr.f3 td { color: #00000; background: #a9cd6c url('table-images/gradleastlatestudtent.png') repeat-x; } #gradient-style tfoot tr td { background: #6FA275; font-size: 12px; color: #000; padding: 10; text-align: left; } #gradient-style tbody tr:hover td, #gradient-style tbody tr.selected td { background: #d0dafd url('table-images/gradhover.png') repeat-x; color: #339; } body { margin: 0; padding: 0; } #header_container { background: #000000 url('table-images/gradhead.png') repeat-x; border: 0px solid #666; height: 80px; left: 0; position: fixed; width: 100%; top: 0; } #header { position: relative; margin: 0 auto; width: 500px; height: 100%; text-align: center; color: #0c0aad; } #header1 { position: absolute; width: 125%; top: 50px; } #container { margin: 0 auto; overflow: auto; padding: 80px 0; width: 100%; } #content { } #footer_container { background: #000000 url('table-images/gradhead.png') repeat-x; border: 0px solid #666; bottom: 0; height: 95px; left: 0; position: fixed; width: 100%; } #footer { position: relative; margin: 0 auto; height: 100%; text-align: center; color: #FFF; } #footer1 { position: absolute; width: 103%; top: 50px; } #footer2 { position: absolute; width: 110%; top: 70px; } #footer .footleft { top: 45px; left: 2%; position: absolute; font-size:20px; } #footer .footright { top: 45px; right: 2%; position: absolute; font-size:20px; }

    Read the article

  • Coloring even heighten columns

    - by verror
    I try to set different a background colors for left and right columns and to maintain the same height. So I set a background color for outer wrapper ("container" div) so it will set a color to rightBar. But this didn't work. Online Demo I want it to work on all browsers. Markup: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> </head> <body> <div class="contentcontainer"> <div class="container"> <div class="mainBar"> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> </div> <div class="rightBar"> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> </div> </div> </div> </body> </html> CSS: body { font-family: Verdana,Tahoma,Arial, "Trebuchet MS" ,Sans-Serif,Georgia,Courier, "Times New Roman" ,Serif; margin: 0px; padding: 0px; background: repeat-x scroll center bottom #C4DAE9; text-align:center; } .contentcontainer { } .container { margin-left: auto; margin-right: auto; margin-top:5px; width: 99%; text-align: left; background-color:Gray; clear:both; } .mainBar { width:70%; float:left; background-color:White; } .rightBar { width:30%; float:left; }

    Read the article

  • How to get round corner textbox using jquery without images

    - by Rajasekar
    I try to get round corners for textbox. But how can i get it. Here is the class .tbox { float:left; width:200px; margin-top:10px; margin-left:10px; } when i call using jquery using $('.tbox').corners("4px"); it is not working. I already included Jquery.js and jquery.corners.js. But its not working. Any help would be appreciated

    Read the article

  • error of integer overflow

    - by user308565
    This the part of my OpenGL code, I am getting an error for : struct Ball { float x; float y; float rot; float dir; bool rmv; Ball* next; }; Ball* curBall; void addBall() { if (balls==NULL) { balls=new Ball; balls->next=NULL; curBall=balls; } else { curBall->next=new Ball; curBall=curBall->next; curBall->next=NULL; } curBall->x=((float)rand()/(float)(RAND_MAX+1))*(ww-1) +1; curBall->y=((float)rand()/(float)(RAND_MAX+1))*(wh-1) +1; curBall->dir=((float)rand()/(float)(RAND_MAX+1))*(2*PI-1) +1; curBall->rot=((float)rand()/(float)(RAND_MAX+1))*(359) +1; curBall->rmv=false; } error : In function ‘void addBall()’: file.cpp:120: warning: integer overflow in expression file.cpp:121: warning: integer overflow in expression file.cpp:122: warning: integer overflow in expression file.cpp:123: warning: integer overflow in expression

    Read the article

  • Why won't my DIV height grow? Is it because I am using floats?

    - by user1684636
    Please help! I am trying to create some div sections and some of these div sections have some other divs that are floated. All of which I have cleared. But the sections are not growing to accomodate the content inside of them. The following is my HTML - <div class="data"> <div class="name">Data</div> <div class="first section"> <div class="title">First Section</div> <div class="left settings"> <div class="row"> <div class="field">First Name</div> <div class="value">John</div> </div> <div class="row"> <div class="field">Last Name</div> <div class="value">Smith</div> </div> </div> <div class="right settings"> <div class="row"> <div class="field">ID</div> <div class="value">321</div> </div> <div class="row"> <div class="field">Group</div> <div class="value">Eng</div> </div> </div> </div> <div class="second section"> <div class="title">Second Section</div> </div> <div class="third section"> <div class="title">Third Section</div> </div> </div> The following is my CSS - div.data { position: relative; top: 1em; width: 100em; } div.data div.name { color: #0066FF; font-weight: bold; } div.data div.section div.title { color: green; font-weight: bold; } /** first section **/ div.data div.first div.settings { position: relative; width: 799px; border-top: 1px solid; float: left; } div.data div.first div.left { border-left: 1px solid; } div.data div.first div.settings div.row { border-bottom: 1px solid; clear: both; height: 2em; } div.data div.first div.settings div.row div { float: left; height: 22px; padding: 5px; border-right: 1px solid; } div.data div.first div.settings div.row div.field { width: 192px; } div.data div.first div.settings div.row div.value { width: 585px; } /** second section **/ div.data div.second { clear: both; } For the first section, I have a title and a table that is made up of a left and right. Both of these are floated left and cleared. The rows of the left and right table have a field and value which are also floated left and right and cleared. At this point, I expect "first section" to grow as the content inside of it grows. But instead the height is stuck at 22px, the same height as the section title! What is going on? I tried overflow:auto for div.section and that worked. But when I tried to set this style for div.settings in "first section": div.data div.first div.settings { position: relative; top: 1em; } I end up with these scroll bars, instead of the height growing to fit the new changes. And everything was out of whack. I am really at my wit's end trying to figure this out. If anyone can give me any suggestions on what I am doing wrong, it would be a great help. Thanks.

    Read the article

  • Floating DIV elements is not lining up...

    - by Ben Sinclair
    I have dives that I am floating so that they show side by side. Here is my code: .serviceMembersPosition { width: 190px; float: left; display: inline; border: 1px solid #999; margin: 5px 5px 5px 0; padding: 5px; } It works however if one of the DIV's has more info than the others, it stuffs up the floats. See how there is a gap in my screenshot below. Is there any way to overcome this? I am using JQuery with my website. Maybe there is some code for this?

    Read the article

  • What is prefered method to set consistence font-size and line height for website using em?

    - by metal-gear-solid
    What is the best method to set cross-browser consistence typography (font-size and line height) for whole site using em for Fixed width {Width:970px}, centered website? I usually get design from client with multiple font size and line heights at various places in design. for some good reason i still use em without getting nested element problem and font-size inconsistencies in IE and others. then after setting how to manage and update easily ,and how to calculate ems I want to set easily manageable font sizes and I want to set Line height manually (because it can be different for various places in design. And for which things we should define line-height or for which not? How to set font-size and line-height to get consistent result. and if i'm using em for font-sizing then should i also use bottom-margin of h1, p, li etc in em? HTML {} BODY {} P {} a {} ul li a {} ul li ul li a {} p img {float:left} td,th { }

    Read the article

  • Using vertical-align on an element with background-image

    - by bobo
    <style type='text/css'> #span1{ background-image:url("http://www.reoiv.com/images/rss.jpg"); background-repeat:no-repeat; cursor:pointer; display:block; float:left; height:15px; width:15px; vertical-align:text-bottom; } </style> <span id='span1'></span>???? What I would like to do is to achieve the vertical align: text-bottom effect but I am not doing it on a image element. I am doing it on an element with background-image set. If you paste the above codes here: http://htmledit.squarefree.com/ You will see that the text failed to vertically align to bottom. I would like to know how it can be done without adding extra html element if possible. Many thanks to you all.

    Read the article

  • Put an X on the topright of a div without making the top clickable

    - by acidzombie24
    I have a rect and have an X on the top right with items inside of it. The div with the X is clickable. The problem is the whole top area is clickable and not just the topright (the 'X') as i wanted. How do i make only the X clickable and still align to the right? my css is .itembox { float:left; } .itembox .RemoveMediaNotif { text-align: right; text-decoration:underline; cursor: pointer; } my html is <div class="itembox" id="i16"><div class="RemoveMediaNotif">X</div><div ...

    Read the article

  • Making a vertically scrolling parent div which does not cause overflow of children

    - by marq
    I have something as follows: <div style="float: left; height: 20px; overflow-y: scroll"> <div>hello this is a test</div> <div>hello this is another test</div> <div>t1</div> <div>t2</div> <div>t3</div> </div> The parent div grows to the appropriate width to fit the largest child (which is what I want). However, the vertical scrollbar causes the inner width to be smaller, which causes the largest child to wrap. Is there a way to get the parent to grow to the width of the largest child + the width of the scroll bar? I've tried every margin trick I know, but nothing.

    Read the article

< Previous Page | 166 167 168 169 170 171 172 173 174 175 176 177  | Next Page >