960 grid system in DWCS3

Hi.
I build my site with 960 Grid System in dreamweaver cs3 and as you can see the css have a few spaces between the buttons and the footer. Does someone know's how to fix this??? .....
Thanks ...

function(){return A.apply(null,[this].concat($A(arguments)))}
the css have a few spaces between the buttons and the footer.
I'm not clear on which spaces you're referring to. Can you point to a specific example on that page?
Do you mean the vertical whitespace between the <hr> tags?

Similar Messages

960 grid system

I just finished the photshop files that our web developer needs to redesign our website, and she just told me that the files are too big and should be converted to the 960 grid system. What is the best way to do this without too much extra work?

function(){return A.apply(null,[this].concat($A(arguments)))}
the css have a few spaces between the buttons and the footer.
I'm not clear on which spaces you're referring to. Can you point to a specific example on that page?
Do you mean the vertical whitespace between the <hr> tags?

Adobe Muse and the 960 grid system

Hi,
How to display the 960 grid template on muse to build website in more efficient way ?
Thanks

Hi Kililio,
I'm not sure what you try to achieve exactly but other than .muse file can not be opened in Muse (imported), so you will have to define the rules for your template/site. If I choose to work with 960px system I set it up like this for example (but this is my choice): http://screencasteu.worldsecuresystems.com/Cristi/2012-05-23_1909.png and there are other various ways to customize a 960px wide site.
If there's something else you meant let me know and we'll see.
Regards,
Cristian

960 Grid output - not absolute DIV's

I have Proto on an Android tablet, and I see it uses the 960 grid system for layout, great for alignment and happy with it. The only issue I see is that when looking at the exported site in Dreamweaver, all the DIV tags are absolute, there is no mention of the 960 Grid Styles in any of the style sheets (http://960.gs). If we are to develop sites for multiple devices, surely the output to Grid would be more beneficial than absolute DIV tags. Is there anyway of adding grid div's to a Proto layout, which work. I've tried and can't seem to find any way of doing it?
An option to print would be nice too.

I created a feature request/idea thread based on your post here:
http://forums.adobe.com/ideas/1953
Please add your vote and any additional comments you would like to see included
Thanks
-Dave

Grid systems in Fireworks

Hello,
Does anyone know where a tutorial exists to demonstrate how to use one of the document
presets in Fireworks? Say either the 4 , 8, 12, 16 columns? This is not to be confused with
the 960 grid system.
Thanks,
Jim

The Grid templates were added in CS5 to help with 960 grid layouts. The actual grid width is set to 960 pixels and the columns are all based on fitting wihtin that width.
Make sure snap to Guides and Smart Guides are active, this will help you block out your layout more easily. That said, you can fine-tune your object positions within the Properties panel. I find that I can easily be off by a pixel or two when hand-drawing rectangles that represent my div's.
The only true Guides in the template are vertical; the horizontal "guides" are a pattern fill used within a rectangle shape, found in th Leading layer. This is important to note, in case you increase the height of your canvas. In order to properly scale the pattern fill in that Leading rectangle, you will need to make sure that Scale Attributes is disabled. If you don't turn off this feature, the pattern fill will scale accordingly and the measurement gets messed up.
You can enable/disable this option in the Fireworks Preferences. In the General category, disable the option called Scale strokes and effects.
As for using the template, I would create a new layer or layers below the grid template layout and build your design in those layers. By putting your design layers beneath the grid, you can always see the grid while you're working. Keep the three grid layers locked so that you don't accidentally select the elements in those layers. The nice thing about locked layers is that FIreworks will ignore them when you select objects on the canvas, by-passing the locked layers and their contents and directly selecting your objects.
HTH

Logo designing using grid system

Hello everyone,
I have recently designed logo for a company. I have sent the final files to client but they want the logo to be done according to grid system. Can somebody help me how to add grids in a logo and what is the use of it. I am actually new to logo designing so i am not aware of all the rules to be followed. I have attached the original logo (top) and example of grid system. Thanks in adavance

To work with grids just turn them on View>Show Grid. To add specific guides like the image you just use rules and guides again go to View>Rulers>Show Rulers and View>Guides>Show Guides.
You can also add other guides like the circle you see by drawing a circle normally and then right click it when selected and create a guide from that shape...
This would be best practice to get used to using guides when creating logos, etc then you can show correct spacing and sizes, etc. Just do a search on how to use guides "using guides in illustrator cc" and you will find out all the tricks you need to know.

Gridulator & Variable Grid System

Hello,
I'm designing a website in Photoshop. I'm going to have someone put my desigin into CSS later. Regarding Photoshop, should I stay within the guidelines of my Gridualtor template,
or stay within the guidelines of the Variable Grid System that adds a margin on each side? I would like to keep the max width of my site at 960px.
Gridulator.com (my template for Photoshop?)
Overall width: 936px
Number of Columns: 12
Gutter width: 24px
Column width: 56px
http://grids.heroku.com (CSS / Variable Grid System)
Column width: 56px
Number of Columns: 12px
Gutter width: 24px
Content width: 936px
Full width: 960px

I'm using Photoshop cause it's easier for me to get a visual of the positioning...I'm really picky about that part.
Just as long as you understand that pixel perfect precision is not possible in web pages unless you build the entire thing as a static image which for obvious reasons won't work.
I do want it to be responsive, so that it translates well from
desktops, laptops, and tablets. As long as I put everything into a container, I should be OK, right?
Not necessarily. If you want an adaptive layout, you'll need to design one for each device width you intend to support. I urge you to read some articles on this subject before you proceed.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

Grid system design resources?

I'm aware of the layout resources available from the traditional sources (gridsystem.org) but am looking for examples or templates that work well in practice. We're about to bring in a designer and we'd like to show them samples of re-usable grids that can be the basis for strong and coherent design. Does anyone have examples of grid system printed materials and/or websites that have recently gone through a rebrand or brand development that are viewable online? I'd love to show them what is possible.
Thanks in advance for any advice you can provide.
Tate
[sig deleted by host]

This might be more what you are looking for to build a department view of the grid system best practices...
http://www.amazon.com/Designers-Toolkit-Grids-Style-Sheets/dp/0811860515
Cheers

Using the supplied FW grid systems

Hello,
Does anyone know where a tutorial exists on how to use the Grid Systems supplied with FW?
I had asked a similar question on 1/1/11 but this is start to finish question.
Thanks,
Jim

I don't know any terminal app on iOS that can talk to a computer through the USB channel.
So there's no internet connection to the systems that you want to connect to? If there is a connection and you can use secure ssh then why not do that? I mean I ssh all the time into my server via my iPhone, iPad or Mac. I use VNC Viewer for my iOS devices and terminal via my MacBook Air.

How do I add a box which is not effected by the grid system

Hello all,
I am trying to make a Navbar at the top of my page which spans the width of the webpage and is at the top of the screen how ever I would like buttons and logo's to be effected by the responsive design like the picture I have attached

I made a quick example of this, try it out and let me know if it's what you are asking for. It's just a simple header with a few text objects, then I change how they look a little bit at each media query. I've got one for a basic tablet width and one for phone. You may want to change specifics, but hopefully it get's you started.
Zip of a Reflow project:
http://adobe.ly/1nuTJa3

OT: New Responsive Grid System

Looks interesting.
http://www.responsivegridsystem.com/downloads/responsivegridsystem.html
Nancy O.

I don't know if it furthers the movement. But I like the "use only what you need" CSS. It's sensible, logical and flexible.
Nancy O.

Why in a parent layer text disappears, but it is visible in a child layer, a Nested Layer Question

Hi,
The text in the parent BLUE layer drops to the bottom of a layer box, which I can see in a Dreamer but not in the browers.
This happens when I added a child RED layer to the parent.
Without the child RED layer the text stays at the top of the box in the parent BLUE LAYER.
What can be done so the text in the parent BLUE layer DOES NOT move the bottom of the layer and becomes visible in the brower?
cheers,
Dreamer101.1

Content is HTML. Style is CSS. Custom CSS won't make updating content any faster.
Start by learning HTML and CSS basics. DW will punish you if you don't know how to work with Code.
HTML & CSS Tutorials - http://w3schools.com/
What suggestion you can make for my project?
Use default CSS positioning (which is no positioning at all) and align divisions with CSS margins, floats and padding. If your layout will be complex - several columns per page, consider using a CSS framework or Grid to set-up your web page template. Some good Grid resources below:
960 Grid System - http://960.gs/
Boiler Plate CSS System - http://code.google.com/p/css-boilerplate/
BluePrint: A CSS Framework - http://www.blueprintcss.org/
When you are satisfied with the layout, it displays well in all major browsers AND your code passes validation:
HTML Code Validator - http://validator.w3.org
CSS Code Validator - http://jigsaw.w3.org/css-validator/
SaveAs as a DW Template (.dwt). Then add some editable regions for content that will change from page to page.
More on DW Templates -
http://www.smartwebby.com/web_site_design/dreamweaver_template.asp
http://www.smartwebby.com/web_site_design/server_side_includes.asp
Good luck with your project,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Responsive layout design

Hello dreamweavers.
I have a question regarding responsive layout which is regarding to dimensions, I see a lot of post on the net with does and don'ts, that's why I'm asking for a
more professional and formal advice. So my question is, if I set up a design page for example 1400 width x 1000 height or 1600 width x 1400 height, would both
dimensions be able to be coded responsive in order to take up all devices? can a web designer make it responsive regardless its layout dimensions ir is there a specific dimension when it comes to responsive layout,
and what would that be?
Thank you.

inquestflash wrote:
Thanks for the information Nancy. Just one more thing Id like to ask. Would setting up as default dimensions the 960 GRID system be ok, and then
the developers can use % for the rest of the devices?
Yes,
Set a container wrapper to max-width: 960px;
Like:
#containerWrapper {
max-width: 960px;
width: 96%;
margin: 0 auto;
Any screen which has the real estate to accommodate 960px width will get that. As the screens real estate gets narrower the design adjusts to suits its width.
Obviously if you just have a one column design that's the job done but you will no doubt have multiple columns so you then need to use media queries to change the properties of the css as the browser window becomes narrower to make the design look nicer.

Grid 960 system: How to import the grid, or how to save the grid in Muse after building it by hand

Hey folks,
This grid system is a fantastic tool for new designers: http://960.gs/ -- unfortunately while it's possible to import it into a lot of Adobe CC programs, Muse isn't on that list. So, my question is a two parter:
1) Is there any way to import this grid system into Muse that I just haven't found yet?
2) If I go throw and build it by hand, can I save the grid layout in Muse?
Thanks for your time.

Hi
In Muse you can define that through Page properties , go to Page Properties > Layout > Columns > Enter value which you want as the Grid system.
After that on page the Grid system would appear which you can define more by going to View > Show Grid Overlay.
Once you use this, when you open the same site again it would show the same grid options.
Thanks,
Sanjit

A start of 960 x 600 for new larger monitors? Maybe a larger size?

In Bowser Chrome my 960 width comes out to be 13" or so, perfect!, but with IE, Safari, Firefox, it displays much smaller?
Q #1: Am I missing something to achieve this? Thanks for any info!
Q #2: The blurs only work in Chrome. Why? It seemed that they worked in Safari, but not today?
Q #3 This is the site: http://avir02.businesscatalyst.com/index.html
Any help would be appreciated. I know Abode staff is stretched today with all the great new releases!
Thanks For any Help! -Tim

#1 - I suspect that at some time you zoomed in in Chrome (Command-plus). If you hit Command+0 to switch Chrome back to "Actual Size" the width of 960 pixels should be the same across all the browsers on your machine.
While 960 is a very common and safe width to design to (fits a 1024 screen, leaves room for the scroll bar and window chrome, and works well with grid systems due to being evenly divisible by a long of numbers), the majority of site visitors today have larger dimension screens. From w3cschools and statcounter between 10% and 16% of site visitors have 1024 or smaller, screens. 1280 is the next step up in common screen dimensions and some sites have moved to designing to a 1200 width. It really just depends on the demographics of your site visitors as to whether 960 or 1200 is right for your site.
Also, note that while your "page" will be 960, 1200 or some other specific width, you can use a repeating browser background image and/or 100% width rectangles with (or without) image fills to create a webpage that always fills the full browser window width.
#2 - I expect this one's better asked on the Edge Animate forum.
#3 - Nice site!

960 grid system in DWCS3

Similar Messages

Maybe you are looking for