Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged css layouts

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Saif Shuvo

Professional Web Design & Development Curriculum - 0 views

Lesson: 01 (Dreamweaver Basics & HTML) Introducing Dreamweaver, Elements, Attributes, Table, List, Forms, Formatting, Styles, Image, Hyperlinks. Head, Meta, Scripts, Layout, Fonts, URL- encode ...

webdesign web development

started by Saif Shuvo on 07 Jan 17 no follow-up yet
jdr santos

CSS Discuss - 9 views

css-discuss.incutio.com/...Main_Page

CSS wiki reference tutorials resources web design

shared by jdr santos on 24 May 11 - Cached
  • This Wiki is dedicated to real-world (and ideally, browser-neutral) application of CSS (Cascading Style Sheets). Topics include: techniques for page-layout and special display-effects, testing and validation, workarounds for limitations and bugs, CSS code-editors, beginner and advanced tutorials, and to a lesser extent pure CSS theory, and pure CSS power-demonstrations. Discourse on (X)HTML, DOM, and other webpage- technology areas is not forbidden, but keeping it associated with CSS is encouraged.
  • jdr santos on 24 May 11
     
    This Wiki is dedicated to real-world (and ideally, browser-neutral) application of CSS (Cascading Style Sheets). Topics include: techniques for page-layout and special display-effects, testing and validation, workarounds for limitations and bugs, CSS code-editors, beginner and advanced tutorials, and to a lesser extent pure CSS theory, and pure CSS power-demonstrations. Discourse on (X)HTML, DOM, and other webpage- technology areas is not forbidden, but keeping it associated with CSS is encouraged.
Soul Book

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached
  • Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
  • All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
  • The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
  • ...9 more annotations...
  • However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
  • Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
  • 1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
  • While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
  • Set a 12px font size with 18px line height and margin for paragraphs
  • Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
  • To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
  • Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
  • Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
  • Soul Book on 01 Apr 10
     
    A nice and simple explanation of using EMs to make elastic layouts
Kashif Mehmood Mughal

50+ Useful CSS Professional Techniques | Dzinepress - 6 views

www.dzinepress.com/...ul-css-professional-techniques

CSS Techniques Tutorials Advanced CSS3 HTML XHTML DHTML

shared by Kashif Mehmood Mughal on 06 Nov 09 - Cached
  • Kashif Mehmood Mughal on 06 Nov 09
     
    As we know most of the Web designers and developers only scratch the surface of the potent language that is CSS (cascade style sheet), like programming languages, CSS has a quite simple learning twister, normally being used more often in every web project. CSS as language giving many advantages even working in table based design or table-less designs, most of the time our designed pages can easily change after replace a css file with another one. When we working on latest trends, Tab Navigation has been one of the essential element in any contemporary web layout. In order to make sure visitors can properly navigate through the website through our used techniques, here in listed CSS stuff we offering some best and most useful Cascade style sheets with source files which can help for more inspiring developments.
Jochen Burkhard

Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine - 0 views

www.smashingmagazine.com/...art-2-the-essential-techniques

CSS3 HTML 5 Tutorial Essential Layout Web Design

shared by Jochen Burkhard on 06 May 10 - Cached
  • Jochen Burkhard on 06 May 10
     
    In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today's most successful CSS-based web pages.
Vernon Fowler

The future of CSS layouts | Feature | .net magazine - 1 views

www.netmagazine.com/...future-css-layouts

layouts css3 layout columns webdesign future

shared by Vernon Fowler on 08 Aug 11 - No Cached
  • Vernon Fowler on 08 Aug 11
     
    "Conclusion FlexBox and Columns aside, it's still not definite which new layout modules will be fully implemented cross-browser. I'd say that Positioned Floats and Exclusions are very similar, and could easily be merged (indeed, this seems to be happening). Grid Layout has subsumed Template Layout, and will definitely be in IE10. Regions has already been implemented in a fork of WebKit, so could appear in WebKit browsers (Safari, Chrome, etc) very quickly. So I'd be willing to predict that with some changes to syntax, most of what you see here will make it into CSS3 in the future. If that's the case, I think it's a good thing; these new methods are complementary, not competing, and with a minimum of work will allow us to build very sophisticated websites a few years from now."
Nicolas Casel

New features with CSS - 0 views

www.webdesignerdepot.com/...-can-get-excited-about-in-2015

css

shared by Nicolas Casel on 18 Jan 15 - No Cached
  • Nicolas Casel on 18 Jan 15
     
    selectors level 4 blend modes calc() function css variables css exclusions css shapes css grid layout
pr getxhtml

PSD To CSS Coding - A Great Way To Have Unique And Successful Websites - 0 views

www.getxhtml.com/eat-unique-successful-websites

PSD To CSS Coding - A Great Way To Have Unique And Successful Websites PSD To CSS Coding for unique & Successful websites Are you looking for Unique & Successful website What is PSD to CSS Coding What are the benefits of PSD to CSS Coding

shared by pr getxhtml on 16 Apr 14 - No Cached
  • pr getxhtml on 16 Apr 14
     
    CSS is a basically a coding language that helps you demonstrate the presentation texture of a file written in mark up languages like HTML or XHTML. PSD to CSS coding is all about separating the document content with elements of document presentation like color, font, style and layout.
Soul Book

CSS techniques I use all the time - 0 views

www.christianmontoya.com/...-techniques-i-use-all-the-time

blog css tools webdesign typography design fonts text layout web layouts webdev reference code coding

shared by Soul Book on 01 Apr 10 - Cached
  • EM calculations Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules: html { font-size:100.01%; } body { font-size:1em; } The explanation for this comes from "CSS: Getting Into Good Coding Habits:" This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
  • I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
  • Safe Fluid-width Columns I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
  • ...3 more annotations...
  • A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
  • Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
  • Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */
  • Soul Book on 01 Apr 10
     
    Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant
Jochen Burkhard

Modern CSS Layouts: The Essential Characteristics - Smashing Magazine - 0 views

www.smashingmagazine.com/...-the-essential-characteristics

CSS3 HTML 5 Tutorial Essential Layout Web Design

shared by Jochen Burkhard on 06 May 10 - Cached
  • Jochen Burkhard on 06 May 10
     
    Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we're finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs.
Luciano Ferrer

Isotope - jquery magic layouts - responsive - 10 views

isotope.metafizzy.co

isotope jquery layout responsive

shared by Luciano Ferrer on 10 May 11 - No Cached
  • Luciano Ferrer on 23 Oct 11
     
    Isotope: An exquisite jQuery plugin for magical layouts Features Layout modes: Intelligent, dynamic layouts that can't be achieved with CSS alone. Filtering: Hide and reveal item elements easily with jQuery selectors. Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything. Interoperability: features can be utilized together for a cohesive experience. Progressive enhancement: Isotope's animation engine takes advantage of the best browser features when available - CSS transitions and transforms, GPU acceleration - but will also fall back to JavaScript animation for lesser browsers.
Jochen Burkhard

13 Excellent Tools and Systems for CSS Grid Based Layouts | Tools - 1 views

webdesignledger.com/...ems-for-css-grid-based-layouts

grid css tools resources webdesign web design design

shared by Jochen Burkhard on 02 Jun 10 - Cached
  • Jochen Burkhard on 02 Jun 10
     
    A good grid can be a strong foundation for any design. Using grids got its start in print design, but has made it's way over to the web. There are several advantages to using grids in web design, but primarily they help achieve structure and consistency in layouts. If you have yet to start using grids in your web design projects, but want to get started…we're here to help. In this post, we've rounded up 13 excellent tools and systems for CSS grid based layouts.
Jungle Jar

Four Free CSS Valid 2.1 + XHTML Valid 1.0 Based Wire-Frame Templates + Tutorial - 9 views

www.junglejar.com/...-10-based-wire-frames-tutorial

design web design web development CSS CSS frameworks

shared by Jungle Jar on 18 Feb 09 - Cached
soffy125 liked it
  • Jungle Jar on 18 Feb 09
     
    In this article I'll feature four CSS 2.1/XHTML 1.0 based templates created by me. These templates adhere to current web standards and validate as such by the w3.org. I'll also teach you exactly how I created these website frameworks. This tutorial would be great for someone who would like a quick and easy way to introduce themselves to CSS/XHTML with the focus being on typical website layouts.
  • ...5 more comments...
  • anonymous on 28 Sep 13
     
    Stay Online on the worldwide web on the world wide web online online roulette from Contemporary modern sydney, Fun and Free! Now you is able of doing Actual "www.funlivecasino.com.au" Stay Online on the worldwide web on the world wide web online online roulette for Fun in Contemporary modern sydney on a product new web page, FunLiveCasino.com.au. Using the newest on the worldwide web operating technology, Fun Stay Gambling house allows you be a element of a genuine action occurring on a genuine desk in a genuine betting house, all approved on Live! You can see other real gamers in the betting house betting on the same outcomes you do providing you greatest believe in in the outcomes as they are not designed 'just for you a, like other action being affected by items such as 'live studios' or pc designed actions. Its awesome to think when your really in the betting house that you might be on digicam, and individuals on the worldwide web might be watching! The long run is scary! Believe one day soon this will be the only way individuals would bet on the worldwide web because the worldwide web is complete of fraudsters, you have to be extremely cautious, and why would you perform Online Online on the worldwide web on the world wide web online online roulette any other way except from a Actual Gambling house you can analyze out, see, pay attention to and trust! Amazingly this web page is definitely 100 % 100 % 100 % 100 % 100 % free and has no determining upon up process, no junk, no pc bunny rabbit bunny mouse mouse clicks and no pressure. Just Immediate Fun "www.funlivecasino.com.au" 100 % 100 % 100 % 100 % 100 % free Stay Roulette! Give it a try, its value verifying out! "www.funlivecasino.com.au" Australia's Online Fun Stay Casino! Backlink designed from http://fiverr.com/radjaseotea/making-best-156654-backlink-high-pr
  • lediff on 06 Dec 22
     
    Good day. In order to play in a casino, you need to find the right platform for you. As a player with a long experience, I can recommend you the site https://forestcasinos.co.nz/casino-nostalgia/, because it is here that there is a guarantee of payment of each win, as well as free deposits.
  • alishakihn on 03 Feb 23
     
    Most infamous game PC due to the amount of sheer rage this game has caused https://flappy-bird.io
  • Axel Blaze on 09 Mar 23
  • Sellve on 17 Mar 23
     
    Thanks for the Information. https://www.tecfalcon.com/
  • blogging4you on 14 Apr 23
     
    nice site https://the-online.com/ to register $1 domain names
  • websolutions123 on 23 Jun 23
     
    This will be very helpful for web developers. nice information. if you want develop your website visit https://www.webdesign.123coimbatore.com/web-development-in-coimbatore.php
awqi zar

How to Code a Clean Minimalist HTML CSS Website Layout - 10 views

www.designzzz.com/malist-html-css-website-layout

programming webdesign layout tutorial CSS tools

shared by awqi zar on 12 Feb 11 - No Cached
Paul Denten and moaz abrar liked it
  • awqi zar on 12 Feb 11
     
    As you might have guessed, we are going to start a step by step tutorial for creating a Minimalist HTML CSS Layout.This tutorial doesn't require slicing in Photoshop, because it will cover only the most basic topics and is for beginners.
jdr santos

Elastic CSS Framework - 11 views

elasticss.com

CSS framework web design

shared by jdr santos on 10 Feb 11 - Cached
  • jdr santos on 10 Feb 11
     
    A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.
awqi zar

Thinking Laterally: Build a Side-scrolling Site Layout with CSS & jQuery » Ja... - 3 views

blogs.sitepoint.com/...ite-layout-with-css-and-jquery

programming css webdesign javascript jquery tutorial

shared by awqi zar on 02 Mar 11 - No Cached
  • awqi zar on 02 Mar 11
     
    A sideways style lends itself well to designs with a bit of an "arty" feel: brochure-style sites, galleries, portfolios, and perhaps even sites that make use of interesting info-graphics or charts. Successful horizontal layouts often use animation and graphics to highlight their sideways movement - a large number of these sites use colorful images and nice, big backgrounds that really show this off. Unusual also means unfamiliar, so a well-designed horizontal layout will also make good use of navigation elements such as menus, arrows, and buttons to overcome any usability hitches.
Jochen Burkhard

HTML5 Website Layout Tutorials and Inspiration | AcrisDesign - 1 views

acrisdesign.com/...yout-tutorials-and-inspiration

HTML 5 CSS3 Tutorial Web Design Layout

shared by Jochen Burkhard on 01 Apr 10 - Cached
  • Jochen Burkhard on 01 Apr 10
     
    In webdevelopment you have to be in touch with latest technologies, if you really want to be on top. Now HTML5 is new its the fundamental language for web, so we all need to learn it thats why we have collected some tutorials on coding a layout with HTML5 and CSS3. We will come up with HTML5 Layout tutorial in upcoming days, Subscribe to our RSS feed to be in touch.
we4design STUDIO

29 Excepcionais Técnicas: Menu de Navegação em CSS - 0 views

we4design.com.br/...nicas-menu-de-navegacao-em-css

Artigos CSS Dicas Layouts Técnicas Web Design XHTM

shared by we4design STUDIO on 25 Apr 09 - Cached
  • we4design STUDIO on 25 Apr 09
     
    Artigo muito interessante sobre como aplicar conhecimentos de CSS para fazer menus de navegação. Realmente são excelentes efeitos que mostra o real poder da estilização em CSS.
Vernon Fowler

A design process revealed | stopdesign - 1 views

stopdesign.com/...design-process.html

NED12 design process webdesign css

shared by Vernon Fowler on 09 Sep 12 - Cached
  • I began by studying the content (text) of the existing page, making a model in my head of the document flow and hierarchy. I aggregated the sections of the page into logical groupings and assigned each a priority. I also spent time thinking about the purpose of the project, along with the ideas and concepts Dave Shea was trying to communicate when he created the Garden space and opened it up for other designers to contribute.
  • Showing off advanced CSS trickery is not the goal of this project. Instead, it attempts to demonstrate the beauty and flexibility achievable when designers grasp all the potential of CSS, using it as a tool to create a well-designed aesthetically-pleasing page which remains accessible, well-structured, and efficiently coded.
  • My Garden lists contained groupings of words and thoughts related to gardening, plants and flowers found in a garden, zen-like qualities, beauty and beautiful things, and characteristics of page design. I also created lists of all the elements, IDs, and classes used in Dave’s HTML, some of which made subtle appearances in the final design.
  • ...11 more annotations...
  • Once I exhausted the idea branching, I started drawing thumbnail sketches
  • Once I had a few rough compositions I liked, I began studying typefaces and letterforms.
  • In addition to my affinity for the letterforms, the pronounced medieval style of the headline type created a perfect contrast with the sans-serif modernity of supporting keywords and titles which I set in Helvetica.
  • My next step in the process was to research imagery which could be used as the foundation for background texture, and act as supporting visual content.
  • I tend to keep imagery confined to a particular region of the layout, or reserve it for a specific purpose. In my opinion, the overuse of photography or illustration can quickly create a crowded, chaotic design which just obscures the intention or message of the piece. Contrast is an element of design which I love to work with when creating anything visual. This comes just as much into play with use of imagery in a composition as it does within the image itself. Effectively integrating imagery into a design requires an awareness of balance and tension. Compact areas of motion and activity, countered with spaces for the eye to rest and relax.
  • When designing outside HTML and CSS, I focus on constructing the language and guidelines of the page, determining proportions, widths and heights, gutters and white space, specifying complementing typefaces, choosing relative type size and leading, and the application of color as a means of both obvious and subtle accent.
  • I started writing the CSS for the design at a high-level, focusing on the layout structure, major backgrounds, and large regions of the page.
  • Groups of elements were positioned in correct locations. Then I applied the necessary detail to each element, from the top of the page, down.
  • The addition of a background pattern to the left and right of the primary image was an added benefit of discovering I couldn’t position the header as I originally intended.
  • The vertical alignment wasn’t refined until after each column was already positioned on the page.
  • This unity of thought at the final stage of the process is a strong reason the designer and person responsible for generating the HTML and/or CSS need should be working together as closely as possible, if the two are not already the same person.
Anton S.

Easy Display Switch with CSS and jQuery - 0 views

designm.ag/...jquery-display-switch

webdesign ui jquery javascript css article

shared by Anton S. on 11 Mar 09 - Cached
  • Anton S. on 11 Mar 09
     
    "Today, I would like to go over a quick and simple way to allow your users to switch page layouts by using CSS and jQuery. Today's web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view."
1 - 20 of 132 Next › Last »
Showing 20▼ items per page