css practice - Page 87 - Developer IT

How to get rid of white space between css horizontal list items?

- by Curyous

I've got the following test page and css. When displayed, there is a 4px gap between each list item. How do I get the items to be next to each other? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" /> </head> <body> <div> <ul class="nav"> <li class="nav"><a class="nav" href="#">One1</a></li> <li class="nav"><a class="nav" href="#">Two</a></li> <li class="nav"><a class="nav" href="#">Three</a></li> <li class="nav"><a class="nav" href="#">Four</a></li> </ul> </div> </body> </html> The css: ul.nav, ul li.nav { display: inline; margin: 0px; padding: 0px; } ul.nav { list-style-type: none; } li.nav { background-color: red; } a.nav { background-color: green; padding: 10px; margin: 0px; } a:hover.nav { background-color: gray; }

Read the article

Can CSS change the apparent sequence of elements, e.g. using float or position?

- by ChrisW

Edit: answer to this question is easy, a simple example of float left and float right. I'd like to float some annotations to the left of a topic using HTML and CSS, for example the 'status' and 'author' annotations shown in the following mockup/image: For semantic reasons, perhaps: I prefer to use CSS instead of a table-based layout In the HTML, the status should appear after the corresponding heading For example: <h1>This is a section title</h1> <div class="status">approved</div> <div class="author">chris</div> <p>This is some text. Lorem ipsum.</p> <p>Lorem ipsum.</p> <h1>Different section title</h1> <div class="status">rejected</div> <p>Lorem ipsum.</p> I'd like the annotations to be after the heading in the HTML, because everything associated with (i.e. the contents of) a topic is usually whatever is after the topic's heading. However I'd like the annotations to be displayed before (to the left of) the heading, as illustrated above. Is this possible? What is the most semantic HTML, and corresponding CSS, that will render as shown above? Would you recommend a table-based layout instead? Even if that means putting the headings in a table cell? It may not be possible; this answer suggests it isn't possible ... but I don't know CSS well enough to say that for sure.

Read the article

How to handle javascript & css files across a site?

- by Industrial

Hi everybody, I have had some thoughts recently on how to handle shared javascript and css files across a web application. In a current web application that I am working on, I got quite a large number of different javascripts and css files that are placed in an folder on the server. Some of the files are reused, while others are not. In a production site, it's quite stupid to have a high number of HTTP requests and many kilobytes of unnecessary javascript and redundant css being loaded. The solution to that is of course to create one big bundled file per page that only contains the necessary information, which then is minimized and sent compressed (GZIP) to the client. There's no worries to create a bundle of javascript files and minimize them manually if you were going to do it once, but since the app is continuously maintained and things do change and develop, it quite soon becomes a headache to do this manually while pushing out new updates that features changes to javascripts and/or css files to production. What's a good approach to handle this? How do you handle this in your application?

Read the article

What CSS do I need to make my site more responsive?

- by user2938757

My site is: http://library.skybundle.com I feel like I almost have a responsive site. I did all the CSS styling myself. It is a Wordpress site but I completely edited the CSS of the original theme, so it is night-and-day different than it used to be. The original theme was mostly just for a canvas for me to work with, since I am not an expert in PHP and we wanted a Wordpress site for easy editing later on. Thanks to stackoverflow, I now have a footer that sticks to the bottom of every page and everything mostly looks good -- the way we want it anyway. The only thing missing now is the we want browser windows on MOBILE devices, such as on an iPhone, to automatically adjust the layout of the content in the body (wrapper). For example, on the main page (library.skybundle.com), I would like those two big icons two become vertically aligned as soon as the browser window sizes to a small, mostly vertical size, like that of a mobile phone. Take this site, for example: http://freedomsoundproductions.securesb.net/ This is what we would like it to do. So one a page with a sidebar, the content to the right of the sidebar should basically jump into the same "column" as the left sidebar and form one single long column. Just like in the example site above. This should all be possible via CSS. People in other forums seem to want me to use jQuery and stuff, but I can only use CSS, and I know that this must be possible without having to resort to jQuery, HTML, or other code.

Read the article

Key ATG architecture principles

- by Glen Borkowski

Overview The purpose of this article is to describe some of the important foundational concepts of ATG. This is not intended to cover all areas of the ATG platform, just the most important subset - the ones that allow ATG to be extremely flexible, configurable, high performance, etc. For more information on these topics, please see the online product manuals. Modules The first concept is called the 'ATG Module'. Simply put, you can think of modules as the building blocks for ATG applications. The ATG development team builds the out of the box product using modules (these are the 'out of the box' modules). Then, when a customer is implementing their site, they build their own modules that sit 'on top' of the out of the box ATG modules. Modules can be very simple - containing minimal definition, and perhaps a small amount of configuration. Alternatively, a module can be rather complex - containing custom logic, database schema definitions, configuration, one or more web applications, etc. Modules generally will have dependencies on other modules (the modules beneath it). For example, the Commerce Reference Store module (CRS) requires the DCS (out of the box commerce) module. Modules have a ton of value because they provide a way to decouple a customers implementation from the out of the box ATG modules. This allows for a much easier job when it comes time to upgrade the ATG platform. Modules are also a very useful way to group functionality into a single package which can be leveraged across multiple ATG applications. One very important thing to understand about modules, or more accurately, ATG as a whole, is that when you start ATG, you tell it what module(s) you want to start. One of the first things ATG does is to look through all the modules you specified, and for each one, determine a list of modules that are also required to start (based on each modules dependencies). Once this final, ordered list is determined, ATG continues to boot up. One of the outputs from the ordered list of modules is that each module can contain it's own classes and configuration. During boot, the ordered list of modules drives the unified classpath and configpath. This is what determines which classes override others, and which configuration overrides other configuration. Think of it as a layered approach. The structure of a module is well defined. It simply looks like a folder in a filesystem that has certain other folders and files within it. Here is a list of items that can appear in a module: MyModule: META-INF - this is required, along with a file called MANIFEST.MF which describes certain properties of the module. One important property is what other modules this module depends on. config - this is typically present in most modules. It defines a tree structure (folders containing properties files, XML, etc) that maps to ATG components (these are described below). lib - this contains the classes (typically in jarred format) for any code defined in this module j2ee - this is where any web-apps would be stored. src - in case you want to include the source code for this module, it's standard practice to put it here sql - if your module requires any additions to the database schema, you should place that schema here Here's a screenshots of a module: Modules can also contain sub-modules. A dot-notation is used when referring to these sub-modules (i.e. MyModule.Versioned, where Versioned is a sub-module of MyModule). Finally, it is important to completely understand how modules work if you are going to be able to leverage them effectively. There are many different ways to design modules you want to create, some approaches are better than others, especially if you plan to share functionality between multiple different ATG applications. Components A component in ATG can be thought of as a single item that performs a certain set of related tasks. An example could be a ProductViews component - used to store information about what products the current customer has viewed. Components have properties (also called attributes). The ProductViews component could have properties like lastProductViewed (stores the ID of the last product viewed) or productViewList (stores the ID's of products viewed in order of their being viewed). The previous examples of component properties would typically also offer get and set methods used to retrieve and store the property values. Components typically will also offer other types of useful methods aside from get and set. In the ProductViewed component, we might want to offer a hasViewed method which will tell you if the customer has viewed a certain product or not. Components are organized in a tree like hierarchy called 'nucleus'. Nucleus is used to locate and instantiate ATG Components. So, when you create a new ATG component, it will be able to be found 'within' nucleus. Nucleus allows ATG components to reference one another - this is how components are strung together to perform meaningful work. It's also a mechanism to prevent redundant configuration - define it once and refer to it from everywhere. Here is a screenshot of a component in nucleus: Components can be extremely simple (i.e. a single property with a get method), or can be rather complex offering many properties and methods. To be an ATG component, a few things are required: a class - you can reference an existing out of the box class or you could write your own a properties file - this is used to define your component the above items must be located 'within' nucleus by placing them in the correct spot in your module's config folder Within the properties file, you will need to point to the class you want to use: $class=com.mycompany.myclass You may also want to define the scope of the class (request, session, or global): $scope=session In summary, ATG Components live in nucleus, generally have links to other components, and provide some meaningful type of work. You can configure components as well as extend their functionality by writing code. Repositories Repositories (a.k.a. Data Anywhere Architecture) is the mechanism that ATG uses to access data primarily stored in relational databases, but also LDAP or other backend systems. ATG applications are required to be very high performance, and data access is critical in that if not handled properly, it could create a bottleneck. ATG's repository functionality has been around for a long time - it's proven to be extremely scalable. Developers new to ATG need to understand how repositories work as this is a critical aspect of the ATG architecture. Repositories essentially map relational tables to objects in ATG, as well as handle caching. ATG defines many repositories out of the box (i.e. user profile, catalog, orders, etc), and this is comprised of both the underlying database schema along with the associated repository definition files (XML). It is fully expected that implementations will extend / change the out of the box repository definitions, so there is a prescribed approach to doing this. The first thing to be sure of is to encapsulate your repository definition additions / changes within your own module (as described above). The other important best practice is to never modify the out of the box schema - in other words, don't add columns to existing ATG tables, just create your own new tables. These will help ensure you can easily upgrade your application at a later date. xml-combination As mentioned earlier, when you start ATG, the order of the modules will determine the final configpath. Files within this configpath are 'layered' such that modules on top can override configuration of modules below it. This is the same concept for repository definition files. If you want to add a few properties to the out of the box user profile, you simply need to create an XML file containing only your additions, and place it in the correct location in your module. At boot time, your definition will be combined (hence the term xml-combination) with the lower, out of the box modules, with the result being a user profile that contains everything (out of the box, plus your additions). Aside from just adding properties, there are also ways to remove and change properties. types of properties Aside from the normal 'database backed' properties, there are a few other interesting types: transient properties - these are properties that are in memory, but not backed by any database column. These are useful for temporary storage. java-backed properties - by nature, these are transient, but in addition, when you access this property (by called the get method) instead of looking up a piece of data, it performs some logic and returns the results. 'Age' is a good example - if you're storing a birth date on the profile, but your business rules are defined in terms of someones age, you could create a simple java-backed property to look at the birth date and compare it to the current date, and return the persons age. derived properties - this is what allows for inheritance within the repository structure. You could define a property at the category level, and have the product inherit it's value as well as override it. This is useful for setting defaults, with the ability to override. caching There are a number of different caching modes which are useful at different times depending on the nature of the data being cached. For example, the simple cache mode is useful for things like user profiles. This is because the user profile will typically only be used on a single instance of ATG at one time. Simple cache mode is also useful for read-only types of data such as the product catalog. Locked cache mode is useful when you need to ensure that only one ATG instance writes to a particular item at a time - an example would be a customers order. There are many options in terms of configuring caching which are outside the scope of this article - please refer to the product manuals for more details. Other important concepts - out of scope for this article There are a whole host of concepts that are very important pieces to the ATG platform, but are out of scope for this article. Here's a brief description of some of them: formhandlers - these are ATG components that handle form submissions by users. pipelines - these are configurable chains of logic that are used for things like handling a request (request pipeline) or checking out an order. special kinds of repositories (versioned, files, secure, ...) - there are a couple different types of repositories that are used in various situations. See the manuals for more information. web development - JSP/ DSP tag library - ATG provides a traditional approach to developing web applications by providing a tag library called the DSP library. This library is used throughout your JSP pages to interact with all the ATG components. messaging - a message sub-system used as another way for components to interact. personalization - ability for business users to define a personalized user experience for customers. See the other blog posts related to personalization.

Read the article

Telerik RadEditor for MOSS - How do I suppress min-width inline CSS?

- by James

I'm having an issue with the RadEditor for MOSS, I'm really baffled as to the source of this issue. I tried using Firebug to find where any min-* CSS settings are happening and search came up empty, but I know it's happening because the downloaded page markup does not have that inline CSS. I believe that one of the Telerik control emitted Javascripts is what is adding inline CSS style to the top level div of the editor, namely min-height, min-width. This is causing layout issues on my page. My question is why is it doing this, and more importantly how do I prevent this from happening? <div style="height: 300px; width: 100%; min-height: 300px; min-width: 1133px;" class="RadEditor Default reWrapper ms-input"> Related thread

Read the article

A Few of My Favorite HTML5 and CSS3 Online Tools

- by dwahlin

I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles that require various vendor extensions. There are a lot of online tools that can simplify building HTML5/CSS3 sites and increase productivity in the process so I thought I’d put together a post on a few of my favorites tools. HTML5 Boilerplate HTML5 Boilerplate provides a great way to get started building HTML5 sites. It includes many best practices out of the box and even includes a few tricks that many people don’t even know about. The custom download option allows you to pick the features that you want to include in the files that’s generated. You can read more about it here. Initializr Although HTML5 Boilerplate provides a great foundation for starting HTML5 sites, it focuses on providing a starting shell structure (namely an html page, JavaScript files, and a CSS stylesheet) and doesn’t include much in the way of page content to get started with. Initializer builds on HTML5 Boilerplate and provides an initial test page that can be tweaked to meet your needs. It also provides several different customization options to include/exclude features. CSS3 Maker CSS3 provides a lot of great features ranging from gradient support to rounded corners. Although many of the features are fairly straightforward there are some that are pretty involved such as gradients, animations, and really any styles that require custom vendor extensions to use across browsers. Sure, you can type everything by hand, but sites such as CSS3 Maker provide a visual way to generate CSS3 styles. CSS3, Please! CSS3, Please! is a code generation tool that can be used to generate cross-browser CSS3 styles quickly and easily. All of the main things you can do with CSS3 are available including a clever way to visually generate CSS3 transform styles. Ultimate CSS Gradient Generator CSS3 Maker (above) has a gradient generator built-in but my favorite tool for creating CSS3 gradients is the Ultimate CSS Gradient Generator. If you’ve created gradients in tools like Photoshop then you’ll love what this tool has to offer especially since it makes it extremely straightforward to work with different gradient stops. @font-face Fonts Although @font-face has been available for awhile, I think fonts are cool and wanted to mention a site that provides a lot of font choices. When used correctly fonts can really enhance a page and when used incorrectly (think Comic Sans) they can absolutely ruin a page. Several sites exist that provide fonts that can be used with @font-face definitions in CSS style sheets. One of my favorites is Font Squirrel. HTML5 & CSS3 Support and Tests Interested in knowing what HTML5 and CSS3 features a given browser supports? Want to know how various browsers stack up with each other as far as HTML5/CSS3 support. Look no further than the HTML5 & CSS3 Support page or the HTML5 Test page. CSS3 Easing Animation Tool CSS3 animations aren’t widely supported across browsers right now (I’m not really using them at this point) but they do offer a lot of promise. Creating easings for animations can definitely be a challenge but they’re something that are critical for adding that “professional touch” to your animations. Fortunately you can use the Ceaser CSS Easing Animation Tool to simplify the process and handle animation easing with…...ease. There are several other online tools that I like but these are some of the ones I find myself using the most. If you have any favorite online tools that simplify working with HTML5 or CSS3 let me know. For more information about onsite or online training, mentoring and consulting solutions for HTML5, jQuery, .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

Read the article

Best practice for making code portable for domains, subdomains or directores

- by Duopixel

I recently coded something where it wasn't known if the end code would reside in a subdomain (http://user.domain.com/) or in a subdomain (http://domain.com/user), and I was lost as to the best practice for these unknown scenarios. I could thinks of a couple: Use absolute paths (/css/styles.css) and modrewrite if it ends up being /user Have a settings file and declare a variable with the path (<? php echo $domain . "/css/styles" ?>) Use relative paths (../css/styles.css). What is the best way to handle this?

Read the article

how to target css to iPad but exclude Safari 4 desktop using a media query?

- by miriam835work

I am trying to use a media rule to target css to iPad only. I want to exclude iPhone/iPod and desktop browsers. I would like to to also exclude other mobile devices if possible. I have used <style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)"> but just found out that desktop Safari 4 reads it. I have tried variations with "481px" instead of "768px" and another that adds an orientation to that: <style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"> but not luck. (Later we will be sniffing user-agent strings for iPad, but for now that solution won't work.) Thanks!

Read the article

Using CSS to both scale AND reposition an image WITHIN a div?

- by pbarney

We know how to use CSS to show only part of an image within a div (i.e., image sprites), but the image has to be a background image. We know how to use CSS to scale an image, but the image has to be an IMG. Does anyone know of a way to scale and image and show only part of it? For example, I want to: show pixels (15,15) through (100,100), and scale it up by 200%. The first I can do by making in a background image. The second I can do by making it a foreground image. But so far, I have not ascertained how to do both. Is it even possible using only CSS/HTML?

Read the article

How to return dynamic CSS with ASP.NET MVC?

- by Morten Mertner

I need a solution that lets me accomplish the following: Returning CSS that is dynamically generated by an action method Choosing CSS file depending on request parameter or cookie Using a tool to combine and compress (minify) CSS I am currently considering why there is no CssResult in ASP.NET MVC, and whether there might be a reason for its absence. Would creating a custom ActionResult not be the best way to go about this? Is there some other way that I've overlooked to do what I need? Any other suggestions or hints that might be relevant before I embark on this task will also be appreciated :)

Read the article

Browser extensions to re-render the page using an updated version of my CSS file, without reloading the page itself

- by Eduardo León

I want to learn Web UI design. (I know, I know. Being a programmer puts me at a disadvantage. But I want to try anyway.) Thus, I would like to "debug" my CSS files. Once of the biggest annoyances I have found is that I cannot test a change in my CSS files without reloading the whole page. Sometimes, the page is too big. Sometimes, a lot of elements were brought to the page after lots of clicks, because my pages rely too heavily on AJAX. Sometimes, I just hate hitting Command+R all the time. Is there any extension for any of the major browsers (preferably Safari and/or Chrome) that re-renders the page using an updated version of the CSS file, without reloading the whole page itself?

Read the article

JQuery identify current CSS background-image in three-state icon/button?

- by T9b

Hi I have three images being used to indicate an application icon state and I'm attempting to use css to do this. No problem with the original or hover states: #myDIV { background-image: url(icons/homeBlack.png); } #myDIV:hover { background-image: url(icons/homeWhite.png); } but I need to do two other things: 1) when the item is clicked it should use the third image $("#myDIV").click(function(event){ // change this button $(this).css("background-image", "url(icons/homeBlue.png)"); }); 2) if it is clicked again it should not apply the third image again because it's already applied - so it needs to check if it has been applied My questions are: 1) simply am I missing a css trick somewhere or is Jquery the best way to do this? 2) can I check which background-image is in place and how? I can't seem to find anything in JQuery that would allow me to determine which image is "currently" in place. Thanks in advance for any help.

Read the article

Is it possible to retrieve only a single property from a CSS class?

- by werner5471

Example CSS File: .testClass { color: black; background: red; } Now in an HTML file, I would like to have something like <span class="testClass:color">Text in black but without red background</span> to only apply the color property of that class. Is there a way to do this? The purpose behind it (for people asking themselves "Why the hell would he want that, that's not clean CSS usage!") is that I use jQuery UI themes, and I would like the entire page to fit a theme upon change. As not all kinds of elements (e.g. the color of a link) are covered by those themes, in those cases I would like to "steal" the color property (but not more) of some other CSS class of the jQuery UI theme. If there is another way to do this, of course I'm glad to hear it as well!

Read the article

IE or Firefox,which one has a more logical CSS handling ?

- by Najm

hello there , i know that there is some rules and standards in css handling but i mean which one is closer to a human thinking. for example : when i give a DIV tag a height property of 100px i just want it to be 100px! but in Firefox i should work on min-height or max-width and so on ! there is many like this examlpe , i think IE read css more humanestic against Firefox. i have several experiences in this case , your final nice design in IE can be a mess in Firefox thats because of the way they handle css. Firefox act as a robot but IE act as a human-half robot ! its just my idea. i will be glad to hear and learn from you proffesionals and other friends here. thank you.

Read the article

Is it always bad idea to use inline css for used-once property?

- by user93422

I have a table, with 10 columns. I want to control the width of each column. Each column is unique, right now I create an external CSS style for each column: div#my-page table#members th.name-col { width: 40px; } I know there is a best practice to avoid inline style. I do approve using external CSS for anything look'n'feel related: fonts, colors, images. But is it really better to use external CSS in this case? It does not incur extra maintenance cost. It is easier to produce. Cons I can think of: If you have separate designers and development team - using inline styles will force designers to modify content-file (aspx in my case). It might use more bandwidth. Anything else I've missed?

Read the article

CSS float problems, works in IE, doesn't work in Chrome/FF.. I'm probably doing something wrong

- by user1003916

I'm not terribly well-versed in CSS.. and don't know all of the major quirks yet. Maybe someone can help me. I've set up an image showing my code, a diagram of my DIVs, and examples of how it looks in IE versus Chrome/FF Can someone direct me to the proper way to go about this? It works fine in IE, but in Chrome and FF, one of the images is escaping its container, and the "content block" as I call it is going underneath the image it's supposed to be next to. Each of the components has a css class despite my diagram saying there's no css.. currently there's just some basic styling for those (padding, text-indent, etc). Thank you

Read the article

How do I gather a class' css attributes given nothing but the className?

- by user1128571

For example I might have some css stuff that looks like this: .divType1 { position: absolute; width: 60px; height: 60px; left: 400px; top: 100px; border: 1px solid #89B; z-index: 0; } Now within Javascript I want to gather div class divType1' css attributes, but am provided only with the div class, so I can't do something of form ( pseudo-code ): selectDivWithClass( divType1 ).getCss(left). I could hack something by instantiating a div with class divType1 and grab its css attributes, and then destroy it, but is there a better way?

Read the article

Should i keep #wrapper{ width:100%} in print css?

- by metal-gear-solid

Should i keep #wrapper{ width:100%} in print css? because on screen my design is a fixed width design 960 px. but there are so many paper type and sizes in the world and anybody can take print on any size paper, bigger and smaller. So if in print css i do not specify relative width then i think print of page will cut of from right size if user will take print on the paper size which can smaller or larger width than my site #wrapper width (960px). then it can create problem. http://www.dpandi.com/paper/index.html printer also leave some margin when printing. So should keep everything is relative size in print css?

Read the article

Wrong statistics in AUX_STATS$ might puzzle the optimizer

- by Mike Dietrich

We do recommend the creation of System Statistics for quite a long time. Since Oracle 9i the optimizer works with a CPU and IO cost based model. And in order to give the optimizer some knowledge about the IO subsystem's performance and throughput - once System Statistics are collected - they'll get stored in AUX_STATS$. For this purpose in the old Oracle 9i days some default values had been defined - and you'll still find those defaults in Oracle Database 11g Release 2 in AUX_STATS$. But these old values don't reflect the performance of modern IO systems. So it might be a good best practice post upgrade to create fresh System Statistics if you haven't done this before. You can collect System Statistics with: exec DBMS_STATS.GATHER_SYSTEM_STATS('start'); and end it later by executing: exec DBMS_STATS.GATHER_SYSTEM_STATS('stop'); You could also run DBMS_STATS.GATHER_SYSTEM_STATS('interval', interval=>N) instead where N is the number of minutes when statistics gathering is stopped automatically. Please make sure you'll do this on a real workload period. It won't make sense to gather these values while the database is in an idle state. You should do this ideally for several hours. It doesn't affect performance in a negative way as the values are anyway collected in V$SYSSTAT and V$SESSTAT. And in case you'd like to delete the stats and revert to the old default values you'd simply execute:exec DBMS_STATS.DELETE_SYSTEM_STATS; The tricky thing in Oracle Database 11.2 - and that's why I'm actually writing this blog post today - is bug9842771. This leads to wrong values in AUX_STATS$ for SREADTIM and MREADTIM by factor 1000 guiding the optimizer sometimes into the totally wrong directon. The workaround is to overwrite these values manually and divide them by 1000. Use the DBMS_STATS.SET_SYSTEM_STATS procedure. See this MOS Note:9842771.8 for the above bug for some further information. This issue is fixed in Oracle Database 11.2.0.3 and above. To get some background information about the statistics collected in please read this section in the Oracle Database 11.2 Performance Tuning Guide. And gathering System Statistics might have some implication if you have mixed workloads - and interacts with DB_FILE_MULTIBLOCK_READ_COUNT. For more information please read section 13.4.1.2.

Read the article

CSS Horizontal sub menu - IE 6,7 both dont working, tried with whatever hover.

- by SHAKTI

I'm not expert about css menus. But I know basic system to make css menu. I used this system before and works, but this time it is not working. The site is http://www.uniethos.com. Please check this site This menu works with all other latest Browsers. But not with IE 6 & 7. I know IE6 don't support hover except anchor. So before I was using Whatever Hover. But this time it is not working and even with IE7. I don't know why its happening. May be there could be some problem with my css. Please check the css. If you don't have IE 6 or 7 installed you can run one from http://spoon.net/browsers/. Require to install one plugin. The CSS I'm using for the menu is .glossymenu{ background: #B4B3B3; height: 30px; width: 100%; padding: 0; margin: 0; display:inline-block; position:relative; } .glossymenu ul { list-style: none; padding: 0px; margin: 0; padding-left: 0px; } .glossymenu li ul { display:none; position:absolute; width: 80%; top:30px; left:0px; background-color:#5B0C10; border:0px; z-index: 99; } .glossymenu li li a { padding: 0px 10px 0px 10px; } .glossymenu li li a:hover { background : #871016; } .glossymenu li{ float:left; padding: 0; } .glossymenu li a{ float: left; display:block; position:relative; color:#FFF; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ height: 30px; line-height: 30px; text-align: center; cursor: pointer; } .glossymenu li a b{ float: left; display: block; padding: 0 24px 0 8px; /*Padding of menu items*/ } .glossymenu li.current a, .glossymenu li a:hover{ color: #FFF; background: #5B0C10; background-position: left; text-decoration: none; } .glossymenu li a:visited{ text-decoration: none; } .glossymenu ul li:hover ul { display: block; }

Read the article

How to organize pictures on website using css? [on hold]

- by user3624023

Here is my website without any CSS: http://www.wmcicompsci.ca/cs20/students/theglowcloud/Bare%20bones%20website/classics_bare.html I am new to CSS and I would like to organize pictures these pictures in this fashion: http://css-tricks.com/examples/SlideinCaptions/ I would just like this layout for the pictures but I do not need the sliding of the captions(although I would like to but it does not work my browser). I would like the captions to be like titles on top of the pictures. Here is my current html code: <!DOCTYPE html> <html> <head> <title> My favourite Fantasy books</title> <meta charset = "utf-8"> <link rel="stylesheet" href="css.css"> </head> <body> <nav id="main_nav"> <ul> <li><a href = " homepage_css.html"> Homepage</a></li> <li><a href="science_fiction_css.html">Science Fiction</a></li> <li><a href="classics_css.html">Classics</a></li> <li><a href="fantasy_css.html">Fantasy</a></li> </ul> </nav> <h1> Fantasy Genre</h1> <p> Here are my favourites:</p> <ul> <li> Goblet of Fire by J.K Rowling (4th book in the Harry Potter Series) </li> <li><img class= displayed src="pics/fantasy/goblet_of_fire.jpg" width="200" alt="Goblet of Fire book cover"></li> <li> Graceling by Kristan Cashore </li> <li><img src="pics/fantasy/graceling.jpg" width="200" alt = " Graceling book cover"></li> <li> Serpent's Shadow by Rick Riordan (3rd book in the Kane Chronicles) </li> <li><img src="pics/fantasy/serpents_shadow.jpg" width="200" alt="Serpent's Shadow book cover"></li> <li> The Hobbit by J.R.R. Tolkein </li> <li><img src="pics/fantasy/the_hobbit.jpg" width="200" alt="The Hobbit book cover"></li> <li> The False Prince by Jennifer Neilson (1st book in the Ascendance Triology) </li> <li><img src="pics/fantasy/the_false_prince.jpg" width="200" alt="The False Prince book cover"></li> </ul>

Read the article

CSS div/overflow Question: Why does the first HTML file work but not the second?

- by kidvid

Notice how the first HTML/CSS works when you re-size the browser horizontally. It will shrink no further than around 800 pixels, but it will expand as far as you drag the right edge of the browser. It will also correctly overflow the table at the top and scroll it horizontally. The thing I don't like about the first code snippet is where the scrollbar is. I want it to show up within the borders of the fieldset, so even if I narrow the browser down to 800 pixels wide, I can see both the left and right sides of the fieldset's border. The second code snippet is exactly the same as the first except I add another div tag to the mix, inside of the field set and around the grid. Notice how the top fieldset's width won't correctly shrink when you make the viewport of your browser narrower. Any ideas on why it doesn't work, what I can do to get it to work like the first code snippet? I don't think I'm describing this clearly, but if you run the two side by side, and expand and contract the horizontal edge of your browser windows, you'll see the differences between the two. I'm pretty new to CSS and HTML layout, so my understanding of why CSS handles sizing the way it does in some situations is still really confusing to me. Thanks, Adrian Working HTML file: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"></meta> <style type="text/css"> #divBody { margin-top: 5px; top:24px; margin-top: 10px; } #divContainer { top: 5px; position:relative; min-height:100%; #width:expression(document.body.clientWidth < 830? "800": "90%" ); width:90%; min-width: 800px; padding-bottom:70px; } #divMasterGrid { position:relative; margin:5px; top:5px; width:99%; margin:0 auto; overflow-x:scroll; } #divRadioButtonArea { position:relative; top:20px; height:51px; font-size: 12px; width:99%; margin:5px; } </style> <title>TEST TEST</title> </head> <body id="divBody"> <div id="divContainer" class="gridRegion"> <div id="divMasterGrid"> <fieldset style="margin: 5px;"> <legend style="font-size: 12px; color: #000;">Numbers</legend> <table border="1px"> <tr> <td>One </td> <td>Two </td> <td>Three </td> <td>Fout </td> <td>Five </td> <td>Six </td> <td>Seven </td> <td>Eight </td> <td>Nine </td> <td>Ten </td> <td>Eleven </td> <td>Twelve </td> <td>Thirteen </td> <td>Fourteen </td> <td>Fifteen </td> <td>Sixteen </td> <td>Seventeen </td> <td>Eighteen </td> <td>Nineteen </td> <td>Twenty </td> </tr> </table> </fieldset> </div> <div id="divRadioButtonArea"> <fieldset style=" padding-left: 5px;"> <legend style="color: #000; height:auto">Colors</legend> <table style="width:100%;padding-left:5%;padding-right:5%;"> <tr> <td> <input type="radio" name="A" value="Y"/><label>Red</label> </td> <td> <input type="radio" name="O" value="O"/><label>White</label> </td> <td> <input type="radio" name="W"/><label>Blue</label> </td> </tr> </table> </fieldset> </div> </div> </body> </html> Broken HTML file: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"></meta> <style type="text/css"> #divBody { margin-top: 5px; top:24px; margin-top: 10px; } #divContainer { top: 5px; position:relative; min-height:100%; #width:expression(document.body.clientWidth < 830? "800": "90%" ); width:90%; min-width: 800px; padding-bottom:70px; } #divTopFieldSet { position:relative; margin:5px; top:5px; width:99%; } #divRadioButtonArea { position:relative; top:20px; height:51px; font-size: 12px; width:99%; margin:5px; } #divTable { position:relative; width:99%; margin:5px auto; overflow-x:scroll; } </style> <title>TEST TEST</title> </head> <body id="divBody"> <div id="divContainer" class="gridRegion"> <div id="divTopFieldSet"> <fieldset style="margin: 5px;"> <legend style="font-size: 12px; color: #000;">Numbers</legend> <div id="divTable"> <table border="1px"> <tr> <td>One </td> <td>Two </td> <td>Three </td> <td>Fout </td> <td>Five </td> <td>Six </td> <td>Seven </td> <td>Eight </td> <td>Nine </td> <td>Ten </td> <td>Eleven </td> <td>Twelve </td> <td>Thirteen </td> <td>Fourteen </td> <td>Fifteen </td> <td>Sixteen </td> <td>Seventeen </td> <td>Eighteen </td> <td>Nineteen </td> <td>Twenty </td> </tr> </table> </div> </fieldset> </div> <div id="divRadioButtonArea"> <fieldset style=" padding-left: 5px;"> <legend style="color: #000; height:auto">Colors</legend> <table style="width:100%;padding-left:5%;padding-right:5%;"> <tr> <td> <input type="radio" name="A" value="Y"/><label>Red</label> </td> <td> <input type="radio" name="O" value="O"/><label>White</label> </td> <td> <input type="radio" name="W"/><label>Blue</label> </td> </tr> </table> </fieldset> </div> </div> </body> </html>

Read the article

Interesting links week #24 and #25

- by erwin21

Below a list of interesting links that I found this week: Interaction: Design Usability and All About It Frontend: CSS Lint – CSS Cleaning Tool 10 HTML Entity Crimes You Really Shouldn’t Commit Development: OWASP Top 10 for .NET developers part 7: Insecure Cryptographic Storage C#/.NET Fundamentals: Choosing the Right Collection Class Mobile: Tips to Design a Website for Mobile Marketing: 30 (New) Google Ranking Factors You May Over- or Underestimate Other: 5 Little-Known Web Files That Can Enhance Your Website Interested in more interesting links follow me at twitter http://twitter.com/erwingriekspoor

Read the article

Menu widget - no jQuery nor Javascript required - pure CSS

- by Renso

Goal: Create a menu widget that does not require any javascript, extremely lightweight, very fast, soley based on CSS, compatible with FireFox and Chrome. Issues: May have some rendering issues in some versions of IE, sorry :-) Instruments: css file html with specific menu format jQuery-ui library - optional if you want to use your own images/colors Implementation Details: HTML: <div id="header"> <div id="header_Menubar"> <ul class="linkList0 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="first more ui-state-default ui-corner-top ui-tabs-selected"><a title="Home" href="/Home">Home</a> <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="ifirst ui-state-default ui-corner-top"><abbr title="Go Home"></abbr><a title="Home" href="/Home">Home</a></li> </ul> </li> <li class="more ui-state-default ui-corner-top ui-tabs-selected"><a title="Menu 2" href="/Menu2a">Menu 2</a> <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="ifirst ui-state-default ui-corner-top"><abbr title="Menu 2 a"></abbr><a title="Menu 2 a" href="/Menu2a">Menu 2 a</a></li> <li class="ilast ui-state-default ui-corner-top"><abbr title="Menu 2 b"></abbr><a title="Menu 2 b" href="/Menu2b">Menu 2 b</a></li> </ul> </li> <li class="more red ui-state-default ui-corner-top ui-tabs-selected"><a title="Menu 3" href="/Menu3 d">Menu 3</a> <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="ifirst ui-state-default ui-corner-top"><abbr title="Menu 3 a"><a title="Menu 3 a" href="/Menu3a">Menu 3 a</a></abbr></li> <li class="ui-state-default ui-corner-top"><abbr title="Menu 3 b"><a title="Menu 3 b" href="/Menu3b">Menu 3 b</a></abbr></li> <li class="ui-state-default ui-corner-top"><abbr title="Menu 3 c"><a title="Menu 3 c" href="/Menu3c">Menu 3 c</a></abbr></li> <li class="ilast ui-state-default ui-corner-top"><abbr title="Menu 3 d"><a title="Menu 3 d" href="/Menu3d">Menu 3 d</a></abbr></li> </ul> </li> </ul> </div> </div> CSS: /* =Menu ----------------------------------------------------------------------------------------- */ #header #header_Menubar { margin: 0; padding: 0; border: 0; width: 100%; height: 22px; } #header { background-color: #99cccc; background-color: #aaccee; background-color: #5BA3E0; background-color: #006cb1; } /* Set menu bar background color */ #header #header_Menubar { background-attachment: scroll; background-position: left center; background-repeat: repeat-x; } /* Set main (horizontal) menu typology */ #header .linkList0 { padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; font-weight: bold; font-size: 1.085em; font-size: 1em; } /* Set all ul properties */ #header .linkList0, #header .linkList0 ul { list-style: none; margin: 0; padding: 0; list-style-position: outside; } /* Set all li properties */ #header .linkList0 > li { float: left; position: relative; font-size: 90%; margin: 0 0 -1px; width: 9.7em; padding-right: 2em; z-index: 100; /*IE7: Fix for IE7 hiding drop down list behind some other page elements */ } /* Set all li properties */ #header .linkList01 > li { width: 190px; } #header .linkList0 .linkList01 li { margin-left: 0px; } /* Set all list background image properties */ /*#header .linkList0 li a { background-position: left center; background-image: url( '../Content/Images/VerticalButtonBarGradientFade.png' ); background-repeat: repeat-x; background-attachment: scroll; }*/ /* Set all A ancor properties */ #header .linkList0 li a { display: block; text-decoration: none; line-height: 22px; } /* IE7: Fix for a bug in IE7 where the margins between list items is doubled - need to set height explicitly */ *+html #header .linkList0 ul li { height: auto; margin-bottom: -.3em; } /* Menu: Set different borders for different nested level lists -------------------------------------------------------------- */ #header .linkList0 > li a { border-left: 10px solid Transparent; border-right: none; } #header .linkList0 > li a { border-left: 0px; margin-left: 0px; border-right: none; } #header .linkList0 .linkList01 > li a { border-left: 8px solid #336699; border-right: none; border: 1px solid Transparent; -moz-border-radius: 5px 5px 5px 5px; -moz-box-shadow: 3px 3px 4px #696969; } #header .linkList0 .linkList01 .linkList001 > li a { border-left: 6px solid #336699; border-right: none; border: 1px solid Transparent; -moz-border-radius: 5px 5px 5px 5px; -moz-box-shadow: 3px 3px 4px #696969; } #header .linkList0 .linkList01 .linkList001 .linkList0001 > li a { border-left: 4px solid #336699; border-right: none; border: 1px solid Transparent; -moz-border-radius: 5px 5px 5px 5px; -moz-box-shadow: 3px 3px 4px #696969; } /* Link and Visited pseudo-class settings for all lists (ul) */ #header .linkList0 a:link, #header .linkList0 a:visited { display: block; text-decoration: none; padding-left: 1em; } /* Hide all the nested/sub menu items */ #header .linkList0 ul { display: none; padding: 0; position: absolute; /*Important: must not impede on other page elements when drop down opens up */ } /* Hide all detail popups */ #header .detailPopup { display: none; } /* Set the typology of all sub-menu list items li */ /*#header .linkList0 ul li { background-color: #AACCEE; background-position: left center; background-image: url( '../Content/Images/VerticalButtonBarGradientFade.png' ); background-repeat: repeat-x; background-attachment: scroll; }*/ #header .linkList0 ul li.more { background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat right center; } /* Header list's margin and padding for all list items */ #header .linkList0 ul li { margin: 0 0 0 1em; padding: 0; } #header .linkList01 ul li { margin: 0; padding: 0; width: 189px; } /* Set margins for the third li sibling (Plan a Call) to display to the right of the parent menu to avoid the sub-menu overlaying the menu items below */ #header .linkList0 li.more .linkList01 li.more > ul.linkList001 { margin: -1.7em 0 0 13.2em; /*Important, must be careful, if tbe EM since gap increases too much bewteen nested lists the gap will make the nested-list collapse prematurely */ } /* Set right hand arrow for list items with sub-menus (class-more) */ #header li.more { background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat right center; padding-right: 48px; } /* Menu: Dynamic Behavior of menu items (hover, visted, etc) ----------------------------------------------------------- */ #header .linkList0 li a:link, #header .linkList01 li a:link { display: block; } #header .linkList0 li a:visited, #header .linkList01 li a:visited { display: block; } #header .linkList0 > li:hover { } #header .linkList01 > li:hover a ,#header .linkList001 > li:hover a { text-decoration: underline; } #header .linkList0 > li abbr:hover span.detailPopup { display: block; position: absolute; top: 1em; left: 17em; border: double 1px #696969; border-style: outset; width: 120%; height: auto; padding: 5px; font-weight: 100; } #header .linkList0 > li:hover ,#header .linkList0 .linkList01 > li:hover { } #header .linkList0 .linkList01 .linkList001 > li:hover { } #header .linkList0 .linkList01 .linkList001 .linkList0001 > li:hover { } /* Display the hidden sub menu when hovering over the parent ul's li */ #header .linkList0 li:hover > ul { display: block; } /* Display the hidden sub menu when hovering over the parent ul's li */ #header .linkList0 .linkList01 li:hover > ul { display: block; background: -moz-linear-gradient(top, #1E83CC, #619FCD); /* Chrome, Safari:*/ background: -webkit-gradient(linear, center top, center bottom, from(#1E83CC), to(#619FCD)); } /* Display the hidden sub menu when hovering over the parent ul's li */ #header .linkList0 .linkList01 .linkList001 li:hover > ul { display: block; } /* Set right hand arrow for list items with sub-menus (class-more) on hover */ #header li.more:hover { } Also some CSS for global settings that will affect this menu, you of course will have some other styling, but included it here so you can see how/why some css properties were set here: /* Neutralize styling: Elements we want to clean out entirely: */ html, body { margin: 0; padding: 0; font: 62.5%/120% Verdana, Arial, Helvetica, sans-serif; } /* Neutralize styling: Elements with a vertical margin: */ h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 0; /* most browsers set some default value that is not shared by all browsers */ padding: 0; /* some borowsers default padding, set to 0 for all */ } /* Apply left margin: Only to the few elements that need it: */ li, dd, blockquote { margin-left: 1em; }

Search Results

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

Page 87/635 | < Previous Page | 83 84 85 86 87 88 89 90 91 92 93 94 | Next Page >

- by Curyous

- by ChrisW

- by Industrial

- by user2938757

- by Glen Borkowski

- by James

- by dwahlin

- by Duopixel

- by miriam835work

- by pbarney

- by Morten Mertner

- by Eduardo León

- by T9b

- by werner5471

- by Najm

- by user93422

- by user1003916

- by user1128571

- by metal-gear-solid

- by Mike Dietrich

- by SHAKTI

- by user3624023

- by kidvid

- by erwin21

- by Renso

< Previous Page | 83 84 85 86 87 88 89 90 91 92 93 94 | Next Page >