Search Results

Search found 15866 results on 635 pages for 'css practice'.

Page 142/635 | < Previous Page | 138 139 140 141 142 143 144 145 146 147 148 149  | Next Page >

  • Who could ask for more with LESS CSS? (Part 1 of 3&ndash;Features)

    - by ToStringTheory
    It wasn’t very long ago that I first began to get into CSS precompilers such as SASS (Syntactically Awesome Stylesheets) and LESS (The Dynamic Stylesheet Language) and I had been hooked on the idea since.  When I finally had a new project come up, I leapt at the opportunity to try out one of these languages. Introduction To be honest, I was hesitant at first to add either framework as I didn’t really know much more than what I had read on their homepages, and I didn’t like the idea of adding too much complexity to a project - I couldn’t guarantee I would be the only person to support it in the future. Thankfully, both of these languages just add things into CSS.  You don’t HAVE to know LESS or SASS to do anything, you can still do your old school CSS, and your output will be the same.  However, when you want to start doing more advanced things such as variables, mixins, and color functions, the functionality is all there for you to utilize. From what I had read, SASS has a few more features than LESS, which is why I initially tried to figure out how to incorporate it into a MVC 4 project. However, through my research, I couldn’t find a way to accomplish this without including some bit of the Ruby on Rails framework on the computer running it, and I hated the fact that I had to do that.  Besides SASS, there is little chance of me getting into the RoR framework, at least in the next couple years.  So in the end, I settled with using LESS. Features So, what can LESS (or SASS) do for you?  There are several reasons I have come to love it in the past few weeks. 1 – Constants Using LESS, you can finally declare a constant and use its value across an entire CSS file. The case that most people would be familiar with is colors.  Wanting to declare one or two color variables that comprise the theme of the site, and not have to retype out their specific hex code each time, but rather a variable name.  What’s great about this is that if you end up having to change it, you only have to change it in one place.  An important thing to note is that you aren’t limited to creating constants just for colors, but for strings and measurements as well. 2 – Inheritance This is a cool feature in my mind for simplicity and organization.  Both LESS and SASS allow you to place selectors within other selectors, and when it is compiled, the languages will break the rules out as necessary and keep the inheritance chain you created in the selectors. Example LESS Code: #header {   h1 {     font-size: 26px;     font-weight: bold;   }   p {     font-size: 12px;     a     {       text-decoration: none;       &:hover {         border-width: 1px       }     }   } } Example Compiled CSS: #header h1 {   font-size: 26px;   font-weight: bold; } #header p {   font-size: 12px; } #header p a {   text-decoration: none; } #header p a:hover {   border-width: 1px; } 3 - Mixins Mixins are where languages like this really shine.  The ability to mixin other definitions setup a parametric mixin.  There is really a lot of content in this area, so I would suggest looking at http://lesscss.org for more information.  One of the things I would suggest if you do begin to use LESS is to also grab the mixins.less file from the Twitter Bootstrap project.  This file already has a bunch of predefined mixins for things like border-radius with all of the browser specific prefixes.  This alone is of great use! 4 – Color Functions This is the last thing I wanted to point out as my final post in this series will be utilizing these functions in a more drawn out manner.  Both LESS and SASS provide functions for getting information from a color (R,G,B,H,S,L).  Using these, it is easy to define a primary color, and then darken or lighten it a little for your needs.  Example: Example LESS Code: @base-color: #111; @red:        #842210; #footer {   color: (@base-color + #003300);   border-left:  2px;   border-right: 2px;   border-color: desaturate(@red, 10%); } Example Compiled CSS: #footer {    color: #114411;    border-left:  2px;    border-right: 2px;    border-color: #7d2717; } I have found that these can be very useful and powerful when constructing a site theme. Conclusion I came across LESS and SASS when looking for the best way to implement some type of CSS variables for colors, because I hated having to do a Find and Replace in all of the files using the colors, and in some instances, you couldn’t just find/replace because of the color choices interfering with other colors (color to replace of #000, yet come colors existed like #0002bc).  So in many cases I would end up having to do a Find and manually check each one. In my next post, I am going to cover how I’ve come to set up these items and the structure for the items in the project, as well as the conventions that I have come to start using.  In the final post in the series, I will cover a neat little side project I built in LESS dealing with colors!

    Read the article

  • How would you go about tackling this problem? [SOLVED in C++]

    - by incrediman
    Intro: EDIT: See solution at the bottom of this question (c++) I have a programming contest coming up in about half a week, and I've been prepping :) I found a bunch of questions from this canadian competition, they're great practice: http://cemc.math.uwaterloo.ca/contests/computing/2009/stage2/day1.pdf I'm looking at problem B ("Dinner"). Any idea where to start? I can't really think of anything besides the naive approach (ie. trying all permutations) which would take too long to be a valid answer. Btw, the language there says c++ and pascal I think, but i don't care what language you use - I mean really all I want is a hint as to the direction I should proceed in, and perhpas a short explanation to go along with it. It feels like I'm missing something obvious... Of course extended speculation is more than welcome, but I just wanted to clarify that I'm not looking for a full solution here :) Short version of the question: You have a binary string N of length 1-100 (in the question they use H's and G's instead of one's and 0's). You must remove all of the digits from it, in the least number of steps possible. In each step you may remove any number of adjacent digits so long as they are the same. That is, in each step you can remove any number of adjacent G's, or any number of adjacent H's, but you can't remove H's and G's in one step. Example: HHHGHHGHH Solution to the example: 1. HHGGHH (remove middle Hs) 2. HHHH (remove middle Gs) 3. Done (remove Hs) -->Would return '3' as the answer. Note that there can also be a limit placed on how large adjacent groups have to be when you remove them. For example it might say '2', and then you can't remove single digits (you'd have to remove pairs or larger groups at a time). Solution I took Mark Harrison's main algorithm, and Paradigm's grouping idea and used them to create the solution below. You can try it out on the official test cases if you want. //B.cpp //include debug messages? #define DEBUG false #include <iostream> #include <stdio.h> #include <vector> using namespace std; #define FOR(i,n) for (int i=0;i<n;i++) #define FROM(i,s,n) for (int i=s;i<n;i++) #define H 'H' #define G 'G' class String{ public: int num; char type; String(){ type=H; num=0; } String(char type){ this->type=type; num=1; } }; //n is the number of bits originally in the line //k is the minimum number of people you can remove at a time //moves is the counter used to determine how many moves we've made so far int n, k, moves; int main(){ /*Input from File*/ scanf("%d %d",&n,&k); char * buffer = new char[200]; scanf("%s",buffer); /*Process input into a vector*/ //the 'line' is a vector of 'String's (essentially contigious groups of identical 'bits') vector<String> line; line.push_back(String()); FOR(i,n){ //if the last String is of the correct type, simply increment its count if (line.back().type==buffer[i]) line.back().num++; //if the last String is of the wrong type but has a 0 count, correct its type and set its count to 1 else if (line.back().num==0){ line.back().type=buffer[i]; line.back().num=1; } //otherwise this is the beginning of a new group, so create the new group at the back with the correct type, and a count of 1 else{ line.push_back(String(buffer[i])); } } /*Geedily remove groups until there are at most two groups left*/ moves=0; int I;//the position of the best group to remove int bestNum;//the size of the newly connected group the removal of group I will create while (line.size()>2){ /*START DEBUG*/ if (DEBUG){ cout<<"\n"<<moves<<"\n----\n"; FOR(i,line.size()) printf("%d %c \n",line[i].num,line[i].type); cout<<"----\n"; } /*END DEBUG*/ I=1; bestNum=-1; FROM(i,1,line.size()-1){ if (line[i-1].num+line[i+1].num>bestNum && line[i].num>=k){ bestNum=line[i-1].num+line[i+1].num; I=i; } } //remove the chosen group, thus merging the two adjacent groups line[I-1].num+=line[I+1].num; line.erase(line.begin()+I);line.erase(line.begin()+I); moves++; } /*START DEBUG*/ if (DEBUG){ cout<<"\n"<<moves<<"\n----\n"; FOR(i,line.size()) printf("%d %c \n",line[i].num,line[i].type); cout<<"----\n"; cout<<"\n\nFinal Answer: "; } /*END DEBUG*/ /*Attempt the removal of the last two groups, and output the final result*/ if (line.size()==2 && line[0].num>=k && line[1].num>=k) cout<<moves+2;//success else if (line.size()==1 && line[0].num>=k) cout<<moves+1;//success else cout<<-1;//not everyone could dine. /*START DEBUG*/ if (DEBUG){ cout<<" moves."; } /*END DEBUG*/ }

    Read the article

  • Change Tweetmeme button colour under wordpress

    - by Andrew Bolster
    I've had a poke around in the TweetMeme plugin code and IANA JS Guru, but I cant find any sensible way to make specific styling changes; you can add div-specific CSS characteristics, but I'm talking about changing the resting colour and the hover colour of the button. I've googled around and noone seems to have asked it on here so I thought I should. PS I would not be surprised by this question being migrated to SO, but since this is more of a design/use question rather than a programming question, I thought it was worth trying here first.

    Read the article

  • What tools can be used to download all images in a webpage?

    - by bobo
    I would like to download all images in a web page. The tool should be smart enough to examine the css and javascript files in the page source to look for the images. Ideally, it should also replicate the folder hierarchy, saving the images in the correct folder. For example, the web page may have some images for menu items stored in images/menu/ and for background images it may be stored in images/bg/. Is there such a tool that you know of? (preferably in Windows but Linux is still ok) Many thanks to you all.

    Read the article

  • Non-embedded font with different name across operating systems when printing HTML to PDF

    - by sennett
    I create a document using HTML markup. I want to use Palatino, which is called Palatino on Windows and Palatino Linotype on Mac, so I specify my CSS accordingly: font-family: Palatino Linotype, Palatino, serif;. I then print to a PDF using PrimoPDF under Windows. It all looks good when viewed in Windows. But I want this PDF to look the same on a Mac, and the resulting file size (94KB) would suggest that the font (size 460KB) is not getting embedded by Primo, perhaps because it is a native font. How will this look? Will the PDF file format resolve this, or will the format of my PDF be wang when viewed under OSX? Please note that I do not want to embed the font. I used a web-safe font to avoid this need, and it just so happens that the one I picked does not have the same name in OSX as in Windows.

    Read the article

  • How can I change a specific website's style?

    - by Darthfett
    I have a specific website I often use (specifically, http://www.pygame.org/), which has an awful color scheme. I would like to change the color scheme of the site, but I haven't been able to find a good tool for the job. Some basic requirements: It should not be universal to all websites, or affect other websites. I want this to be semi-automatic. I don't want to have to re-define the theme for each page of the site. I want to continue to access the site online (I don't want a local copy of the entire site) Not OS-specific (browser-specific is okay) I am currently using Firefox, but I am also happy with Chrome. There may be some limitations on what is able to be done automatically, as the CSS seems to be embedded in the HTML (and some also in the HTML tags). I would like to remove as much of the green as possible. Is there an existing extension/add-on that does this?

    Read the article

  • Apache server, PHP

    - by user65649
    I am running a php site on my apache server (Mac). I am having trouble displaying images on the site when I access it externally or from another computer on the same server. If I try to access the image directly. website.com/image.jpg I get a broken link icon and can't display the image. Any ideas what could cause this? My images are embedded using a style.css file. background-image:url(image.jpg);

    Read the article

  • How to solve 404 for static files with Django and Nginx?

    - by Lucio
    I setup a Trusty VM with Django + Nginx (other stuffs too). The server is working, I get the "Welcome to Django" page. But when I enter to servername/admin it loads the HTML page but fails to load the static content. And the admin page have this links to static content: <link rel="stylesheet" type="text/css" href="/static/admin/css/base.css" /> <link rel="stylesheet" type="text/css" href="/static/admin/css/login.css" /> Both of the CSS files give me 404, as the Nginx log shows: 192.168.56.1 - - [05/Jun/2014:12:04:09 -0300] "GET /admin HTTP/1.1" 301 5 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0" 192.168.56.1 - - [05/Jun/2014:12:04:09 -0300] "GET /admin/ HTTP/1.1" 200 833 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0" 192.168.56.1 - - [05/Jun/2014:12:04:10 -0300] "GET /static/admin/css/base.css HTTP/1.1" 404 142 "http://ubuntu-server/admin/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0" 192.168.56.1 - - [05/Jun/2014:12:04:10 -0300] "GET /static/admin/css/login.css HTTP/1.1" 404 142 "http://ubuntu-server/admin/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0" I think that the error is on my nginx.conf file, but do not know how to solve it.

    Read the article

  • Why are items being placed below?

    - by Adam DePolo
    This is really confusing and I have never had this occur. For my computer, it is fine. But for anyone else's computer I have tried, it screws up. So on my site, designatease.com , the second bar down, it places the fifth item down below the first four. I am not sure why it is doing this. I want them to span across the bar but the stop at about half way. Help me out SOF. HTML <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Design At Ease - Home</title> </head> <body> <div id="header"> <div id="logo"><a class="logoclass">DesignAtEase.com</a></div> <ul id="headerlinks"> <li><a href="index.html">Home</a></li> <li><a href="coding.html">Coding</a></li> <li><a href="graphics.html">Graphics</a></li> <li><a href="database.html">Database</a></li> <li><a href="support.html">Support</a></li> <li><a href="more.html">More</a></li> </ul> </div> <ul id="quicklinks"> <li><a href="quickstart.html">Quick Start</a></li> <li><a href="tagsmain.html">Tag Helper</a></li> <li><a href="html.html">HTML</a></li> <li><a href="css.html">CSS</a></li> <li><a href="photoshop.html">Photoshop</a></li> <li><a href="quickstart.html">Quick Start</a></li> <li><a href="tagsmain.html">Tag Helper</a></li> </ul> </body> </html> CSS body{ background:#fffffc; margin: auto auto; } #header{ background:#e5e5e5; height:35px; width:100%; border-bottom: 1px #c9c9c9 solid; } #headerlinks{ position:relative; display:inline; float:right; margin-right:5%; bottom:37px; } #headerlinks li{ display:inline; padding-left:25px; } #headerlinks li a{ color:#777777; display:inline; font-size:18px; font-family: sans-serif; text-decoration:none; } #headerlinks li a:hover{ color:#a3a3a3; display:inline; font-size:18px; font-family: sans-serif; text-decoration:none; } #logo{ position:relative; color:black; margin-left:5%; top:5px; } .logoclass{ color:#212121; display:inline; font-size:24px; font-family: sans-serif; text-decoration:none; } #quicklinks{ width:90%; margin-left:auto; margin-right:auto;; height:25px; background:#e5e5e5; border-bottom: 1px #c9c9c9 solid; border-left: 1px #c9c9c9 solid; border-right: 1px #c9c9c9 solid; top:-16px; position:relative; } #quicklinks li{ display:inline; } #quicklinks li a{ } #quicklinks li a:hover{ } #wrapper{ width:80%; height:100%; }

    Read the article

  • Should CSS be listed on your resume under Languages?

    - by Sandeepan Nath
    I have some doubts like Whether CSS should be put under Languages or not? Although Wikipedia says Cascading Style Sheets (CSS) is a style sheet language ... But do they write CSS under the languages section of the resume, along with PHP, etc? Similarly what about HTML? I have some doubt and I don't want to sound like someone who is not aware of the trends. Just to give an example, currently I have the following languages,frameworks, technologies, etc. listed under the "Technical Expertise" section of my resume - Technical Expertise * Languages - Proficient - PHP 5, Javascript, HTML ?*,CSS ?*,Sass ?*. Beginner - Linux Bash. * Databases - MySQL 5. * Technologies - AJAX. * Frameworks/Libraries - Symfony, jQuery. * CMSes - Wordpress. Although my domain is Web-development/design, I welcome domain-agnostic answers which can provide some generic ideas/reasoning. I have seen, a lot of people messing up these sections (even more serious than my doubts :) ), putting things under wrong sub-headings and thus putting a big question mark on their understanding of those things. I don't know much about XML, Comet Technology etc. Considering those are included too, What things should be put under Languages? E.g. Should CSS be put under Languages? Please give some reasoning to support your views. Where should the others (XML, Comet, cURL etc. ) be put? I welcome some examples of how you put it. Or do you have an additional Keywords section where you write all the unsortables ? Considering a set of standards like W3C standards, etc. do you have a standards sub-heading? I guess I have put the contents of other sections Okay. But do let me know about your ideas and reasoning. After all, I understand there may not be a single answer to this, but let's see what is the trend. Thanks Updates Further, do you mention design patters you have used? Web Services etc.? Where do you mention SOAP, XML etc...

    Read the article

  • bad practice to create a print friendly page to remove the use of pdfs?

    - by Phil
    the company I work for has a one page invoice that uses the library tcpdf. they wanted to do some design changes that I found are just incredibly difficult for setting up in .pdf format. using html/css I could easily create the page and have it print very nicely, but I have a feeling that I am over looking something. is it a good practice to set up a page just for printing? and if not, is it at least better than putting out a ugly .pdf? I could also use the CSS inline so that if they wanted to download it and open it they could.

    Read the article

  • Focussing on Style Sheets and Cross Browser Compatibility.

    - by Sam
    Hello everyone, Let me begin this topic by explaining my background experience with web design. I have always been more of a back end programmer, with PHP and SQL and things. However I do have a shallow background with HTML and CSS. The problem is, I don't know it all. What I do know is, when it comes to designing (not back end dirty work) I understand basic CSS properties and I also understand HTML and I can usually throw together a sloppy web page with the two and a couple bazillion DIV tags. Anyways.. The problem I always have encountered is that when I design a website in a browser such as IE7 (and then it looks perfect on IE7), and then look at it on IE8 or IE6 or Mozilla (etc.) it gets all spacey and ugly and looks totally different than the way it should look on IE7. Question one: Basically, what I am asking everyone is what route should I take to learn how to properly build the website? Build as in put it togehter with CSS standards and HTML standards that will make my site look the same on every brwoser. (Not only learning standards but where can I learn to properly write my code?) Where is a strong free resource I can use to learn how to these things? Question two: How do I properly code my website? Do I use all external style sheets to make dynamic page design simplistic or do I hard code some things into the DIV tags on each page? What is proper? Oh, and if anyone has any tutorials on how to properly design a complete layout feel free to throw it in a response somewhere. Thank you for taking the time to read my questions, and hopefully you will understand what I am trying to get out to everyone. I need to get on the right route of the designing side of web programming so that I will know how to create successful websites in the future. Thank you, Sam Pardee

    Read the article

  • Eliminate horizontal scrolling in div in favor of horizontal scrolling in browser window

    - by Casey Flynn
    I have a div, set to 800px wide, that will automatically scroll horizontally if the browser window is resized to < 800px. The behavior I would like, is to have the browser window scroll instead of the div. It would seem simple but for some reason I'm getting hung up on it. Any ideas? The page in question: http://www.caseyflynn.com/game/ The div CSS: div#main_container { border: 1px solid #FFF; width:800px; margin-left:auto; margin-right:auto; padding:0px; background-color:#FFF; overflow:hidden; } The BODY CSS: html, body { background-color:#000; border:0px; margin:0px; padding:0px; font-family : Arial, Helvetica, sans-serif; font-size : 62.5%; overflow:auto; } I'm assuming anyone looking at this will have the ability to see the HTML and the CSS. Thanks!

    Read the article

  • Change specificity by child

    - by jim red
    hi I'd like to integrate a theme tag to my elements so they appear in diffrent colours. But since the css selectors have the same css specificity the latest overrides the earlier defined rule. this is an example that shows my problem: .... <div class="red"> <div class="box">This should be red</div> <div class="yellow"> ... <div class="box">This should be yellow (nested in x levels under the div.yellow)</div> ... </div> .... and here my css .box { width: 100px; height: 100px; } .yellow { background-color: yellow; } .red { background-color: red; } the box should be listed somewhere, but as soon as it is a sub child of another color definition it should been overwritten. thanks for any help! //jim

    Read the article

  • How can I add the "--watch" flag to this TextMate snippet?

    - by Jannis
    I love TextMate as my editor for all things web, and so I'd like to use a snippet to use it with style.less files to automatically take advantage of the .less way of compiling .css files on the fly using the native $ lessc {filepath} --watch as suggested in the less documentation (link) My (thanks to someone who wrote the LESS TM Bundle!) current TextMate snippet works well for writing the currently opened .less file to the .css file but I'd like to take advantage of the --watch parameter so that every change to the .less file gets automatically compiled into the .css file. This works well when using the Terminal command line for it, so I am sure it must be possible to use it in an adapted version of the current LESS Command for TextMate since that only invokes the command to compile the file. So how do I add the --watch flag to this command:? #!/usr/bin/env ruby file = STDIN.read[/lessc: ([^*]+\.less)/, 1] || ENV["TM_FILEPATH"] system("lessc \"#{file}\"") I assume it should be something like: #!/usr/bin/env ruby file = STDIN.read[/lessc: ([^*]+\.less)/, 1] || ENV["TM_FILEPATH"] system("lessc \"#{file}\" --watch") But doing so only crashes the TextMate.app. Any ideas would be much appreciated. Thanks for reading. Jannis

    Read the article

  • Absolute positioning in IE6, using left: 0; and right: 0; simultaneously

    - by Zane
    Here is my website: http://dagwaging.110mb.com/ View it in any good browser, then in IE6. It dies in IE6. It seems that in IE6, one can't do this: div { position: absolute; left: 0px; right: 0px; } or this: div { position: absolute; top: 0px; bottom: 0px; } Absolute positions cannot be set for left and right or top and bottom at the same time. This is terrible, because that is pretty much the basis of my site design. The HTML can be viewed on the site, and the CSS is in /style.css. I'd like to fix this without invalidating my CSS or HTML. Can this be done? Another problem is that my content uses min-width and max-width to avoid over-stretching or compressing the content within. IE6 can't do min-width, so how can I replicate this behavior?

    Read the article

  • Horizontally and Vertically Center Modal Div IE Issue

    - by aherrick
    I'm trying to horizontally and vertically center a modal window inside a div. I want it to be cross browser compatible. You can see from the picture below that when I resize IE8 then click, "show modal" button it displays not exactly horizontally centered. This does not seem to be an issue with Chrome. Any thoughts? How would you guys accomplish this? <html> <head> <title>test</title> <style type="text/css"> * { margin: 0px; padding: 0px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#modal').click(function() { // overlay $('<div id="overlay" />').css({ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'black', opacity: 0 }).appendTo('body'); $('<div id="datamodal" />').css({ backgroundColor: '#FFFFFF', border: '10px solid #999', height: '200px', width: '600px', position: 'absolute', top: '50%', left: '50%', marginTop: '-120px', marginLeft: '-320px', color: '#111111', fontWeight: 'bold', padding: '10px', display: 'none' }).append('<input type="text" />').appendTo('#overlay'); $('#overlay').fadeTo(300, 0.7); $('#datamodal').fadeIn(300); }); }); </script> </head> <body> <input id="modal" type="button" value="show modal" /> </body> </html>

    Read the article

  • Vertically center a fluid image in a fluid container

    - by Ferdy
    I certainly do not want to add to the pile of vertical alignments CSS questions, but I've spent hours trying to find a solution to no avail yet. Here's the situation: I am building a slideshow gallery of images. I want the images to be displayed as large as the user's window allows. So I have this outer placeholder: <section class="photo full"> (Yes, I'm using HTML5 elements). Which has the following CSS: section.photo.full { display:inline-block; width:100%; height:100%; position:absolute; overflow:hidden; text-align:center; } Next, the image is placed inside it. Depending on the orientation of the image, I set either the width or height to 75%, and the other axis to auto: $wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?> <img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/> So, we have a fluid outer container, with inside a fluid image. The horizontal centering of the image works, yet I cannot seem to find a way to vertically center the image within it's container. I have researched centering methods but most assume either the container or image has a known width or height. Then there is the display:table-cell method, which does not seem to work for me either. I'm stuck. I'm looking for a CSS solution, but am open to js solutions too.

    Read the article

  • Where can I find a professional image gallery built on a javascript framework?

    - by user278457
    I'm looking to find a galleria replacement, hopefully using jQuery but other javascript frameworks such as prototype or mootools are fine too. I used galleria a while back, and I need a similar product now. Unfortunately, the devkick.com domain seems to have disappeared in the meantime and I'm wary of using products that aren't actively maintained. I'm willing to pay up to $50 per site for licensing costs, if the product meets my needs. I'm specifically looking for a gallery with the following features: Every image in the gallery preloads asap, not as the user clicks "next" Minimalist default css to keep my subsequent styling headaches down, preferably a "darkroom" style by default, much as galleria looks Each element that constructs the image gallery should be simple and logical to reference with CSS As easy to install as adding a css class to a single unordered list No dependencies other than the core jQuery/other library, including "easing" and other effects must be optional Works on browsers back to IE6, Firefox 3, Safari (and iPhone), Chrome, Opera Has a javascript API that lets me trigger callback functions on common events such as "user clicks next" or "image loads" degrades gracefully without javascript, either displays images as a list, or just displays the first image in the list bonus: The gallery can display other content, such as video or external sites, like the modal boxes at shadowbox-js.com well documented minimal bandwidth requirement - .js file should be ~10kb minified bonus: The gallery source is hosted on a reliable CDN like google's bonus: Thumbnails for images do not appear until the main image has loaded bonus: includes ability to set parameters with JSON to change common behaviours, such as slide/fade transitions or automatic image switch every X seconds

    Read the article

  • Bullets WILL NOT dissapear in firefox

    - by DunlopBurns
    Hoping you can help me with a problem. I cannot get rid of Bullets in Firefox, i don't want any anywhere, hence my list-style-type: none!important being everywhere. It only appears in Firefox as far as i can tell. the 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" lang="en" xml:lang="en"> <head> <title>littleprints.nl</title> <meta name="description" content="----" /> <meta name="keywords" content="----" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="js/slimbox2.js"></script> <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" /> <link rel="stylesheet" href="layout.css"/> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="container"> <div id="inline1"> <div id="mainpic"> <img src="myimages/circle.jpg" width="100%" alt="Circle bracelet"/> </div> <div id="intro"> <p>Hi and welcome to little prints NL. we make this and that all by hand with 100% silver. my name is Donna Burns and i work by commision, ive been studying for 4 years and am currently learning to become a goldsmith.</p> </div> </div> <div id="inline2"> <p>Click for more...</p> <div id="images"> <a href="myimages/photos/dogtag.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/chunky.gif" alt="chunky"/></a> <a href="myimages/photos/hearts.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/hearts.gif" alt="hearts"/></a> <a href="myimages/photos/close.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/close.gif" alt="close"/></a> <a href="myimages/photos/pearl.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" >&nbsp;</a> <a href="myimages/photos/flower.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" >&nbsp;</a> <a href="myimages/photos/frontcircle.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" >&nbsp;</a> <a href="myimages/photos/dogtag.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" >&nbsp;</a> </div> </div> </div><!--end container--> <div id="footer"> <div id="footalign"> <div id="social"> <ul> <li> <a href="http://www.facebook.com/littleprints" title="Little Prints"> <img src="myimages/facebook.png" width="50px" height="50px" alt="FB"/> </a> </li> <li> <a href="contact.html" title="contact"> <img src="myimages/at.gif" alt="@"/> </a> </li> </ul> </div> <div id="contact"> <p><br/>To enquire about a charm either phone:<br/> 0787463289<br/> or use one of the methods to the side.</p> </div> </div> </div> </body> </html> the CSS... * {margin: 0; padding: 0; border: 0;} html, body { background-color: #000000;image; text-align: center; font: 16px/1.8 Verdana, Arial, Helvetica, sans-serif; list-style-type: none!important; text-decoration: none;} #container { position: relative; width: 900px; top: 0; min-height: 100%; margin-left: auto; margin-right: auto; padding-top: 20px; background-image: URL(myimages/back2.gif); margin-bottom: 180px; } #footer { background-color: #555555; position: relative; clear: both; bottom: 0; width: 900px; height: auto; margin-left: auto; margin-right: auto; margin-bottom: 20px; padding-bottom: 22px; margin-top: -180px; } #inline1{ display: inline-block; margin-top: 250px; margin-bottom: 20px; } #inline2 { display: inline-block; margin-top: 30px; margin-bottom: 50px; } #mainpic { float: left; width: 68%; margin-left: 20px; } #intro { float: right; width: 20%; margin-left: auto; margin-right: 50px; margin-top: 20px; } #images { margin-bottom: 20px; margin-left: auto; margin-right: auto; } #footalign { display: inline; width:900px; list-style-type: none; } #contact { text-align: center; background-color:#555555; float: middle; list-style-type: none; } #social{ background-color:#555555; float: right; list-style: none; padding:0; padding-right: 5px; text-align:center; list-style-type: none!important; } #social img{ border: none; list-style-type: none!important; margin: 3px; } #social ul{ border: none; list-style-type: none!important; } #social a{ display:inline-block; -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; list-style-type: none!important; } #social a:hover{ display:inline-block; -webkit-transform:translate(-10px,0px); -moz-transform:translate(0px,-10px); -ms-transform:translate(-10px,0px); -o-transform:translate(-10px,0px); transform:translate(-10px,0px); list-style-type: none!important; } #form { margin-top: 250px; margin-bottom: 50px; } .nav1 {font-family: sans-serif;font-size: 22px;text-shadow: 2px 2px 5px #000000;} a:link {text-decoration:none; color:#000000; padding:3px;} a:visited {text-decoration:none; color:#000000;} a:active {text-decoration:none; color:#555555;} a:hover {text-decoration:none; color:#555555;} .nav2 {font-family: sans-serif;font-size: 22px;text-shadow: 2px 2px 5px #ffffff;} a:link {text-decoration:none; color:#ffffff; padding:3px;} a:visited {text-decoration:none; color:#ffffff;} a:active {text-decoration:none; color:#555555;} a:hover {text-decoration:none; color:#555555;} .p1 { color: #ffffff; } div#images img { max-width: 500px; height: auto; }

    Read the article

  • Reducing load time, or making the user think the load time is less

    - by Malfist
    I've been working on a website, and we've managed to reduce the total content for a page load from 13.7MiB's to 2.4, but the page still takes forever to load. It's a joomla site (ick), and it has a lot of redundant DOM elements (2000+ for the home page), and make 60+ HttpRequest's per page load, counting all the css, js, and image requests. Unlike drupal, joomla won't merge them all on the fly, and they have to be kept separate or else the joomla components will go nuts. What can I do to improve load time? Things I've done: Added colors to dom elements that have large images as their background so the color is loaded, then the image Reduced excessively large images to much smaller file sizes Reduced DOM elements to ~2000, from ~5000 Loading CSS at the start of the page, and javascript at the end Not totally possible, joomla injects it's own javascript and css and it does it at the header, always. Minified most javascript Setup caching and gziping on server Uncached size 2.4MB, cached is ~300KB, but even with so many dom elements, the page takes a good bit of time to render. What more can I do to improve the load time?

    Read the article

  • Is it bad use "display: table;" to organise a layout into 2 columns?

    - by Colen
    Hello, I am trying to make a 2 column layout, apparently the bane of CSS. I know you shouldn't use tables for layout, but I've settled on this CSS. Note the use of display: table etc. div.container { width: 600px; height: 300px; margin: auto; display: table; table-layout: fixed; } ul { white-space: nowrap; overflow: hidden; display: table-cell; width: 40%; } div.inner { display: table-cell; width: auto; } With this layout: <div class="container"> <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> <div class="inner"> <p>Hello world</p> </div> </div> This seems to work admirably. However, I can't help wondering - am I obeying the letter of the "don't use tables" rule, but not the spirit? I think it's ok, since there's no positioning markup in the HTML code, but I'm just not sure about the "right" way to do it. I can't use css float, because I want the columns to expand and contract with the available space. Please, stack overflow, help me resolve my existential sense of dread at these pseudo-tables.

    Read the article

  • How to transform a production to LL(1) for a list separated by a semicolon?

    - by Subb
    Hi, I'm reading this introductory book on parsing (which is pretty good btw) and one of the exercice is to "build a parser for your favorite language." Since I don't want to die today, I thought I could do a parser for something relatively simple, ie a simplified CSS. Note: This book teach you how to right a LL(1) parser using the recursive-descent algorithm. So, as a sub-exercice, I am building the grammar from what I know of CSS. But I'm stuck on a production that I can't transform in LL(1) : //EBNF block = "{", declaration, {";", declaration}, [";"], "}" //BNF <block> =:: "{" <declaration> "}" <declaration> =:: <single-declaration> <opt-end> | <single-declaration> ";" <declaration> <opt-end> =:: "" | ";" This describe a CSS block. Valid block can have the form : { property : value } { property : value; } { property : value; property : value } { property : value; property : value; } ... The problem is with the optional ";" at the end, because it overlap with the starting character of {";", declaration}, so when my parser meet a semicolon in this context, it doesn't know what to do. The book talk about this problem, but in its example, the semicolon is obligatory, so the rule can be modified like this : block = "{", declaration, ";", {declaration, ";"}, "}" So, Is it possible to achieve what I'm trying to do using a LL(1) parser?

    Read the article

  • Selenium RC: How to assert an element contains text and any number of other elements?

    - by Andrew
    I am using Selenium RC and the PHPUnit Selenium Extension. I am trying to assert that a table row exists, with the content that I expect, while making it flexible enough to be reused. Thanks to this article, I figured out a way to select the table row, asserting that it contains all the text that I expect. $this->assertElementPresent("css=tr:contains(\"$text1\"):contains(\"$text2\")"); But now I would like to assert that a specific radio button appears in the table row also. Here's the element that I would like to assert that is within the table row. (I am currently asserting that it exists using XPath. I'm sure I could do the same using CSS). $this->assertElementPresent("//input[@type='radio'][@name='Contact_ID'][@value='$contactId']"); Currently I have a function that can assert that a table row exists which contains any number of texts, but I would like to add the ability to specify any number of elements and have it assert that the table row contains them. How can I achieve this? /** * Provides the ability to assert that all of the text appear in the same table row. * @param array $texts */ public function assertTextPresentInTableRow(array $texts) { $locator = 'css=tr'; foreach ($texts as $text) { $locator .= ":contains(\"$text\")"; } $this->assertElementPresent($locator); }

    Read the article

< Previous Page | 138 139 140 141 142 143 144 145 146 147 148 149  | Next Page >